enable and disable using selectbox change

Question

I don't know how to enable and disable a text field using select box option.

Maybe I wrote this totally wrong in the code below. If I did, please tell me correct code.

<body>
<table width="500" border="1">
  <form style="text-align:center" id="form1" name="form1" method="post" action="">
    <tr>
      <th width="32" nowrap="nowrap">Status</th>
      <th width="32" nowrap="nowrap">Runs</th>
      <th width="16" nowrap="nowrap">6</th>
    </tr>
<?php
$('#Status1').change(function(){
var theVal = $('#Status1').val();
switch(theVal){
    case'0':
        $('#Runs1').prop('disabled', true);
        break;
    case'1':
        $('#Runs1').prop('disabled', false);
        break;
    case'2':
        $('#Runs1').prop('disabled', true);
        break;
    }
});
?>
<tr>
 <td align='center'>
   <select id='Status1'><option value='0'>Not Playing</option><option value='1'>Playing</option><option value='2'>Out</option></select></td>
 <td align='center'>
   <input style='font-weight:bold; background:#FFFFFF; text-align:right; color:#000000;' disabled='disabled' name='Runs1' type='text' id='Runs1' size='5' maxlength='5' value='' />    
 </td>
</tr>
</form>
</table>
</body>

Are you kidding me @PSR, instead of PHP tags, it should be script tags and this whole function should be $(document).ready function. — Ravinder Singh
– Ravinder Singh, Commented Mar 5, 2013 at 10:23
Don't downvote the question man, it is just that he/she doesn't know the syntax or code, but he/she tried, and is asking question. This is the place to ask questions. Don't you think? — Ravinder Singh
– Ravinder Singh, Commented Mar 5, 2013 at 10:26
friends i am new in php and what i want to do is enable text box on changing select option. if i select "not playing" textfeild will disable and if i select "playing" then textfield will enable for "out" it will disable again — ShriD
– ShriD, Commented Mar 5, 2013 at 10:33
Cool Shri.. but you are using the jquery code within PHP tags.. that's all the problem.. And I would prefer to use script either before or after the table.. it is not look nice when you have some scripts withing a sequence of html elements nah... Bad code practice also.. You already got lot of answers, so I do not like to post same answer again.. :) — Faizul Hasan
– Faizul Hasan, Commented Mar 5, 2013 at 10:36

Peter Mols · Accepted Answer · 2013-03-05 10:30:35Z

2

The code for enabling/disabling the #Run1 input box is nested between PHP tags (server side), but this code is written in javascipt (client-side).

<body>
<table width="500" border="1">
  <form style="text-align:center" id="form1" name="form1" method="post" action="">
    <tr>
      <th width="32" nowrap="nowrap">Status</th>
      <th width="32" nowrap="nowrap">Runs</th>
      <th width="16" nowrap="nowrap">6</th>
    </tr>
<script type="text/javascript">
$('#Status1').change(function(){
var theVal = $('#Status1').val();
switch(theVal){
    case'0':
        $('#Runs1').prop('disabled', true);
        break;
    case'1':
        $('#Runs1').prop('disabled', false);
        break;
    case'2':
        $('#Runs1').prop('disabled', true);
        break;
    }
});
</script>
<tr>
 <td align='center'>
   <select id='Status1'><option value='0'>Not Playing</option><option value='1'>Playing</option><option value='2'>Out</option></select></td>
 <td align='center'>
   <input style='font-weight:bold; background:#FFFFFF; text-align:right; color:#000000;' disabled='disabled' name='Runs1' type='text' id='Runs1' size='5' maxlength='5' value='' />    
 </td>
</tr>
</form>
</table>

answered Mar 5, 2013 at 10:30

Peter Mols

1,0311 gold badge9 silver badges13 bronze badges

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

2 Comments

Faizul Hasan Over a year ago

Code will work but I would prefer to use the script either before table or after table. Script within some html elements sequence is not look nice. Bad practice..

Nope Over a year ago

@FaizulHasan: The answer only fixed existing code. Your comment is great but might be better on the main question aimed at the person asking the question. It is their code :)

William Buttlicker · Accepted Answer · 2013-03-05 10:28:12Z

1

Replace <?php with <script> and ?> with </script>. Rest all the thing is fine.

The code you wrote in php tags is a Jquery code, so it should be under script tags.

answered Mar 5, 2013 at 10:28

William Buttlicker

6,0005 gold badges36 silver badges59 bronze badges

2 Comments

ShriD Over a year ago

thanks Sankalp Mishra but i want to do it in php is that work in php file also

William Buttlicker Over a year ago

yes. even if you save this as .php file with script tags in it, it will work fine . :)

bipen · Accepted Answer · 2013-03-05 10:32:20Z

