Adding Javascript Confirmation To Forms

One feature worth implementing when designing websites is to add confirmation to forms. A simple popup message saying “Are you sure?” can greatly enhanced the user experience. It gives users a chance to confirm or escape out of a certain function. This is particularly feature is valuable after users click the Save, Delete or Submit button.

Unfortunately, both HTML and PHP languages lack the feature to add confirmation to forms. We turn our attention to Javascript the popup confirmation message we need in our forms. Below, you will see a simple, plain vanilla, submit button inside a HTML form.

HTML Form

<input type="Submit" name="submit" value="Submit" />

To add a confirmation to our submit button, we will use Javascript’s onclick event to detect if the input object has been clicked. Here’s how we add the onclick event in our simple form.

<input type="Submit" name="submit" value="Submit"
onclick="return confirmation();" />

Javascript Confirmation

Where’s our Javascript function? Well, here it is. Now that we have added the onclick event to our submit button, we will now add our Javascript function that you can place anywhere on your page. Here it is:

<script>
function confirmation()
{
var answer = confirm("Are you sure?")
 if (answer)
 {
  return true;
 } else {
  if (window.event) // True with IE, false with other browsers
  {
   window.event.returnValue=false; //IE specific
  } else {
   return false
  }
 }
}
</script>

The if statement with window.event is for the IE browser since it doesn’t play nice like the other browsers. You can call the Javascript function multiple times on the same page every time you need a popup confirmation. So there you have it, a simple popup confirmation you can add to your forms.

Redirect With Cancel Button

When working with HTML Forms, a Cancel button is sometimes handy when you want to reset a form. It deletes the user’s input and displays the same form again. This is particularly helpful to users that want to reset a form from scratch and start with a new form entry.

Here’s a simple HTML page called “form.html” that uses the “post” form method and uses an action to itself – the same page which is “form.html.” The form also contains a Cancel button which will be rendered using the input markup below. Notice the input type is set to “submit.”

Cancel Button To Reset Form

<html>
<head>
<title>Form</title>
</head>
<body>
<form method="post" action="form.html">
<label for="firstname">Firstname:</label><br/>
<input type="text" name="firstname" value="" />
<input type="submit" name="submit" value="Submit" />
<input type="submit" name="cancel" value="Cancel" />
</form>
</body>
</html>

Redirect With The Cancel Button

To use redirect with the Cancel button, we will use a simple Javascript event called “onclick=window.location” to send the user to another page called “anyfile.html.” We can also redirect the user to another domain if we want to such as “http://google.com.” Notice the input type is now changed from “submit” to “button.” This is very important. The input type needs to be set to “button,” otherwise our redirect will never work.

<input type="button" name="cancel" value="Cancel"
onclick="window.location='anyfile.html'" />

This is just a simple way to redirect users with the Cancel button. There are other ways of redirecting users such as using Javascript functions, etc., but it’s beyond the scope of this article.

Add Tweet Box To Your Blog

Tweet Box allows Twitter users to tweet directly from your website or your blog. To add Tweet Box to your website or blog, simply add this little piece of code to your WordPress single.php theme file. You can place it anywhere you like. I have it installed at the bottom of this single.php page. See below.

<div id="tbox"></div>
<script type="text/javascript">
  twttr.anywhere(function (T) {
    T("#tbox").tweetBox();
  });
</script>

You can modify Tweet Box by passing parameters to the script.

<div id="tweet-box"><h3>Twitter</h3></div>
<script type="text/javascript">
    twttr.anywhere(function (T) {
      T("#tweet-box").tweetBox({
        'counter' : true,
        'height'  : 50,
        'width'   : 440,
        'label'   : "I made it easier for you to tweet this:",
        'defaultContent' : "Just read: <?php the_title(); ?>
        @ulyssesonline",
      });
    });
</script>

In this example, I’m displaying the counter, which counts the number of characters left in the tweet box. You can set the height and the width of the Tweet Box. I have it set to 440px x 50px to match the content area of my blog. I’m also displaying the label, as well as the default content. The default content includes the title of the blog. I’m calling the WordPress’s the_title() function to display the post title.

I hope you find this helpful. Send a tweet.

JSColor Is The Best Color Picker

Javascript color pickers are fun. They make picking colors on web forms an easy task. One of my favorite color pickers is called JSColor. I like it for its simplicity. It’s easy to install and use. It’s also elegant.

To use JSColor, just download the source and paste this code in your pages:

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

Add the “color” class to your input tag:

<input class=’color’/>

And you’re done. Simple.

This is the main reason why I rated JSColor the best Javascript color picker.

See the demos here.