如何在不提交表單的情況下獲取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>

我希望var NameValue是您在輸入字段中鍵入的值，因此我可以在驗證后顯示的消息中使用它。 當我在不提交表單的情況下更改輸入字段的值時，var NameValue仍然設置為“ 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>

看到的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>