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 ?

Still nothing to do with php in regards of enabling / disabling a button upon value change. — Epodax
– Epodax, Commented Oct 1, 2015 at 12:47

Ishan Shah · Accepted Answer · 2015-10-01 13:09:18Z

2

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>

edited Oct 1, 2015 at 13:09

answered Oct 1, 2015 at 12:53

Ishan Shah

1,6862 gold badges20 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

alanmm Over a year ago

Why should OP check this? Please, provide detailed explanation on how your answer is a solution, for it to be useful to future users who'd visit this question.

Ishan Shah Over a year ago

sure. will be take care

Nemka Over a year ago

it still disabled when I click on one of my item, even if I click on def for example

Nemka Over a year ago

Maybe i'm wrong in how to put javascript outside my form ? Can you check it please.. I updated my code, I'll check your updated code thank you

Ishan Shah Over a year ago

did you insert jQuerymin.js

|

ErasmoOliveira · Accepted Answer · 2015-10-01 12:48:23Z

1

You just need to use:

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

instead of

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

answered Oct 1, 2015 at 12:48

ErasmoOliveira

1,4242 gold badges20 silver badges40 bronze badges

Comments

Magus · Accepted Answer · 2015-10-01 12:49:21Z

0

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());
}

answered Oct 1, 2015 at 12:49

Magus

15.1k4 gold badges40 silver badges52 bronze badges

2 Comments

Nemka Over a year ago

thank for answers ! Do i need to put the attribute disabled="disabled" on the button before ? or I let as the code above ?

Magus Over a year ago

If the button is disabled by default, you have to add it. Use disabled="disabled" if you are in xhtml. disabled only if you are in html

Collectives™ on Stack Overflow

Enable button when select option in PHP using Javascript

3 Answers 3

8 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related