A funny but scary problem

Now this is funny and scary at the same time. I ran into a problem which well, most of you(actually even me would term as stupid). This post is however not to show display my stupidity but something else.

Here is a snippet of code for taking an user input.

<p>Register if you wish to receive updates about the broadcast.</p>

<input type="text" id="email_address" />

<input type="submit" value="SUBMIT" class="submitBt" onclick="register();" />

Now what this piece of code does is, take an input (email) from the user and when the user clicks on the user a register() function is called which takes the email and sends it to the database.

function register() {

var email_address = document.getElementById("email_address").value;

$.ajax({

url: 'http://127.0.0.1/test/sendregistration.php/',

type: 'POST',

data: {

query: data_

},

success: function(data)

{

window.location = "http://127.0.0.1/test/tq.html";

}

}

Now what was the problem with this code. I tried to figure it out for like 4-5 hours. Very simple javascript, nothing wrong with it. Takes the data that the user types in the input area and the register() function is called when the button is clicked. Stuff that was bothering me more was, it was working perfectly in firefoz but not in chrome. why? WHY? WHYYY??

So you see, what I am doing here is –

1. On the click of the button, I am submitting the form as well as calling the javascript function.

2. Now well, since I haven’t given any action method, so where is it going to submit, ofcourse to the same page, duh!

3. So firefox called the register() function first, which in turn changed the window.location to our tq.html page, but chrome just called the ajax function and submitted the page, so it just reloaded.

Well! I was looking too hard at the javascript and not at the html code. Had I looked at the HTML, I might have found the problem soon. Small things in life that make you smile and small coding horror like this can make you wanna break your keyboard 🙂