我只能获取文本输入值 1 次
我有一个有 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>
holdtom2回答
-
精慕HU
我不知道为什么你没有得到任何值，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> -
翻翻过去那场雪
通过捕获 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>
随时随地看视频慕课网APP
相关分类
JavaScript