javascript - 获取多个 $_POST 元素的值

Question

我正在创建一个表单，允许用户提供他们所在的其他地址。我有一个下拉菜单，询问“您还有多少个额外地点？”根据他们选择的数字，我克隆“地址、城市、州、邮政编码”字段，并将它们直接放在同一表单中的彼此下方。

我上面描述的内容是有效的，但现在我正在尝试从我添加的这些附加字段中检索数据。当用户单击提交按钮时，表单会提交到同一页面，我在该页面上有 PHP 监听以查看表单是否已提交。如果已提交，我会将表单的值回显到屏幕上。

现在问题来了。如果我不理会保管箱，使其处于默认值“1”，请填写表格并单击“提交”，我会看到我输入的内容。但是，如果我从下拉列表中选择任何其他值并提交所有表单中的信息，我只会看到最后一个表单中的信息，而不是全部。为什么是这样？我在下面包含了我的代码。

这是表格:

<form id="blah" method="post">
    <div class="Page" id="AdditionalLocations">
        <fieldset name="first" class="additional">
            <legend>Additional Locations</legend>
            <p><label for="Address">Address</label> <input name="Address" type="text" id="Address" /><br /></p>
            <p><label for="City">City</label> <input type="text" name="City" id="City" /></p>
            <p>
                <label for="State">State</label>
                <select id="State" name="State">
                    <option selected="selected">Select your state...</option>
                    <?php foreach($states as $key=>$value) { ?>  
                    <option value="<?php echo $key; ?>"><?php echo $value; ?></option>  
                    <?php } ?>
                </select>
            </p>
            <p><label for="Zip">Zip Code</label><input type="text" name="Zip" maxlength="6" /></p>
            <p><label for="Country">Country</label><select id="Country" name="Country">
                <option value="US" selected="selected">United States</option>
                <option value="CA">Canada</option>
            </select></p>

            <input type="submit" value="SUBMIT FORM" />
        </fieldset>
    </div>
</form>

这就是根据下拉列表创建字段的方式

var cloneIndex = 0,
    cloneObj = $('.additional').eq(0);

$(document).on('change', "#NumberOfLocations", function() {
    if ( $(this).val() !== "" ) {
        for( var x = 2; x < $(this).val(); x++ ) {
            $('#AdditionalLocations').append( cloneObj.clone( true ).attr(''   ,'data-index', ++cloneIndex) )  
        }
    }
});

这就是我回显表单结果的方式。如果我不根据下拉列表创建新的附加字段，它就会起作用。

<?php
if($_SERVER['REQUEST_METHOD'] == "POST") {
    var_dump($_POST);
    foreach( $_POST as $field ) {
        if( is_array( $field ) ) {
            foreach( $field as $field2 ) {
                echo $field2;
            }
        } else {
            echo $field2;
        }
    }
}
?>

如果我选择 2 作为位置数字段中的值，这就是我得到的 html 输出:

<form id="blah" method="post">
    <div class="Page" id="AdditionalLocations">
        <fieldset name="first" class="additional"></fieldset>
        <fieldset name="first" class="additional" data-index="1"></fieldset>
    </div>
</form>

字段集中的所有字段都是相同的。为什么当我单击“提交”时，两个字段集都没有得到回显？

更新: 因此，我通过在 chrome 检查器内的末尾添加“1”来更改第二个字段集的名称，并提交，现在我看到了我需要的所有值。所以我想表单中的每个字段都必须有一个唯一的名称。

Answer 1

您的字段名称应在其名称末尾有数组表示法:

<input type="text" name="City[]" id="City" />
<select id="State" name="State[]">

当 php 获取这些值时，它们将位于数组中，因此您需要循环每个数组才能获取信息

for($i=0; $i<count($_POST['City']); $i++){
   $city = $_POST['City'][$i];
   $state = $_POST['State'][$i];
   ...
}

可能有更好的方法从数组中获取信息，但这既快又脏