Question

美好的一天！

我的表单有我的按钮的javascript函数，用于从表中添加行并重置表单中的文本字段。

在我的添加按钮中，我有一个递增变量rowCount，用于计算行数。它运作良好，并按我的预期工作。当我把它放在<form></form>标记内时，它会停留在2，不会增加，也不会添加任何行。

这是我的代码，供我们参考，也可以调试。提前谢谢！

＆＃13;

var rowCount = 1;

function addRow()	{
	var table = document.getElementById('tblOrder');
	rowCount = rowCount + 1;
	var row = table.insertRow(rowCount);
	var cell0 = row.insertCell(0);
	var cell1 = row.insertCell(1);
	var cell2 = row.insertCell(2);
	var cell3 = row.insertCell(3);
	var cell4 = row.insertCell(4);
	var cell5 = row.insertCell(5);
	
	cell0.innerHTML = "<input type='text'>";
	cell1.innerHTML = "<input type='number'>";
	cell2.innerHTML = "<input type='text'>";
	cell3.innerHTML = "<input type='text'>";
	cell4.innerHTML = "<input type='text'>";
	cell5.innerHTML = "<input type='text'>";
	alert(rowCount)
}

function resetForm()	{
	document.getElementById('orderForm').reset();
	alert('All cleared!')
}

＆＃13;

body	{
	font-family: Calibri;
	font-weight: bold;
}

#main	{
	width: 90%;
	border: 1px solid black;
	margin: auto;
	position: relative;
	padding-bottom: 10px;
}

#mainTitle	{
	text-align: center;
	text-decoration: underline;
	/* font-weight: bold; */
	font-size: 36px;
	margin-top: 20px;
	margin-bottom: 20px;
}

#cust, #prod	{
	width: 90%;
	position: relative;
	margin: auto;
	border: 1px solid black;
	padding: 20px;
}

#cust	{
	margin-bottom: 20px;
}

#prod	{
	margin-bottom: 10px;
}

#custTitle, #prodTitle	{
	color: blue;
	font-size: 25px;
	/* font-weight: bold; */
	text-decoration: underline;
	margin-bottom: 20px;
	/* position: relative; */
}

#cust p	{
	display: block;
}

#cust input	{
	display: inline;
}

#right	{
	position: absolute;
	top: 0;
	right: 0;
	padding: 10px;
	/* border: 1px solid black; */
}

#right p	{
	right: 0;
}

#tblOrder		{
	width: 100%;
	border: 1px solid black;
}

#tblOrder thead	{
	background-color: darkgreen;
	color: white;
	font-size: 18px;
}

#tblOrder td	{
	text-align: center;
	padding: 5px;
}

#inp1	{
	width: 5%;
}

#inp2	{
	width: 10%;
}

#inp3, #inp5, #inp6	{
	width: 15%;
}

#inp4	{
	width: 40%;
}

#tblOrder tr td input	{
	width: 95%;
}

#add	{
	color: blue;
	font-weight: bold;
	background-color: white;
	border: 1px solid white;
	margin-top: 10px;
}

#foot	{
	position: relative;
	width: 90%;
	margin: auto;
	/* border: 1px solid black; */
}

#buttons	{
	position: relative;
	left: 0;
	/* display: inline; */
}

#total	{
	position: absolute;
	right: 0;
	/* display: inline; */
}

＆＃13;

<!DOCTYPE html>
<html>
	<head>
		<title>Forms</title>
		<link type='text/css' rel='stylesheet' href='style.css'>
		<script type='text/javascript' src='script.js'></script>
	</head>
	<body>
		<div id='main'>
			<div id='mainTitle'>
				Order Form
			</div>
			<form id='orderForm'>
				<div id='cust'>
					<div id='custTitle'>
						Customer
					</div>
					<div id='left'>
						<p>Customer Name: <input type='text' size=80></p>
						<p>Address: <input type='text' size=100></p>
						<p>Contact Name: <input type='text' size=80></p>
						<p>Phone: <input type='text' size=15>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						Mobile: <input type='text' size=15></p>
						<p>E-mail Address: <input type='text' size=30>@<input type='text' size=10>.com</p>
					</div>
					<div id='right'>
						<p>Order Date: <input type='text' placeholder='mm/dd/yyyy' size=11></p>
						<p>Order Number: <input type='text' size=5></p>
					</div>
				</div>
				<div id='prod'>
					<div id='prodTitle'>
						Products to Order
					</div>
					<div id='order'>
						<table id='tblOrder'>
							<thead>
								<td id='inp1'>Unit</td>
								<td id='inp2'>Quantity</td>
								<td id='inp3'>Product Code</td>
								<td id='inp4'>Description</td>
								<td id='inp5'>Unit Price</td>
								<td id='inp6'>Total Price</td>
							</thead>
							<tbody>
								<tr>
									<td><input type='text'></td>
									<td><input type='number'></td>
									<td><input type='text'></td>
									<td><input type='text'></td>
									<td><input type='text'></td>
									<td><input type='text'></td>
								</tr>
							</tbody>
						</table>
						<button id='add' onclick='addRow()'>+Row</button>
					</div>
				</div>
				<div id='foot'>
					<div id='total'>
						Total: <input type='text' disabled>
					</div>
					<div id='buttons'>
						<button>Submit</button>
						<button onclick='resetForm()'>Reset</button>
					</div>
				</div>
			</form>
		</div>
	</body>
</html>

＆＃13;

Answer 1

如果按钮放在表单中，默认情况下它们将成为提交按钮，这意味着它们在单击时提交表单。如果表单没有指定操作，则会将其提交到与页面相同的URL，从而导致页面被刷新。这就是你的情况。

要阻止按钮提交表单，请将其type设置为通用按钮而不是提交按钮：

<button type="button"></button>

HTML表单重置我的Javascript变量

1 个答案: