使用jquery添加到表单内部表中的元素不会过帐
Elements added using jquery to table inside of form are not posting
我编写了以下代码来动态构建一个表,然后将该表发送到服务器并通过电子邮件传递。但是,当用户发布其未发布的数据时,下拉字段中的任何项目。我做了很多研究,我认为这与DOM有关,但我不确定如何修复它
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
var row_counter = 1
var sandwichOptions = { '' : 'None',
'item1' : 'Item1',
'item2' : 'Item2',
'item3' : 'Item3',
'item4' : 'Item4'
};
function createTable(tbody, rows, cols) {
if (tbody == null || tbody.length < 1) return;
if ($('#body') != null) {$('#body').empty()};
for (var r = 1; r <= rows; r++) {
var trow = $("<tr>");
var sandwich = $('#sandwiches').clone();
sandwich.name = "sandwich"+r;
// var sandwich = $('<select></select>');
// //sandwich.attr("id","sandwich"+r);
// sandwich.name = "sandwich"+r;
// sandwich.append(new Option('Foo', 'foo', true, true));
// $.each(sandwichOptions, function(val, text)
// {sandwich.append(new Option(text, val, true, true))}); //, {value: "Item1", text: "Item1"}));
var salads = $('#salads').clone();
salads.name = "salads"+r;
var dessert = $('#dessert').clone();
dessert.name = "dessert"+r;
var name_input = document.createElement('input');
name_input.type = 'text';
name_input.name = "name_input"+r;
var special_request = document.createElement('input');
special_request.type = 'text';
special_request.name = "special_request"+r;
trow.append($("<td>").text(r));
trow.append($("<td>").append(name_input));
trow.append($("<td>").append(sandwich.show()));
trow.append($("<td>").append(salads.show()));
trow.append($("<td>").append(dessert.show()));
trow.append($("<td>").append(special_request));
trow.attr("id","row"+r);
tbody.append(trow)
}
}
function add_row(tbody) {
var r = row_counter
var trow = $("<tr>");
var sandwich = $('#sandwiches').clone();
sandwich.name = "sandwich"+r;
var salads = $('#salads').clone();
salads.name = "salads"+r;
var dessert = $('#dessert').clone();
dessert.name = "dessert"+r;
var name_input = document.createElement('input');
name_input.type = 'text';
name_input.name = "name_input"+r;
var special_request = document.createElement('input');
special_request.type = 'text';
special_request.name = "special_request"+r;
trow.append($("<td>").text(r));
trow.append($("<td>").append(name_input));
trow.append($("<td>").append(sandwich.show()));
trow.append($("<td>").append(salads.show()));
trow.append($("<td>").append(dessert.show()));
trow.append($("<td>").append(special_request));
trow.attr("id","row"+r);
trow.appendTo(tbody);
}
$(document).ready(function() {
table = $('form #order_table');
$('#refresh').click(function() {
//you can simplify the code by making the addition or deletion of rows triggered
var value = $('#CustNum').val();
$('#refresh').val("Clear/Reset Form");
createTable(table, value, 5);
row_counter = value;
table.show();
$('#add_row').show();
//$('#delete_row').show();
$('#email').show();
$('#send_button').show();
$('#row_count').text(row_counter);
});
$('#add_row').click(function() {
row_counter = parseInt(row_counter) + 1;
add_row(table);
$('#CustNum').val(row_counter);
$('#row_count').text(row_counter);
});
$('#delete_row').click(function() {
//if (row_counter == 1) return;
$('#row'+row_counter).remove();
row_counter = parseInt(row_counter) - 1;
$('#CustNum').val(row_counter);
$('#row_count').text(row_counter);
});
$(document).click(function() {
if (parseInt(row_counter) > 1) {$('#delete_row').show()}
else {$('#delete_row').hide()};
});
$('#CustEmail').focus(function() {
if ($('#CustEmail').val() == 'email') {$('#CustEmail').val('')
.css('color','#000000')
.css('font-style','normal')
};
});
$('#CustEmail').blur(function() {
if ($('#CustEmail').val() == '') {$('#CustEmail').val('email')
.css('color','#A0A0A0')
.css('font-style','italic')
};
});
});
<form id = "testxx" method = "post">
enter number of customers:
<input type="number" name = "CustNum" id = "CustNum" value=1 min=1>
<input type="button" value="Generate Form" id="refresh">
<input type="button" value="Add Row" id="add_row" style ="display: none;">
<input type="button" value="Delete Row" id="delete_row" style ="display: none;">
<table id="order_table" style="display: none;" name = "test">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Sandwich</th>
<th>Salad</th>
<th>Dessert</th>
<th>Special Requests<th>
</tr>
</thead>
<tbody id = "body">
</tbody>
</table>
<select id="sandwiches" style="display: none;">
<option>None</option>
<option value = "Option1">Option1</option>
<option value = "Option2">Option2</option>
<option value = "Option3">Option3</option>
<option value = "Option4">Option4</option>
</select>
<select id="salads" style="display: none;">
<option>None</option>
<option value = "Option1">Option1</option>
<option value = "Option2">Option2</option>
<option value = "Option3">Option3</option>
<option value = "Option4">Option4</option>
</select>
<select id="dessert" style="display: none;">
<option>None</option>
<option value = "Option1">Option1</option>
<option value = "Option2">Option2</option>
<option value = "Option3">Option3</option>
<option value = "Option4">Option4</option>
</select>
当元素被隐藏时,它不适合与表单一起提交。
删除要提交的选定内容的display:none
。
谢谢,我能弄清楚。
我做了几件事来纠正。我把select语句放在表单标记中,我把表var改为table=$('#body')-tbody的id。我将命名代码从"X".name="Y"更改为jquery方法"X".attr("name","Y").
在所有这些变化之间,它终于起作用了。谢谢
相关文章:
- 如何将html元素添加到tampermonkey中
- 如何将html元素添加为生成的内容
- 如何向Selectize元素添加渲染和创建方法
- 向html选择元素添加选项
- 在d3中向DOM元素添加了图像,但现在它赢得了't过渡
- 如何将新的键/值对元素添加到现有数组
- 使用docment.createElement向元素添加选项
- ng重复向一个元素添加条件类
- 为li元素添加标题
- 向ckeditor中的多个元素添加内联样式
- Javascript 向影子根中的自定义元素添加函数
- 将伪元素添加到<文本区域>
- 如果类只包含一个特定数字,则向元素添加类
- DOM:将空元素添加到 DOM 和页面重排
- 是否有 jQuery 事件用于何时将元素添加到文档中
- 通过 ajax 使用自定义滚动条向元素添加内容
- 是否可以用D3将svg元素添加到开放层映射中
- 如何将元素添加到动态数组并排除现有元素
- 在AngularJS中将元素添加到作用域时,如何在所有设备上播放声音
- 将图像元素添加到<a>标签