javascript - 从表单 javascript 传递变量值

Question

假设我有一个如下所示的 HTML 表单，并希望将文本字段中的值传递给 JS 变量。

<form name="testform" action="" method="?"
<input type="text" name="testfield1"/>
<input type="text" name="testfield2"/>
</form>

我之前只将值传递给 PHP 中的变量。在 javascript 中执行此操作时，我需要一个方法吗？主要问题是，它是如何完成的？

Answer 1

这里有几个例子：

Javascript：

document.getElementById('name_of_input_control_id').value;

jQuery：

$("#name_of_input_control_id").val();

基本上，您使用 Javascript/jQuery 从 DOM 中提取输入控件的值。

Answer 2

在“提交”中尝试以下操作：

var input = $("#testfield1").val();

Answer 3

答案都是正确的，但是如果您不将代码放入 document.ready 函数中，您可能会遇到问题......如果您的代码块在 html 部分之上，您将找不到任何带有 id 的输入字段，因为此时它没有存在...

document.addEventListener('DOMContentLoaded', function() {
   var input = document.getElementById('name_of_input_control_id').value;
}, false);

jQuery

jQuery(document).ready(function($){
    var input = $("#name_of_input_control_id").val();
});

Answer 4

如果您只是使用 Javascript 中的文本字段，您实际上并不需要一个method或一个属性action

像这样向表单添加一个submit按钮和一个处理程序，onsubmit

<form name="testform" onsubmit="return processForm(this)">
    <input type="text" name="testfield1"/>
    <input type="text" name="testfield2"/>
    <input type="submit"/>
</form>

然后在你的Javascript中你可以有这个processForm功能

function processForm(form) {
    var inputs = form.getElementsByTagName("input");
    // parse text field values into an object
    var textValues = {};
    for(var x = 0; x < inputs.length; x++) {
        if(inputs[x].type != "text") {
            // ignore anything which is NOT a text field
            continue;
        }

        textValues[inputs[x].name] = inputs[x].value;
    }

    // textValues['testfield1'] contains value of first input
    // textValues['testfield2'] contains value of second input

    return false;  // this causes form to NOT 'refresh' the page
}