我有一个有 4 个输入的表格。当用户单击按钮时，我需要获取此表单输入的值。我使用以下代码。但仅在页面加载后第一次返回文本输入的值。下拉输入的值第二次正确返回，但该函数对于文本输入值返回 null。<html> <head> <meta charset="utf-8"> <!-- برای فارسی نویسی حتما این تگ وارد شود --> </head> <body> <form name="insuranceData"> total: <input name="totalPrice" type="text" size="10"/> <br/> <br/> prePayment: <input name="prePayment" type="text" size="10"/> <br/> <br/> peyments number: <select name="numberOfPeyments"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> <br/> <br/> <input name="paymentsCalculat" value="محاسبه اقساط" type="button" size="10" onClick="checkInputs();"/> <div id="paymentsTableDiv" style="display:none"> <table width="40%" align="center" dir="rtl" id="paymentsTable" style="text-align:center;"> <tr bgcolor="red"><th>شماره قسط</th><th>مبلغ قسط</th><th>تاریخ سررسید</th><th>توضیحات</th></tr> </table> </div> </form> <script type="text/javascript"> function getFormValues(){ var numberOfPeyments = document.forms["insuranceData"]["numberOfPeyments"].value; var totalPrice = document.forms["insuranceData"]["totalPrice"].value; var prePayment = document.forms["insuranceData"]["prePayment"].value; return [numberOfPeyments,totalPrice,prePayment,]; } } </script> </body></html>
2 回答
精慕HU
TA贡献1845条经验 获得超8个赞
我不知道为什么你没有得到任何值，document.forms但你可以通过使用来解决这个问题document.querySelector。
看看下面
function getFormValues() {
var numberOfPeyments = document.querySelector("[name=insuranceData] [name=numberOfPeyments]").value;
var totalPrice = document.querySelector("[name=insuranceData] [name=totalPrice]").value
var prePayment = document.querySelector("[name=insuranceData] [name=prePayment]").value
console.clear();
console.log([numberOfPeyments, totalPrice, prePayment, ])
return [numberOfPeyments, totalPrice, prePayment, ];
}
function checkInputs() {
insuranceParams = getFormValues();
if (insuranceParams[1] == "") {
alert("مبلغ کل حق بیمه را وارد نمایید ");
} else if (insuranceParams[2] == "") {
alert("مبلغ پیش پرداخت را وارد نمایید ");
} else {
if (parseInt(insuranceParams[1]) > parseInt(insuranceParams[2])) {
createPaymentsTable();
} else {
alert("مبلغ پیش پرداخت نباید از مبلغ کل حق بیمه بیشتر باشد!");
}
}
}
function createPaymentsTable() {
var insuranceParams = getFormValues();
var remindeValue = insuranceParams[1] - insuranceParams[2];
var ValueOfAnyPayments = remindeValue / insuranceParams[0];
document.getElementById("paymentsTableDiv").style.display = 'block';
for (i = 1; i <= parseInt(insuranceParams[0]); i++) {
var newRow = document.getElementById('paymentsTable').insertRow();
newRow.innerHTML = "<td>" + i + "</td>" +
"<td><input id='DEMO' dir='ltr' name='prePayment' type='text' size='10' value='" + ValueOfAnyPayments + "'/></td>" +
"<td>" + i + "</td>" +
"<td><input dir='rtl' name='prePayment' type='text' size='10'/></td>";
}
}
<form name="insuranceData">
total: <input name="totalPrice" type="text" size="10" />
<br/>
<br/> prePayment: <input name="prePayment" type="text" size="10" />
<br/>
<br/> peyments number:
<select name="numberOfPeyments">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<br/>
<br/>
<input name="paymentsCalculat" value="محاسبه اقساط" type="button" size="10" onClick="checkInputs();" />
<div id="paymentsTableDiv" style="display:none">
<table width="40%" align="center" dir="rtl" id="paymentsTable" style="text-align:center;">
<tr bgcolor="red">
<th>شماره قسط</th>
<th>مبلغ قسط</th>
<th>تاریخ سررسید</th>
<th>توضیحات</th>
</tr>
</table>
</div>
</form>
翻翻过去那场雪
TA贡献2065条经验 获得超13个赞
通过捕获 elements document.getElementById("myForm").elements;，您可以读取表单的值。也不需要getFormValues()从函数中第二次调用函数createPaymentsTable()。getFormValues()您可以在从函数调用时传递值checkInputs()。看看下面的片段：
<html>
<head>
<meta charset="utf-8"> <!-- برای فارسی نویسی حتما این تگ وارد شود -->
</head>
<body>
<form name="insuranceData" id="myForm">
total: <input name="totalPrice" type="text" size="10" />
<br />
<br />
prePayment: <input name="prePayment" type="text" size="10" />
<br />
<br />
peyments number: <select name="numberOfPeyments">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<br />
<br />
<input name="paymentsCalculat" value="محاسبه اقساط" type="button" size="10" onClick="checkInputs();" />
<div id="paymentsTableDiv" style="display:none">
<table width="40%" align="center" dir="rtl" id="paymentsTable" style="text-align:center;">
<tr bgcolor="red">
<th>شماره قسط</th>
<th>مبلغ قسط</th>
<th>تاریخ سررسید</th>
<th>توضیحات</th>
</tr>
</table>
</div>
</form>
<script type="text/javascript">
function getFormValues() {
var fields = document.getElementById("myForm").elements;
var numberOfPeyments = fields[0].value;
var totalPrice = fields[1].value;
var prePayment = fields[2].value;
console.log(numberOfPeyments, totalPrice, prePayment);
return [numberOfPeyments, totalPrice, prePayment];
}
function checkInputs() {
var insuranceParams = getFormValues();
if (insuranceParams[1] == "") {
alert("مبلغ کل حق بیمه را وارد نمایید ");
} else if (insuranceParams[2] == "") {
alert("مبلغ پیش پرداخت را وارد نمایید ");
} else {
if (parseInt(insuranceParams[1]) > parseInt(insuranceParams[2])) {
createPaymentsTable(insuranceParams);
} else {
alert("مبلغ پیش پرداخت نباید از مبلغ کل حق بیمه بیشتر باشد!");
}
}
}
function createPaymentsTable(insuranceParams) {
// var insuranceParams = getFormValues();
var remindeValue = insuranceParams[1] - insuranceParams[2];
var ValueOfAnyPayments = remindeValue / insuranceParams[0];
document.getElementById("paymentsTableDiv").style.display = 'block';
for (i = 1; i <= parseInt(insuranceParams[0]); i++) {
var newRow = document.getElementById('paymentsTable').insertRow();
newRow.innerHTML = "<td>" + i + "</td>" +
"<td><input id='DEMO' dir='ltr' name='prePayment' type='text' size='10' value='" + ValueOfAnyPayments + "'/></td>" +
"<td>" + i + "</td>" +
"<td><input dir='rtl' name='prePayment' type='text' size='10'/></td>";
}
}
</script>
</body>
</html>
添加回答
举报
0/150
提交
取消