Simple javascript function to enable a button?

Question

I don't know anything about JavaScript unfortunately so forgive me for asking such an amateur question.

I've got a form with select boxes and a button next each one. I've disabled the button, and I want for the button to be enabled when a user selects something in the check box.

This is what I've got at the moment to product the select box and the disabled button.

<td style="width:125px;"><strong>Processor:</strong></td>
    <td style="width:420px;">
        <select class="custom-pc" name="processor">
            <option value=""></option>
                <?php
                $processor_query = @mysql_query("SELECT * FROM custom_pc_processor");
                while ($p_q = mysql_fetch_array($processor_query)) {
                    $id = $p_q['id'];
                    $name = $p_q['name'];
                    echo '<option value="'.$id.'">'.$name.'</option>';
                }
                ?>
        </select>
        <input name="processor_details" type="button" value="Details" disabled="disabled" />
    </td>

tcooc · Accepted Answer · 2011-05-12 11:58:39Z

1

The simplest solution is to add an onchange event handler to the select element. For example (assuming your elements are in a form):

<select onchange="this.form['processor_details'].disabled = false;" ...(rest of code)

answered May 12, 2011 at 11:58

tcooc

21.4k3 gold badges42 silver badges57 bronze badges

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

Comments

Nathan · Accepted Answer · 2011-05-12 12:03:46Z

1

I suggest jQuery for best browser support (and ease of coding):

$(function() {
   $('.custom-pc').change(function() {
     $(this).next('input').removeAttr('disabled');
  });
});

answered May 12, 2011 at 12:03

Nathan

6,2244 gold badges38 silver badges66 bronze badges

Comments

AjayR · Accepted Answer · 2011-05-12 12:00:14Z

You can use like this

<td style="width:125px;"><strong>Processor:</strong></td>
<td style="width:420px;">
    <select class="custom-pc" id="processor" name="processor" onChange='UpdateButton()">
        <option value=""></option>
            <?php
            $processor_query = @mysql_query("SELECT * FROM custom_pc_processor");
            while ($p_q = mysql_fetch_array($processor_query)) {
                $id = $p_q['id'];
                $name = $p_q['name'];
                echo '<option value="'.$id.'">'.$name.'</option>';
            }
            ?>
    </select>
    <input id="processor_details" name="processor_details" type="button" value="Details" disabled="disabled" />
</td>

...

<

script>
function UpdateButton()
{
var bDisable;
if (document.getElementById ("processor").value == '') // change the condition if required.
 bDisable = true;
else
 bDisable = false;

document.getElementById ("processor_details").disabled = bDisable;

}
</script>

Ross · Accepted Answer · 2011-05-12 11:58:10Z

0

Untested, but off the top of my head this should work.

// Give your form a name, I'm using myform.
// Add an event to the onchange of the <select>
document.myform.processor.onchange = function() {
    // Enable the button
    document.myform.processor_details.disabled = false;
};

answered May 12, 2011 at 11:58

Ross

47.2k39 gold badges124 silver badges173 bronze badges

Comments

Chandresh M · Accepted Answer · 2011-05-12 12:17:44Z

0

You need to put one function onChange event in select box.

<select class="custom-pc" name="processor" onChange="return getEnable(this.form);">
            <option value=""></option>
                <?php
                $processor_query = @mysql_query("SELECT * FROM custom_pc_processor");
                while ($p_q = mysql_fetch_array($processor_query)) {
                    $id = $p_q['id'];
                    $name = $p_q['name'];
                    echo '<option value="'.$id.'">'.$name.'</option>';
                }
                ?>
        </select>

//Javascript function look like below.

function getEnable(frm){
  frm.processor_details.disabled = false;
  return true;
}

Thanks.

edited May 12, 2011 at 12:17

answered May 12, 2011 at 11:58

Chandresh M

3,4932 gold badges27 silver badges48 bronze badges

1 Comment

Chandresh M Over a year ago

OK..I MAKE CHANGED IT..NOW OK.?

James McCormack · Accepted Answer · 2011-05-12 12:38:44Z

0

Without jQuery, the following code block at the bottom of your HTML BODY should suffice.

<script type="text/javascript">
 var ddl = document.getElementsByName('processor')[0];

 ddl.onchange = function () {

    document.getElementsByName('processor_details')[0].disabled = !this.value;

 };
</script>

If you're going to do a lot of web development in your career, you really need to learn JavaScript and the DOM. W3Schools will help, especially this chapter.

I do recommend learning jQuery though. It will make your life 1000 times easier and also make you more attractive to the gender of your choosing.

edited May 12, 2011 at 12:38

answered May 12, 2011 at 12:09

James McCormack

10.1k4 gold badges56 silver badges66 bronze badges

Comments

xkeshav · Accepted Answer · 2011-05-12 12:40:41Z

0

try this ( with jQuery v 1.6 )

$('select').change(function() {
    var op =$(this).val();
    if(op !=''){  
        $('input[name="processor_details"]').prop('disabled',false);
    }else{
        $('input[name="processor_details"]').prop('disabled', true);
    }      
});

DEMO

answered May 12, 2011 at 12:40

xkeshav

54.2k47 gold badges183 silver badges255 bronze badges

Comments

BenMorel · Accepted Answer · 2013-11-25 10:12:41Z

0

Use jQuery

take something like

$( ".custom-pc" ) . change(function(){
  if ( selid( "#idselect" ) )
  {
    $( "#button" )  . attr ( "enabled", "enabled"  ); 
  } 
})

selid - function, which show id of selected element. function selid( name ) //get selected id of select element, or false { var id = false; $("#"+name+" option:selected").each(function () { id = $(this).val() ; }); return id; };

Sorry, maybe it can be rewritten to be more effective.

PS. Also - to mix PHP & JS, in SO question, is not very good idea :) Am sure :)

edited Nov 25, 2013 at 10:12

BenMorel

37k52 gold badges208 silver badges339 bronze badges

answered May 12, 2011 at 12:01

publikz.com

9611 gold badge12 silver badges22 bronze badges

Collectives™ on Stack Overflow

Simple javascript function to enable a button?

8 Answers 8

Comments

Comments

Comments

Comments

1 Comment

Comments

DEMO

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related