May 1, 2019
0
Level 1
Validating one value from select dropdown input field in PHP Laravel 5.4
Am working on a Laravel application whereby am capturing some input fields consisting of dropdown fields on some cards whereby I submit them to the backend via AJAX.
On the backend I want to create a validation logic whereby there should be only one husband or wife from the select dropdown inputs captured on the frontend. This means the user should only select only one husband or wife from the select dropdown on the cards on the frontend.
Form
<form method="POST" action="#" id="phase3" accept-charset="UTF-8">
<!-- CSRF TOKEN-->
<input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">
<!-- Card 1-->
<div class="col-md-4 col-sm-12 phonecard3">
<div class="innerDiv">
<!-- Gender -->
<div class="row">
<label class="fm-input"> Relation :</label>
<select class="fm-input otherMenu" id="relation1" required>
<option value="Husband"> Husband </option>
<option value="Wife"> Wife </option>
<option value="Son"> Son </option>
<option value="Daughter"> Daughter </option>
</select>
</div>
<!-- END -->
</div>
</div>
<!-- End card 1-->
<!-- Card 2-->
<div class="col-md-4 col-sm-12 phonecard3">
<div class="innerDiv">
<!-- Gender -->
<div class="row">
<label class="fm-input"> Relation :</label>
<select class="fm-input otherMenu" id="relation2" required>
<option value="Husband"> Husband </option>
<option value="Wife"> Wife </option>
<option value="Son"> Son </option>
<option value="Daughter"> Daughter </option>
</select>
</div>
<!-- END -->
</div>
</div>
<!-- End card 2-->
<!-- Card 3-->
<div class="col-md-4 col-sm-12 phonecard3">
<div class="innerDiv">
<!-- Gender -->
<div class="row">
<label class="fm-input"> Relation :</label>
<select class="fm-input otherMenu" id="relation3" required>
<option value="Husband"> Husband </option>
<option value="Wife"> Wife </option>
<option value="Son"> Son </option>
<option value="Daughter"> Daughter </option>
</select>
</div>
<!-- END -->
</div>
</div>
<!-- End card 3-->
<div class="row">
<div class="col-md-6 col-md-offset-3">
<button class="btn btn-lg lov1" type="submit"> Save & Create for Spouse & Children <i class="fa fa-check-circle" ></i></button>
</div>
</div>
</form>
AJAX code to submit form details
$("#phase3").submit(function( event ) {
event.preventDefault();
//Fetch data
var token = $('#token').val();
var relation1 = $("#relation1").val();
var relation2 = $("#relation2").val();
var relation3 = $("#relation3").val();
//Store in a JS object
var type ={
'token': token,
//Relations
'relation1' : relation1,
'relation2' : relation2,
'relation3' : relation3
};
//console.log(type);
$.ajax({
type: "POST",
url: "submitPhase3",
data:JSON.stringify(type),
contentType: 'application/json',
dataType: "json",
success: function(response){
//console.log(response);
},
//Alert errors from backend
error: function(data) {
//console.log(data);
}
});
});
Backend PHP function to handle request
public function submitPhase3(Request $request){
dd($request->all());
$validation = $this->validate($request, [
//Relations
'relation1'=> isset($request->relation1) ? $request->relation1 : null,
'relation2'=> isset($request->relation2) ? $request->relation2 : null,
'relation3'=> isset($request->relation3) ? $request->relation3 : null,
]
);
}
Please or to participate in this conversation.