將表單輸入寫入全局變量的更好方法？

這是我的表單的HTML。將表單輸入寫入全局變量的更好方法？

<body> 
<form onsubmit="return handleSubmit(this)" id="form1"> 
    <h1>Choose your words!</h1> 
    <fieldset> 
    <label>First Noun: <input type="text" name="noun1" ></label><br> 
    <label>Second Noun: <input type="text" name="noun2"></label><br> 
    <label>First Adjective: <input type="text" name="adjective1"></label><br> 
    <label>Second Adjective: <input type="text" name="adjective2"></label><br> 
    <label>First Verb: <input type="text" name="verb1"></label><br> 
    <label>Second Verb: <input type="text" name="verb2"></label><br> 
    </fieldset> 
    <button type="submit" id="pushMe">Create Mad Lib</button> 
</form> 
<div id="placeholder"> 

</div>

這裏是當我按下按鈕時運行的功能。變量是在此函數之上聲明的全局變量，沒有值。示例var noun1;

function handleSubmit(form) { 
    noun1 = form.querySelector('input[name=noun1]').value; 
    noun2 = form.querySelector('input[name=noun2]').value; 
    adjective1 = form.querySelector('input[name=adjective1]').value; 
    adjective2 = form.querySelector('input[name=adjective2]').value; 
    verb1 = form.querySelector('input[name=verb1]').value; 
    verb2 = form.querySelector('input[name=verb2]').value; 

    return false; 
}

有沒有更好的方式讓我的表單輸入寫入我的全局變量以便稍後寫入網頁？

來源

2015-11-19 maxwelldem

爲什麼你使用全局變量？ – Bergi

我正在使用另一個函數將全局變量的值寫入DOM，所以我認爲我不能將我的變量放在函數中... – maxwelldem

這是真的，您不能使它們成爲'handleSubmit'函數的本地。但這並不意味着它們應該是全球性的。在兩個函數都可以訪問的作用域中聲明變量。 – Bergi

是更好的選擇在那裏你可以使用這個名稱空間，你可以避免沒有全局變量。

var formVal = formVal ||{}; 

function handleSubmit(form) { 
    formVal.noun1 = form.querySelector('input[name=noun1]').value; 
    formVal.noun2 = form.querySelector('input[name=noun2]').value; 
    formVal.adjective1 = form.querySelector('input[name=adjective1]').value; 
    formVal.adjective2 = form.querySelector('input[name=adjective2]').value; 
    formVal.verb1 = form.querySelector('input[name=verb1]').value; 
    formVal.verb2 = form.querySelector('input[name=verb2]').value; 

    return false; 
}

或者，如果你正在處理全局變量，你應該wrapp代碼的功能有輕微的性能優勢，因爲它是快看東西在局部範圍內，而不必走了作用域鏈進入全球範圍。

(function(window,undefined){ 
//your code 
})(window);

來源

2015-11-19 05:14:16

所有命名錶單控件都可用作表單的屬性。此外，每個表單都有一個elements集合，它是表單中的所有控件。因此，您可以遍歷所有控件並根據需要處理它們，例如

// In global scope 
var global = this; 

function handleSubmit(form) { 
    var control, controls = form.elements; 
    for (var i=0, iLen=controls.length; i<iLen; i++) { 
    control = controls[i]; 
    if (global.hasOwnProperty(control.name)) { 
     global.name = control.name.value; 
    } 
    } 
}

但是，這是非常危險的。如果任何表單控件的名稱與全局/窗口對象的標準屬性相同，則它將覆蓋它（例如名稱）。這將是更好的值存儲在一個對象，所以你可以這樣做：

var global = {noun1:'', noun2:'', adjective1:'', adjective2:'', verb1:'', verb2:''};

但也許得到的目的不是全球以外的名稱。此外，名稱屬性不必是唯一的，因此您應該處理控件具有相同名稱的情況（例如單選按鈕）。

但更好的是給你想要處理特定屬性值的控件，比如說一個類。然後，您可以測試該課程，並根據控件的價值做任何事情。

來源

2015-11-19 05:52:32 RobG

將表單輸入寫入全局變量的更好方法？

回答

相關問題