PHP Form: One to many UI relationships, represented in Javascript/jQuery?

Question

I have a simple problem, but for some reason cannot figure out the words to find a solution (or which I'm sure there are many). I'm building a simple PHP form for a user, who may have zero-to-infinite phone numbers and one-to-infinite email-addresses.

I want one PHP page which allows me to click a button like "add new phone number" and another phone number field pops up. Next to each field should be a delete icon which removes that row. When I submit the form I want to be able to process it in PHP, ideally in a simple way.

The problem is I'm manually writing out the jQuery line-by-line and trying to build a framework to make it so I can easily apply this to other fields. Then I realized it must have been done already, and I'm reinventing the wheel.

Does anyone know of any simple one-to-many tools to spare me reinventing the wheel?

UPDATE Turns out I should have been searching for "form element repeater" or "form input cloning" or some similar phrase, instead of "jquery one to many inputs". The new phrases yielded the results found in my accepted (my own) answer.

Answer 1

Two frameworks:

SheepIt: http://www.mdelrosso.com/sheepit/index.php?lng=en_GB&sec=home

jQuery Form Element Repeater Plugin: https://github.com/cballou/jQuery-Form-Element-Repeater-Plugin

Answer 2

$('.add-input').click(function(){
   var  num =  $(this).attr('data-num'),
          $newInput = $('<input data-input="' + num + '" type="tel"/>'),
          $delete = $('<a class='delete'/>');

    $delete.on('click', function(ev){
         $newInput.remove();
     });

     $('#formName').append($newInput + $delete);
 }) ;

Something along the lines of this should work fine. It generates a input and delete button attaching a click event to the delete button generated and uses data attributes so you can keep track of inputs through PHP.

Answer 3

Your html code should look like this <input name="phonenumber[]">

Your jquery code will look like this

$('#add_phonenumber').click(function(){
 $('#my_form').append('<input name="phonenumber[]">'); //add 
});
$('.delete_me').click(function(){
  $(this).closest('span or div').find('input').remove(); // delete (NOTE: your delete button and an input must be in one container for each input)
});

<span class="inputs"><input type="text" name="phonenumber[]"><a class="delete_me">delete this input</a></span>

Your php form handler

$new = array();

$phones = $_POST['phonenumber'];
$count = count( $phones );

for ( $i = 0; $i < $count; $i++ ) {
    if ( $phones[$i] != '' ) :
        $new[$i]['phonenumber'] = stripslashes( strip_tags( $phones[$i] ) );
    endif;
}

// now array $new contains your phone numbers, you can save it or whatever you want to do with it

Answer 4

As a simple alternative maybe you could have one input box and separate the multiple entries with semi-colons or some other marker. Then in the php script you could use the explode function to separate them out into an array. e.g. :

johndoe@gahoo.com; janedoe@gahoo.com;jamesdoe@gahoo.com;

This would allow cut and paste of e.g. strings of email addresses, so for some applications it might be a preferable solution, as well as requiring minimal coding