Add input fields on button click with data from PHP

Question

I'm trying to add input fields on button click everything I working as it should, but need to do 3 things:

1. I need the value to output the 2 like this {{ $formData['member_2'] }}

For number 1 I'm doing adding this to the value following:

value="{{ $formData['member_'.'+ i +'] }}"

But my output returns member_+ i + not member_2

2. Then I need to place a limit of Only 7 input fields can be created.
3. Then lastly when I delete a row I need it to delete the count.

Here is my full code. I removed the styling for easy reading.

HTML:

<button type="button" name="add" id="add">Add Other Members</button>
<div id="dynamic_field"></div>

JS:

$(document).ready(function() {
    var i=1; 
    $('#add').click(function() {
        i++;
        $('#dynamic_field').append('<div id="row'+i+'"><label" for="member_'+ i +'">Member '+ i +'</label><input type="text" name="member_' + i + '" value=""><button type="button" class="btn_remove" name="remove" id="'+ i +'">X</button></div>')

    });
    $(document).on('click', '.btn_remove', function() {
        var button_id = $(this).attr("id");
        $('#row' + button_id + '').remove();
    });
});

Run the snippet to see issues 2 & 3. (Note when you delete an input the count doesn't restart. It continues from where it left off.)

 $(document).ready(function() { var i=1; $('#add').click(function() { i++; $('#dynamic_field').append('<div id="row'+i+'"><label" for="member_'+ i +'">Member '+ i +'</label><input type="text" name="member_' + i + '" value=""><button type="button" class="btn_remove" name="remove" id="'+ i +'">X</button></div>') }); $(document).on('click', '.btn_remove', function() { var button_id = $(this).attr("id"); $('#row' + button_id + '').remove(); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button type="button" name="add" id="add">Add Other Members</button> <div id="dynamic_field"></div>

Answer 1

The issues 2 y 3 are pretty straightforward. You just need to decrement the variable i when removing a member. Also, don't allow to create new ones when i>=7 .

 $(document).ready(function() { var i = 1; $('#add').click(function() { if (i <= 7) { $('#dynamic_field').append('<div id="row' + i + '"><label" for="member_' + i + '">Member ' + i + '</label><input type="text" name="member_' + i + '" value=""><button type="button" class="btn_remove" name="remove" id="' + i + '">X</button></div>') i++; } }); $(document).on('click', '.btn_remove', function() { var button_id = $(this).attr("id"); i--; $('#row' + button_id + '').remove(); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button type="button" name="add" id="add">Add Other Members</button> <div id="dynamic_field"></div>

The problem that you will have with this approach is that removing an element in the middle of the list will mess up the order. You will end up with repeated elements.

You can fix that by allowing to remove just the last element.

 $(document).ready(function() { var i = 1; $('#add').click(function() { if (i <= 7) { $('#dynamic_field').append('<div id="row' + i + '"><label" for="member_' + i + '">Member ' + i + '</label><input type="text" name="member_' + i + '" value=""></div>') i++; $('.btn_remove').removeClass('hidden'); } }); $(document).on('click', '.btn_remove', function() { var button_id = $(this).attr("id"); i--; $('#row' + $('#dynamic_field div').length).remove(); if (i<=1) { $('.btn_remove').addClass('hidden'); } }); });

 .hidden { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button type="button" id="add">Add Other Members</button> <div id="dynamic_field"></div> <button type="button" class="btn_remove hidden">Remove last</button>

Regarding, the first issue, I guess the double curly braces is a server-side template thing (like Laravel's Blade). In that case, it is generated server-side before the page is sent to the client. That means, before JS has any chance to be executed. Your server side code doesn't know i .

If you are generating the elements in the server with PHP, you can't use i , because the server side doesn't know that variable. But, you shouldn't need it.

If you are generating the elements dynamically with JS, you can't use the PHP template inside. It is too late, the code is getting executed already in the client. What you can do is to create with PHP a JS object with all the information that you would need to create the elements. Something like:

echo "<script>var myJsData=" . json_encode($myPHPdata) . ";</script>";

Then, you can use it to dynamically generate your elements in the client with JS.

Answer 2

Ok, you need to do 3 things:

1. Get inputs created in order to count and get next index
2. Count befor inserting
3. Get last input created to reset counter, but avoiding duplicated IDs and Names

 $(document).ready(function() { var i=0; $('#add').click(function() { // Get inputs created (if any) var inputs = $('input'); // Verify if there are 7 or more inputs if(inputs.length >= 7) { console.log('Only seven inputs allowed'); return; } // Get last input to avoid duplicated IDs / names if(inputs.last().length > 0) { // Split name to get only last part of name, the numeric one i = parseInt(inputs.last()[0].name.split('_')[1]); } i++; $('#dynamic_field').append('<div id="row'+i+'"><label" for="member_'+ i +'">Member '+ i +'</label><input type="text" name="member_' + i + '" value=""><button type="button" class="btn_remove" name="remove" id="'+ i +'">X</button></div>') }); $(document).on('click', '.btn_remove', function() { var button_id = $(this).attr("id"); $('#row' + button_id + '').remove(); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button type="button" name="add" id="add">Add Other Members</button> <div id="dynamic_field"></div>