将表单输入写入全局变量的更好方法？

这是我的表单的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

将表单输入写入全局变量的更好方法？

回答

相关问题