'onclick not working with button

I am trying to make a javascript function work on pressing search button but the function doesnt seem to run. Please guide. Fiddle.

<form action="" method="get" id="searchform" >
    <input name="q" type="text" id="search" size="32" maxlength="128" class="txt"/>
    <input type="submit" id="hit" value="Search" onclick="myFunction()" class="btn"/>
</form>

Heres the JS,

function myFunction() {
 alert("I am an alert box!");
}

javascript

Solution 1:^[1]

You have wrapped the function in the body, onLoad, just change it to no wrap - in <head>. See this fiddle.

function myFunction() {
    alert("I am an alert box!");
}

};
^^

You also have an extra }; in your code,

UPDATE:

This happens because:

if the function is place inside $(document).ready, then it can only be used within the ready callback (and in the inner objects). You can't reference it outside.
but if you are placing it outside the ready function then it gets global scope, i.e. you can call it from anywhere.

Solution 2:^[2]

The following works for me:

        <form action="" method="get" id="searchform" >
          <input name="q" type="text" id="search" size="32" maxlength="128" class="txt"  >
          <input type="submit" id="hit" value="Search" onclick="myFunction()" class="btn">
        </form>
        <script>
           function myFunction() {
              alert("I am an alert box!");
           }
        </script>

but I noticed that you have a }; at the end of your question - maybe that's the thing that causes a syntax error ?

UPDATE:

The problem was (besides the }; ) with the setup of your fiddler. Check this out!

Solution 3:^[3]

It seems most likely to me that you have a syntax error somewhere in your JavaScript file. The reason I say this is because there's nothing that would stop the alert from appearing using the code you've shown.

Check the browser's error console (F12 in IE and Chrome) and see if there are any errors, as these will stop the function from being defined.

Solution 4:^[4]

I looked at your fiddle, it has an extra closed bracket. This should work.

 function myFunction() {
    alert("I am an alert box!");
    return false;
 };

Your fiddle looked like this:

 function myFunction() {
    alert("I am an alert box!");
    } 
};

EDIT 1: I added a return false since the user did not want to submit the form.

EDIT 2:

Since no one wants to explain the JS Fiddle issue, I'll take a stab it.

In the original JS Fiddle, "onLoad", is used on the second dropdown on the sidebar menu.

The reason this setting does not work is that JS Fiddle executes the javascript code in an onload function. This means that myFunction is out of scope.

This is why you need to use either "No wrap - in " and "No wrap - in " options in the dropdown menu. By using those two options instead, your function myFunction will be in the global scope.

I hope that clarifies things.

Edit 3

If you did want to use the onload event. You could add a click event handler instead and remove the onclick attribute in your submit button markup.

In general it is probably better to set up your event handlers using javascript.

document.getElementById('hit').addEventListener('click', function() {
    alert("I am an alert box!");
});

If you wanted to use jQuery, you could do this:

$('#hit').click(function() {
    alert("I am an alert box!");
});

Solution 5:^[5]

Put your function in try-catch block...should work

function myFunction() {
    try {    
        alert("I am an alert box!");
        //enter code here
        return false;
    }
    catch (err) {
        txt = "There was an error on this page.\n\n";
        txt += "Error description: " + err.message + "\n\n";
        txt += "Click OK to continue.\n\n";
        alert(txt);
    }
}

Solution 6:^[6]

<input type="button" id="hit" value="Search" onclick="myFunction()" class="btn"/>

change the <input type="submit" /> to <input type="button" />

when clicking the input type submit, the from will submit instead of working the function.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Andrew Li
Solution 2
Solution 3	Niet the Dark Absol
Solution 4
Solution 5	Andrei Nicusan
Solution 6

'onclick not working with button

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]