How to disable Continue button till user fill all required field Hi I have form contains next bottom.
This is my form:
<form method="POST" action="{{route('storing')}}" id=cv enctype=multipart/form-data style="overflow: hidden;" id=cv>
@csrf
<div class="tab-content">
<div class="tab-pane active" role="tabpanel" id="step1">
<h3 class="title pb-4">Personal Information</h3>
<div class="row ">
<div class="col-6">
<strong>Full Name <span class=star>*</span>:</strong>
<input class="form-control pb-3 pt-2 mt-1" placeholder="{{$user->name}}" value="{{ old('FName') }}" required maxlength=125 name=FName type="text" style="padding-top: 4px;padding: inherit;">
</div>
<div class="col-6">
<strong>Photo<aspan class='photo';> Size < 2Mb & Dimensions < (100-1000)px × (100-1000)px</aspan></strong>
<input class="form-control mt-1" name="img" type="file" style="padding-top: 4px;" value="{{ old('img') }}">
</div>
</div>
<div class="row mt-3">
<div class="col-4">
<strong>Nationality <span class=star>*</span>:</strong>
<select name="Nationality" class="custom-select1" required>
@if (old('Nationality') == null)
<option slected value="">select</option>
@else
<option slected value="{{ old('Nationality') }}">{{ old('Nationality') }}</option>
@endif
@foreach(\App\Models\Nationality::all() as $nation)
<option value="{{$nation->name}}">{{$nation->name}} </option>
@endforeach
</select>
</div>
<div class="col-4">
<strong>Residence <span class=star>*</span>:</strong>
<select name="Residence" class="custom-select1"style="overflow:auto;" required>
@if (old('Residence') == null)
<option slected value="">select</option>
@else
<option slected value="{{ old('Residence') }}">{{ old('Residence') }}</option>
@endif
@foreach(\App\Models\Location::all() as $locations)
<option value="{{$locations->name}}">{{$locations->name}}</option>
@endforeach
</select>
</div>
<div class="col-4">
<strong> <label class=mb-0 for="inputZip">Date of Birth <span class=star>*</span>:</label></strong>
<input type="date" class="form-control" name="DOB" placeholder="MM/DD/YYYY" maxlength='10' value="{{ old('DOB') }}"required>
</div>
</div>
<div class="row ">
<div class="col-6 pt-2">
<strong>Objective :</strong>
</div>
<div class="col-6 pt-2">
<strong>Gender <span class=star>*</span>:</strong>
</div>
</div>
<div class="row mt-3 ">
<div class="col-6">
<input @if (old('gender') == 'Female') checked @endif type="radio" id="html" name="gender" value="Female" >
<label for="html">Female</label><br>
<input @if (old('gender') == 'Male') checked @endif type="radio" id="css" name="gender" value="Male" >
<label for="css">Male</label><br>
</div>
<div class=col-6>
<textarea placeholder="Enter objective Description here..." rows="4" cols="50" value="{{ old('goal') }}" name="goal" form=cv maxlength='2000' class=form-control >{{ old('goal') }}
</textarea >
</div>
</div>
<ul class="list-inline pull-right m-4">
<li><button type="button" class="btn btn-primary next-step1">Continue</button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="step2">
<h3 class="title pb-4">Educational Details</h3>
<div class=row>
<div class=col-2>
<strong>Education Level <span class=star>*</span>:</strong>
</div>
<div class=col-2>
<input type="radio" @if (old('EducationLevel') == 'High School') checked @endif id="EducationLevel1" name="EducationLevel" value="High School"value="{{ old('EducationLevel') }}">
<label for="EducationLevel1">High School </label>
</div>
<div class=col-2>
<input type="radio" @if (old('EducationLevel') == 'BA/BSc') checked @endif id="EducationLevel2" name="EducationLevel" value="BA/BSc" >
<label for="EducationLevel2">BA/BSc</label>
</div>
<div class=col-2>
<input type="radio" id="EducationLevel3" name="EducationLevel" @if (old('EducationLevel') == 'MA') checked @endif value="MA">
<label for="EducationLevel3">MA</label>
</div>
<div class=col-2>
<input type="radio" @if (old('EducationLevel') == 'PhD') checked @endif id="EducationLevel4" name="EducationLevel" value="PhD">
<label for="EducationLevel4">PhD</label>
</div>
<div class=col-2>
<input type="radio" @if (old('EducationLevel') == 'other') checked @endif id="EducationLevel5" name="EducationLevel" value="other">
<label for="EducationLevel5">Other</label>
</div>
</div>
<div class="row mt-3">
<div class=col-4>
<strong>Major Filed <span class=star>*</span>:</strong>
</div>
<div class=col-4>
<strong>Major <span class=star>*</span>:</strong>
</div>
<div class=col-4>
<strong>University <span class=star>*</span>:</strong>
</div>
</div>
<div class="row ">
<div class=col-4>
<select name="MajorField" class="custom-select1">
@if (old('MajorField') == null)
<option slected value="">select</option>
@else
<option slected value="{{ old('MajorField') }}">{{ old('MajorField') }}</option>
@endif
@foreach(\App\Models\Major::all() as $catagories)
<option value="{{$catagories->name}}">{{$catagories->name}}</option>
@endforeach
</select>
</div>
<div class=col-4>
<input class="form-control pb-3" placeholder="Enter the your major here" value="{{ old('Major') }}" maxlength='125' name=Major type="text"required>
</div>
<div class=col-4>
<input class="form-control pb-3" value="{{ old('university') }}" placeholder="Enter the name of your university here" maxlength='125' required name=university type="text">
</div>
</div>
<div class="row mt-3">
<div class=col-4>
<strong>Country Graduated from <span class=star>*</span>:</strong>
</div>
<div class=col-4>
<strong>GPA <span class=star>*</span>:</strong>
</div>
<div class=col-4>
<strong>Professional Certifications:</strong>
</div>
</div>
<div class="row ">
<div class=col-4>
<input class="form-control pb-3" name="GradCounrty" type="text" value="{{ old('GradCounrty') }}" placeholder=Oman style="padding-top: 4px;padding: inherit;"required>
</div>
<div class=col-4>
<input class="form-control pb-3" value="{{ old('GPA') }}" placeholder="Enter your GPA here" require maxlength='100' name=GPA type="text"required>
</div>
<div class=col-4>
<input class="form-control pb-3" value="{{ old('ProfCertifications') }}"placeholder="Enter your certificates here" maxlength='2000' name=ProfCertifications type="text">
</div>
</div>
<ul class="list-inline pull-right">
<li><button type="button" class="btn btn-default prev-step1 m-4">Previous</button></li>
<li><button type="button" class="btn btn-primary next-step1 m-4">Continue</button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="step3">
<h3 class="title pb-4"> Work Expirience</h3>
<div class=row>
<div class=col-3>
<strong>Employment Status <span class=star>*</span>:</strong>
</div>
<div class=col-3>
<input type="radio" id="EmploymentStatus1" name="EmploymentStatus" value="employed" @if (old('EmploymentStatus') == 'employed') checked @endif>
<label for="EmploymentStatus1">Employed</label><br>
</div>
<div class=col-3>
<input type="radio" id="EmploymentStatus2" name="EmploymentStatus" value="unemployed" @if (old('EmploymentStatus') == 'unemployed') checked @endif>
<label for="EmploymentStatus2">Unemployed</label><br>
</div>
<div class=col-3>
<input type="radio" id="EmploymentStatus3" name="EmploymentStatus" value="Other" @if (old('EmploymentStatus') == 'Other') checked @endif>
<label for="EmploymentStatus3">Other</label><br><br>
</div>
</div>
<div class="row mt-3">
<div class=col-4>
<strong>Previous Job Title:</strong>
</div>
<div class=col-4>
<strong> <label for="inputZip">Previous Job Start Date:</label></strong>
</div>
<div class=col-4>
<strong> <label for="inputZip">Previous Job End Date:</label></strong>
</div>
</div>
<div class="row">
<div class=col-4>
<input class="form-control pb-3" placeholder="Enter your last position here" maxlength=100 value="{{ old('PrevJobTitle') }}"name=PrevJobTitle type="text" >
</div>
<div class=col-4>
<input type="date" class="form-control pb-3"value="{{ old('PrevJobStart') }}" name="PrevJobStart" maxlength='10' >
</div>
<div class=col-4>
<input type="date" class="form-control pb-3" value="{{ old('PrefJobEnd') }}"name="PrefJobEnd" maxlength='10' >
</div>
</div>
<div class="row mt-3 ">
<div class=col-4>
<strong>Experience Years <span class=star>*</span>:</strong>
<select name="WorkExp" id="WorkExp"class="custom-select1" required>
@if (old('WorkExp') == null)
<option slected value="">select</option>
@else
<option slected value="{{ old('WorkExp') }}">{{ old('WorkExp') }}</option>
@endif
<option value="Fresh">Fresh</option>
<option value="(1-5)">(1-5)</option>
<option value="5-10">(5-10)</option>
<option value="10-15">(10-15)</option>
<option value="15-20">(15-20)</option>
<option value="25+">25+</option>
</select>
</div>
<div class=col-4>
<strong>Upload CV <span class=star>*</span>:</strong><aspan class='photo';> Size < 2Mb</aspan></strong>
<input type="file" class="form-control pb-3"value="{{ old('fileCV') }}" name="fileCV" style=padding-top:4px; required>
</div>
<div class=col-4>
<strong>Additional Document:</strong><aspan class='photo';> Size < 2Mb</aspan></strong>
<input type="file" class="form-control pb-3"value="{{ old('additiondoucument') }}" name="AdditionDoucument" style=padding-top:4px; >
</div>
</div>
<div class="row mt-3 ">
<div class=col-12>
<strong>Cover Letter:</strong>
<textarea placeholder="Enter coverltter " rows="4" cols="50" value="{{ old('coverltter') }}" name="coverltter" form=cv maxlength='3000' class=form-control >{{ old('coverltter') }}
</textarea>
</div>
</div>
<ul class="list-inline pull-right">
<li><button type="button" class="btn btn-default prev-step1 m-4">Previous</button></li>
<li><button type="button" class="btn btn-primary next-step1 m-4">Continue</button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="complete">
<h3 class="title pb-4">Other</h3>
<div class="row mt-3">
<div class="col-6">
<strong>Email <span class=star>*</span>:</strong>
<input type="email" name=email placeholder="{{$user->email}}" maxlength='100' value="{{ old('email') }}" class="form-control pb-3"required>
</div>
<div class="col-6">
<strong>Phone Number <span class=star>*</span>:</strong>
<input type="tel"value="{{ old('Phone') }}" name=Phone maxlength='20' placeholder="Enter your phone number here" class="form-control pb-3 " required>
</div>
</div>
<div class="row mt-3">
<div class="col-12">
<strong>Any web page to support your application:</strong>
</div>
</div>
<div class="row mt-3">
<div class="col-12">
<input type="url" name=web value="{{ old('web') }}" placeholder="'http://" class="form-control pb-3" maxlength=500>
</div>
</div>
<div class=text-right>
<ul class="list-inline pull-right text-right">
<li><button type="button" class="btn btn-default prev-step1 m-4">Previous</button></li>
<li><button type="submit" class="btn btn-primary next-step1 m-4">submit</button></li>
</ul>
</div>
</div>
</form>
this form looks like this:
https://i.stack.imgur.com/xyGd8.jpg
So, when user press Continue bottom it goes to next page without checking whether the user has filled all the required filed or not, is there any easy way by JavaScript to handle this?
I mean showing the "Continue " button of when user fill all required field or disable the Continue till the user fill all required field
how bout this:
code in pure javascript
<html>
<body>
<input class="input" type="text" placeholder="fill me">
<button class="button">Click Me</button>
</body>
<script>
let input = document.querySelector(".input");
let button = document.querySelector(".button");
button.disabled = true;
input.addEventListener("change", stateHandle);
function stateHandle() {
if(document.querySelector(".input").value === "") {
button.disabled = true;
} else {
button.disabled = false;
}
}
</script>
</html>
JQUERY CODE:
<html>
<head>
<title>jQuery - Enable or Disable Button</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body> Name:
<input type="text" id="tbName" />
<input type="submit" id="submit" disabled="disabled" /> </body>
<script>
$(document).ready(function() {
$('#tbName').on('input change', function() {
if($(this).val() != '') {
$('#submit').prop('disabled', false);
} else {
$('#submit').prop('disabled', true);
}
});
});
</script>
</html>
Please sign in or create an account to participate in this conversation.
