使用在其中附加 div 的 jQuery 发送表单数据

Question

I'm not able to send the complete form data using form.I'm able to send the stored data containing even name, event status, trigger event and relay state.我无法使用表单发送完整的表单数据。我能够发送包含名称、事件状态、触发事件和中继状态的存储数据。 The data of the appended div is being sent as the value which is stored in its previous values.附加 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; }

 <html> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div ng-app="demo" ng-controller="ruleCtrl"> <form> <fieldset> <table class='addRuleHolder'> <tr> <td class="label-col"> <label>Event Name:</label> </td> <td> <input type="text" id="eventname"> </td> </tr> <tr> <td class="label-col"> <label>Event status:</label> </td> <td> <select id="eventstatus"> <option value="enabled">Enabled</option> <option value="disabled">Disabled</option> </select> </td> </tr> <tr> <td class="label-col"> <label>Trigger Event:</label> </td> <td> <select id="triggerevent"> <option value="all">All Conditions</option> <option value="any">Any Conditions</option> </select> </td> </tr> <tr> <td class="label-col"> <label>Relay State:</label> </td> <td> <select id="relaystate"> <option value="1">On</option> <option value="0">Off</option> </select> </td> </tr> </table> <div style="margin-top: 20px; float:right;padding-right:15px"> <button class="waves-effect waves-light btn" id="condition">Condition</button> </div> </fieldset> <div class="hiddenRule"> <fieldset> <table class='addRuleHolder'> <tr> <td class="label-col"> <label>Sensor:</label> </td> <td> <select id="sensor"> <option value="s1">S1</option> <option value="s2">S2</option> </select> </td> </tr> <tr> <td class="label-col"> <label>Condition:</label> </td> <td> <select id="condition"> <option value="lessThan">&lt;</option> <option value="lessThanInclusive">&lt;=</option> <option value="greaterThan">&gt;</option> <option value="greaterThanInclusive">&gt;=</option> </select> </td> </tr> <tr> <td class="label-col"> <label>Threshold Value:</label> </td> <td> <input type="text" id="thresholdvalue"> </td> </tr> </table> <button style="margin-top: 20px; float:right;padding-right:15px" class="waves-effect waves-light btn" id="delete">delete</button> </fieldset> </div> <br style="clear:both" /> <div id="shw"></div> <button style="margin-top: 20px; float:right;padding-right:15px;margin-right: 10px; display:none" type="submit" class="waves-effect waves-light btn" value="Add" id="add">Add Schedule</button> </form> </div> </body> </html>

even if I append two times, still the data is only being sent for the first one with the previous values(i'm not able to send even empty or stored data for the div which is being appended the second time), but not the selected values.即使我附加两次，仍然只为第一个发送具有先前值的数据（我无法为第二次附加的 div 发送空的或存储的数据），但不是选定的值。 Can anyone help me out how to submit the complete data?任何人都可以帮助我如何提交完整的数据？ Your leads would be very helpful for me.Thankyou你的线索对我很有帮助。谢谢

Answer 1

Lots of ways you can clean this up.有很多方法可以清理它。 I have no way to test the POST functionality.我无法测试 POST 功能。 I would advise the following:我建议如下：

 $(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; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div ng-app="demo" ng-controller="ruleCtrl"> <form> <fieldset> <table class="addRuleHolder"> <tr> <td class="label-col"> <label>Event Name:</label> </td> <td> <input type="text" class="event name"> </td> </tr> <tr> <td class="label-col"> <label>Event status:</label> </td> <td> <select class="event status"> <option value="enabled">Enabled</option> <option value="disabled">Disabled</option> </select> </td> </tr> <tr> <td class="label-col"> <label>Trigger Event:</label> </td> <td> <select class="event trigger"> <option value="all"> All Conditions </option> <option value="any"> Any Conditions </option> </select> </td> </tr> <tr> <td class="label-col"> <label>Relay State:</label> </td> <td> <select class="event relay state"> <option value="1">On</option> <option value="0">Off</option> </select> </td> </tr> </table> <div id="shw"></div> <div style="margin-top: 20px; float:right;padding-right:15px"> <button class="waves-effect waves-light btn" id="condition">Condition</button> </div> </fieldset> <button style="margin-top: 20px; float:right;padding-right:15px;margin-right: 10px;" type="submit" class="waves-effect waves-light btn" value="Add" id="add">Add Schedule</button> <br style="clear:both" /> </form> </div> <!-- Rule Template --> <div class="hiddenRule"> <fieldset class='conditionHolder'> <legend><button class="delete" title="Delete Condition">X</button></legend> <table class="addRuleHolder"> <tr> <td class="label-col"> <label>Sensor:</label> </td> <td> <select class="event sensor"> <option value="s1">S1</option> <option value="s2">S2</option> </select> </td> </tr> <tr> <td class="label-col"> <label>Condition:</label> </td> <td> <select class="event condition"> <option value="lessThan">&lt;</option> <option value="lessThanInclusive">&lt;=</option> <option value="greaterThan">&gt;</option> <option value="greaterThanInclusive">&gt;=</option> </select> </td> </tr> <tr> <td class="label-col"> <label>Threshold Value:</label> </td> <td> <input type="number" class="event threshold"> </td> </tr> </table> </fieldset> </div>

Your code was assigning two click events to #condition and was generating console errors.您的代码将两个点击事件分配给#condition并生成控制台错误。 Hope this helps.希望这可以帮助。

Update更新

Moved away from id to class for a number of the elements.将许多元素从id移到class 。 Seek for conditions and append them to the data object within an array for each condition.寻找conditions并将它们附加到每个条件的数组中的数据对象。

Sample Results样本结果

{
  "configuration": {
    "rule": {
      "name": "Shutdown",
      "status": "enabled",
      "triggerOn": "all",
      "onSuccess": "1",
      "conditions": [
        {
          "fact": "s1",
          "operator": "lessThan",
          "value": 5
        },
        {
          "fact": "s2",
          "operator": "greaterThan",
          "value": 10
        }
      ]
    }
  }
}

使用在其中附加 div 的 jQuery 发送表单数据

问题描述

1 个解决方案

解决方案1
1 已采纳 2018-02-28 02:56:31

使用在其中附加 div 的 jQuery 发送表单数据

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-02-28 02:56:31

解决方案1
1 已采纳 2018-02-28 02:56:31