Disable submit button form in Javascript

Question

I am a web integrator and a beginner in javascript. I tried several solutions without success. I try to deactivate the submit button as long as we have not filled all the fields in javascript. I tried several things without success could you please help me. I don't know how to target the selects and if an option is to select other than the starting one

$("#sas-feedback-feedback-form").submit(function (e) {

  e.preventDefault();
  var selectActive = $("#edit-sas-feedback-categorie-button");

if (selectActive.attr("aria-activedescendant").val() === "ui-id-1") {
  $("#edit-submit").find(':input[type="submit"]').prop('disabled')
}
});

<form action="" method="post"
    id="sas-feedback-feedback-form" accept-charset="UTF-8">
    <div>
        <div class="form-item form-type-select form-item-sas-feedback-categorie">
            <label for="edit-sas-feedback-categorie-button">Indiquer la nature de votre besoin <span
                    class="form-required" title="Ce champ est requis.">*</span></label>
                    
            <select id="edit-sas-feedback-categorie" name="sas_feedback_categorie"
                class="form-select required selectUi-processed select-error-processed" style="display: none;">
                <option value="">- Sélectionner -</option>
                <option value="Problème de connexion">Problème de connexion</option>
                <option value="Amélioration ergonomie / design de la plateforme">Amélioration ergonomie / design de la
                    plateforme</option>
                <option value="Amélioration annuaire de l’offre de santé">Amélioration annuaire de l’offre de santé
                </option>
                <option value="Signaler un problème">Signaler un problème</option>
                <option value="Autre sujet">Autre sujet</option>
            </select><span class="ui-selectmenu-button ui-widget ui-state-default ui-corner-all" tabindex="0"
                id="edit-sas-feedback-categorie-button" role="combobox" aria-expanded="false" aria-autocomplete="list"
                aria-owns="edit-sas-feedback-categorie-menu" aria-haspopup="true" style="width: 328px;"><span
                    class="ui-icon select-opener"></span><span class="ui-selectmenu-text">- Sélectionner -</span></span>
        </div>
        <div class="form-item form-type-select form-item-sas-feedback-bloquant">
            <label for="edit-sas-feedback-bloquant-button">Préciser si votre besoin est bloquant ou non <span
                    class="form-required" title="Ce champ est requis.">*</span></label>
            <select id="edit-sas-feedback-bloquant" name="sas_feedback_bloquant"
                class="form-select required selectUi-processed select-error-processed" style="display: none;">
                <option value="">- Sélectionner -</option>
                <option value="bloquant">Besoin d'assistance bloquant</option>
                <option value="non bloquant">Besoin d'assistance non bloquant</option>
            </select><span class="ui-selectmenu-button ui-widget ui-state-default ui-corner-all" tabindex="0"
                id="edit-sas-feedback-bloquant-button" role="combobox" aria-expanded="false" aria-autocomplete="list"
                aria-owns="edit-sas-feedback-bloquant-menu" aria-haspopup="true" style="width: 230px;"><span
                    class="ui-icon select-opener"></span><span class="ui-selectmenu-text">- Sélectionner -</span></span>
        </div>
        <div class="form-item form-type-textarea form-item-sas-feedback-message">
            <label for="edit-sas-feedback-message">Merci de préciser votre demande <span class="form-required"
                    title="Ce champ est requis.">*</span></label>
            <div class="form-textarea-wrapper resizable textarea-processed resizable-textarea"><textarea
                    id="edit-sas-feedback-message" name="sas_feedback_message" cols="60" rows="5"
                    class="form-textarea required input-error-processed"></textarea>
                <div class="grippie"></div>
            </div>
        </div>
        <input type="submit" id="edit-submit" name="op" value="Valider" class="form-submit input-error-processed"><input
            type="submit" id="edit-cancel" name="op" value="Retour" class="form-submit input-error-processed"><input
            type="hidden" name="form_build_id" value="form-fOAJIA9i6xXTFdodWGm4fSppnlxp91pJZSxxASSeqh8"
            class="input-error-processed">
        <input type="hidden" name="form_token" value="EmIqmBXLwmTwXvS4eeDUlc2BHteY0S80JwfPjQ_txcE"
            class="input-error-processed">
        <input type="hidden" name="form_id" value="sas_feedback_feedback_form" class="input-error-processed">
    </div>
</form>

Have u tried checking this https://stackoverflow.com/questions/5614399/disabling-submit-button-until-all-fields-have-values — clarifier, Mar 26 '21 at 13:16
Does this answer your question? [Disabling submit button until all fields have values](https://stackoverflow.com/questions/5614399/disabling-submit-button-until-all-fields-have-values) — Heretic Monkey, Mar 26 '21 at 13:19
Refer this if this might help you: https://stackoverflow.com/questions/13931688/disable-enable-submit-button-until-all-forms-have-been-filled#:~:text=To%20do%20so%2C%20just%20move,and%20call%20checkform()%3B%20once.&text=I%20just%20posted%20this%20on,Use%20the%20form%20onsubmit. — Heta Patel, Mar 26 '21 at 13:24
Refer this if this might help you: https://stackoverflow.com/questions/13931688/disable-enable-submit-button-until-all-forms-have-been-filled#:~:text=To%20do%20so%2C%20just%20move,and%20call%20checkform()%3B%20once.&text=I%20just%20posted%20this%20on,Use%20the%20form%20onsubmit. — Heta Patel, Mar 26 '21 at 13:25
All this link don't help me. i need something specific for select => option. A simple field it's pretty easy. I don't know how handle all that différent type of field — tsarre, Mar 26 '21 at 13:32
Have you tried adding a `required` attribute to the `select` element? — programmerRaj, Mar 26 '21 at 14:17

score 0 · Answer 1 · answered Mar 26 '21 at 13:42

Instead of disabling the entire button you could just flag the needed inputs as required and the user wouldn't be able to submit the form until the inputs are filled.

<input type="text" id="username" name="username" required placeholder="Please enter your username">

I hope that this helped you.

Disable submit button form in Javascript

1 Answers1