I want the modal to show after the user has fill the form, But don't know how to do that. Am very new in javascript.
这是html表单
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<div align="center">
<p>
Funds Transfer
</h3>
</div>
<div class="panel-body">
<div align="center">
<p>
Bank of lgbt Funds Transfer Service makes it easy to transfer funds to other beneficiaries within the bank or to other domestic bank.<br>
To effect transfer of funds, please complete and submit the form below. Please note that all account numbers are required to be NUBAN compliant. </br>
<div id="middle">
<table class="">
<tr>
<th>
<label for="funds transfr" >*Funds Transfer Type: </label>
</th>
<td><p>
<select name="fundstransfr" maxlength="20" tabindex="108" >
<option value=" "> </option>
<option value="Internal">Internal</option>
<option value="External">External</option>
</select>
</p>
<p> </p>
</td>
<tr>
<th>
<label for= "transfr from" >*Transfer from: </label>
</th>
<td><p>
<select name="transfrfrom" maxlength="20" tabindex="108">
<option value=" "> </option>
<option value="Premier Account">Premier Account</option>
<option value="Credit Card">Credit Card</option>
</select>
</p>
<p> </p>
</td>
<td> </td>
<td> </td>
<tr>
<th>
<label for="amount">*Amount:</label> </th>
<td> <p>
<input type="number" name="amount" value="" placeholder="0.00" maxlength="30" size="12" tabindex="106">
</p>
<p> </p></td>
<td> </td>
<td> </td>
<tr>
<th>
<label for="Beneficiary Name">*Beneficiary Name:</label>
</th>
<td> <input type="text" name="BeneficiaryName" value="" maxlength="40" size ="30"tabindex="107"></td>
<td><p> </p>
<p> </p></td>
<td> </td>
<td colspan="2"> </td>
</tr>
<tr>
<th>
<label for="Beneficiary Bank" >*Beneficiary Bank:</label></th>
<td><p>
<select name="BeneficiaryBank" maxlength="20" tabindex="108">
<option value=""> </option>
<option value="">Bank of trump</option>
<option value="">Obama bank</option>
</select>
</p>
<p> </p></td>
<td> </td>
<td> </td>
<td colspan="2"> </td>
</tr>
<tr>
<th><label for="Beneficiary Accountr" >*Beneficiary Account No (NUBAN):</label></th>
<td><p>
<input type="number" name="BeneficiaryAccount" value="" placeholder="N/A" maxlength="20" tabindex="116" maxlength="20" tabindex="114"/>
</p>
<p> </p></td></form>
<tr>
<th> <label for="Payment Reference" class="btn-group-lg">
Payment Reference:</label> </th>
<td><input type="text" name="PaymentReference" value=""></td><br>
</table>
><br>
<!-- Trigger/Open The Modal -->
<button type="button" id="myBtn" class="btn btn-info" data-toggle="modal" data-target="#myModal" >Proceed</button>
这是模态窗口
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<spal class="close1">×</spal>
<h4 class="modal-title">Please enter your secure Transaction Code.</h4>
</div>
<div class="modal-body">
<label for="TransactionCode">*Transaction Code:</label>
<input type="text" name="TransactionCode" value="" maxlength="40" size ="30"tabindex="107">
<p> For Transaction Code <a href="#">click here</a></p>
</div>
<div class="modal-footer">
<button type="button" id ="myBtn2"class="btn btn-info" data-toggle="modal" data-target="#myModal2">Proceed</button>
</div>
<!-- The Modal -->
<div id="myModal2" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close2">×</span>
<h4 class="modal-title">Please enter your secure Tax verification code.</h4>
</div>
<div class="modal-body">
<label for="taxcode">*Tax Verification Code:</label>
<input type="text" name="taxcode" value="" maxlength="40" size ="30"tabindex="107">
<p> For Tax Verification Code <a href="#">click here</a></p>
</div>
<div class="modal-footer">
<button type="button" id ="myBtn2"class="btn btn-info" data-toggle="modal" data-target="#myModal2">Proceed</button>
</div>
</div>
</div>
</div>
</div>
</div>
这是脚本
<script>
// Get the modal
var modal = document.getElementById('myModal');
var modal2 = document.getElementById('myModal2');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
var btn2 = document.getElementById("myBtn2");
// Get the <span> element that closes the modal
var spal = document.getElementsByClassName("close1")[0];
var span = document.getElementsByClassName("close2")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks the button, open the modal
btn2.onclick = function() {
modal2.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
spal.onclick = function() {
modal.style.display = "none";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal2.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "block";
}
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal2) {
modal2.style.display = "block";
}
}
</script>
用户填写表单并单击“继续”按钮后，模式应弹出，但如果用户未填写所有表单，则模式不应显示，并且错误消息应提醒..当模态显示时用户应该用代码123456填充第一模态表单，如果用户没有放任何东西或给出错误的代码，第二模态不应该显示但是如果他/她这样做应该显示。
答案 0 :(得分：0)
您的表单需要在<form> ... </form>构造中自行包装，以使<input>元素正常工作，并能够提交表单数据。
您的Javascript代码需要在按钮处理程序中进行验证。如果验证失败，请显示错误提示，然后返回false以停止处理表单提交。
确保在提交表单后验证服务器上用户的条目。
你应该考虑使用类似jQuery而不是原始Javascript的东西，它会使例如选择表单元素变得更容易。
答案 1 :(得分：0)
为表单的每个字段添加 id 属性，并使用相同的值作为name属性。
process_image()