Adding multiple rows to database from dynamic field event

Question

I have a dynamic event in JS in my form which adds another block of fields so my users can add another address:

<script type="text/javascript">
$(document).ready(function() {
  $('#btnAdd').click(function() {
    var $address = $('#address');
    var num = $('.clonedAddress').length; 
    var newNum = new Number(num + 1);
    var newElem = $address.clone().attr('id', 
    'address' + newNum).addClass('clonedAddress');

//set all div id's and the input id's
newElem.children('div').each (function (i) {
this.id = 'input' + (newNum*11 + i);
    });

newElem.find('input').each (function () {
this.id = this.id + newNum;
this.name = this.name + newNum;
    });

    if (num > 0) {
        $('.clonedAddress:last').after(newElem);
    } else {
        $address.after(newElem);
    }


    $('#btnDel').removeAttr('disabled');

    if (newNum == 3) $('#btnAdd').attr('disabled', 'disabled');
});
$('#btnDel').click(function() {
    $('.clonedAddress:last').remove();
    $('#btnAdd').removeAttr('disabled');
    if ($('.clonedAddress').length == 0) {
    $('#btnDel').attr('disabled', 'disabled');
    }
});
$('#btnDel').attr('disabled', 'disabled');
});
</script>

However, when I put my form action the page just refreshes when I click my 'add another address' button:

<form action="address.php" method="post" name="regForm" id="regForm" >

These are my fields:

if(empty($err)) {
for($i = 0; $i < 10; $i++)
    {
       $Street = $_POST['Street'][$i];
       $Line2 = $_POST['Line2'][$i];
       $Line3 = $_POST['Line3'][$i];
       $Town = $_POST['Town'][$i];
       $Postcode = $_POST['Postcode'][$i];
       $Country = $_POST['Country'][$i];
       $Tele = $_POST['Tele'][$i];
       $Fax = $_POST['Fax'][$i];
       $Type = $_POST['Type'][$i];
       $Mobile = $_POST['Mobile'][$i];
$sql_insert = "INSERT into `address`
       (`Street`,`Line2`,`Line3`,`Town`, `Postcode` ,`Country`,`Tele`,`Fax`,`Type`
       ,`Mobile`            )
VALUES
       ('$Street','$Line2','$Line3','$Town','$Postcode','$Country',
       '$Tele','$Fax','$Type', '$Mobile'
    )";
mysql_query($sql_insert,$link) or die("Insertion Failed:" . mysql_error());     
    }

I want all addresses to go to mysql database. I hope this is clear

Answer 1

Define buttons as followed: <input type="button" value="ButtonLabel" /> .

My short test resulted in my <button> getting treated as submit type input by firefox. This means <button>FooBar</button> and <input type="submit" value="FooBar" /> are equivalent.

You might also want to simplify your javascript code. You can use the array notation for input names:

<input type="text" name="street[]" />
<input type="text" name="zip[]" />

<input type="text" name="street[]" />
<input type="text" name="zip[]" />

will result in $_POST["street"][0] and $_POST["street"][1] beeing filled with the user's input. This is what you want judging from your php code, anyway.

You don't need ids for all your input tags. Just keep one full set of inputs for one address and append this to your form. Maybe something like:

$('#address').append(
    '<div>' + 
    '<input type="text" name="street[]" />' +
    '<input type="text" name="zip[]" />' +
    '</div>'
);

Or just have a full set hidden on your page and clone it, then append. I'm sure our jQuery pros will know a better solution.

And finally: Please sanatize your input with mysql_real_escape_string

$Street = mysql_real_escape_string($_POST['Street'][$i]);
// and so on for the other values.