如何在不刷新頁面的情況下合並兩個表單功能？

Question

賞金將在 7 天后到期。 此問題的答案有資格獲得+50聲望賞金。 edow想引起更多人對這個問題的關注。

編輯（僅使用 jQuery）

我根據評論更改了代碼，所以我不需要表格。 我不是最擅長編碼的人，但我會嘗試。 當我使用<div class="td3-title" id="result_in"></div>下面的代碼時，沒有顯示數字（它是空的）。

<div class="td2">1</div>稍后將計算百分比，但這是以后的事情。

我想要實現的是：

• 自動計算字段
• 添加額外的字段，腳本也應該能夠計算額外的字段（將其添加到 jQuery 代碼中）
• 一切都應該發生在頁面上（不向服務器發送數據）

 <script> $("#in1").keyup(calc); $("#in2").keyup(calc); function calc() { $('#result_in').html( parseFloat($('#in1').val(), 10) + parseFloat($("#in2").val(), 10 + parseFloat($("#in3").val(), 10) ); } </script> <script> $(function ($) { $('body').on("click", '#addFieldsIn', function () { $('#table-in').append('<div class="tr"><div class="td1"><input type="text" placeholder="Change description" value=""></div><div class="td2">1</div><div class="td3"><input type="number" id="in1" placeholder="0" value=""></div></div>') }) })(jQuery) </script> <div id="table-in"> <div class="tr"> <div class="td1-title">In</div> <div class="td2-title">&#x25;</div> <div class="td3-title">&euro;</div> </div> <div class="tr"> <div class="td1"><input type="text" placeholder="Change description" value=""></div> <div class="td2">1</div> <div class="td3"><input type="number" id="in1" placeholder="0" value=""></div> </div> <div class="tr"> <div class="td1"><input type="text" placeholder="Change description" value=""></div> <div class="td2">1</div> <div class="td3"><input type="number" id="in2" placeholder="0" value=""></div> </div> <div class="tr"> <div class="td1"><input type="text" placeholder="Change description" value=""></div> <div class="td2">1</div> <div class="td3"><input type="number" id="in3" placeholder="0" value=""></div> </div> </div> <div id="tableEnd"> <div class="tr"> <div class="td1"><button id="addFieldsIn">+ Add field</button></div> <div class="td2"></div> <div class="td3"></div> </div> <div class="tr"> <div class="td1-title">Total in</div> <div class="td2-title">1</div> <div class="td3-title" id="result_in"></div> </div> </div>

**

編輯 jQuery

我嘗試組合多個函數，但它破壞了var totalIn的計算。 我做錯了什么？

 <script> $(document).ready(function() { calc(); //call function to calculate $('body').on("click", '#addFieldsIn', function() { $('#table-in').append('<div class="tr"><div class="td1"><input type="text" placeholder="Change description"></div><div class="td2">1</div><div class="td3"><input type="number" placeholder="0"></div></div>') calc(); //if passing any default value in input box }) $('body').on("click", '#addFieldsOut', function() { $('#table-out').append('<div class="tr"><div class="td1"><input type="text" placeholder="Change description"></div><div class="td2">1</div><div class="td3"><input type="number" placeholder="0"></div></div>') calc(); //if passing any default value in input box }) $('body').on("keyup", '.td3 > input', function() { calc(); //when value keyup in input box }) function calc() { var totalIn = 0; //for storing overall total $("#table-in.td3 > input").each(function() { totalIn += ($(this).val())? parseFloat($(this).val()): 0; //further can format to parsefloat if needed or add more checks }) $('#result_in').text(totalIn); } function calc() { var totalOut = 0; //for storing overall total $("#table-out.td3 > input").each(function() { totalOut += ($(this).val())? parseFloat($(this).val()): 0; //further can format to parsefloat if needed or add more checks }) $('#result_out').text(totalOut); } }) </script>

**

Answer 1

您可以遍歷您的.tr然后在 div 中獲取輸入框的值，並在每次迭代中添加任何變量中的值的總和並將其分配給您的result_in div。

演示代碼：

 $(document).ready(function() { calc(); //call fnction to calculate $('body').on("click", '#addFieldsIn', function() { $('#table-in').append('<div class="tr"><div class="td1"><input type="text" placeholder="Change description" value=""></div><div class="td2">1</div><div class="td3"><input type="number" placeholder="0" value=""></div></div>') calc(); //if passing any default value in input box }) $('body').on("change", '.td3 > input', function() { calc(); //when value change in input box }) function calc() { var total = 0; //for storing overall total $("#table-in.td3 > input").each(function() { total += ($(this).val())? parseInt($(this).val()): 0; //further can format to parsefloat if needed or add more checks }) $('#result_in').text(total); } })

 #table-in>.tr { border: 1px solid black; } #result_in { color: red; } #table-in { display: table-row-group; }.tr { display: table-row; }.td1, .td2, .td3 { display: table-cell; border: 1px solid #dddddd; padding: 8px; line-height: 1.42857143; vertical-align: top; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="table-in"> <div class="tr"> <div class="td1">In</div> <div class="td2">&#x25;</div> <div class="td3">&euro;</div> </div> <div class="tr"> <div class="td1"><input type="text" placeholder="Change description" value=""></div> <div class="td2">1</div> <div class="td3"><input type="number" id="in1" placeholder="0" value=""></div> </div> <div class="tr"> <div class="td1"><input type="text" placeholder="Change description" value=""></div> <div class="td2">1</div> <div class="td3"><input type="number" id="in3" placeholder="0" value=""></div> </div> </div> <div class="tr"> <div class="td1">Total in</div> <div class="td2">1</div> <div class="td3" id="result_in"></div> </div> <div class="tr"> <div class="td1"><button id="addFieldsIn">+ Add field</button></div> </div>

Answer 2

用 Javascript 覆蓋默認提交 function 並使用 Ajax 手動發布表單

在我給出的示例中，我假設您的form ID <form id="theform">

$("#theform").submit(function(e){
  // don't do the default action
  e.preventDefault();

  submitData = $(this).serialize();

  $.ajax({
    method: 'post',
    url: '',
    data: submitData,
    success: function(data){
      // Show feedback that the form was saved submitted
    },
  });
});