Question

我对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将stil设置为“HelloWorld”。在做了一些研究后，我发现我可以使用jQuery解决它，它的函数是serialize（）。有没有办法在没有jQuery的情况下做到这一点？

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

Answer 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

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

Answer 4

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

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

Answer 5

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

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

5 个答案: