Javascript Simple Call Form

11 / 100

Javascript isn’t that hard. Especially when you want to handle a simple form action. For example, most sites tells us how to do validation for regular expressions and the javascript for it, but what if one is a totally newbie to javascript and html.

Here I bring upon you some of my practices which somehow though, not as new as the new javascript version and standard, it still works.

<form name='testForm' method='post' action='callAction.jsp'>
<table>
 <tr>
  <td>Username</td>
  <td>: <input type='text' name='username' value=''></td>
 </tr>
 <tr>
  <td colspan=2><input type='button' value='submit' onClick='submitForm(this.form);'></td>
 </tr>
</table>
</form>

Now the above is a sample form. Now how about the javascript. Yes, as can be seen the onClick function is by itself a javascript to call a method from javascript. Now what can be done. Seeing from here, the reason instead of using a submit button, an INPUT TYPE=’button’ is being used, so it’ll be easier to handle actions using javascript.

Now have a look at the javascript method that was called. Let’s say to submit this form and to display the alert of the username.

<script language='javascript'>
   function submitForm(thisform) {
        alert("You have submitted " + thisform.username.value +
                " as your username!");
        thisform.submit();
   }
</script>

So this function is mighty straight forward. It’ll display the username as well as submit the form to wherever it was submitted to. In this case, the form is submitted to itself.

So there you have it. 🙂

One Response

  1. whatawaste July 5, 2012

Leave a Reply