如何在沒有服務器的情況下使用HTML表單

Question

我不是一個web開發人員，並且想要了解更好的方式來傳遞變量。在過去，我使用各種方式將事情傳遞給Java腳本函數。我從來沒有使用表單，因爲我總是將它們與服務器和數據庫關聯起來我有一個網站，其中用戶選擇更改網站的內容。

我想知道如果你可以使用沒有任何服務器的表單，只是爲了將一些東西傳遞給一個JavaScript函數，用來更改頁面內容。對於基本的例子，如果有人選擇男性的頁面背景變成藍色，如果他們選擇女性背景變成粉紅色。表單將成爲去的方式，只是onsubmit調用一個JavaScript函數？我怎樣才能將表單內容傳遞給javascript函數？

Answer 1

是的，你絕對可以用表格/輸入/任何HTML元素的，從來沒有跟一個服務器，就不要指望來存儲數據！你是正確的使用事件（比如你提到的onsubmit）來觸發Javascript函數。

這是一個快速和骯髒的例子（沉重的骯髒），不喜歡你想要什麼。請注意，與顏色更改之前等待提交表單不同，我會在從下拉列表中選擇性別後立即執行此操作。

http://jsfiddle.net/wG8K4/1/

Answer 2

表單元素可以用作全局變量的一種形式 - 持有可以在單個頁面中使用並由所有javascript共享的狀態。

但是，這可能導致代碼變得脆弱而難以理解。

我建議保持傳遞函數的參數，只要你在單個頁面的上下文中。

如果您需要將數據傳遞到另一個頁面，那麼表單可以使生活更輕鬆 - 使用表單中的值將以表格action屬性中引用的頁面作爲鍵值對傳遞給頁面。如果您使用POST方法，它們將在標題中傳輸。

Answer 3

您不需要服務器/數據庫來使用表單。表單只是一種將變量從一個文件傳遞到另一個文件的方法，不管這是一個html文件還是一些php腳本或你有什麼。如果您堅持使用GET表單，您的表單將自然地將其數據打包到您的頁面的URL中，然後您可以訪問它們。例如（借用http://www.onlineaspect.com/2009/06/10/reading-get-variables-with-javascript/）：

<script language="javascript"> 
function $_GET(q,s) { 
    s = s ? s : window.location.search; 
    var re = new RegExp('&'+q+'(?:=([^&]*))?(?=&|$)','i'); 
    return (s=s.replace(/^?/,'&').match(re)) ? (typeof s[1] == 'undefined' ? '' : decodeURIComponent(s[1])) : undefined; 
} 

var usersName = $_GET('username'); 
if(typeof(usersName)!='undefined'){ 
    document.write('<h1>Hi there, '+usersName+'</h1>'); 
} 

</script> 
<form> 
    <input type="text" name="username" /> 
    <input type="submit" value="Say my name" /> 
</form> 

Answer 4

你不會傳遞參數。你可以讓「onsubmit」調用一個javascript函數，然後在函數內使用javascript來訪問用戶選擇的實際控件。您可以使用GetElementById函數來檢索某個元素，然後確定該元素的值。

如果您只想更改背景顏色，則可以使用javascript更改body標籤的backgroundColor屬性或頁面上的任何標籤。

雖然您必須記得從函數返回false，否則表單將被提交。

Answer 5

你可以在html中包含各種表單域，甚至不需要表單標籤。如果你照顧的唯一的ID，你可以閱讀他們的價值觀很簡單：

I am <br /> 
<input type="checkbox" id = "male"> male <br /> 
<input type="checkbox" id = "female"> female 

現在你可以在JavaScript中使用這樣的：

var isMale = document.getElementById('male').checked, 
    isFemale = document.getElementById('female').checked,; 
if (isMale){ 
    /*do you thing*/ 
} else if (isFemale) { 
    /*do other things*/ 
} 

這不是最好的例子，但它給你的想法，我希望。

Answer 6

您要尋找的基本事件是表單的submit事件。如果沒有問題，只需使用事件處理程序，你可以做這樣的事情：

var myForm = document.getElementById('myForm'); 
myForm.onsubmit = function() { 
    // ... 
}; 

因爲你只是使用JavaScript，你不想的形式提交實際。 （邊點：由於您使用的JS，你應該建立這種形式，並將其與 JS添加到的頁面，但是這是一個完全不同的問題。）你可以取消表單的默認操作，像這樣：

myForm.onsubmit = function() { 
    // ... 
    return false; 
}; 

在我們開始訪問數據之前，請確保您抓取您需要的元素。它使事情變得更快一些，因爲每次提交表單時都不必從DOM中選擇整個元素。例如：

var myForm = document.getElementById('myForm'), 
    myTextField = document.getElementById('myTextField'), 
    mySelectBox = document.getElementById('mySelectBox'), 
    // ... 

根據您擁有什麼樣的表單元素，可以通過不同的方式訪問其數據。文本輸入，文本區域，並選擇框是很容易：

var textValue = myTextField.value, 
    selectValue = mySelectBox.value; 

單選按鈕和複選框是一個有點複雜，因爲你必須要經過每一一個，看看哪一個（或多個）是/是檢查，哪個（些）不是/都沒有，像這樣：

var isOneChecked = checkboxOne.checked, 
    isTwoChecked = checkboxTwo.checked; 

與你的藍/粉紅色背景例如去，你可能會想一些與此類似：

var myForm = document.getElementById('myForm'), 
    maleBox = document.getElementById('maleBox'); 

myForm.onsubmit = function() { 
    var isMale = maleBox.checked; 
    if (isMale) { 
     document.body.style.backgroundColor = 'manlyBlue'; 
    } else { 
     document.body.style.backgroundColor = 'sexistPink'; 
    } 
}; 

便箋
如果您確實決定與事件處理程序一起使用，請記住一次只能有一個應用於您的表單。如果您想要在submit事件中附加不同的功能，則必須使用事件聽衆，這是一個完全不同的球類遊戲並引入了自己的問題。

最後一個例子只檢查「我是男人」元素的值，因爲（大概）你使用的是單選按鈕，而你只有兩個選項。如果「我是一個人」沒有被檢查，那麼另一個應該是。但如果表格以開頭，則既不檢查選項，也可以將其視爲一個錯誤。

最後一個例子也使用內聯樣式來改變主體的背景顏色。打字讓我很傷心。更加可以忍受的方法是根據需要添加/刪除類，但是這又超出了這個問題的範圍。

Answer 7

如果你的願望是通過使用Javascript，你可以很容易地做到這一點使用DOM因爲形式將有一個length屬性的表單元素遍歷每個input將被表示爲這個陣列狀物體的指標：

所以對於：

<form id="f" action=""> 
    Male<input type="radio" name="gender" value="male" /> 
    Female<input type="radio" name="gender" value="female" /> 
    <input type="submit" value="submit" /> 
</form> 

你可以做這樣的事情：

var f = document.getElementById('f'); 

f.onsubmit = function (e) { 
    e = e || window.event; 
    var et = e.target || e.srcElement, 
     gender; 

    if (e.preventDefault) { e.preventDefault(); } else { e.returnValue = false; } 

    for (var i = 0, il = et.length; i < il; i++) { 
     if (et[i].name = 'gender' && et[i].checked) { 
      gender = et[i].value; 
     } 
    } 

    if (gender == 'male') { 
     document.body.style.backgroundColor = 'cyan'; 
    } else if (gender) { 
     document.body.style.backgroundColor = 'pink'; 
    } 
}; 

See example →