[英]send Form data using jQuery which has appended div inside it
我无法使用表单发送完整的表单数据。我能够发送包含名称、事件状态、触发事件和中继状态的存储数据。 附加 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"><</option> <option value="lessThanInclusive"><=</option> <option value="greaterThan">></option> <option value="greaterThanInclusive">>=</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>
即使我附加两次，仍然只为第一个发送具有先前值的数据（我无法为第二次附加的 div 发送空的或存储的数据），但不是选定的值。 任何人都可以帮助我如何提交完整的数据？ 你的线索对我很有帮助。谢谢
有很多方法可以清理它。 我无法测试 POST 功能。 我建议如下：
$(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"><</option> <option value="lessThanInclusive"><=</option> <option value="greaterThan">></option> <option value="greaterThanInclusive">>=</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>
您的代码将两个点击事件分配给#condition并生成控制台错误。 希望这可以帮助。
更新
将许多元素从id移到class 。 寻找conditions并将它们附加到每个条件的数组中的数据对象。
样本结果
{
"configuration": {
"rule": {
"name": "Shutdown",
"status": "enabled",
"triggerOn": "all",
"onSuccess": "1",
"conditions": [
{
"fact": "s1",
"operator": "lessThan",
"value": 5
},
{
"fact": "s2",
"operator": "greaterThan",
"value": 10
}
]
}
}
}
如何在先前从jquery附加的div内的元素上使用jquery onClick函数
[英]how to use jquery onClick function on element inside a div which were previously appended from jquery
在表单上使用jQuery，Laravel 5.3在表单外部将数据发送到div上
[英]Send data of form to div on submitting , outside the form using jQuery, laravel 5.3
jQuery - 隐藏具有包含特定文本的span元素的DIV
[英]jQuery - Hide DIV which has a span element with certain text inside
使用选择器的jquery的if else语句，以查看是否已将某个div附加到该语句
[英]If else statement for jquery using selectors to see if a certain div has been appended to it
如何使用jquery仅显示包含某些数据的div中的标签？
[英]How to show only the labels in a div which has some data in it using jquery?
提交表单后，如何使用JQuery从附加到HTML表的字段中获取$ _POST数组中的值？
[英]How to get the values in $_POST array from the fields which are appended to the HTML table using JQuery after form submission?
使用 jQuery val() 发送表单数据并使用 FormData 发送数据
[英]Using jQuery val() to send form data and using FormData to send for data
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.