Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Patwan's avatar

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,
    ]
    );
}
0 likes
0 replies

Please or to participate in this conversation.