Can you see what's wrong in this piece of JS?

Question

This is driving me crazy. It's a very simple piece of JS code that is refusing to work.

The goal is to add a custom search, so I added this my custom.mainpage.xml.config (home page of the site)

<script>
            function MyCustomSearch()
            {
            myurl = 'search.aspx?searchterm=' + document.getElementById('searchterm').value;
            window.location = myurl;
            }

</script>
<input type="text" id="searchterm" name="searchterm" />
<input type="submit" onclick="MyCustomSearch()"/>

As far as I knot it should work (load search.aspx passing the parameter) but instead it is reloading the default.aspx page. 

Can you see what I am doing wrong?

 

Answer 1

OK, I figured it out and I am going to post the solution in case of someone else bump with the same problem.

Since using a custom <form> tag could cause a conflict with the native <form> tag of the template.master I decided to supress it. The problem is that I forgot that the submit button depends on the "action" value into the <form> tag and when you supress the <form> tag its value will be null and therefore it will force to reload the same page, EVEN IF YOU TRY TO OVERRIDE IT WITH JAVASCRIPT.

The solution to avoid it therefore is to replace this:

<input type="submit" onclick="MyCustomSearch()"/>

WITH this:

<input type="button" value="Search" onclick="MyCustomSearch()"/>

Actually I am ALWAYS forgetting about this issue and repeating the same mistake again and again...