PDA

View Full Version : Dimming Submit button unless Yes option in Form



John W
24-04-2006, 06:53 PM
I am looking for a way to dim and disable the submit button in a entryform, unless one Radio button, in a form is selected as yes, the default is no.

Im using Dreamweaver, but cant find a tutorial to achieve what I want.

Ideas or links appreciated.

Thanks ..........John in Mosgiel.

gibler
24-04-2006, 07:08 PM
read this javascript code (http://www.thescripts.com/forum/thread152399.html)

Kame
25-04-2006, 01:55 PM
It's best to use a checkbox for this instead of a radio button, as really you've only giving them the choice to say 'Yes' if they want the Submit button enabled.

Here's something that I roughly whipped up, if javascript is disabled though, it will still allow submitting but you must verify the data serverside, although you should always verify client and serverside. Here's my code, not tested in IE however:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title>Checking the Checkbox</title>
<script type="text/javascript">
/*<![CDATA[*/
var confirmation = false;
function defaultLoad()
{
checkin = document.getElementById('checkbox');
checkin.checked = false;
checkin.value = 'No';
submitbut = document.getElementById('submit');
submitbut.disabled = true;
}

function processAction(arr)
{
checkin = document.getElementById('checkbox');
submitbut = document.getElementById('submit');

if(arr.match(/,/))
{
action = arr.split(',');
}
else
{
action = arr;
}
for(i = 0, n = (typeof action == 'object') ? action.length : 1; i < n; i++)
{
switch(action[i] = (typeof action == 'object') ? action[i] : arr)
{
case 'toggle':
{
checkin.value = (checkin.checked) ? 'Yes' : 'No';
break;
}
case 'enable':
{
submitbut.disabled = (checkin.value == 'Yes' && checkin.checked == true) ? false : true;
break;
}
case 'confirm':
{
confirmation = (checkin.checked == true && checkin.value == 'Yes') ? true : false;
if(!confirmation)
{
alert('Something is wrong with the form.');
}
return confirmation;
break;
}
}
}
}
/*]]>*/
</script>
</head>

<body onload="javascript:defaultLoad();">
<form id="form" action="#" method="post">
<div>
<input id="checkbox" type="checkbox" onclick="javascript:processAction('toggle,enable');" />
<input id="submit" type="submit" value="Submit" onclick="javascript:processAction('confirm');" onsubmit="javascript:return confirmation" />
</div>
</form>
</body>

</html>

Basically the function defaultLoad() is loaded when the body of the document has loaded, so that it can set the values for the checkbox, as well as disable the submit button, if javascript isn't enabled, then this would not work, leaving the checkbox as default values (on|off) and the submit button still enabled. So you would need to also verify serverside whether the checkbox had the value 'Yes', 'No', 'on', 'off'.

The next function the processAction can take an array of commands or a string, basically only 'toggle', 'enable' and 'confirm', where toggle changes the value of the checkbox to 'Yes' or 'No', enable checks the value of the checkbox and enables and disables the submit button to whichever condition it finds. Confirm is used to make sure that when you submit, those conditions are still the same so it will allow the submission to take place.

Just remember, you must validate it serverside as well.


Cheers,


KK