ansaurus

Question

Answer 1

+4 A:

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

Sarfraz 2009-12-30 10:04:32

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?

George2 2009-12-30 10:07:25

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.

Sarfraz 2009-12-30 10:08:51

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.

George2 2009-12-30 10:28:23

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

Sarfraz 2009-12-30 10:31:26

To make submit button work, we have to include it in a form?

George2 2009-12-31 06:50:54

@George: Yes you need to put them in forms

Sarfraz 2009-12-31 06:56:55

Answer 2

+4 A:

Hi George2,

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

Harmen 2009-12-30 10:09:28

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.

George2 2009-12-30 10:29:28

To make submit button work, we have to include it in a form?

George2 2009-12-31 06:49:39

Yes, wrap the `<input/>`-elements in `<form action="result.aspx" method="get"> </form>`

Harmen 2009-12-31 09:54:30

Answer 3

+2 A:

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

helios 2009-12-30 10:09:40

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.

George2 2009-12-30 10:28:56

I added a warning that's very important (I debugged a similar situation some time ago). I think it answer the question.

helios 2009-12-30 10:36:17

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.

robertc 2009-12-30 11:07:00

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?")

helios 2009-12-30 11:35:03

To make submit button work, we have to include it in a form?

George2 2009-12-31 06:51:26

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.

helios 2009-12-31 08:59:29

Answer 4

+4 A:

Hi George,

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>

Asaf R 2009-12-30 10:10:09

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.

George2 2009-12-30 10:26:45

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

Asaf R 2009-12-30 10:31:59

To make submit button work, we have to include it in a form?

George2 2009-12-31 06:50:14

As best I can tell - yes you have to include it in a form(to say the least - that is the norm)

Asaf R 2009-12-31 08:37:40

Answer 5

+1 A:

Hi George, 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>

Pim Jager 2009-12-30 10:12:35

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.

George2 2009-12-30 10:27:50

Answer 6

+1 A:

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.

Evan Huddleston 2009-12-30 10:12:55

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.

George2 2009-12-30 10:27:19

ansaurus

tags:

views:

answers:

html button v.s. html submit?

related questions