Jquery Adding cloning form fields - increment name

Question

I'm looking at this fiddle http://jsfiddle.net/yezw6c51/1/ which does what I need to do with one exception.

When you load it has one Input field named 'phone_number'

When you click on Add phone number you can add multiple rows/input fields as such :

enter image description here

Each new input field that is added has had it's field name incremented. eg : phone_number1, phone_number2 etc. This works fine.

But I'd like the text before each input field to also have the incremented value adding as well, so you end up with :

enter image description here

So the text description is incremented with the same value as the phone_number field.

ie: Phone Number 2 = phone_number2 etc

How do I do that ?

Thanks

Given that the jQuery already (explicitly) uses a counter to increment the <input> elements' details, all you need to do is insert that counter in another place (as well). Where are you stuck? — David Thomas
– David Thomas, Commented Oct 8, 2014 at 12:35
While jQuery will work fine, you can also do this with angular! Just food for thought. — Stryner
– Stryner, Commented Oct 8, 2014 at 12:44

brunozrk · Accepted Answer · 2014-10-08 12:39:05Z

2

Wrap your text with span

<span>Phone number :</span>

Then your can change only the text inside span

$(this).parent().find('span').text('Phone number ' + phone_number_form_index);

fiddle: http://jsfiddle.net/yezw6c51/16/

answered Oct 8, 2014 at 12:39

brunozrk

7831 gold badge7 silver badges14 bronze badges

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

Comments

artuc · Accepted Answer · 2014-10-08 12:44:28Z

instead of giving each input different names, you can use name="phoneNumber[]" and loop through the post keys in backend. Demo: http://jsfiddle.net/artuc/yezw6c51/23/

HTML:

<form name="test">
    <div class="formRow">
        <label>Phone Number <span>1</span>:</label>
        <input type="text" name="phoneNumber[]" />
    </div>

    <a href="javascript:void(0);" class="btnAdd">Add [+]</a>
</form>

JS:

$(document).ready(function(){
$('.btnAdd').click(function(){
    base = $('.formRow:first');
    newRow = base.clone().insertAfter($('.formRow:last'));
    newRow.find('input').val('');
    newRow.find('label>span').text(newRow.index('.formRow')+1);
    newRow.append('<input type="button" class="btnRemove" value="Remove"/>');
});

$(document).on('click', '.btnRemove', function(){
    $(this).parent().remove();
    //update index
    $('.formRow').each(function(){
        target = $(this).find('label>span');
        target.text($(this).index('.formRow')+1);
    });
});

});

Lalit Mehra · Accepted Answer · 2014-10-08 12:49:25Z

You can Use a Span After "Phone Number" in your HTML.

And make these changes in your script

$(document).ready(function(){
    var phone_number_form_index=1;
    $("#add_phone_number").click(function(){
        phone_number_form_index++;
        $(this).parent().before($("#phone_number_form").clone().attr("id","phone_number_form" + phone_number_form_index));
        $("#phone_number_form" + phone_number_form_index).css("display","inline");
        $("#phone_number_form" + phone_number_form_index).find("span").html(phone_number_form_index);
        $("#phone_number_form" + phone_number_form_index + " :input").each(function(){
            $(this).attr("name",$(this).attr("name") + phone_number_form_index);
            $(this).attr("id",$(this).attr("id") + phone_number_form_index);
            });
        $("#remove_phone_number" + phone_number_form_index).click(function(){
            $(this).closest("div").remove();
        });
    }); 
});

check out here http://jsfiddle.net/yezw6c51/24/

Collectives™ on Stack Overflow

Jquery Adding cloning form fields - increment name

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related