Question

我有以下表格。每次用户点击add_accommodation我想添加到一个数组，我将返回到终点（http://server/end/point）。

<form action="http://localhost:3000/a/b/c" method="post">
    <div>
    <input type="hidden" id="Accommodation" name="accommodation"><div>
    </div>
</form>

<div id="accommodation_component">
    <div>
        <label for="AccommodationType">Type:</label>
         <input type="number" step="1" id="accommodationType" name="accommodation_type"  value="0">
    </div>
    <div>
        <button type="button" id="add_accommodation">Add Accommodation</button>
    </div>
</div>

<script>
    $( document ).ready(function() {
        $('#add_accommodation').click(function() { 
            make_accommodation(this);
         });
     });

     function make_accommodation(input) {
         var value = {
             type : $("#AccommodationType").val(),
         };     
         var accommodation = $('#Accommodation').attr('id', 'accommodation');
         accommodation.push(value);
         console.log(accommodation);
     }
</script>

在我的结束点我希望结果是和数组（accommodation = [{1},{2},{3},{4}]）。我怎么能这样做？

Answer 1

在表单中添加antorher隐藏字段

<input type="hidden" name="accommodation[]"> // click1
<input type="hidden" name="accommodation[]"> // click2
...
<input type="hidden" name="accommodation[]"> // clickn

然后，当您在服务器上提交表单时，您将拥有一系列的住宿。

JS部分：

function make_accommodation() {
       $(document.createElement('input'))
             .attr('type', 'hidden')
             .attr('name', 'accommodation[]')
             .val($("#AccommodationType").val())
             .appendTo('form');
}

服务器上的

（PHP）：

print_r($_POST['accommodation']);

Answer 2

为表单提供一个id，只需在其末尾追加一个名为[]的新隐藏（？）输入，它就会将值作为数组发送到服务器。

HTML

<form id="myform" ...>

的Javascript

function make_accommodation(){
   var newInput = $("<input>",{
      type:"hidden",
      name:"accommodation[]",
      value: {
         type: $("#AccommodationType").val()
      }
   });
   $("#myform").append(newInput);
}

此外，您将输出列为[1,2,3,4]，但您的代码显示您将值设置为具有属性type的对象并将其设置为调整输入的值，我将假设是一个错误。如果我弄错了，只需修改上面代码中的value属性。

同样在你的代码中，你改变了输入的id，不知道为什么你这样做，因为它没有用处，并且会使你的代码错误，所以我删除它。

修改的

由于您希望发送一个对象数组，因此您必须在客户端对JSON.stringify数组进行解码并在服务器端对其进行解码。在这一个中，您不需要多个输入，而只需要一个输入来包含字符串化数据。

var accommodationData = []; function make_accommodation(){ accommodationData.push({ type: $("#AccommodationType").val() }); $("#accommodation").val( JSON.stringify(accommodationData) ); }

然后在服务器上你必须解码，不知道你正在使用什么服务器语言，所以我在PHP中显示示例

$data = json_decode( $_POST['accommodation'] );

如果你正在使用jQuery的ajax方法，你可以通过发送数组数据来简化它

jQuery.ajax({ url:"yourURLhere", type:"post" data:{ accomodation:accommodationData }, success:function(response){ //whatever here } });

Answer 3

由于您正在使用jQuery，因此您可以创建一个函数，在单击按钮后创建另一个隐藏字段

<div id='acommodation-wrapper'></div>
<button type="button" id="add_accommodation" onclick="addAnother()">Add Accommodation</button>

<script type="text/javascript">
    function addAnother(){
        var accWrapper = $('#accommodation-wrapper');
        var count = accWrapper.children().length;     
        var div = "<input type=\"hidden\" class=\"accommodation-"+count+"\" name=\"accommodation["+count+"]\"></div>";
        accWrapper.append(div);
    }
</script>

jQuery：如何在表单中提交数组

3 个答案: