使用在其中添加了div的jQuery发送表单数据 [英] send Form data using jQuery which has appended div inside it
本文介绍了使用在其中添加了div的jQuery发送表单数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我无法使用form发送完整的表单数据.我能够发送包含偶数名称，事件状态，触发事件和中继状态的存储数据.附加的div的数据将作为存储在其先前值中的值发送.
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.
$(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发送空数据或存储的数据)，但不是所选的值. 任何人都可以帮助我如何提交完整的数据吗?您的潜在客户对我会非常有帮助.谢谢
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. Can anyone help me out how to submit the complete data? Your leads would be very helpful for me.Thankyou
推荐答案
有很多清理方法.我无法测试POST功能.我建议以下几点:
Lots of ways you can clean this up. I have no way to test the POST functionality. 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"><</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，并且正在生成控制台错误.希望这会有所帮助.
Your code was assigning two click events to #condition and was generating console errors. Hope this helps.
更新
对于许多元素，它从id移到了class.寻求conditions并将其附加到每个条件的数组中的数据对象中.
Moved away from id to class for a number of the elements. Seek for conditions and append them to the data object within an array for each condition.
样本结果
{
"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发送表单数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
