如何最好地格式化单选按钮数组并在$ _POST中捕获

时间：2017-04-19 00:02:48

标签： php jquery html arrays forms

我真的很难用RSVP表格我试图设置，任何帮助都会很棒！

到目前为止我有这个表单http://adrianandemma.com/，我试图在提交后向我发送一封简单的电子邮件。

表单中有一个＆＃39;名称＆＃39;字段和单选按钮用于参加 - 是/否＆＃39;。

然后我有一些JS，你可以一次克隆这些字段到多个来宾的RSVP。

＆＃39;姓名＆＃39;字段作为数组传递精细并通过电子邮件传递，因为我可以将输入的name属性设置为name =＆＃34; name []＆＃34;，但是我遇到了麻烦单选按钮。

我不能保留这个名字＆＃39;对于克隆的单选按钮属性相同，因为如果我这样做，我只能为一个克隆行选择是/否，因为所有克隆的无线电都具有相同的名称，所以我添加了一些JS来尝试修改名称任何克隆的无线电将来[1]，即将出现[2]等等。

我无法完成这项工作，因为每次提交表单时，单选按钮值都会显示为空白。

有人可以建议将单选按钮设置为数组的最佳方法，并通过$ _POST和最终的电子邮件脚本进行传递吗？

这是我的HTML表单：

<?php
if(@$_REQUEST['submit'] == '1') {
    include('assets/forms/rsvp.php');
}
?>

<form action="?" method="post">
            <?php if(@$errors) :?>
                <p class="errors"><?php echo $errors; ?></p>
            <?php endif; ?>
            <input type="hidden" name="submit" value="1" />
            <div class="form-row">
                <div class="field-l">
                    <p>Name</p>
                </div>
                <div class="field-r">
                    <p>Attending?</p>
                </div>
            </div>
            <div class="form-row guest">
                <div class="field-l">
                    <input type="text" name="name[]" id="name" value="<?php echo htmlspecialchars(@$_REQUEST['name']); ?>" tabindex="1" />
                </div>
                <div class="field-r">
                    <input type="radio" name="coming" id="coming-yes" class="coming-yes" value="Yes"><label for="coming-yes">Yes</label><input type="radio" name="coming" id="coming-no" class="coming-no" value="No"><label for="coming-no">No</label>
                </div>
            </div>
            <a class="addguest" href="#">Add further guest</a>
            <div class="form-row">
                <button type="submit" id="rsvp-submit" tabindex="2">Submit RSVP</button>
            </div>
        </form>

Hers My Form Process代码：

<?php

$name = $_POST['name'];
$coming = $_POST['coming'];

$errors = "";
if(!@$_POST['name'])    { $errors .= "Please enter your name.<br/>\n"; }
if(!@$_POST['coming'])  { $errors .= "Please enter yes or no for attending.<br/>\n"; }

if(@$_POST['emailaddress'] != '')   { $spam = '1'; }

if (!$errors && @$spam != '1')
    {
        $to = "xxx@example.com";
        $subject = "Wedding RSVP";
        $headers = "From: noreply@adrianandemma.com";
        $body = "The following RSVP has been sent via the website.\n\n";
        for($i=0; $i < count($_POST['name']); $i++) {
            $body .= "
            Name ".($i+1)." : " . $_POST['name'][$i] . "\n
            Coming ".($i+1)." : " . $_POST['coming'][$i] ."\n\n";
        }
        $body .= "\n\nDate Received: " . date("j F Y, g:i a") . "\n";

        mail($to,$subject,$body,$headers);
    }

?>

这是我的JS：

$(document).ready(function() {

    $('.addguest').on('click', function(e) {
        e.preventDefault();
        //
        // get the current number of ele and increment it
        //
        var i = $('.guest').length + 1;
        $('.guest').first().clone().find("input").attr('id', function(idx, attrVal) {
            return attrVal + i;  // change the id
        });
        $('.guest').first().clone().find("input[type=radio]").attr('id', function(idx, attrVal) {
            return attrVal + i;  // change the id
        }).attr('name', function(idx, attrVal) {
            return attrVal+'['+i+']'; // change the name
        }).val('').end().find('label').attr('for', function(idx, attrVal) {
            return attrVal + i; // change the for
        }).end().insertBefore(this);
    });

});

以下是我目前通过电子邮件接收的一个示例，名称来得很好，但广播的价值是“来”是/否＆＃34;都是空白的：

