i can't do this form, the button will be disabled when page load and only be enabled when one tick in the checkbox ( if the checkbox is unticked , the button will be disabled again). anyone help me ? thanks

<html>
<head>
<script type="text/javascript">
function enableButton() {
	if(document.getElementById('option').checked){
		document.getElementById('edit').disabled='';
	} else {
		document.getElementById('edit').disabled='true';
	}
}
</script>
 </head>
<body onload="enableButton();">
<form method="post" action="test5.php">
<input type="checkbox" name="option"  id="option" onclick="javascript:enableButton();">Enable<br>
<input type="button" name="button" value="Edit" id="edit">
</form>
</body>
</html>

Cheers,
Naveen

<html>
<head>
<script type="text/javascript">
function enableButton() {
	if(document.getElementById('option').checked){
		document.getElementById('edit').disabled='';
	} else {
		document.getElementById('edit').disabled='true';
	}
}
</script>
 </head>
<body onload="enableButton();">
<form method="post" action="test5.php">
<input type="checkbox" name="option"  id="option" onclick="javascript:enableButton();">Enable<br>
<input type="button" name="button" value="Edit" id="edit">
</form>
</body>
</html>

Cheers,
Naveen

Hi,

I'm new to this site and I know absolutely nothing about writing script of any kind. I am building a website using iWeb and I need to to be able to create a button on my webpage exactly like the one above. How do I make the button click go to a URL? For example I want this button to activate when the check mark is added and then when the actual button is clicked I want it to take my visitor to a link of my choice.

Thank you....

Jay

Hi! Welcome to Daniweb.. Is this what you want ?

<html>
<head>
<script type="text/javascript">
function enableButton() {
	if(document.getElementById('option').checked){
		document.getElementById('b1').disabled='';
	} else {
		document.getElementById('b1').disabled='true';
	}
}
</script>
</head>
<body onload="enableButton();">
<form method="post">
<input type="checkbox" name="option"  id="option" onclick="javascript:enableButton();">Enable<br>
<input type="button" name="b1" value="Click" id="b1" onclick=location.replace('http://www.google.com') />
</form>
</body>
</html>
Comments
Excellent suggestion.

Hi! Welcome to Daniweb.. Is this what you want ?

<html>
<head>
<script type="text/javascript">
function enableButton() {
	if(document.getElementById('option').checked){
		document.getElementById('b1').disabled='';
	} else {
		document.getElementById('b1').disabled='true';
	}
}
</script>
</head>
<body onload="enableButton();">
<form method="post">
<input type="checkbox" name="option"  id="option" onclick="javascript:enableButton();">Enable<br>
<input type="button" name="b1" value="Click" id="b1" onclick=location.replace('http://www.google.com') />
</form>
</body>
</html>

We are getting close. When I put this code in my site and run it from the webpage it doesn't work properly. What happens is it opens google.com in a very tiny window where the "Click" button was. I don't want a pop up window but rather have it load google.com full size in the current window.

I would also like to be able to format it a little. I want to be able to place the check box on the right and be able to either center the "Click" button or position it on the left.

Thank you so much for the help....

Jay

I don't know if this makes a difference but I'm inserting the code as a Widget in iWeb 09. I think it sees the automatically generated frame of the Widget as the boundary when opening up the URL upon the button click. Can we work around this?

We are getting close. When I put this code in my site and run it from the webpage it doesn't work properly. What happens is it opens google.com in a very tiny window where the "Click" button was. I don't want a pop up window but rather have it load google.com full size in the current window.

I don't know if this makes a difference but I'm inserting the code as a Widget in iWeb 09.

It works as it is. I haven't used iweb09, so I don't have the slightest clue :(
If you post your relevant code, maybe someone who has experience on iweb 09 can help you out!

<input type="button" name="b1" value="Click" id="b1" onclick="top.location.replace('http://www.google.com');" />

Thank you :) That did the trick. Is there any way to format this within the Widget window? For instance I want to be able to center the button and put the check box to the right side in the box.

Also, it is possible to make a description word such as ENABLE for the check box to be a hyper link?

My intent for this little gem is to use it as a way to verify that a customer has read and agrees to my legal terms and condition before being able to order the product. The hyperlink will take then to the terms and conditions page.

To see an example of this code in use see my page http://www.holiday-scooters.com/HSR/Wheelchair_Info.html

Edited 7 Years Ago by Dasjetta: n/a

<script type="text/javascript">
function enableButton() {
 if(document.getElementById('option').checked='checked'){  document.getElementById('b1').disabled=""; }
 else { document.getElementById('b1').disabled='disabled'; }
 }
</script>
<p style='text-align:center;'>
<span style='float:right;text-align:right;'>
<input type="checkbox" name="option"  id="option" onclick="javascript:enableButton();">
<label for='option'>
I have read and agree to the<br />terms and conditions
</label>
</span>
<input type="button" name="b1" value="Click" id="b1" disabled='disabled' onclick="top.location.replace('http://www.google.com');" />
</p>

Edited 7 Years Ago by almostbob: n/a

Thanks guys for all the help. I was able to take cues from both of you to get what I wanted. I couldn't have done this without you. :) To see it in action go to http://www.holiday-scooters.com/HSR/Wheelchair_Info.html

Now for one last question. Is it possible to add a "BACK" button to the left of the "ORDER" button to serve as a browser back button? It would make my site look better.

<script type="text/javascript">
function enableButton() {
    if(document.getElementById('option').checked){
        document.getElementById('b1').disabled='';
    } else {
        document.getElementById('b1').disabled='true';
    }
}
</script>
<font size=-1 face="Verdana">
<p style='text-align:center;'>
<span style='float:left;text-align:right;'>
<input type="checkbox" name="option"  id="option" onclick="javascript:enableButton();">
<label for='option'>I have read and agree to the<br />
</label>
</span>
<center><a href="http://www.holiday-scooters.com/HSR/Reservations.html">Terms & Conditions</a><br />
<br>
<input type="button" name="b1" value="ORDER" id="b1" disabled='disabled' onclick="top.location.replace('http://www.holiday-scooters.com/HSR/Booking_Agent.html');" />
<br />
</font>
</p>

Edited 3 Years Ago by mike_2000_17: Fixed formatting

<input type='button' id='back' value='back' onclick='javascript: history.go(-1);' />

Edited 7 Years Ago by almostbob: n/a

<input type='button' id='back' value='back' onclick='javascript: history.go(-1);' />

You guys ROCK! This is freaking awesome :)

This article has been dead for over six months. Start a new discussion instead.