添加新产品时逻辑表单不刷新

Logic form not refreshing upon adding new product

本文关键字：表单 刷新 新产品 添加      更新时间：2024-06-12

我的表单有问题。你可以在这里看到：

http://www.rawlinspaints.com/development/form2.html

基本上，该表单的目的是让用户可以选择一种产品，并且只接收该产品的特定选项，而现在是这样，然而问题是，当用户单击添加新产品时，一旦他们这样做，下拉菜单就不再只显示该产品的必要数据。

有人能帮忙吗？上面的链接和这里的代码，或者如果有人有更好的方法来做这件事，那就太好了，我知道代码很乱，我仍然必须把它整理出来，这样表单数据才能以某种易读的格式通过！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.4.js'></script>
<script type='text/javascript'>
$(document).ready(function () {
 $("#product").change(function () {
     var selected = $("#product option:selected").val();
     $('div').hide();
     $('#' + selected).show();
 });
 $('div').hide();
 });
</script>
<script type='text/javascript' src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){

$(function () {
$('table').on('click', 'tr a', function (e) {
    e.preventDefault();
    $(this).parents('tr').remove();
});
$("#addTableRow").click(function() {
    $("#mans").each(function () {
        var tds = '<tr>';
        jQuery.each($('tr:last td', this), function () {
            tds += '<td>' + $(this).html() + '</td>';
        });
        tds += '</tr>';
        if ($('tbody', this).length > 0) {
            $('tbody', this).append(tds);
        } else {
            $(this).append(tds);
        }
    });
});
});

}//]]>  
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="800" border="1" cellspacing="0" cellpadding="10" id="mans">
    <tr>
        <td>
         Product: <select id="product">
