如何在不提交表單的情況下在javascript中獲取輸入字段的值？

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> 

我想要的變種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

使用的onchange或onblur事件調用此代碼：

VAR NameValue = document.forms [ 「窗體名稱」] [ 「nameValidation」]值。

這樣，當光標離開文本框

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

你可以讓你的客戶端代碼來響應在文本框中的值的變化，像這樣它會被激活：

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

Answer 4

在您的示例中，該變量僅在當時及時獲取分配給它的值。它在文本框更新時不更新。您需要觸發一個函數[onchange或onblur或按鍵]並將該變量重置爲新值。

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

Answer 5

您的代碼有效。它將輸入字段的值分配給變量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。