html button v.s. html提交？

我有一個輸入文本框和一個搜索提交按鈕，當用戶點擊搜索提交按鈕時，我想將用戶重定向到url http://testsearch/results.aspx?k=<value of text box k>，例如，如果用戶將「StackOverflow」放入文本框中，然後單擊搜索按鈕，我想用戶重定向到以下頁面，html button v.s. html提交？

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

但是當我使用提交搜索按鈕，它不起作用（見下面s爲什麼？）

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

由於事先喬治

來源

2009-12-30 George2

這兩個代碼示例似乎都是相同的 – naivists 2009-12-30 10:07:14

我不明白「按鈕」的情況如何工作，如果您不在onclick事件中放置任何代碼。這是完整的例子嗎？ – helios 2009-12-30 10:13:48

糾正我的示例，謝謝！ – George2 2009-12-30 10:23:47

你甚至可以使用提交按鈕這樣：

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

語義提交按鈕來提交表單不重定向頁面。你應該使用正常的按鈕類型。但是，正如我所示，你也可以使用提交按鈕，但這不是我想的語義。

下面的行禁止提交表單。

return false;

這就是你缺少你的代碼是什麼:)

感謝

來源

2009-12-30 10:04:32 Sarfraz

爲什麼提交不符合我的情況？我想知道瀏覽器如何處理按鈕處理的不同提交，以便它使提交在我的方案中不起作用？ – George2 2009-12-30 10:07:25

你需要把返回false;聲明在提交按鈕的onlcick事件結束時，以便它不提交，而是執行onclick事件中告知的操作。 – Sarfraz 2009-12-30 10:08:51

對不起，我忘了在我的代碼中添加onclick事件。剛剛糾正。在我的情況下提交和按鈕有什麼區別，爲什麼提交不起作用？在我原來的代碼中，沒有Form元素。 – George2 2009-12-30 10:28:23

<button>-elements和<input type="button"/>默認情況下不會做任何事情，除非你告訴他們做什麼用的JavaScript。

<input type="submit"/>將提交它的形式。

所以，如果<input type="submit"/>將無法正常工作，您在<form/>-element本身得到它可能不是。

來源

2009-12-30 10:09:28 Harmen

對不起，我忘了在我的代碼中添加onclick事件。剛剛糾正。在我的情況下提交和按鈕有什麼區別，爲什麼提交不起作用？在我原來的代碼中，沒有Form元素。 – George2 2009-12-30 10:29:28

要使提交按鈕有效，我們必須將其包含在表單中？ – George2 2009-12-31 06:49:39

是的，在'

' – Harmen 2009-12-31 09:54:30

<button>的意思是「在頁面上放一個按鈕，並做任何onclick事件說」。所以，如果你不寫一個onclick處理程序，頁面不會執行任何操作。

如果使用提交是好的，因爲你想重定向到另一個頁面。

如果你想使用按鈕無論如何，你可以做到這一點的方法：

<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）execu te提交

您的onclick嘗試重定向，但提交按鈕獲勝。

如果你想避免它，你有一些選擇：

一）改變提交按鈕和普通的按鈕

B）避免了提交的東西（添加的onsubmit =「返回false;」形成元素）

c）使用提交過程（表單action =「...」method =「get」，沒有onclick事件），瀏覽器會很高興，你可以在onsubmit事件中控制提交（你可以取消它或不）。

來源

2009-12-30 10:09:40 helios

中包裝''元素對不起，我忘了在我的代碼中添加onclick事件。剛剛糾正。在我的情況下提交和按鈕有什麼區別，爲什麼提交不起作用？在我原來的代碼中，沒有Form元素。 – George2 2009-12-30 10:28:56

我添加了一個非常重要的警告（我前段時間調試過類似的情況）。我認爲它回答了這個問題。 – helios 2009-12-30 10:36:17

如果用戶通過在文本字段中輸入提交表單，提交按鈕的onclick事件也不會被觸發。 – robertc 2009-12-30 11:07:00

如果這是您窗體中唯一的字段，只需將窗體的方法設置爲「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>

來源

2009-12-30 10:10:09

對不起，我忘了添加我的代碼中的onclick事件。剛剛更正。在我的情況下提交和按鈕之間有什麼區別，爲什麼提交不起作用？在我的原始代碼中，沒有Form元素。 – George2 2009-12-30 10:26:45

如果你想用JavaScript來做，我會建議看@Sarfraz艾哈邁德的回答。但是，除非你有充足的理由在那裏使用JavaScript，否則我會選擇純HTML（例如在我的回答中）。 – 2009-12-30 10:31:59

要使提交按鈕起作用，我們必須將其包含在表單中？ – George2 2009-12-31 06:50:14

確保你有一個表單標籤的輸入與一個GET方法：

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

來源

2009-12-30 10:12:35

對不起，我忘了在我的代碼中添加onclick事件。剛剛糾正。在我的情況下提交和按鈕有什麼區別，爲什麼提交不起作用？在我原來的情況下，沒有表單元素。 – George2 2009-12-30 10:27:50

如果我理解正確的，它不工作，因爲它不是一個形式的標籤。如果你把它放在form =「get」的form標籤中，它應該可以工作。該按鈕的作品，因爲它不必在一個窗體。

來源

2009-12-30 10:12:55

對不起，我忘了在我的代碼中添加onclick事件。剛剛糾正。在我的情況下提交和按鈕有什麼區別，爲什麼提交不起作用？在我原來的代碼中，沒有Form元素。 – George2 2009-12-30 10:27:19

html button v.s. html提交？

回答

相關問題