如何在不提交表单的情况下获取 javascript 中输入字段的值？答案

【问题标题】：How can I get the value of an input field in javascript without submitting a form?如何在不提交表单的情况下获取 javascript 中输入字段的值？
【发布时间】：2012-11-21 13:30:32
【问题描述】：

我是 javascript 的新手，并且有一个关于如何在不提交表单的情况下获取输入字段的值的问题。我有以下一小段代码，我将其与实时验证脚本结合使用来验证字段。

<form name="FormName" method="post" />
    <input type="text" id="nameValidation" value="HelloWorld" />
    <script type="text/javascript">
       var NameValue = document.forms["FormName"]["nameValidation"].value;
    </script>
</form>

我希望 var NameValue 成为您在输入字段中键入的值，以便我可以在验证后出现的消息中使用它。当我在不提交表单的情况下更改输入字段的值时，var NameValue 仍设置为“HelloWorld”。在做了一些研究之后，我发现我可以使用 jQuery 和它的函数 serialize() 来解决它。有没有办法在没有 jQuery 的情况下做到这一点？

【问题讨论】：

标签： javascript jquery ajax input-field

【解决方案1】：

没有 jQuery：

var value = document.getElementById('nameValidation').value;

您所拥有的语法可用于通过名称而不是 id 获取输入。

如果您想要在更改时使用此值，您可以这样做：

var nameValidationInput = document.getElementById('nameValidation');
function useValue() {
    var NameValue = nameValidationInput.value;
    // use it
    alert(NameValue); // just to show the new value
}
nameValidationInput.onchange = useValue;  
nameValidationInput.onblur = useValue;

【讨论】：

我认为你不明白我的问题。我希望在用户更改 var NameValue 时对其进行更新。这样，当我在用户更改值后调用 var 时，它仍然是“HelloWorld”。
我已经调用了变量值而不是 NameValue 以尊重命名最佳实践，但是当用户更改输入内容时，变量（现在使用新名称）确实会更改值（在 useValue 函数内部） .

【解决方案2】：

您的代码有效。它将输入字段的值分配给 var NameValue。你解释的和JQuery serialize 做的是两件不同的事情。

您需要做的就是将代码分配给正确的事件：

<form name="FormName" method="post" />
    <input type="text" id="nameValidation" value="HelloWorld" onchange="myFunction()"/>

</form>
<script type="text/javascript">
function myFunction(){
    var NameValue = document.forms["FormName"]["nameValidation"].value;
    alert(NameValue);
}
</script>

see the JSFiddle.

【讨论】：

@BlueCola 您也应该将功能分配给特定事件。在同一个函数中编写赋值和验证，并在事件中调用它。下次我会写不同的，我得走了，对不起。
@BlueCola 在我的回答中包含 URL，jquery serialize on JQuery.com。

【解决方案3】：

使用 onchange 或 onblur 事件调用此代码：

var NameValue = document.forms["FormName"]["nameValidation"].value;

这样当光标离开文本框时它就会被激活

<input type="text" id="nameValidation" value="HelloWorld" onblur="changeVal();" />

<script type="text/javascript">

    function changeVal() {
        var NameValue = document.forms["FormName"]["nameValidation"].value;
alert(NameValue);
    }
</script>

【讨论】：

【解决方案4】：

在您的示例中，该变量仅获取当时分配给它的值。文本框更新时它不会更新。您需要触发一个函数 [onchange 或 onblur 或 keypress] 并将变量重置为新值。

<form name="FormName" method="post" />
    <input type="text" id="nameValidation" value="HelloWorld" />
    <script type="text/javascript">
         var myTextbox = document.getElementById("nameValidation");
         var nameValue = myTextbox.value;
         myTextbox.onchange = function() {
             nameValue = myTextbox.value;
         };
    </script>
</form>

【讨论】：

我在您编辑后使用了这个脚本，但是当我将它添加到我的脚本标签中时，脚本的其余部分似乎不再执行了。
从另一个用户的脚本中遇到了同样的问题，似乎是 LiveValidation 脚本的问题，很奇怪。

【解决方案5】：

您可以让您的客户端代码响应文本框值的变化，如下所示：

$(document).ready(function(){
    $("#nameValidation").on('change', function() {
        var value = $("#nameValidation").value;
        //do your work here
    }
})

【讨论】：

对不起，这不是 jQuery 吗？
这确实是 jQuery。他问是否有没有它的方法，但如示例所示，如果您确实使用 jQuery，代码会更加优雅和可读。