Simple javascript function to enable a button? - php

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>

Answer 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)

Answer 2

I suggest jQuery for best browser support (and ease of coding):
$(function() {
$('.custom-pc').change(function() {
$(this).next('input').removeAttr('disabled');
});
});

Answer 3

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>

Answer 4

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

Answer 5

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.

Answer 6

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.

Answer 7

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

Answer 8

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 :)