dynamically add an element within a form using jquery [closed]

–1 vote
asked Nov 28, 2013 by nick-pocock

I want to let the user add a form element if they want to add a utensil using Jquery, i am really stuck and can't see how to do this. Could anyone help?

Thank you!

<form id="recipe_form" name ="recipe_form" action="createxml.php" enctype="multipart/form-data" method="post">
          <h1> Recipe Name</h1>


        <h1> Preperation Time + Description</h1>
        <label for="prep_time">Enter Preparation Time</label>
        <input type="text" name="prep_time" ><br />

        <label for="descrip">Enter a recipe Description</label>
        <input type="text" name="descrip" ><br />
        <br />

        <div id="utensil">

        <h1> Untensils </h1>
        <label for="utensil_num">Enter Utensil number</label>
        <input type="text" name="utensil_num"><br />

        <label for="utensil_descrip">Enter Utensil Description</label>
        <input type="text" name="utensil_descrip">
            <a href="#" id"addRow"> Add Another Utensil </a><br />

        </div>


        <br />
        <button type="submit">Save on xml</button>
      </form>

2 Answers

+1 vote
answered Nov 28, 2013 by artud2000

You can use the jQuery.html() method at your convenience

jQuery('#recipe_form').html("<input type=\"text\">") 

this will insert an input element inside your form, trigger the event to insert the html whenever is convenient for you

+1 vote
answered Nov 28, 2013 by digital-fortress

Yes you can do it using a button click

jQuery("#buttonid").click(function(){
jQuery( "#utensil" ).append( "<input type=\"text\">" ); 



})

Hope this helps

Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
Website Online Counter

...