Agree Before Entry

Lee Underwood Jan 26, 2007

General

Confirm your visitor's approval by requiring their name before continuing on. Useful if you require your visitors to accept a disclaimer before downloading software or visiting a section of your members-only site. Could be used with a cookie.

Notes

Created by: Lee Underwood
Web Site: http://www.javascriptsource.com/
Posted: January 26, 2007

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: agreeBeforeEntry.js

/* This script and many more are available free online at
The JavaScript Source!! http://www.javascriptsource.com
Created by: Lee Underwood | http://www.javascriptsource.com/ */
var agree=0;  // 0 = 'no', 1 = 'yes'

function agree2() {
  if (!document.getElementById) return false;
  agree=1;
  document.getElementById('box').style.background='#fff000';
  if (agree) {
    document.getElementById('enterName').style.visibility = 'visible';
  }
  document.enableform.box.focus();
}

function disagree() {
  if (!document.getElementById) return false;
  agree=0;
  if (!agree) {
    document.getElementById('enterName').style.visibility = 'hidden';
  }
  document.enableform.done.focus();
}

function goSubmit() {
  if (agree==0) {
    alert("DISGREE: You can insert the next step here");
  } else if (agree==1 && document.enableform.box.value=='') {
      alert("You must enter your name!");
      document.enableform.box.focus();
  } else {
    alert("AGREE: You can insert the next step here");
  }
}

CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.

#enterName {
  visibility: hidden;
  padding-left: 50px;
}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="agreeBeforeEntry.js"></script>

Body

Paste this code into the BODY section of your HTML document

<form name="enableform">
  <input type="radio" name="enable" value="agree" onclick="agree2();">I agree
  <div id="enterName">Please enter your name to show agreement: <input type=text id="box" name="box"></div>
  <input type="radio" name="enable" value="disagree" onclick="disagree();">I disagree
  <br><br>
  <input type="button" value="Done!" name="done" onclick="goSubmit()">
</form>

Leave a Response

(7 comments)

In order to better help you, you'll need to post your question [a href="http://www.webdeveloper.com/forum/forumdisplay.php?f=3"]over on the forums[/a].

Lee Jun 26, 2008

You will need to submit your question to the [a href="http://www.webdeveloper.com/forum/forumdisplay.php?f=3"]JavaScript forums[/a].

Lee May 12, 2008

I'm a beginner at all of this script and HTML stuff, so I have NO clue where to put the link for the "Done!" button on the code. If you can tell me where, can you please e-mail me at ejkepner@yahoo.com ? Thanks!

Eric Apr 22, 2008

I've tried the below section but nothing hapens. When I change the behaviour, the part that requests your name does not appear and I cannot proceed to anywhere. I use Dreamweaver 8. Any help on how, once agree has been pressed, their name has been typed in and submit has been clicked, for the visitor to proceed to the page they wished to view?

Mr I need Help Jan 21, 2008

I have the same question as below, but I cant figure out your explanation. I am trying to make it so when you agree and click done, you link to a new page instead of a popup. Can you re-explain how to do this step by step? Thanks

ej Jan 8, 2008

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details