Forum Home
Press F1
 
Thread ID: 68316 2006-04-24 06:53:00 Dimming Submit button unless Yes option in Form John W (523) Press F1
Post ID Timestamp Content User
449017 2006-04-24 06:53:00 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. 		John W (523)
449018 2006-04-24 07:08:00 read this javascript code (www.thescripts.com) gibler (49)
449019 2006-04-25 01:55:00 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" "www.w3.org

<html xmlns="www.w3.org 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 		Kame (312)
1