How to pass input values to ajax

Question

Okay, I'm new to Ajax. My problem is that I'm not sure how to retrieve data which is in the <input> tag and send it to Ajax. I have tried searching on the internet, but most of the solutions are using jQuery Ajax, which is what I'm not looking for at the moment.

Here is my code.

I want to save this value so that my Ajax can read it...

<input id="IDValue" name="IDValue" value="<?php echo $row['exist']?>" >

This is my Ajax script...

 function message(){
    var ID=$(".IDValue").val();
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function(){
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
             document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
                            }
                        };
             xmlhttp.open("POST","retrieveMsg.php?q=" +ID,true);
             xmlhttp.send();
               }

Please help me, guys. The reason I am doing this method is because (My previous post) Send input value to php using ajax with result printed to div

Well, but you are trying to use jQuery to get the input field value. You are putting a dot infront of it but you need a hash. (var ID = $("#IDValue").val();) — KiwiJuicer, Nov 19 '15 at 16:51
`var ID = document.querySelector('#IDValue').value;` is the non-jquery equivalent. — Shilly, Nov 19 '15 at 16:52
Have a look at https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files . — Felix Kling, Nov 19 '15 at 16:52
Possible duplicate of [jQuery Ajax POST example with PHP](http://stackoverflow.com/questions/5004233/jquery-ajax-post-example-with-php) — akhilp2255, Nov 19 '15 at 16:57
@akhilp2255 i dont thnk its a duplicate....That page was using jquery which was not what i was looking for. — topacoBoy, Nov 19 '15 at 17:28

score 4 · Accepted Answer · answered Nov 19 '15 at 16:57

4

Replace it

 var ID=$(".IDValue").val();

With

 var ID = document.getElementById("IDValie").value;

answered Nov 19 '15 at 16:57

kannan

691
5
17

Thanks ! but what if it is `` (if it is class ?) – topacoBoy Nov 19 '15 at 17:05
1

For class use this document.getElementsByClassName('IDValue'); – kannan Nov 19 '15 at 17:08
HAHA yesss ! I just tested and that solved my problem ! Thankss ! – topacoBoy Nov 19 '15 at 17:25

score 0 · Answer 2 · answered Nov 19 '15 at 17:06

i am confused about your $row['exist'] returns value or not and what html control you used for id="txtHint". here i have provided demo which same as your code in some way...try and have an idea and make changes as per your requirement...

<html>
    <head>
    <script src="jquery.js"></script>
    </head>
    <body>
        <input id="IDValue" name="IDValue" value="<?php echo 'hello';?>"  >
        <textarea id="txtHint"></textarea>
        <input type="button" value="Click" onClick="message()"/>
    <script>
        function message(){
    var ID=$("#IDValue").val();
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function(){
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
             document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
                            }
                        };
             xmlhttp.open("POST","login.php?q=" +ID,true);
             xmlhttp.send();
               }
    </script>
    </body>
</html>

How to pass input values to ajax

2 Answers2