1

load jquery in your <head> and add the javascript there.. not inside <?php (php code)

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$('#Status1').change(function(){
  var theVal = $('#Status1').val();
  switch(theVal){
  case'0':
    $('#Runs1').prop('disabled', true);
    break;
  case'1':
    $('#Runs1').prop('disabled', false);
    break;
  case'2':
    $('#Runs1').prop('disabled', true);
    break;
 }
});
</script>
<body>
....//rest of your code

answered Mar 5, 2013 at 10:32

bipen

36.6k9 gold badges51 silver badges62 bronze badges

Comments

Php Geek · Accepted Answer · 2013-03-05 10:33:43Z

You have not included the jquery file and used tags instead of for the javascript code

<body>
<table width="500" border="1">
<form style="text-align:center" id="form1" name="form1" method="post" action="">
<tr>
  <th width="32" nowrap="nowrap">Status</th>
  <th width="32" nowrap="nowrap">Runs</th>
  <th width="16" nowrap="nowrap">6</th>
</tr>
<script src="../jquery.js"></script>
<script type="text/javascript">
$('#Status1').change(function(){
var theVal = $('#Status1').val();
switch(theVal){
 case'0':
    $('#Runs1').prop('disabled', true);
    break;
 case'1':
    $('#Runs1').prop('disabled', false);
    break;
case'2':
    $('#Runs1').prop('disabled', true);
    break;
   }
});
</script>
<tr>
 <td align='center'>
 <select id='Status1'><option value='0'>Not Playing</option><option value='1'>Playing</option><option value='2'>Out</option></select></td>
<td align='center'>
  <input style='font-weight:bold; background:#FFFFFF; text-align:right; color:#000000;' disabled='disabled' name='Runs1' type='text' id='Runs1' size='5' maxlength='5' value='' />    
</td>
</tr>
</form>
</table>
</body>

Rohan Kumar · Accepted Answer · 2013-03-05 10:46:21Z

Try it like:

HTML

<body>
    <table width="500" border="1">
      <form style="text-align:center" id="form1" name="form1" method="post" action="">
        <tr>
            <th width="32" nowrap="nowrap">Status</th>
            <th width="32" nowrap="nowrap">Runs</th>
            <th width="16" nowrap="nowrap">6</th>
        </tr>

        <tr>
            <td align='center'>
            <select id='Status1'><option value='0'>Not Playing</option><option value='1'>Playing</option><option value='2'>Out</option></select></td>
            <td align='center'>
            <input style='font-weight:bold; background:#FFFFFF; text-align:right; color:#000000;' disabled='disabled' name='Runs1' type='text' id='Runs1' size='5' maxlength='5' value='' />    
            </td>
        </tr>
    </form>
    </table>
</body>

SCRIPT

<script type="text/javascript">
$(document).ready(function(){
    $('#Status1').change(function(){
        var theVal = $('#Status1').val();
        switch(theVal){
            case'0':
                $('#Runs1').prop('disabled', true);
                break;
            case'1':
                $('#Runs1').prop('disabled', false);
                break;
            case'2':
                $('#Runs1').prop('disabled', true);
                break;
        }
    });
});
</script>

But first check you have added a jquery library file in the head section.

ShriD · Accepted Answer · 2013-03-05 11:18:21Z

friends this is solution of my question with the help of you people thanks.

<html>
<head>
<script type="text/javascript" src="../jquery.min.js"></script>
<SCRIPT LANGUAGE="JavaScript">
$(document).ready(function(){
    $('#Status1').change(function(){
        var theVal = $('#Status1').val();
        switch(theVal){
            case'0':
                $('#Runs1').prop('disabled', true);
                break;
            case'1':
                $('#Runs1').prop('disabled', false);
                break;
            case'2':
                $('#Runs1').prop('disabled', true);
                break;
        }
    });
});
</script>
</head>
<body>
    <table width="500" border="1">
      <form style="text-align:center" id="form1" name="form1" method="post" action="">
        <tr>
            <th width="32" nowrap="nowrap">Status</th>
            <th width="32" nowrap="nowrap">Runs</th>
            <th width="16" nowrap="nowrap">6</th>
        </tr>
        <tr>
            <td align='center'>
            <select id='Status1'><option value='0'>Not Playing</option><option value='1'>Playing</option><option value='2'>Out</option></select></td>
            <td align='center'>
            <input style='font-weight:bold; background:#FFFFFF; text-align:right; color:#000000;' disabled='disabled' name='Runs1' type='text' id='Runs1' size='5' maxlength='5' value='' />    
            </td>
        </tr>
    </form>
    </table>
</body>
</html>

Collectives™ on Stack Overflow

enable and disable using selectbox change

6 Answers 6

2 Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related