How to Get Value from Form Without Submitting It

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

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;

How can I get all a form's values that would be submitted without submitting

The jquery form plugin offers an easy way to iterate over your form elements and put them in a query string. It might also be useful for whatever else you need to do with these values.

var queryString = $('#myFormId').formSerialize();

From http://malsup.com/jquery/form

Or using straight jquery:

var queryString = $('#myFormId').serialize();

How to get input box value without submitting form and put calculated value in other input box?

You can use jquery..like below..

you have to include first main basic jquery file
then,

    $(document).ready(function()
{
    $('#compoundinterest').focus(function()
    {
        var p = +$('#principal').val();
        var r = +$('#roi').val();
        var n = +$('#time').val();

        var i = ((p * r * n) / 100);

        $('#compoundinterest').val(i);

    });
});

here #.. shows ids of input boxes.. and '+' is used to convert string into integer..

Get value of input field without submitting form

Where do you init the XmlHttpRequest object? Something like this :

var ajaxRequest ;
if (window.XMLHttpRequest) 
{ 
ajaxRequest = new XMLHttpRequest();
}
else if (window.ActiveXObject) 
{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}

To complete my answer, I'll add 2 things :

• 1st : in onreadystatechange function, don't forget to test for the HTTP response code like this :
  
  if (xhr.readyState == 4 && xhr.status == 200)

• 2nd : you can use a JS framework like jQuery or Prototype to simplify your AJAX calls.

Response 2

Try to add this :

ajaxRequest.setRequestHeader('Content-Type','application/x-www-form-urlencoded;');

RESPONSE

You use GET method to post data ajaxRequest.open("GET", "test.php" + queryString, true);, but in your PHP, you use POST var to retrieve it $_POST['sheetid']
Just use this instead :

$_GET['sheetid'];

Get value of form text field with without submitting the form

For the input field you should add an OnChange to it. This event should call a function which will then set your link's value.

You can see an example of this here (it uses a button press though and not an input OnChange Event): http://www.java2s.com/Code/JavaScript/HTML/ChangeURLandtextofahyperlink.htm

Edit: Added a Stack Snippet illustrating the solution.

function SetSuggestLink() {    var suggest = document.getElementById('partnumber').value;    document.getElementById('innerSpan').innerHTML =         "Suggest Link: suggest.asp?partnumber=" + suggest;    document.getElementById('QueryLink').href =         "suggest.asp?partnumber=" + suggest;}

.style11 {  color:black;}
.style2 {  text-decoration:none;}

<form id="form3" name="form3" method="post" action="formpost?rmaid=SomeValue">    <input name="partnumber" type="text" id="partnumber" size="10"            OnChange="SetSuggestLink()" /> </br>    <a id="QueryLink" class="style2" href="#">      <span id="innerSpan" class="style11">Suggest Link</span>    </a></br>    <input name="invoice" type="text" id="invoice" size="15" /></form>

---

Related Topics