CODEWITHSUNDEEP
javascriptjquery
Rocket
Rocket

Reputation: 1093

Jquery Incrementing field names

Following on from my previous question

I've now got a form that when clicking add, adds a new input field to the form incrementing the field name and input text by one each time. eg: phone_number1, phone_number2 etc

The jquery I'm using is :

$(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 + " :input").each(function(){
            $(this).parent().find('span').text('Phone number ' + phone_number_form_index);
            $(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();
        });
    }); 
});

This JFiddle shows the form working and when adding a new row the field name is incremented as is the input text. http://jsfiddle.net/yezw6c51/25/

However if I remove a field, the numbering can get messed up.

eg:

if I then remove phone number 2 using the remove button I end up with 1 & 3, clicking add starts at 4.

Is there any way if I delete 2 instead of 1 & 3, I would get 1, 2 and the next add would be 3 ?

This would need to update all field names and input text entries that are being updated.

Upvotes: 1

Views: 1029

Answers (2)

Dave
Dave

Reputation: 10924

After adding/removing you can renumber all the inputs and labels like follows:

$(document).ready(function(){
    $("#add_phone_number").click(function(){
        $(this).parent().before($("#phone_number_form").clone().show());
        reNumberInputs();
    });

    $("form").on("click", "[id^='remove_phone_number']", function(){
        $(this).closest("div").remove();
        reNumberInputs();
    });    
});

function reNumberInputs() {
    $("input[type='text']:visible").each(function(index, element) {
        var displayIndex = (index + 1).toString();
        element.id = "phone_number" + displayIndex;
        element.name = "phone_number" + displayIndex;
        if (index > 0) {
            $(this).prev("span").html("Phone number " + displayIndex);
            $(this).next("input").prop("id", "remove_phone_number" + displayIndex).prop("name", "remove_phone_number" + displayIndex);
        }
    });
}
.hidden {
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="phone_number_form" class="hidden">
    <p>
        <span>Phone number</span> : <input type="text" name="phone_number" /> 
        <input type="button" id="remove_phone_number" value="Remove" />
    </p>
</div>
<form>
    <p>
        Phone number : <input type="text" name="phone_number1" /> 
    </p>
    <p>
        <input type="button" value="Add phone number" id="add_phone_number" />
    </p>
</form>

Updated Fiddle

Upvotes: 1

Sourabh Modi
Sourabh Modi

Reputation: 101

  1. You can use the field name as phone_number[] this will be the standard.
  2. If you can't change the procedure then on submit of form rename your fields by getting all the created one by one and assigning current text field values to new fields but it is not a standard method.

Hope you get your answer and if you have any other question get in touch with me on my new blog on http://www.sourabhmodi.in/. I will be happy to help you..

Upvotes: 0

Related Questions