Question

我正在尝试在用户点击添加按钮时动态地将表单字段添加到表单。但是，虽然我正在使用jquery的append（）函数并且输入显示正常，但是当表单提交并且我难倒时它们不会POST。（新手）

所以要解释我有一个表格：

<div class="belt">
    <div class="halfFormWrap left">        
    <form action="/myapp/invoices/add/4" id="InvoiceAddForm" method="post" accept-charset="utf-8">
        <div style="display:none;"><input type="hidden" name="_method" value="POST"/></div>
        <div class="input select"><label for="InvoiceRecurring">Recurring</label>
            <select name="data[Invoice][recurring]" id="InvoiceRecurring">
                <option value="Never">Never</option>
                <option value="Daily">Daily</option>
                <option value="Weekly">Weekly</option>
                <option value="Monthly">Monthly</option>
                <option value="Quarterly">Quarterly</option>
                <option value="Half yearly">Half yearly</option>
            <option value="Yearly">Yearly</option>
            </select></div>    
    </div>
    <div class="halfFormWrap right">
    <div id="divWithItemsTables">
        <table>
            <tr>
                <td class="widecol"><div class="input text required"><label for="Item1Details">Details</label><input name="data[Item][1][details]" maxlength="255" type="text" id="Item1Details" required="required"/></div></td>
                <td><div class="input number required"><label for="Item1Amount">Amount</label><input name="data[Item][1][amount]" step="0.01" type="number" id="Item1Amount" required="required"/></div></td>
            </tr>
        </table>
    </div>
    <div class="addbutton">+ add item</div>
    <div class="submit"><input type="submit" value="Save"/></div>
    </form>   
    </div>     
</div>

并使用javascript我在点击addbutton时添加新的表单字段。

var count = 2;
$(".addbutton").click(function(){
    //$("#divWithItemsTables").append('<table><tr><td class="widecol"><div class="input text required"><label for="Item'+count+'Details">Details</label><input name="data[Item]['+count+'][details]" maxlength="255" type="text" id="Item'+count+'Details" required="required"/></div></td><td><div class="input text"><label for="Item'+count+'Amount">Amount</label><input name="data[Item]['+count+'][amount]" type="text" id="Item'+count+'Amount"/></div></td></tr></table>');
    count++;
});

但是当我提交表单时，我添加的新字段未在请求中通过。我做错了什么？

Answer 1

你的html中有语法错误。移除已关闭的内容div（</div>）。

<div class="belt">
    <div class="halfFormWrap left">        
    <form action="/myapp/invoices/add/4" id="InvoiceAddForm" method="post" accept-charset="utf-8">
        <div style="display:none;"><input type="hidden" name="_method" value="POST"/></div>
        <div class="input select"><label for="InvoiceRecurring">Recurring</label>
            <select name="data[Invoice][recurring]" id="InvoiceRecurring">
                <option value="Never">Never</option>
                <option value="Daily">Daily</option>
                <option value="Weekly">Weekly</option>
                <option value="Monthly">Monthly</option>
                <option value="Quarterly">Quarterly</option>
                <option value="Half yearly">Half yearly</option>
            <option value="Yearly">Yearly</option>
            </select>
      </div>    
    <!-- Remove this -->
    <!-- </div> -->
    <div class="halfFormWrap right">
    <div id="divWithItemsTables">
        <table>
            <tr>
                <td class="widecol"><div class="input text required"><label for="Item1Details">Details</label><input name="data[Item][1][details]" maxlength="255" type="text" id="Item1Details" required="required"/></div></td>
                <td><div class="input number required"><label for="Item1Amount">Amount</label><input name="data[Item][1][amount]" step="0.01" type="number" id="Item1Amount" required="required"/></div></td>
            </tr>
        </table>
    </div>
    <div class="addbutton">+ add item</div>
    <div class="submit"><input type="submit" value="Save"/></div>
    </form>   
    </div>     
</div>

Answer 2

html

处的语法错误

＆＃13;

var count = 2;
$(".addbutton").click(function(){
    $("#divWithItemsTables").append('<table><tr><td class="widecol"><div class="input text required"><label for="Item'+count+'Details">Details</label><input name="data[Item]['+count+'][details]" maxlength="255" type="text" id="Item'+count+'Details" required="required"/></div></td><td><div class="input text"><label for="Item'+count+'Amount">Amount</label><input name="data[Item]['+count+'][amount]" type="text" id="Item'+count+'Amount"/></div></td></tr></table>');
    count++;
});

$("form").on("submit", function(e) {
  e.preventDefault();
  console.log($(this).serialize(), $(this).serializeArray());
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="belt">
    <div class="halfFormWrap left">        
    <form action="" id="InvoiceAddForm" method="post" accept-charset="utf-8">
        <div style="display:none;"><input type="hidden" name="_method" value="POST"/></div>
        <div class="input select"><label for="InvoiceRecurring">Recurring</label>
            <select name="data[Invoice][recurring]" id="InvoiceRecurring">
                <option value="Never">Never</option>
                <option value="Daily">Daily</option>
                <option value="Weekly">Weekly</option>
                <option value="Monthly">Monthly</option>
                <option value="Quarterly">Quarterly</option>
                <option value="Half yearly">Half yearly</option>
            <option value="Yearly">Yearly</option>
            </select><!-- here </div>    -->
    </div>
    <div class="halfFormWrap right">
    <div id="divWithItemsTables">
        <table>
            <tr>
                <td class="widecol"><div class="input text required"><label for="Item1Details">Details</label><input name="data[Item][1][details]" maxlength="255" type="text" id="Item1Details" required="required"/></div></td>
                <td><div class="input number required"><label for="Item1Amount">Amount</label><input name="data[Item][1][amount]" step="0.01" type="number" id="Item1Amount" required="required"/></div></td>
            </tr>
        </table>
    </div>
      </div>
    <div class="addbutton">+ add item</div>
    <div class="submit"><input type="submit" value="Save"/></div>
    </form>      
  <!-- here </div>    -->
</div>

＆＃13;

Jquery .append（）输入表单，但它们没有发布

2 个答案: