I wish to submit a form, but when the field is not entered, it should auto-point to that area. I have radio buttons. When it is not clicked, it should auto-scroll to the radio button area. When I execute my code, it is not autoscrolling to radio button but text fields are autoscrolling.
Whenever I try to submit the form, it is not autoscrolling,it only shows the error condition.How to fix this
$('.sellingFormSave').submit(function(e) {
//e.preventDefault();
$('.form_error').remove();
var count = 0;
if (!$('[name=condition]:checked').val()) {
$('.condition_radio .wrapper').after('<label class="form_error" style="color:red">Select the condition of the trucks.</label>');
count++;
}
if ($('[name=product_id]').val() == '') {
var qty = 0;
if (count > 0) {
$('[type=submit]').attr('disabled', false);
return false;
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form method="POST" action="/sellingFormSave" enctype="multipart/form-data" class="sellingFormSave" id="sellingFormSave">
<div class="row">
<div class="form-group col-md-12 condition_radio">
<div class="wrapper">
<span>Condition of the Trucks</span>
<div class="toggle_radio">
<input type="radio" class="toggle_option" id="as_is" value="as_is" name="condition" {{product.condition=='as_is' ? 'checked': ''}} {{product !='' ? 'disabled' : ''}} required>
<input type="radio" class="toggle_option" id="dot_term" value="dot" name="condition" {{product.condition=='dot' ? 'checked': ''}} {{product !='' ? 'disabled' : ''}} required>
<input type="radio" class="toggle_option" id="trade_term" value="trade" name="condition" {{product.condition=='trade' ? 'checked': ''}} {{product !='' ? 'disabled' : ''}} required>
<label for="as_is"><p>As Is - Where Is</p></label>
<label for="dot_term"><p>DOT Term</p></label>
<label for="trade_term"><p>Trade Term</p></label>
<div class="toggle_option_slider">
</div>
</div>
</div>
</div>
<div class="form-group col-md-12">
<div class="field__input-wrapper">
<input type="text" class="field__input" placeholder="Name *" name="name" value="{{product.name}}" {{product !='' ? 'disabled' : 'required'}}>
</div>
</div>
<div class="form-group col-md-4">
<div class="field__input-wrapper">
<input type="text" class="field__input" placeholder="City *" name="city" value="{{product.city}}" {{product !='' ? 'disabled' : 'required'}}>
</div>
</div>
<div class="form-group col-md-12">
<div class="field__input-wrapper field_input__confirm">
<input type="checkbox" id="confirm" name="confirm[]" value="yes" {{product.confirm !='' ? 'checked' : ''}} {{product !='' ? 'disabled' : 'required'}}>
<label for="confirm"> I certify that the above facts are true to the best of my knowledge and belief.</label>
</div>
</div>
</div>
<button type="submit" class="btn">
Save
</button>
</form>
<div class="modal fade bd-example-modal-lg" id="dot_termModal" tabindex="-1" role="dialog" aria-labelledby="dot_termModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h5>DOT Term</h5>
<p>sdgfd fdgdfb dfhfdb vchrt </p>
</div>
</div>
</div>
</div>
<!-- dot_term modal -->
<!-- trade_term modal -->
<div class="modal fade bd-example-modal-lg" id="trade_termModal" tabindex="-1" role="dialog" aria-labelledby="trade_termModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h5>Trade Term</h5>
<p>xgsd dfhdfjhfdb dhetdjn</p>
</div>
</div>
</div>
</div>
<!-- trade_term modal -->
<!-- as_is modal -->
<div class="modal fade bd-example-modal-lg" id="as_isModal" tabindex="-1" role="dialog" aria-labelledby="as_isModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h5>As Is - Where Is</h5>
<p>dfhfdh fdhdfjd.</p>
</div>
</div>
</div>
</div>
Here is a demo. I push the save button so you can see the browser will focus on the empty name.
Next time please have the code match the HTML
$('#sellingFormSave').on("submit", function(e) {
$('.form_error').remove();
if (!$('[name=condition]:checked').val()) {
$('.condition_radio .wrapper').after('<label class="form_error" style="color:red">Select the condition of the trucks.</label>');
}
if ($('[name=name]').val() == '') {
e.preventDefault()
$('[name=name]').focus();
}
});
#dummy { margin-bottom: 1000px }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form method="POST" action="/sellingFormSave" enctype="multipart/form-data" class="sellingFormSave" id="sellingFormSave">
<div class="row">
<div class="form-group col-md-12 condition_radio">
<div class="wrapper">
<span>Condition of the Trucks</span>
<div class="toggle_radio">
<input type="radio" class="toggle_option" id="as_is" value="as_is" name="condition" {{product.condition=='as_is' ? 'checked': ''}} {{product !='' ? 'disabled' : ''}} required>
<input type="radio" class="toggle_option" id="dot_term" value="dot" name="condition" {{product.condition=='dot' ? 'checked': ''}} {{product !='' ? 'disabled' : ''}} required>
<input type="radio" class="toggle_option" id="trade_term" value="trade" name="condition" {{product.condition=='trade' ? 'checked': ''}} {{product !='' ? 'disabled' : ''}} required>
<label for="as_is"><p>As Is - Where Is</p></label>
<label for="dot_term"><p>DOT Term</p></label>
<label for="trade_term"><p>Trade Term</p></label>
<div class="toggle_option_slider">
</div>
</div>
</div>
</div>
<div class="form-group col-md-12">
<div class="field__input-wrapper">
<input type="text" class="field__input" placeholder="Name *" name="name" value="" {{product !='' ? 'disabled' : 'required'}}>
</div>
</div>
<div class="form-group col-md-4">
<div class="field__input-wrapper">
<input type="text" class="field__input" placeholder="City *" name="city" value="" {{product !='' ? 'disabled' : 'required'}}>
</div>
</div>
<div class="form-group col-md-12">
<div class="field__input-wrapper field_input__confirm">
<input type="checkbox" id="confirm" name="confirm[]" value="yes" {{product.confirm !='' ? 'checked' : ''}} {{product !='' ? 'disabled' : 'required'}}>
<label for="confirm"> I certify that the above facts are true to the best of my knowledge and belief.</label>
</div>
</div>
</div>
<hr id="dummy" />
<button type="submit" class="btn">Save</button>
</form>
<div class="modal fade bd-example-modal-lg" id="dot_termModal" tabindex="-1" role="dialog" aria-labelledby="dot_termModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h5>DOT Term</h5>
<p>sdgfd fdgdfb dfhfdb vchrt </p>
</div>
</div>
</div>
</div>
<!-- dot_term modal -->
<!-- trade_term modal -->
<div class="modal fade bd-example-modal-lg" id="trade_termModal" tabindex="-1" role="dialog" aria-labelledby="trade_termModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h5>Trade Term</h5>
<p>xgsd dfhdfjhfdb dhetdjn</p>
</div>
</div>
</div>
</div>
<!-- trade_term modal -->
<!-- as_is modal -->
<div class="modal fade bd-example-modal-lg" id="as_isModal" tabindex="-1" role="dialog" aria-labelledby="as_isModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h5>As Is - Where Is</h5>
<p>dfhfdh fdhdfjd.</p>
</div>
</div>
</div>
</div>