Html button v.s. html submit?

У меня есть текстовое поле ввода и кнопка отправки поиска, и когда пользователь нажимает кнопку "Поиск", я хочу перенаправить пользователя на url http://testsearch/results.aspx?k=<value of text box k>, например, если пользователь поместил "StackOverflow" в текстовое поле, а затем щелкнул кнопку поиска, я хочу перенаправить пользователя на следующую страницу,

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

Я нахожу, когда я использую кнопку для кнопки "Поиск", она работает (см. ниже исходники),

  <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;"/>

но когда я использую кнопку submit для поиска, она не работает (см. ниже исходники), почему?

  <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;"/>

спасибо заранее, Джордж

Ответ 1

Вы можете даже использовать кнопку отправки таким образом:

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

Кнопка "Семантически отправить" используется для отправки форм, а не для переадресации страниц. Для этого вы должны использовать обычный тип кнопки. Однако, как я показал, вы можете использовать кнопку отправки тоже, но это не семантический, я думаю.

Нижеследующая строка запрещает отправку формы.

return false;

Вот что вам не хватает в вашем коде:)

Спасибо

Ответ 2

<button>-elements и <input type="button"/> ничего не делают по умолчанию, если вы не скажете им что-то сделать с Javascript.

<input type="submit"/> отправит форму, в которой он находится.

Итак, если <input type="submit"/> не будет работать, вы, вероятно, не в самом <form/>-element.

Ответ 3

Если это единственное поле в вашей форме, просто установите метод формы "get", и он будет работать.

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

Ответ 4

<button> означает "поместить кнопку на страницу и сделать то, что говорит событие onclick". Поэтому, если вы не пишете обработчик onclick, страница ничего не делает.

Если вы используете submit, это нормально, потому что вы хотите перенаправить на другую страницу.

Если вы все равно хотите использовать кнопку, вы можете сделать так:

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

Предупреждение: кнопка отправки с onclick

Если у вас есть кнопка отправки (внутри формы, она есть рабочая кнопка отправки) с событием onclick, некоторые браузеры будут:

1) выполнить onclick

2) выполнить submit

ваш onclick пытается перенаправить, но побеждает кнопка отправки.

Если вы хотите этого избежать, у вас есть несколько вариантов:

a) измените кнопку отправки на обычную кнопку

b) избегайте отправки предмета (добавьте onsubmit = "return false;", чтобы сформировать элемент)

c) используйте процедуру отправки (form action = "..." method = "get", не событие onclick), браузер будет счастлив, и вы можете управлять отправкой в событии onsubmit (вы можете отменить его или нет).

Ответ 5

убедитесь, что вы получили ввод в теге формы с помощью метода GET:

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

Ответ 6

Если я правильно понимаю, он не работает, потому что он не находится в теге формы. Если вы поместите его в тег формы с методом = "get", он должен работать. Кнопка работает, потому что она не должна быть в форме.