enabling and disabling a button using javascript and php

Question

hi i really dont know a lot about javascript so sorry for this amatuer question. im trying to make a quiz page using php with 2 sets of questions. i want to disable the 2nd button for the other quiz and only be enabled when the user passed the first one.

this is what i wanted to happen:

<?php

require 'config.php';
$name = "kevin";
$result =mysql_query("select score from members where Username = '$name' " );

?>

<input name="button1" type="button" value="1" />
<input name="button2" type="button" value="2" disabled="disabled" />
<script type="text/javascript">

  if<?php $score is greater than  5 ?>{
         $('#button2').removeAttr('disabled');
    }
    else {
        $('#button2').attr("disabled","disabled");   

    }
});
</script>

any help will be much appreciated, thanks in advance.

You are really far away from proper result. First read about AJAX and passing params from php to javascript and in opposite way. — Robert
– Robert, Commented Sep 24, 2014 at 13:13
Have you included jQuery? Even if you have, your declaration needs to be inside the $(document).ready declaration. — Sir Celsius
– Sir Celsius, Commented Sep 24, 2014 at 13:14
yes sorry, the <script> and $(document).ready been erased when i posted it. im also new in this site so i dunno the proper posting of codes and questions. — rayah
– rayah, Commented Sep 24, 2014 at 13:17

David · Accepted Answer · 2014-09-24 13:17:17Z

1

You're trying to mix PHP and JavaScript, you can't do that. They run on completely different machines at completely different times.

Since the score is known server-side (in PHP) before the page is even sent to the client, make the conditional happen in the PHP code and only emit to the client the markup that you want. Something like this:

<?php

require 'config.php';
$name = "kevin";
$result =mysql_query("select score from members where Username = '$name' " );

?>

<input name="button1" type="button" value="1" />
<?php
    // use a real conditional, I'm just duplicating you for simplicity
    if ($score is greater than  5) {
?>
    <input name="button2" type="button" value="2" />
<?php
    } else {
?>
    <input name="button2" type="button" value="2" disabled="disabled" />
<?php
    }
?>

There's no need for JavaScript at all in this case, since the logic is all server-side.

Now you can still use JavaScript for more client-side interactions of course. Also, be aware that this isn't really any kind of security measure to prevent users from clicking on the button. Any user can modify the HTML/JavaScript being sent to them and still click on the button if they really want to. So if you need to prevent the user from doing something then that would need to be done server-side as well, in response to whatever action the user should not be authorized to perform.

answered Sep 24, 2014 at 13:17

David

221k42 gold badges245 silver badges337 bronze badges

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

3 Comments

rayah Over a year ago

thankyou very much sir, really appreciated this, this is my first time making a web based project so im really confused , but i really wanted to finish this so thanyou for your help.

David Over a year ago

@rayah: Glad I could help. To be honest, if you can understand the hard separation between server-side code and client-side code and the communication between the two (and this question/answer is a step toward that) then you'll be in pretty good shape for web development, regardless of the details of any language or framework used.

rayah Over a year ago

yes i searched their difference right away after reading your comments, thankyou so much for pin pointing it.

Naveed Ramzan · Accepted Answer · 2014-09-24 13:15:24Z

0

You can try like this

if($score > 5){
?>
    <script>
    $(document).ready(function(){
        $('#button2').removeAttr('disabled');
    });
    </script>
<?
}else{
?>
    <script>
    $(document).ready(function(){
        $('#button2').attr('disabled');
    });
    </script>
<?
}

or if removeAttr/attr are not working then you can do like this

$('#button2').prop('disabled', false);
$('#button2').prop('disabled', true);

answered Sep 24, 2014 at 13:15

Naveed Ramzan

3,5893 gold badges27 silver badges33 bronze badges

2 Comments

rayah Over a year ago

i tried it but its not working sir. the button is still enabled

Naveed Ramzan Over a year ago

Have you included jquery file. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Collectives™ on Stack Overflow

enabling and disabling a button using javascript and php

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related