gpt4 book ai didi

javascript - 使用 jquery 添加到表单内的表的元素不会发布

转载 作者:行者123 更新时间:2023-11-28 09:43:13 32 4
gpt4 key购买 nike

我编写了以下代码来动态构建一个表,然后将该表发送到服务器并通过电子邮件传递。但是,当用户发布数据时,它不会发布下拉字段中的任何项目。我做了很多研究,我认为这与 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

关于javascript - 使用 jquery 添加到表单内的表的元素不会发布,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12127305/

32 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com