0
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填充第一模態窗體，如果用戶沒有放置任何東西或給出錯誤的代碼第二模式不應該顯示，但如果他/她這樣做應該顯示。
好，它的工作我欣賞，請幫助我與其餘的。當顯示模態時，用戶應該用代碼123456填充第一模態窗體，如果用戶沒有放置任何東西或給出錯誤的代碼，第二模態不應該顯示，但是如果他/她這樣做應該顯示。提前致謝。 –
我有修改所有，它現在工作完美...謝謝 –