ria/app/Views/factoryMachineMasterDetailsForm.php

<?php

$machineName = $masterData['machine_name'] ?? '';
$machineType = $masterData['machine_type'] ?? '';
$energyType = $masterData['energy_type'] ?? '';

?>
<style>
    .btn-soft-primary {
        color: white;
        background-color: rgb(42, 206, 150);
        border-color: rgb(42, 206, 150);
    }

    .btn-soft-primary:hover {
        background-color: rgb(32, 176, 130);
        /* Slightly darker shade for hover */
        border-color: rgb(32, 176, 130);
    }

    .th {
        font-size: 14px;
        text-align: center !important;
    }

    .btn-custom {
        width: 100px;
        /* or any desired width */
        padding: 10px;
        /* adjust padding */
    }
</style>

<div class="content-page">
    <div class="content">
        <!-- Start Content-->
        <div class="container-fluid">
            <!-- start page title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box page-title-box-alt">
                        <h4><?= trim(explode(":", $pageTitle)[1]) ?></h4>

                        <button type="button" onclick="window.history.back();" class="btn btn-secondary">Back</button>
                    </div>
                </div>
            </div>
            <!-- end page title -->
            <!-- Form row -->
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-body">

                       

                            <form 

                                

                                action="<?= empty($masterData)
                                ? base_url('createFactoryMachineMasterDetails')
                                : base_url('updateFactoryMachineMasterDetails?id=' . $masterData['id']); ?>" method="post"
                              
                               id="factoryFormId"
                               class="form-label-left">


                                <div class="form-row">


                                    <div class="form-group col">
                                        <label for="machineName" class="col-form-label">Machine Name</label>
                                        <span class="text-danger">*</span></label>
                                        <input type="text" name="machineName" id="machineName" class="form-control"
                                            value="<?= set_value('machineName', $machineName) ?>" required>
                                    </div>

                                    <div class="form-group col">
                                        <label for="machineType" class="col-form-label">Machine Type</label>
                                        <span class="text-danger">*</span></label>
                                        <input type="text" name="machineType" id="machineType" class="form-control"
                                            value="<?= set_value('machineType', $machineType) ?>" required>
                                    </div>
                                    <div class="form-group col">
                                        <label for="energyType" class="col-form-label">Energy Type<span
                                                class="text-danger">*</span></label>
                                        <select name="energyType" id="energyType"
                                            class="form-control searchabledropdown" data-toggle="select2" required>
                                            <option value="">Select Energy Type</option>
                                            <option value="diesel" <?= $energyType == 'diesel' ? 'selected' : '' ?>> Diesel
                                            </option>
                                            <option value="petrol" <?= $energyType == 'petrol' ? 'selected' : '' ?>> Petrol
                                            </option>
                                            <option value="gas" <?= $energyType == 'gas' ? 'selected' : '' ?>> Gas</option>
                                            <option value="electric" <?= $energyType == 'electric' ? 'selected' : '' ?>>
                                                Electric</option>

                                        </select>
                                    </div>
                                </div>

                                <?php if(!empty($masterData)){ ?>
                                <input type="hidden" id="machineId" value="<?=$masterData['id']?>">
                                <?php } ?>
                                <br>

                                <!-- submit and cancel button section -->
                                <div class="form-row" align="right">

                                    <div class="form-group col">

                                        <button type="button" id="submitBtnId"
                                            class="btn btn-info waves-effect waves-light">Submit</button>
                                        &nbsp;
                                        <button type="button" class="btn btn-secondary"
                                            onclick="window.history.back();">
                                            Cancel</button>
                                    </div>

                                </div>

                            </form>

                        </div>

                    </div>
                </div>
            </div>
            <!-- end row -->
        </div> <!-- container -->

    </div> <!-- content -->
</div>


<script>

    function validate(){

       let machineName = $('#machineName').val().trim();
       let machineType = $('#machineType').val().trim();
       let energyType = $('#energyType').val().trim();

         if(machineName == ''){
              alert('Machine Name is required..!!');
              return false;
         }  

        if(machineType == ''){
            alert('Machine Type is required..!!');
            return false;
        }
        
        if(energyType == ''){
            alert('Energy Type is required..!!');
            return false;
        }

        return true;

    }

    $('#submitBtnId').on('click', function () {


        let validation = validate();

        if(!validation){
            return;
        }

        let machineName = $('#machineName').val().trim();
        let machineId   = $('#machineId').val()??'';     
        $('#loader').show();
        $.ajax({
            type: "POST",
            url: "<?php echo base_url(); ?>/checkMachineName",
            data: { machineName , machineId },
            success: function (data) {
                if (data && data.length > 0) {
                    let isActive = data[0].is_active;
                    if (isActive == 1) {
                        alert("Machine Name already existing ..!!");
                        $('#machineName').val('');
                    } else {
                        alert("Machine Name already existing in the deleted section ..!!");
                        $('#machineName').val('');
                    }
                }else{
                   
                    validation === true ? $('#factoryFormId').submit():'' ;
                }

            },
            error: function (error) {
                console.log("error ocurred..!!");
                console.error(error);
            },
            complete: function () {
                $('#loader').hide();
                console.log("ajax call is finished..!!");
            }
        })
    })
</script>




<script>

$(document).on('keydown', function(event) {
    if (event.key === 'Enter') {
        event.preventDefault(); // Prevent default Enter key behavior
    }
});

</script>