在表单中克隆行的两个问题

Question

我正在使用一种简单的方法来克隆表单上的行。可以看网页here。

这是我用来进行克隆的脚本：

$(document).ready(function() {

            $(".add").click(function() {
                $("form > p:first-child").clone(true).insertBefore("form > p:last-child");
                return false;
            });

            $(".remove").click(function() {
                $(this).parent().remove();
            });

        });

这里是html表单：

    <form method="post" action="bookingengine.php">
        <p>
            <label>Full Name:</label> <input type="text" name="name" id="name">
            <label>Email:</label> <input type="text" name="email" id="email">
            <label>Telephone:</label> <input type="text" name="telephone" id="telephone">
            <span class="remove">Remove</span>
        </p>
        <p>
            <span class="add">Add fields</span><br /><br /><input type="submit" name="submit" id="submit" value="Submit" class="submit-button" />
        </p>

    </form>

我遇到了两个问题，这让我想知道克隆是否是最好的方法：

1. 如果用户已经在文本框中输入了信息，那么这些信息将与文本框本身一起被克隆，我不希望这种情况发生。我想添加添加为空的行。

2. 信息将使用 PHP 提交到电子邮件地址。这是PHP：

$EmailFrom = ""; $EmailTo = ""; $Subject = "预订撤退"; $姓名 = 修剪(stripslashes($_POST['name'])); $电子邮件= 修剪(stripslashes($_POST['email'])); $电话= 修剪(stripslashes($_POST['telephone']));

$validationOK=真；如果 (!$validationOK) { 打印 "";出口; }

$Body = "已进行新预订 撤退如下："; $Body .= "\n"; $Body .= "\n"; $Body .= "名称： "; $Body .= $Name; $Body .= "\n"; $Body .= "\n"; $Body .="电子邮件："; $正文.= $电子邮件； $Body .= "\n"; $身体 .= "\n"; $Body .="电话："; $身体 .= $电话； $Body .= "\n";

$success = mail($EmailTo, $Subject, $Body, "来自：");

if ($success){ print ""; } 其他{ 打印 ""; } ?>

我看到的是只有表单中的最后一行被添加到电子邮件中，大概是因为每个文本框没有唯一的名称或 ID。所以我再次想知道克隆方法是否最适合这项任务，如果是，我如何更改我的代码以包含电子邮件中的所有行。

谢谢，

尼克

Answer 1

要使用 PHP，您需要将输入转换为“数组”，方法是将 2 字符序列“[]”附加到输入名称的末尾（有关更多详细信息，请参见 http://php.net/faq.html 上的 #3） .

至于使用值克隆对象，作为 $(".add") 的“点击”处理程序的最后一步，清除最新添加的输入中的值应该非常简单。

    $(document).ready(function() {

        $(".add").click(function() {
            var x = $("form > p:first-child").clone(true).insertBefore("form > p:last-child");
            x.find('input').each(function() { this.value = ''; });
            return false;
        });

        $(".remove").click(function() {
            $(this).parent().remove();
        });

    });