CODEWITHSUNDEEP
javascriptjqueryajaxinput-field
BlueCola
BlueCola

Reputation: 302

How can I get the value of an input field in javascript without submitting a form?

I'm fairly new to javascript and have a question about how to get a value of an input field without submitting a form. I have the following small piece of code, which I'm using in combination with a realtime-validation script to validate the fields.

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

I want the var NameValue to be the value of what you type into the input field so I can use it in the message which appears after the validation. When I change the value of the input field without submitting the form, the var NameValue is stil set to "HelloWorld". After doing some research I found out I could solve it using jQuery and it's function serialize(). Is there a way to do this without jQuery?

Upvotes: 4

Views: 33350

Answers (5)

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382194

Without jQuery :

var value = document.getElementById('nameValidation').value;

The syntax you had would be usable to get an input by its name, not its id.

If what you want is to use this value when it changes, you can do that :

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;

Upvotes: 8

Roy Dictus
Roy Dictus

Reputation: 33139

You can let your client-side code respond to a change in the value of the textbox, like so:

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

Upvotes: 0

loler
loler

Reputation: 2587

Your code works. It assign value of your input field to var NameValue. What you explained and what JQuery serialize does are two different things.

Everything you need is to assign your code to right event:

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

Upvotes: 1

epascarello
epascarello

Reputation: 207517

In your example, the variable only gets the value assigned to it at that moment in time. It does not update when the textbox updates. You need to trigger a function [onchange or onblur or keypress] and reset the variable to the new value.

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

Upvotes: 0

Coding Duchess
Coding Duchess

Reputation: 6919

use the onchange or onblur event to call this code:

var NameValue = document.forms["FormName"]["nameValidation"].value;

This way it will get activated when the cursor leaves the textbox

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

Upvotes: 0

Related Questions