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:

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

Then I need to place a limit of Only 7 input fields can be created.
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>

David · Accepted Answer · 2020-01-31 19:06:42Z

3

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.

edited Jan 31, 2020 at 19:06

answered Jan 31, 2020 at 17:53

David

7,3453 gold badges31 silver badges47 bronze badges

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

6 Comments

daugaard47 Over a year ago

I like your second option. That works great! Is there anyway to hide the Remove button prior to adding an input? Also any idea on how I can get that number value in my php variable value="{{ $formData['member_'.'+ i +'] }}"

daugaard47 Over a year ago

Thank you. All is working great now. Except the value. When I add that I get Error: Use of undefined constant i - assumed 'i' (this will throw an Error in a future version of PHP) I'll search around and try and find a solution. Thank you so much for your help.

daugaard47 Over a year ago

Yes I'm useing Laravel and it's a step form. I'm capturing the values in a session. When they go to step 2 and want to go back to step 1 this would allow for the information to reamin rather reset.

David Over a year ago

@echo - I have updated the answer again. I know that you already accepted it, but let me know anyway if that helps you. I'm not sure if I got to be clear.

daugaard47 Over a year ago

would you be up to a private chat?

|

Triby · Accepted Answer · 2020-01-31 17:52:48Z

Ok, you need to do 3 things:

Get inputs created in order to count and get next index
Count befor inserting
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>

Collectives™ on Stack Overflow

Add input fields on button click with data from PHP

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related