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
– KiwiJuicer, Commented Nov 19, 2015 at 16:51
var ID = document.querySelector('#IDValue').value; is the non-jquery equivalent. — Shilly
– Shilly, Commented Nov 19, 2015 at 16:52
Have a look at developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/… . — Felix Kling
– Felix Kling, Commented Nov 19, 2015 at 16:52
@akhilp2255 i dont thnk its a duplicate....That page was using jquery which was not what i was looking for. — topacoBoy
– topacoBoy, Commented Nov 19, 2015 at 17:28

kannan · Accepted Answer · 2015-11-19 16:57:23Z

4

Replace it

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

With

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

answered Nov 19, 2015 at 16:57

kannan

7116 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

topacoBoy Over a year ago

Thanks ! but what if it is <input class="IDValue" name="IDValue" value="<?php echo $row['exist']?>" > (if it is class ?)

kannan Over a year ago

For class use this document.getElementsByClassName('IDValue');

topacoBoy Over a year ago

HAHA yesss ! I just tested and that solved my problem ! Thankss !

PRANAV · Accepted Answer · 2015-11-19 17:06:16Z

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>

Collectives™ on Stack Overflow

How to pass input values to ajax

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related