Question

我在我的表单中有一个JS动态事件，它添加了另一个字段，以便我的用户可以添加另一个地址：

<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>

但是，当我点击“添加其他地址”按钮时，当我执行表单操作时页面会刷新：

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

这些是我的字段：

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());     
    }

我希望所有地址都转到mysql数据库。我希望这很清楚

Answer 1

按钮定义按钮：<input type="button" value="ButtonLabel" />。

我的简短测试导致我的<button>被firefox视为提交类型输入。这意味着<button>FooBar</button>和<input type="submit" value="FooBar" />是等效的。

您可能还想简化您的JavaScript代码。您可以将数组表示法用于输入名称：

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

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

将导致$_POST["street"][0]和$_POST["street"][1]填充用户的输入。无论如何，这是你想要从你的PHP代码判断。

您的所有输入标记都不需要ID。只需为一个地址保留一整套输入，然后将其附加到表单中。也许是这样的：

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

或者只是在页面上隐藏一整套并克隆它，然后追加。我相信我们的jQuery专业人员会知道更好的解决方案。

最后：请用mysql_real_escape_string

对您的输入进行整理

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

从动态字段事件向数据库添加多行

1 个答案: