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.
これはこれはこれは、スクリプトが、私はモーダル表示する
にある<!-- 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>
モーダルウィンドウで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>
です
<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というコードを入力します。ユーザーは2番目のモーダルが表示されるべきではない何かを置いたり間違ったコードを与えたりしませんでしたが、彼/彼女はそれを表示する必要があります。
良い、その作業私は感謝し、親切に残りのものと私を助けてください。モーダルが表示されたら、ユーザーは2番目のモーダルが表示されるべきではないが何かを置いたり、間違ったコードを与えなかった場合、123456コードで1番目のモーダルフォームを記入する必要があります。前もって感謝します。 –
私はすべて修正しており、今は完璧に動作しています...ありがとう –