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 코드로 채워야합니다. if 사용자가 두 번째 모달이 표시해서는 안되는 내용을 넣거나 잘못된 코드를 입력하지 않았지만 그/그녀는 표시해야합니다.
좋아요, 그 일에 감사드립니다. 남은 책을 친절하게 도와주세요. 모달이 표시 될 때 사용자가 아무 것도 입력하지 않거나 두 번째 모달이 표시되지 않아야하는 잘못된 코드를 입력했지만 표시되지 않으면 코드 123456으로 첫 번째 모달 폼을 채워야합니다. 미리 감사드립니다. –
나는 모두 수정해야하고 지금은 완벽하게 작동하고 있습니다 ... 감사합니다. –