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

Question

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?

Denys Séguret · Accepted Answer · 2012-11-21T14:05:27.763

8

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;

edited Nov 21 '12 at 14:05

answered Nov 21 '12 at 13:31

Denys Séguret

372,613
87
782
758

I don't think you understand my question. I want the var NameValue to be updated when the user change it. This way it's still "HelloWorld" when I call the var after the user changed the value. – BlueCola Nov 21 '12 at 13:42
I had called the variable value instead of NameValue to respect naming best practices but the variable (now with a new name) does change value (inside the useValue function) when the user changes the content of the input. – Denys Séguret Nov 21 '12 at 14:06

score 1 · Answer 2 · answered Nov 21 '12 at 13:46

1

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.

answered Nov 21 '12 at 13:46

loler

2,594
1
20
30

@BlueCola you should assign function to specific event too. Write assignment and validation in the same function and call it on event. i'll write difference next time, i have to leave, sorry. – loler Nov 21 '12 at 14:13
@BlueCola In my answer there is URL included, jquery [serialize on JQuery.com](http://api.jquery.com/serialize/). – loler Nov 22 '12 at 05:19

score 0 · Answer 3 · answered Nov 21 '12 at 13:32

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>

Roy Dictus · Answer 4 · 2012-11-21T13:56:15.720

0

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

edited Nov 21 '12 at 13:56

answered Nov 21 '12 at 13:34

Roy Dictus

32,551
8
60
76

I'm sorry, but isn't this jQuery? – BlueCola Nov 21 '12 at 13:35
This is indeed jQuery. He asked if there was a way without it, but as the example shows, if you do use jQuery, the code is much more elegant and readable. – Roy Dictus Nov 21 '12 at 13:38

score 0 · Answer 5 · answered Nov 21 '12 at 13:36

0

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>

answered Nov 21 '12 at 13:36

epascarello

204,599
20
195
236

I used this script after your edit, but when I add it inside my script tags the rest of the script seems not to be executed anymore. – BlueCola Nov 21 '12 at 13:54
Got the same problem with a script from another user, seems to be a problem with the LiveValidation script, weird enough. – BlueCola Nov 21 '12 at 14:01

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

5 Answers5