Enable button when select option in PHP using Javascript

Question

I tried some code from other topics to resolve my problem here but I still don't manage to get what I want..

I need a button to goes enable when the user select one of the item in a select option and goes to disable when the users re-select the default select..

    <script text="text/javascript">

$(document).ready(function(){
    $('#select_resa').change(function(){
        var val = $('#select_resa').val();
        alert(val);

        if (val == '') {
            $('#supprimer_resa_button').attr('disabled', 'disabled');
        }else{
            $('#supprimer_resa_button').removeAttr('disabled');
        }
    });
});
</script>

<form method="post" action="modif_resa.php?" id="modif_resa">
    <h2>Modifier/Supprimer un reservation</h2>
    <?php if(isset($erreur)) echo '<p style="font-style:italic;font-size:0.8em;text-align:center;color:red;margin-bottom:5px;">'.$erreur.'</p>'; ?>



    <label for="salle"><strong>Choisissez une reservation</strong></label>

    <select id="select_resa" name="select_resa">
        <option value="" id="select" name="select">--Selectionnez--</option>
        <option value=""></option>
        <option value="2">salut</option>
        <?php
        if(!empty($liste_reservations)){
            for($i=0;$i<count($liste_reservations);$i++){
                echo '<option "title="'.$liste_reservations[$i]['RS_NOM'].'" value="'.$liste_reservations[$i]['RS_NOM'].'" '.(isset($SALLE) && $SALLE==$liste_reservations[$i]['RS_ID']?'selected="selected"':'').'>'.$liste_reservations[$i]['RS_NOM'].'</option>';
            }
        }
        ?>
   </select>

   <br/><br/>


    <label for="s_date"> Modifier la date de fin</label>
    <input type="text" value="<?php if(isset($RS_DATE)) echo $RS_DATE;?>" name="s_date" id="s_date"  maxlength="10" size="10"/>
    <a href="javascript:void(0);"   onclick="javascript:return CalendarDate('s_date');"><img src="/Libs/calendar/calendar_small.png" alt="Calendrier" style="vertical-align:middle; border:0;" title="Calendrier" /></a>
    <br/><br/> 

    <span class="valider">
    <input type="submit" name="valider" value="<?php echo TXT_VALIDER; ?>" />

    </span>

        <br/><br/>


    <div style="text-align:center; margin-top: 50px;">
    <input id="supprimer_resa_button" disabled="disabled" type="submit" name="supprimer_resa_button" style="font-size: 15px; width: auto; height:auto; font-weight:bold;" value="<?php echo TXT_SUPPRIMER_RESA; ?>" />
    </div>

</form>

My Submit button is enable in any case here... Where am I wrong ?

Answer 1

Please check this:

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

<script text="text/javascript">
$(document).ready(function(){
    $('#select_resa').change(function(){
        var val = $('#select_resa').val();

        if (val == '') {
            $('#supprimer_resa_button').attr('disabled', 'disabled');
        }else{
            $('#supprimer_resa_button').removeAttr('disabled');
        }
    });
});



</script>

<form method="post" action="modif_resa.php?" id="modif_resa">
    <h2>Modifier/Supprimer un reservation</h2>
    <?php if(isset($erreur)) echo '<p style="font-style:italic;font-size:0.8em;text-align:center;color:red;margin-bottom:5px;">'.$erreur.'</p>'; ?>



    <label for="salle"><strong>Choisissez une reservation</strong></label>

    <select id="select_resa" name="select_resa">
        <option value="" id="select" name="select">--Selectionnez--</option>
        <option value="1">abc</option>
        <option value="2">def</option>
        <option value="3">ghi</option>
        <?php
        if(!empty($liste_reservations)){
            for($i=0;$i<count($liste_reservations);$i++){
                echo '<option "title="'.$liste_reservations[$i]['RS_NOM'].'" value="'.$liste_reservations[$i]['RS_ID'].'" '.(isset($SALLE) && $SALLE==$liste_reservations[$i]['RS_ID']?'selected="selected"':'').'>'.$liste_reservations[$i]['RS_NOM'].'</option>';
            }
        }
        ?>
   </select>

   <br/><br/>


    <label for="s_date"> Modifier la date de fin</label>
    <input type="text" value="<?php if(isset($RS_DATE)) echo $RS_DATE;?>" name="s_date" id="s_date"  maxlength="10" size="10"/>
    <a href="javascript:void(0);"   onclick="javascript:return CalendarDate('s_date');"><img src="/Libs/calendar/calendar_small.png" alt="Calendrier" style="vertical-align:middle; border:0;" title="Calendrier" /></a>
    <br/><br/>

    <span class="valider">
    <input type="submit" name="valider" value="<?php echo TXT_VALIDER; ?>" />

    </span>

        <br/><br/>


    <div style="text-align:center; margin-top: 50px;">
    <input id="supprimer_resa_button" disabled="disabled" type="submit" name="supprimer_resa_button" style="font-size: 15px; width: auto; height:auto; font-weight:bold;" value="<?php echo TXT_SUPPRIMER_RESA; ?>" />
    </div>

</form>

Answer 2

In recent jQuery api, you must use prop on boolean html attributes :

$('#supprimer_resa_button').prop('disabled', false)

Or

$('#supprimer_resa_button').prop('disabled', true)

attr is only with html attributes which can contain a value.

In your case, you can also do a little shorter :

function updateFormEnabled() {
    $('#supprimer_resa_button').prop('disabled', verifyAdSettings());
}

Answer 3

You just need to use:

$('#supprimer_resa_button').removeAttr('disabled');

instead of

$('#supprimer_resa_button').attr('disabled', '');