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が行うことは2つの異なることです。

必要なのは、コードを正しいイベントに割り当てることだけです:

<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 または 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 に答える
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 イベントを使用して、このコードを呼び出します。

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 に答える