TechieDan

Previously I wrote about how to write a simple javascript button for normal webpages. But it looks like it’s utterly different for creating a button in Wordpress. Well, basically there’s a way to write it. With that too, you can actually have a lot of other things like a statistics counter to count how many times a user has clicked. Well, depends on how well you know though.

CLICK ME

How did I create this button on Wordpress? SIMPLE!!

<button onclick="javascript:alert('Hello!\nWelcome to TechieDan.com')">
CLICK ME</button>

Straightforward, so have some fun with Javascript Buttons on Wordpress.

Here’s a simple script that every new javascript scripters should know. Well, play with buttons and poof…. javascript. Well, although writing it in Wordpress is a whole lot different from normal javascripting.

Hello World

Impressive? Well, in normal html codes it would be

<input type='button' value='Hello World'
onClick='javascript:alert('Hello!\nWelcome to TechieDan.com')'>

Cool right

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.