For the past 48 hours, I've been grappling with an issue on my HTML page that features four divs. Each div contains three input fields and a button. The problem arises when a user leaves a text box empty upon submitting - instead of staying in the same div, they are redirected to a different one. How can I resolve this challenge and also display a warning message to prevent users from proceeding if any textbox is left blank?
Here's the code snippet:
<div class="col-sm-12">
<label> <i class="fa fa-paper-plane px-2"> </i> Send To Address</label>
<div class="form-group">
<input type="text" id="a1" class="form-control" placeholder="Address">
</div>
</div>
<div class="col-sm-12">
<label style="width: 100% !important"> <i class="fa fa-money px-2"> </i> Amount <span class="pull-right"> Max Amount: --- </span></label>
<div class="form-group">
<input type="text" id="x1"class="form-control" placeholder="Enter the Amount">
</div>
</div>
<div class="col-sm-12 text-right">
<span class="btn btn-sm btn-info btn1" id="b1"> <small> Continue </small> </span>
</div>
</div>
</div>
<div class="tab-pane t2" id="account">
<h5 class="info-text"> </h5>
<div class="row justify-content-center">
<div class="col-sm-12">
<label> <i class="fa fa-paper-plane px-2"> </i> Send To Address</label>
<div class="form-group">
<input type="text" class="form-control" value="Address" disabled>
</div>
</div>
<div class="col-sm-12">
<label style="width: 100% !important"> <i class="fa fa-money px-2"> </i> Amount <span class="pull-right"> Max Amount: --- </span></label>
<div class="form-group">
<input type="text" class="form-control" value="Amount Entered" disabled>
</div>
</div>
The jQuery script for handling this scenario:
$(document).ready(function(){
$('#b1').click(function(){
if ($('input#a1#x1').val() == ""){
alert('Please complete the field');
}
});
});
Despite my attempts, all solutions so far only display the warning without halting the redirection. Your assistance would be greatly appreciated!