Question

I have one form where user can dynamically add new text box. With each textbox, I have one checkbox (for option to show or hide in frontend). It’s like below.

<ul>
     <li><input type="text" name="field_name[]" /></li>   
     <li><input type="checkbox" name="show_hide[]" /></li>
</ul>

<input type="button" value="Add More Field">

When I get the post value from PHP, I am confused how can i related the checkbox with its corresponding textbox since array of checkbox ‘show_hide[]’ may depends upon the user input.

Answer 1

You could use an index:

<ul>
     <li><input type="text" name="field_name[0]" /></li>   
     <li><input type="checkbox" name="field_name[0]" /></li>
</ul>

And then your jQuery, every time you add a new text box and checkbox set their name to show_hide[index] etc. You could store the index globally and just update it when a new text box is added, or use regex to parse the previous input to get the last index and increment it that way. Then on the server you’ll get an array you can check. The other way to do it would be something like:

<ul>
     <li><input type="text" name="field_name[0][text]" /></li>   
     <li><input type="checkbox" name="field_name[0][checked]" /></li>
</ul>

Which will give you a bit of a nicer array to work with 🙂