CODEWITHSUNDEEP
javascripthtml
George2
George2

Reputation: 45771

html button v.s. html submit?

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

Upvotes: 12

Views: 30250

Answers (6)

Sarfraz
Sarfraz

Reputation: 382666

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

Upvotes: 11

helios
helios

Reputation: 13841

<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).

Upvotes: 3

Evan
Evan

Reputation: 756

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.

Upvotes: 1

Pim Jager
Pim Jager

Reputation: 32119

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>

Upvotes: 1

Asaf R
Asaf R

Reputation: 6978

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>

Upvotes: 4

Harmen
Harmen

Reputation: 22438

<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.

Upvotes: 8

Related Questions