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

How can I get the value of an input field in javascript without submitting a form?

提问by BlueCola

I'm fairly new to javascript and have a question about how to get a value of an input field without submitting a form. I have the following small piece of code, which I'm using in combination with a realtime-validation script to validate the fields.

我对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>

I want the var NameValue to be the value of what you type into the input field so I can use it in the message which appears after the validation. When I change the value of the input field without submitting the form, the var NameValue is stil set to "HelloWorld". After doing some research I found out I could solve it using jQuery and it's function serialize(). Is there a way to do this without jQuery?

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

回答by Denys Séguret

Without jQuery :

没有 jQuery ：

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

The syntax you had would be usable to get an input by its name, not its id.

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

If what you want is to use this value when it changes, you can do that :

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

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;

回答by F0G

Your code works. It assign value of your input field to var NameValue. What you explained and what JQuery serializedoes are two different things.

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

Everything you need is to assign your code to right event:

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

<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.

? 请参阅 JSFiddle。

回答by Coding Duchess

use the onchange or onblur event to call this code:

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

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

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

This way it will get activated when the cursor leaves the textbox

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

<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>

回答by Roy Dictus

You can let your client-side code respond to a change in the value of the textbox, like so:

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

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

回答by epascarello

In your example, the variable only gets the value assigned to it at that moment in time. It does not update when the textbox updates. You need to trigger a function [onchange or onblur or keypress] and reset the variable to the new value.

在您的示例中，变量仅获取当时分配给它的值。当文本框更新时它不会更新。您需要触发一个函数 [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>