CODEWITHSUNDEEP
javascripthtmldropdown
Hikari
Hikari

Reputation: 53

Disable button submit until dropdownlist been selected

Here, I have dropdownlist and button submit. How to disable button submit before user select the dropdownlist? If the user has select one of dropdownlist, the button can be able to click. Below are my code.

Dropdown

validate();
$('input,select').change(validate);
$("#dropdown").kendoDropDownList({
    optionLabel: "- Select Position -",
    dataTextField: "functionName",
    dataValueField: "hrsPositionID",
    dataSource: {
    transport:{
        read: {
        url:  "./testjson.php",
        type: "POST",
        data: function() {
                return { 
                    method: "getDropdown",
                }
            }
        },
    },
    },
    change: function(e){
        console.log(this.value());
        // $('#AccountingTree').data('kendoTreeView').homogeneous.read();
        homogeneous1.read();
        homogeneous2.read();
        homogeneous3.read();
        homogeneous4.read();
        homogeneous5.read();
        homogeneous6.read();
        homogeneous7.read();
        homogeneous8.read();
        homogeneous9.read();
        homogeneous10.read();
        homogeneous11.read();
        homogeneous12.read();
        homogeneous13.read();
        homogeneous14.read();
    }
}).data('kendoDropDownList');
dropdownlist = $("#dropdown").data("kendoDropDownList");

HTML button submit

<button id="primaryTextButton" type="button" value="submit"  class="k-primary" style="float:right; padding: 5px 20px; border-radius: 4px;">Submit</button>

JavaScript Submit Button

//AJAX call for button
    $("#primaryTextButton").kendoButton();
    var button = $("#primaryTextButton").data("kendoButton");
    button.bind("click", function(e) {

    var test = $("#dropdown").val()

    $.ajax({
        url: "../DesignationProgramTemplate/testing.php",
        type: "post",
            data: {'id':test,'progid':array},
                success: function (respond) {
                // you will get response from your php page (what you echo or print)                 
                //kendo.alert('Success'); // alert notification
                if(respond === "SUCCESS")
                {
                    kendo.alert("Data saved"); 
                }else
                {   
                    kendo.confirm("Update the data?")
                    .done(function(){
                        $.ajax({
                        type: "POST",
                        url: "del.php",
                        data: {'id':test,'progid':array},
                        success: function(){
                            kendo.alert("Data updated");
                        }
                    });
                    });
                }   
                },
        });
    });
function validate(e){
    var validation = true;
        $('input , select').each(function(){ 
        ($(this).val().length>0)
        { validation = false;}
        });   
    if ( validation ) {
    $('#primaryTextButton').prop('disabled', true);
    } else {
    $('#primaryTextButton').prop('disabled', false);
    }
}

I have used the function validate(e) but do not function in my javaScript. Is there any correction in my code? Or other opinion to solve it?

Upvotes: 1

Views: 323

Answers (2)

Christian Carrillo
Christian Carrillo

Reputation: 2761

Yo should use this logic:

const $dropdown = $('#dropdown')
const $primaryTextButton = $('#primaryTextButton')

$dropdown.on('change', function() {
  $primaryTextButton.prop('disabled', false)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="dropdown">
  <option disabled hidden selected>Select option</option>
  <option value="foo">foo</option>
  <option value="bar">bar</option>
</select>

<button disabled id="primaryTextButton" type="button" value="submit"  class="k-primary" style="float:right; padding: 5px 20px; border-radius: 4px;">Submit</button>

Upvotes: 1

Francis G
Francis G

Reputation: 1088

If you are already using a jquery why not bind a action listener to the dropdownlist, get the value of the dropdownlist and check if it selected. But first make the button disabled then if the dropdownlist change make the button enabled, like this:

$("#primaryTextButton").prop('disabled', true);
$("#dropdown").on("change", function(){
    $("#primaryTextButton").prop('disabled', false);
})

You can tweek this a little more, for example check if the selected item is reverted back to a default and make the button disabled again. Hope this helps

Upvotes: 1

Related Questions