Jump to content

clicking on buttons to call an action


spudly1987

Recommended Posts

Hey guys, need some minor assistance again. It should be simple i got some of the code working however confused on the rest. 

 

The concept I am trying to accomplish is that when they click on the "checkbox" to agree to the terms and then click on "continue to site" it will let them in, to which I do have that working properly.

 

However, what I would like to have done is, if they don't click on the "checkbox" and try to click "continue to site" it will come up to a page saying "you have not agreed to terms" and i'm not sure If i have to create an additional page just for that line of text to call for that option. 

 

 

the third thing is yes this is a semi adult content site. so I'm not sure if it would be better to have it be where people would have to enter their birth day in as well on that page as a double verification if so wouldn't know where to start on that, but I would like to focus right now on the main issue. 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="practice.css" />
<script type="text/javascript">
function enable(){
if(document.getElementById('opt-in-checkbox').checked = false){
document.getElementById('wpsp-continue').disabled = true;
}else{
document.getElementById('wpsp-continue').disabled = false;
document.getElementById('opt-in-checkbox').checked = true;
}
}
</script>
<title>Untitled Document</title>
</head>
<div id="wpsp-container">
<h1 id="wpsp-title"></h1>
<div id="wpsp-reject">You don't agree with the terms and conditions.</div>
<div id="wpsp-text">You are about to enter a website that may contain content of an adult nature. These pages are designed for ADULTS ONLY and may include pictures and materials that some viewers may find offensive. If you are under the age of 18, if such material offends you, or if it is illegal to view such material in your community, please click away from this site now.</div>
<form method="post">
<span id="wpsp-opt-in">
<input id="opt-in-checkbox" type="checkbox" onclick="enable();" name="opt-in-checkbox"  /></input>
<label for="opt-in-checkbox">I agree with the terms stated above.</label>
</span>
<input id="wpsp-continue" type="submit" value="Continue to Web Site" formaction="index.html" disabled/></input>
</form>
</div>
</body>
</html>

Link to comment
Share on other sites

Create a function to allow them to continue on to the site or page you want.

On your "Agree to Terms" put a button  like this:

<button type="button" onclick="enable()">I agree to the Terms</button>

Then the enable() function would have code to either hide the terms and hide the agree button something like:

var continue = "<button type=\"button\" onclick=\"goToSite()\">Proceed to Site</button>";
document.getElementById("id="wpsp-text").innerHTML=continue;

Then in the goToSite() function you can either redirect to a URL using javascript or whatever you like.

Link to comment
Share on other sites

Sorry, a couple of typos.  What I was trying to do is when they click the first button, the text and first button is replaced by a second button.  The second button references a second function to do what you want.  You can display a nav menu or redirect them to a start page or what ever. Again, you can replace the proceed button with a nav menu or other html.   This code works:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function enable(){
var next = '<button type=\"button\" onclick=\"goToSite()\">Proceed to Site</button>';
document.getElementById("wpsp-text").innerHTML=next;
}
function goToSite(){
//code to go or do something when they click the Proceed to Site button;
}
</script>
</head>
<body>
<div id="wpsp-text">
You are about to enter a website that may contain content of an adult nature. These pages are designed for ADULTS ONLY and may include pictures and materials that some viewers may find offensive. If you are under the age of 18, if such material offends you, or if it is illegal to view such material in your community, please click away from this site now.<br>
<button type="button" onclick="enable()">I agree to the Terms</button>
</div>
</body>
</html>

You can use css to dress it up.  You could also use Jquery which to me is a little easier.  You can use Jquery to create a dialog box.  You could also use alert boxes, etc.

Edited by possien
Link to comment
Share on other sites

You could also use this instead without a second function:

<script type="text/javascript">
function enable(){
var Path = window.location.pathname;
var Page = "somepage.html"//where you want them to go;
message = "Proceed to Site";
if(confirm(message)) location.href = Page ;
}
</script>
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.