[英]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.