The following RSVP has been sent via the website.

            Name 1 : John Doe
            Coming 1 : 

            Name 2 : Ann Doe
            Coming 2 : 

            Name 3 : Fred Doe
            Coming 3 : 

Date Received: 19 April 2017, 1:04 am

1 个答案:

答案 0 :(得分：0)

老实说，我的最佳猜测是，在原始行中，您的无线电输入的名称只是＆＃34;即将到来＆＃34;，没有括号。我认为因为该名称上没有括号，所以它正在破坏应该作为数组运行的同名的其他名称。换句话说，PHP为相同名称的输入获取两个冲突类型，并将字符串放在数组上。

很难说没有直接测试它，并且输入在PHP表单处理程序中作为数组引用并且不会抛出错误的事实会向我建议我不太正确，但值得一试。

以下是对我要尝试的HTML的更改：

<div class="field-l">
    <input type="text" name="name[0]" id="name" value="<?php echo htmlspecialchars(@$_REQUEST['name']); ?>" tabindex="1" />
</div>
<div class="field-r">
    <input type="radio" name="coming[0]" id="coming-yes" class="coming-yes" value="Yes">
    <label for="coming-yes">Yes</label>
    <input type="radio" name="coming[0]" id="coming-no" class="coming-no" value="No">
    <label for="coming-no">No</label>
</div>

注意我特意将第一行标记为行0，因为PHP使用零索引数组。

这将需要对您的JavaScript进行一些更改。我发现为行HTML创建实际模板比使用它更容易，每次尝试克隆第一行并重置所有输入并调整名称。这种方式的工作方式是在脚本标记内定义模板HTML，其中包含ID和非标准类型。浏览器会忽略它，但JavaScript可以像访问任何其他元素一样访问它，我们可以使用jQuery的html()方法提取内容。

以下是我提出的建议（包括修改索引）：

<!-- A script with a non-standard type is ignored by the browser -->
<!-- We can reference it by ID in our JS though, and pull out the HTML -->
<script id="guest-row-template" type="text/template">
    <div class="form-row guest">
        <div class="field-l">
            <input type="text" name="" id="name" class="name-ipt" />
        </div>
        <div class="field-r">
            <input type="radio" name="" id="" class="coming-yes coming-yes-ipt" value="Yes" />
            <label for="" class="coming-yes coming-yes-label">Yes</label>
            <input type="radio" name="" id="" class="coming-no coming-no-ipt" value="No" />
            <label for="" class="coming-no coming-no-label">No</label>
        </div>
    </div>
</script>

<script type="text/javascript">
    $(document).ready(function() {

        $('.addguest').on('click', function(e) {
            e.preventDefault();
            //Get the number of rows we have already - this is the index of the *next* row
            //If we have 1 row, the first row's index is 0 and so our next row's index should be
            //1, which is also our length, no need to increment
            var i = $('.guest').length;

            //Get HTML template content for a single row
            var row = $('#guest-row-template').html();

            //Update the name attribute of the name input
            row.find('.name-ipt').attr('name', 'name[' + i + ']');

            //Update the name and id attributes of the yes radio button
            row.find('.coming-yes-ipt').attr('name', 'coming[' + i + ']');
            row.find('.coming-yes-ipt').attr('id', 'coming-yes-' + i);

            //Update the name and id attributes of the no radio button
            row.find('.coming-no-ipt').attr('name', 'coming[' + i + ']');
            row.find('.coming-no-ipt').attr('id', 'coming-no-' + i);

            //Update the for attribute of the yes label
            row.find('.coming-yes-label').attr('for', 'coming-yes-' + i);

            //Update the for attribute of the no label
            row.find('.coming-no-label').attr('for', 'coming-no-' + i);

            row.insertBefore(this);
        });

    });
</script>

请注意，这是未经测试的代码。当然，我已经经历了几次，以确保我抓住了所有明显的错误，但其他人可能会持续存在。由于我无法主动测试它，我无法说它完全没有bug。但是，希望伪代码可以帮助您解决问题。

编辑1

为了澄清一下，您通常不会拥有来手动提供PHP输入名称括号内的索引值，以将输入解释为数组并自动索引输入适当的顺序。我特意设置了第一个使用[0]的输入，因为它们之后的所有输入也需要指定索引值，以便你的单选按钮工作（我个人赞赏一致性），因为我们需要绝对确定正确的名称与正确的RSVP值匹配（只是试图彻底）。

相关问题
最新问题