Allow user to create and submit up to 5 text boxes with jquery, and parse them into one array in php?

Question

Is it possible? I want a user to post an array full of 1-5 pieces of data.

At first there would be only one text field on show, but on clicking a 'plus' icon next to it, it would create another text field below it for more user input.

I would also want to have a delete icon next to text boxes 2-5, to remove them if necessary.

My JQuery knowledge is limited, and I can work out how to append text boxes to a list, but not to keep track of them/delete them. Ideally I would also want to pass them as an array to php, so I can easily loop through them.

<input type="text" size="15" maxlength="15" name="1"><img src="add.png" onclick="add();">
<!-- Below is hidden by default, and each one shows on click of the add image -->
<input type="text" size="15" maxlength="15" name="2"><img src="delete.png" onclick="delete(2);">
<input type="text" size="15" maxlength="15" name="3"><img src="delete.png" onclick="delete(3);">
<input type="text" size="15" maxlength="15" name="4"><img src="delete.png" onclick="delete(4);">
<input type="text" size="15" maxlength="15" name="5"><img src="delete.png" onclick="delete(5);">

Answer 1

jQuery clone() is very handy for this. A small example how it could be done (working example on jsfiddle)

<ul>
    <li><input type="text" name="textbox[]" /></li>
</ul>
<input type="button" id="addTextbox" value="Add textbox" />
<script type="text/javascript">
$(function(){
    $('#addTextbox').click(function(){
        var li = $('ul li:first').clone().appendTo($('ul'));

        // empty the value if something is already filled in the cloned copy
        li.children('input').val('');
        li.append($('<button />').click(function(){
            li.remove();
            // don't need to check how many there are, since it will be less than 5.
            $('#addTextbox').attr('disabled',false);
        }).text('Remove'));

        // disable button if its the 5th that was added
        if ($('ul').children().length==5){
            $(this).attr('disabled',true);
        }
    }); 
});

</script>

For the server-side part, you could then do a foreach() loop through the $_POST['textbox']

Answer 2

As long as you give each text box a name like "my_input[]", then when the form is submitted, PHP can get the answer(s) as an array.

$_REQUEST['my_input']; would be an array of the values stored in each text box.

Answer 3

Source: Add and Remove items with jQuery

<a href="#" id="add">Add</a>  
<a href="#" id="remove">Remove</a>  

<p><input type="text" value="1" /></p>  

<script type="text/javascript">  

$(function() { // when document has loaded  

    var i = $('input').size() + 1; // check how many input exists on the document and add 1 for the add command to work  

    $('a#add').click(function() { // when you click the add link  
        $('<p><input type="text" value="' + i + '" /></p>').appendTo('body'); // append (add) a new input to the document.  
// if you have the input inside a form, change body to form in the appendTo  
        i++; //after the click i will be i = 3 if you click again i will be i = 4  
    });  

    $('a#remove').click(function() { // similar to the previous, when you click remove link  
    if(i > 1) { // if you have at least 1 input on the form  
        $('input:last').remove(); //remove the last input  
        i--; //deduct 1 from i so if i = 3, after i--, i will be i = 2  
    }  
    });  

    $('a.reset').click(function() {  
    while(i > 2) { // while you have more than 1 input on the page  
        $('input:last').remove(); // remove inputs  
        i--;  
    }  
    });  

});  
</script>  

Answer 4

You will need to create DOM elements dynamically. See how it is done for example in this question. Notice that

document.createElement

is faster then using jquery's syntax like

$('<div></div>')

Using that technick, you could create inputs like

<input name="id1"/>
<input name="id2"/>
<input name="id3"/>
<input name="id4"/>
<input name="id5"/>

On submitting your form you'll get all them in your query string like

...id1=someval1&id2=someval2&...

Having that, you could process this query as you want on server side.

Answer 5

<form method="POST" id="myform">
<input />
<a href="#add_textbox" id="add_textbox">Add textbox</a>
<input type="submit" value="Submit" />
</form>

<script type="text/javascript">
$(document).ready(function(){
  $('#add_textbox').click(function(){
    var form=$(this).closest('form');
    var count=form.find('input').length();
    form.append('<div class="removable_textbox"><input /><a href="#delete" class="delete_input">delete</a></div>');
    $('.delete_input').click(function(){
      $(this).find('.removable_textbox').remove();
      return false;
    });
    return false;
  });
  $('#myform').submit(function(){
    var i=1;
    $(this).find('input').each(function(){
      $(this).attr('name','input-'+i);
      i++;
    })
  });
});
</script>

<?php
  if(isset($_POST['input-1'])){
    $input_array=$_POST;
  }
?>

something like this?

Answer 6

I wrote a litte jQuery plugin called textbox. You can find it here: http://jsfiddle.net/mkuklis/pQyYy/2/ You can initialize it on the form element like this:

$('#form').textbox({
  maxNum: 5, 
  values: ["test1"], 
  name: "textbox", 
  onSubmit: function(data) {
    // do something with form data
  }
});

the settings are optional and they indicate:

• maxNum - the max number of elements rendered on the screen
• values - an array of initial values (you can use this to pass initial values which for example could come from server)
• name - the name of the input text field
• onSubmit - onSubmit callback executed when save button is clicked. The passed data parameter holds serialized form data.

The plugin is not perfect but it could be a good start.