Getting user input for ajax post request?

Question

I am going through the Ajax tutorial at: http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp

They have this example for submitting request to a server:

<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("POST","demo_post2.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
<div id="myDiv"></div>

</body>
</html>

The problem I have with the above example is that the values for fname and lname are hardcoded. How can allow a user to enter different values for fname and lname via a <form> tag and still be able to use ajax javascript code?

Answer 1

created jsfiddle example for the same:- http://jsfiddle.net/c2S5d/24/

added two inputs for fname and lname and fetched there values and set into the params.(As of now commented the code for ajax send) try above given link and enter some values into the text boxed and see the alert) code:-

<!DOCTYPE html>
<html>

<head>
    <script>
        function loadXMLDoc() {
            alert("calle")
            var xmlhttp;
            if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            } else { // code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function() {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
                }
            }
            var fname = document.getElementById('fname').value;
            var lname = document.getElementById('lname').value
                //xmlhttp.open("POST","demo_post2.asp",true);
                //xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            var param = "fname=" + fname + "&lname=" + lname;
            alert(param)
                //xmlhttp.send(param);
        }
    </script>
</head>

<body>
    <h2>AJAX</h2>
    <button type="button" onclick="loadXMLDoc()">Request data</button>
    <div id="myDiv"></div>
    <input type='text' id='fname' />
    <input type='text' id='lname' />
</body>

</html>

Getting user input for ajax post request?

Question

1 answers

solution1
2 ACCPTED 2015-01-28 07:30:42

Getting user input for ajax post request?

Question

1 answers

solution1 2 ACCPTED 2015-01-28 07:30:42

solution1
2 ACCPTED 2015-01-28 07:30:42