使用jQuery发送表单数据，其中包含div

我无法使用form发送完整的表单数据。我能够发送包含偶数名称，事件状态，触发事件和中继状态的存储数据。 附加div的数据作为存储在其先前值中的值发送。

$(document).ready(function () { $("#condition").click(function (e) { e.preventDefault(); $('#shw').append($('.hiddenRule').clone().removeClass("hiddenRule")); }); }); $('#shw').on('click', '#delete', function (e) { e.preventDefault(); $(this).parent().remove(); }); $(document).ready(function () { $("#condition").click(function () { $('#add').show(); }); }); /*data format*/ var obj= { configuration: { rule: { name: $("#eventname").val(), status: $("#eventstatus").val(), triggerOn: $("#triggerevent").val(), onSuccess: $("#relaystate").val(), conditions: [ { fact: $("#sensor").val(), operator: $("#condition").val(), value: $("#thresholdvalue").val(), } ] } } }; $("form").click("submit",obj, function (e) { e.preventDefault(); $.post('url',$(this).serialize(), function (response) { console.log(response); }) }) 

 .hiddenRule{ display:none; } 

    
 
 
 
 
 
 Event Name: 
 
  
 
 
 
 Event status: 
 
  Enabled Disabled  
 
 
 
 Trigger Event: 
 
  All Conditions Any Conditions  
 
 
 
 Relay State: 
 
  On Off  
 
 
 
 Condition 
 
 
 
 
 
 
 Sensor: 
 
  S1 S2  
 
 
 
 Condition: 
 
  < <= > >=  
 
 
 
 Threshold Value: 
 
  
 
 
 delete 
 
 
 
 Add Schedule 
 
   

即使我追加了两次，仍然只有第一个数据被发送到先前的值（我不能发送第二次附加的div的空数据或存储数据），但不是选定的值。 任何人都可以帮我提交完整的数据吗？ 你的线索对我很有帮助.Thankyou

Answer 1

有很多方法可以清理它。 我无法测试POSTfunction。 我会建议如下：

 $(function() { function collectData($f) { var obj = { configuration: { rule: { name: $f.find(".name").val(), status: $f.find(".status option:selected").val(), triggerOn: $f.find(".trigger option:selected").val(), onSuccess: $f.find(".state option:selected").val(), conditions: [] } } }; if ($f.find(".conditionHolder").length) { $f.find(".conditionHolder").each(function(index, elem) { var $item = $(elem); obj.configuration.rule.conditions.push({ fact: $item.find(".sensor option:selected").val(), operator: $item.find(".condition option:selected").val(), value: parseInt($item.find(".threshold").val()), }); }); } console.log(obj); return obj; } function makeCondition() { var $c = $(".hiddenRule").clone(); var c = $("form .conditionHolder").length + 1; $c.removeClass("hiddenRule"); $c.find(".delete").before("Condition " + c + " "); $("#shw").append($c); } $("#condition").click(function(e) { e.preventDefault(); makeCondition(); }); $('#shw').on('click', '.delete', function(e) { e.preventDefault(); $(this).parent().parent().parent().remove(); }); $("form").submit(function(e) { e.preventDefault(); var myData = collectData($(this)); /* $.post('url', myData, function(response) { console.log(response); }); */ console.log("My Data:", myData); }); }); 

 .hiddenRule { display: none; } .conditionHolder { border: 0; border-top: 2px groove #f1f0ef; border-bottom: 2px groove #f1f0ef; margin-left: -11px; margin-right: -10px; margin-bottom: -10px; padding-left: 20px; } .conditionHolder legend { background: #fff; } .conditionHolder .delete { background: #f1f0ef; border: 1px solid #ccc; border-radius: 6px; font-size: 13.33px; font-weight: 600; text-align: center; } 

  
 
 
 
 
 
 Event Name: 
 
  
 
 
 
 Event status: 
 
  Enabled Disabled  
 
 
 
 Trigger Event: 
 
   All Conditions   Any Conditions   
 
 
 
 Relay State: 
 
  On Off  
 
 
 
 
 Condition 
 
 Add Schedule 
 
 
  
 
 
X
 
 
 
 Sensor: 
 
  S1 S2  
 
 
 
 Condition: 
 
  < <= > >=  
 
 
 
 Threshold Value: