Adding drop down menu into my dynamic form jQuery

Question

I am creating a dynamic form in which the user can add elements dynamically. I am able to allow them to add text boxes however I'm not sure how to add my drop down menu into it. Here is my jQuery code

var addDiv2 = $('#addIngredient');
    var i = $('#addIngredient p').size() + 1;
    $('#addNewIngredient').on('click', function () {
        $('<p> <input id="ingredient_' + i + '"  name="ingredient[]" type=text"
           value="" placeholder="Ingredient" /> 
           <input id="quantity_' + i + '" 
           name="quantity[]" type=text" value="" placeholder="Quantity" /> 
          <input id=alternative_' + i + '" name="alternative[]" type=text" 
          value"" placeholder="Alternative Ingredient" /> 
          <a href=#" class="remNew2"> Remove </a> </p> ').appendTo(addDiv2);

Here is my html

<div id="addIngredient">
<p>
<input type="text" id="ingredient_1" name="ingredient[]" value="" 
    placeholder="Ingredient"/>
<input type="text" id="quantity_1" name="quantity[]"  value="" 
placeholder="Quantity"/>
<input type="text" id="alternative_1" name="alternative[]"  value="" 
placeholder="Alternative Ingredient"/>
<select id="selectQuantity_1" name="quantityType[]">
 <option value="grams">Grams</option>
 <option value="ounces">Ounces</option>
 <option value="Pounds">Pounds</option>
 </select>
<a href="#" id="addNewIngredient">Add</a>

I have tried but can't work it out, help would be appreciated!

Here is the jsFiddle http://jsfiddle.net/3yFFr/

ignore the bit below the jQuery i pasted, i had to paste it all in for it to work.

Praveen · Accepted Answer · 2014-01-05 17:33:02Z

1

It seems you're cloning the elements within the div. I would suggest you to go ahead and use .clone() method to do this.

See pretty simplified code. Now here you can remove the add element and change it to remove.

$('#addIngredient').clone()
           .prop('id', 'addIngredient1').appendTo('ingredDiv');

JSFiddle

And also try to avoid using id unless it is necessary.

answered Jan 5, 2014 at 17:33

Praveen

56.7k35 gold badges137 silver badges169 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ben Hathaway Over a year ago

i am processing them with PHP so i have the + i + in there so each ingredient has a number. Is this possible with .clone() ?

Praveen Over a year ago

@NickPocock I think it is possible but need a lot of work. meanwhile I don't understand why you're not able to add select as other. See I have added with growing increment jsfiddle.net/3yFFr/2

Ben Hathaway Over a year ago

thats perfect, when i was trying it kept showing the options as plaintext rather than the html code and not working Thank you

tylerargo · Accepted Answer · 2014-01-05 17:54:07Z

If you want to add a row on each "Add" click, then I would try something like this:

var addDiv2 = $('#addIngredient');
var formRow = addDiv2.find('p');

$('#addNewIngredient').on('click', function () {
    formRow.clone(true, true).appendTo(addDiv2);
});

See this jsFiddle for a working example.

EDIT : Since you need to keep your ids in check, I rigged up a little something that should work,

jsFiddle Included :

var addDiv2 = $('#addIngredient');

$('#addNewIngredient').on('click', function () {

    // Clone the last input row, keeping the event handlers
    var clonedRow = $('#addIngredient p').last().clone(true, true);

    // We're going to examine all select and input elements
    var all = clonedRow.find('select, input');

    // A regular expression we can use to test if the id has numbers at the end
    var numericPostfix = /\d+$/;    

    for (var i = 0; i < all.length; i++) {
        var curr = $(all[i]);

        // If current element has an id attribute
        if (curr.attr('id') != undefined) {
            var id = curr.attr('id');

            // Rips off any trailing digits in element's id
            var idNum = numericPostfix.exec(id);

            // Exec gives an array of matches, if it's not null, choose the first match
            if (idNum) {
                 idNum = idNum[0];
            }

            if (idNum) {            
                // Chop off last character
                id = id.slice(0, (-1 * idNum.length));
                // Increment and add the id number to the nextId
                var nextId = id + (Number(idNum) + 1);
                // Set the id attribute to nextId
                curr.attr('id', nextId); 
            }

            // Append to the DOM
            clonedRow.appendTo(addDiv2);
        }
    }

});

I need to do it the way i've done it above, so each ingredient name goes up so ingredient_1 ingredient_2 as i process it with php after

Chaitanya · Accepted Answer · 2014-01-05 17:57:54Z

0

In your code, you didn't add the select menu to what you appended with the jQuery. Look:

 $('<p> <input id="ingredient_' + i + '"  name="ingredient[]" type=text" value="" 
 placeholder="Ingredient" /> 
 <input id="quantity_' + i + '" name="quantity[]" type=text" value="" 
   placeholder="Quantity" /> 
 <input id=alternative_' + i + '" name="alternative[]" 
   type=text" value"" placeholder="Alternative Ingredient" /> 
 <a href=#" class="remNew2"> Remove </a> </p> ').appendTo(addDiv2);

edited Jan 5, 2014 at 17:57

Chaitanya

3562 gold badges5 silver badges13 bronze badges

answered Jan 5, 2014 at 17:27

hitecherik

4322 silver badges14 bronze badges

2 Comments

Ben Hathaway Over a year ago

I know, thats why i'm asking how to add it in the jQuery, i tried to and just got errors

hitecherik Over a year ago

@NickPocock in the appendTo, try adding a selector (maybe with something like :nth-child(2) instead of a variable.

Collectives™ on Stack Overflow

Adding drop down menu into my dynamic form jQuery

3 Answers 3

3 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related