3

我对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 的情况下做到这一点？

4

5 回答 5

8

没有 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;
于 2012-11-21T13:31:40.773 回答
1

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

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

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

​<a href="http://jsfiddle.net/QtLaX/1/" rel="nofollow">查看 JSFiddle。

于 2012-11-21T13:46:21.280 回答
0

使用 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>
于 2012-11-21T13:32:16.923 回答
0

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

$(document).ready(function(){
    $("#nameValidation").on('change', function() {
        var value = $("#nameValidation").value;
        //do your work here
    }
})
于 2012-11-21T13:34:42.147 回答
0

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