12

I have an input text box and a search submit button, and when user clicks the Search submit button, I want to redirect user to url http://testsearch/results.aspx?k=<value of text box k>, for example, if user put "StackOverflow" into text box and then clicks the search button, I want to redirect user to the following page,

http://testsearch/results.aspx?k=StackOverflow

I find when I use button for Search button, it works (see below source codes),

  <input type="text" id="k" name="k" />
  <input type="button" id="Go" value="Search" onclick="location.href = 'http://somemachine/Search/results.aspx?k='+document.getElementById('k').value;"/>

but when I use submit for Search button, it does not works (see below source codes), why?

  <input type="text" id="k" name="k" />
 <input type="submit" id="Go" value="Search" onclick="location.href = 'http://somemachine/Search/results.aspx?k='+document.getElementById('k').value;"/>

thanks in advance, George

Improve this question
5
  • 4
    both code examples seem to be equal Commented Dec 30, 2009 at 10:07
  • 1
    I don't understand how the "button" case works if you don't put any code in its onclick event. Is it the complete example? Commented Dec 30, 2009 at 10:13
  • Sorry I forget to add onclick event, just corrected my post. Any ideas? Commented Dec 30, 2009 at 10:25
  • 2
    your submit button didn't do anything, most likely because it wasn't enclosed in a form element Commented Dec 30, 2009 at 10:58
  • To make submit button work, we have to include it in a form? Commented Dec 31, 2009 at 6:47

6 Answers 6

Reset to default
11

You can even use the submit button this way:

 <input type="submit" id="Go" value="Search" onclick="document.location='http://testsearch/results.aspx?k=StackOverflow'; return false;" />

Semantically submit button is used to submit forms not redirect pages. You should use normal button type for this. However as i showed you can use the submit button too but that is not semantic i think.

The below line prevents the form from being submitted.

return false;

That is what you are missing in your code :)

Thanks

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Why submit is not working in my scenario? I want to know how browser handles submit differently from handles button, so that it makes submit does not work in my scenario?
you need to put return false; statement at the end of onlcick event of submit button so that it does not submit, rather it performs action told in onclick event.
Sorry, I forget to add onclick event in my code. Just corrected. What are the differences between submit and button in my case and why submit does not work? In my original code, there is no Form element.
the submit button can be used the submit the form (you know a form is one with <form> tag) while a normal button can be used to execute some javascript code. In your case, you should use normal button if you want to redirect the page. :)
@George: Yes you need to put them in forms
8

<button>-elements and <input type="button"/> don't do anything by default, unless you tell them to do something with Javascript.

<input type="submit"/> will submit the form it is in.

So, if <input type="submit"/> won't work, you got it probably not in the <form/>-element itself.

Improve this answer

2 Comments

Sorry, I forget to add onclick event in my code. Just corrected. What are the differences between submit and button in my case and why submit does not work? In my original code, there is no Form element.
Yes, wrap the <input/>-elements in <form action="result.aspx" method="get"> </form>
4

If that's the only field in your form, simply set the form's method to "get" and it'll work.

<html>
<body>
    <form action="http://localhost/mytest" method="get" >
        <input type="text" id="k" name="k" />
        <input type="submit" id="Go" value="Search" />
    </form>
</body>
</html>
Improve this answer

3 Comments

Sorry, I forget to add onclick event in my code. Just corrected. What are the differences between submit and button in my case and why submit does not work? In my original code, there is no Form element.
If you want to do it with JavaScript I'd suggest looking at @Sarfraz Ahmed answer. But, unless you have a good reason to use JavaScript there, I'd go for plain HTML (such as in my answer).
As best I can tell - yes you have to include it in a form (to say the least - that is the norm)
3

<button> means "put a button in the page and do whatever the onclick event says". So if you don't write an onclick handler the page doesn't do nothing.

If you use submit is ok, because you want to redirect to another page.

If you want to use button anyway you can do this way:

<script>
function doTheSearch() {
  // do the submit mannually
  document.getElementById('myForm').submit();
}
</script>
<form id="myForm" action="results.aspx">
 <input type="text" id="k" name="k" />
  <input type="button" id="Go" value="Search" onclick="doTheSearch();" />
</form>

Warning: submit button with onclick

If you have a submit button (inside a form, it is, a working submit button) with an onclick event, some browsers will:

1) execute onclick

2) execute submit

your onclick tries to redirect but the submit button wins.

If you want to avoid it you have some options:

a) change submit button to normal button

b) avoid the submit thing (add onsubmit="return false;" to form element)

c) use the submit procedure (form action="..." method="get", no onclick event), the browser will be happy and you can control the submit in the onsubmit event (you can cancel it or not).

Improve this answer

5 Comments

Sorry, I forget to add onclick event in my code. Just corrected. What are the differences between submit and button in my case and why submit does not work? In my original code, there is no Form element.
I added a warning that's very important (I debugged a similar situation some time ago). I think it answer the question.
Also the onclick event of a submit button will not get fired if the user submits the form by hitting enter in a text field.
If fact, that's a good criteria to choose between a submit button and a normal button ("Do I want to send the query vía Enter key inside the form?")
Yes. Because submit means "send a request to the URL indicated in <form action="...."> using method indicated in <form method="..."> (GET or POST) and include all the data of the form. You can have multiple forms in a page, each with its submit button and its data. NOTE: if you want to use a submit button as a normal button you can (it has onclick event anyway) but you should use <input type="button"...> instead.
1

make sure you got the input's in a form tag with a GET method:

<form action='http://testsearch/results.aspx' method='GET'>
  ... inputs
</form>
Improve this answer

1 Comment

Sorry, I forget to add onclick event in my code. Just corrected. What are the differences between submit and button in my case and why submit does not work? In my original case, there is no form element.
1

If I'm understanding correctly, it is not working because it is not in a form tag. If you put it in a form tag with method="get" it should work. The button works because it does not have to be in a form.

Improve this answer

1 Comment

Sorry, I forget to add onclick event in my code. Just corrected. What are the differences between submit and button in my case and why submit does not work? In my original code, there is no Form element.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.