2017-05-09 133 views
0

HTML的問題很簡單:爲什麼我的JS不能正確地從表格中提取價值?

<form> <input type="text" name="locSearch" id="locSearch" /> <button id="locSearchBtn"><i class="fa fa-search" id="search-icon"></i></button> </form>

JS:

$(document).ready(function() { 
getsWeather('seattle, wa', 'f'); 
$("#locSearchBtn").click(function() { 
    getsWeather(document.getElementById('locSearch').value, 'f'); 
}); 

當我提交表單(通過按ENTER鍵或單擊提交圖標,頁面重新加載,但與默認設置(即用'Seattle,wa作爲getsWeather函數的默認參數)。我需要它來提取輸入框中的任何內容,並將它用作getsWeather函數中的參數,但目前不工作。

任何想法?讓我知道如果你需要更多的代碼來了解它

+0

所以問題,你覺得頁面重新加載是越野車還是代碼應該如何工作?因爲如果它的越野車,那麼你需要防止表單被提交。否則,所有工作都會重置 – Sagar

+0

是因爲它每次重新加載整個腳本,即使我只是要求它用用戶在表單中輸入的值重新加載它? – pmath325

+0

@Jamiec老實說,我不確定,因爲我是一個初學者。我正在使用http://simpleweatherjs.com/框架。 – pmath325

回答

3

如果你想修改頁面,你需要防止單擊按鈕時提交表單。兩種方法做到這一點:

  1. 添加return falseclick處理程序按鈕結束。這將阻止表單提交(如果在客戶端上啓用了JavaScript)。

  2. type="button"添加到按鈕,所以它不再是提交按鈕。

理想情況下,你會合並#1處理表單提交,如果客戶端不支持JavaScript,來處理少數誰使用JavaScript瀏覽通過表單提交禁止在處理人Javascript成爲使用頁內更新啓用客戶端。

+0

這適用於按鈕。我該如何將這個添加到輸入中,以便當用戶按下時輸入相同的東西? – pmath325

+0

@ pmath325同樣處理'form'提交併返回false。我相信@ T.J。將更新細節。 – Jamiec

+0

@Jamiec你們都很棒。解釋爲什麼這會起作用?提交什麼才能做到這一點,所以我需要讓回報爲假? – pmath325

相關問題