<option value="0">Select a Product</option>
<option value="1">Stair Nosing</option>
<option value="2">Stair Tread Covers</option>
<option value="3">Landing Covers</option>
<option value="4">Flat Plate</option>
<option value="5">50mm Convex Decking Strips</option>
<option value="6">100mm Convex Decking Strips</option>
<option value="7">Fixings</option>
</select>
<div id="1">
Quantity: <input name="Quantity" type="text" value=""></br>
Colour:
<select id="StairNosingColour">
<option value="Colour">Select a Colour</option>
<option value="1">Yellow</option>
<option value="2">Black</option>
<option value="3">White</option>
<option value="4">Luminous</option>
</select></br>
Size:
<select id="StairNosingSize">
<option value="Size">Select a Size</option>
<option value="1">750mm Length (L to R) x 55mm Depth (going)</option>
<option value="2">1000mm Length (L to R) x 55mm Depth (going)</option>
<option value="3">1500mm Length (L to R) x 55mm Depth (going)</option>
<option value="4">2000mm Length (L to R) x 55mm Depth (going)</option>
<option value="4">2500mm Length (L to R) x 55mm Depth (going)</option>
<option value="4">3000mm Length (L to R) x 55mm Depth (going)</option>
</select></br>
Cutting & Drilling Instructions:
<input name="Cutting &amp; Drilling Instructions" type="text" value="Length/Pre Drilled Holes">
</div>
<div id="2">
Quantity: <input name="Quantity" type="text" value=""></br>
Colour:
<select id="StairTreadCoversColour">
<option value="Colour">Select a Colour</option>
<option value="1">Black with White Nosing</option>
<option value="2">Black with Yellow Nosing</option>
</select></br>
Size:
<select id="StairTreadCoversSize">
<option value="Size">Select a Size</option>
<option value="1">750mm Length (L to R) x 345mm Depth (going)</option>
<option value="2">1000mm Length (L to R) x 345mm Depth (going)</option>
<option value="3">1500mm Length (L to R) x 345mm Depth (going)</option>
<option value="4">2000mm Length (L to R) x 345mm Depth (going)</option>
<option value="4">2500mm Length (L to R) x 345mm Depth (going)</option>
<option value="4">3000mm Length (L to R) x 345mm Depth (going)</option>
</select></br>
Cutting & Drilling Instructions:
<input name="Cutting &amp; Drilling Instructions" type="text" value="Length/Depth/Pre Drilled Holes">
</div>
<div id="3">
Quantity: <input name="Quantity" type="text" value=""></br>
Colour:
<select id="LandingCoversColour">
<option value="Colour">Select a Colour</option>
<option value="1">Black with Yellow Nosing</option>
</select></br>
Size:
<select id="LandingCoversSize">
<option value="Size">Select a Size</option>
<option value="1">1220mm Length (L to R) x 1220mm Depth (going)</option>
<option value="2">2440mm Length (L to R) x 1220mm Depth (going)</option>
</select></br>
Cutting & Drilling Instructions:
<input name="Cutting &amp; Drilling Instructions" type="text" value="Length/Depth/Pre Drilled Holes">
</div>
<div id="4">
Quantity: <input name="Quantity" type="text" value=""></br>
Colour:
<select id="FlatPlateColour">
<option value="Colour">Select a Colour</option>
<option value="1">Black</option>
<option value="1">Yellow</option>
<option value="1">Beige</option>
<option value="1">Grey</option>
</select></br>
Size:
<select id="LandingCoversSize">
<option value="Size">Select a Size</option>
<option value="1">1220mm Length (L to R) x 1220mm Depth (going)</option>
<option value="2">2000mm Length (L to R) x 1000mm Depth (going)</option>
<option value="3">2440mm Length (L to R) x 1220mm Depth (going)</option>
</select></br>
Cutting & Drilling Instructions:
<input name="Cutting &amp; Drilling Instructions" type="text" value="Length/Depth/Pre Drilled Holes">
</div>
<div id="5">
Quantity: <input name="Quantity" type="text" value=""></br>
Colour:
<select id="50mmStripColour">
<option value="Colour">Select a Colour</option>
<option value="1">Black</option>
<option value="1">Yellow</option>
<option value="1">Beige</option>
</select></br>
Size:
<select id="50mmStripSize">
<option value="Size">Select a Size</option>
<option value="1">1000mm Length (L to R) x 50mm Depth (going)</option>
<option value="2">1500mm Length (L to R) x 50mm Depth (going)</option>
<option value="3">2000mm Length (L to R) x 50mm Depth (going)</option>
<option value="4">3000mm Length (L to R) x 50mm Depth (going)</option>
<option value="5">3600mm Length (L to R) x 50mm Depth (going)</option>
</select></br>
Cutting & Drilling Instructions:
<input name="Cutting &amp; Drilling Instructions" type="text" value="Length/Pre Drilled Holes">
</div>
<div id="6">
Quantity: <input name="Quantity" type="text" value=""></br>
Colour:
<select id="100mmStripColour">
<option value="Colour">Select a Colour</option>
<option value="1">Black</option>
<option value="1">Yellow</option>
<option value="1">Beige</option>
</select></br>
Size:
<select id="100mmStripSize">
<option value="Size">Select a Size</option>
<option value="1">1000mm Length (L to R) x 100mm Depth (going)</option>
<option value="2">1500mm Length (L to R) x 100mm Depth (going)</option>
<option value="3">2000mm Length (L to R) x 100mm Depth (going)</option>
<option value="4">3000mm Length (L to R) x 100mm Depth (going)</option>
<option value="5">3600mm Length (L to R) x 100mm Depth (going)</option>
</select></br>
Cutting & Drilling Instructions:
<input name="Cutting &amp; Drilling Instructions" type="text" value="Length/Pre Drilled     Holes">
</div>
<div id="7">
Quantity: <input name="Quantity" type="text" value=""></br>
Size:
<select id="FixingSize">
<option value="Size">Select a Size</option>
<option value="1">SureStep Clear Adhesive 310ml Cartridge</option>
<option value="2">Box of 100 Self Drilling Screws M4.8 x 25mm</option>
<option value="3">Box of 100 Wood Screws & Plugs M4.8 x 35mm</option>
<option value="4">Square Plate, Nut & Bolt 45 x 45mm M8 x 35mm</option>
</select>
</div>
        </td>
                    <td><a href="#">Remove Product</a>
        </td>
    </tr>
</table>
</form>
<button type="button" id="addTableRow">Add Another Product</button>
</body>
</html>

因为您没有将click事件绑定到新元素，并且id需要是唯一的，所以它们不能重复。

相关文章：