0

I wan to submit the page data on the same page it self using. I went through several questions and answers but found most of them use Jquery. I don't want to use Jquery. Here's a snippet of code I tried so far..

xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("messageID").innerHTML=xmlhttp.responseText;
        }
    }
let id  = "message_id=" + message_id;
xmlhttp.open("POST" , ""  , true);
xmlhttp.send(id);

message_id is the value of hidden input type. Now when I run this code. I get the whole page inside my response area. I am using PHP for backend. I have a PHP file included in this page and its a bootstrap modal. In the modal-content part, I have added the code,

if(isset($_POST['message_id'])){
   echo $_POST['message_id'];
else{
   echo "Not receievd";
}

How to submit ajax data on the same page with vanilla javascript?

Rifky Niyas
  • 1,737
  • 10
  • 25
  • https://stackoverflow.com/questions/50776445/vanilla-javascript-version-of-ajax – Giacomo M Dec 12 '20 at 08:50
  • @GiacomoM That's a javscript version of ajax right? I want to submit the data on same page with AJAX. I found JQuery solutions but I need Javascript version – Rifky Niyas Dec 12 '20 at 08:57
  • Did you read the post? Its an ajax call withuot jquery. – Giacomo M Dec 12 '20 at 08:58
  • @GiacomoM Yes I did and thats what I have done in my code as well. In that post, data is submitted to another page but I need to submit it in the same page. I need **not just a vanilla js solution to JQuery AJAX but also vanilla js solution to submit in the same page itself** – Rifky Niyas Dec 12 '20 at 09:02
  • whats the difference between other page and same page? just change the url of ajax request. – Giacomo M Dec 12 '20 at 09:03
  • @GiacomoM Well, that's what I did try and I get the whole page on response area – Rifky Niyas Dec 12 '20 at 09:04
  • `if(isset($_POST['message_id'])){ echo $_POST['message_id']; die(); }` . If you don't stop the script with die() it carries on executing and returns everything else. Of course, you need to ensure that this if statement is the first thing in you're script. But this kind of issue is why it's mostly a good idea to separate your Ajax endpoints into a separate file. – ADyson Dec 12 '20 at 09:05
  • @GiacomoM you're missing a crucial point here - the issue is on the server side not the JS side – ADyson Dec 12 '20 at 09:06
  • @ADyson I did try it. Still the same response. What is meant by AJAX endpoints? Considering your opinion on the server side, heres what happens in server side. I am fetching data in a kind of a card like structure with a hidden onput. At the end of while loop I have included the modal file. I wanna make an AJAX request on the same page and I have to display the data of hidden input on that modal. – Rifky Niyas Dec 12 '20 at 09:16
  • By endpoint I just mean (in PHP terms) the script file that is called by the Ajax request. Normally it's good practice to keep that separate from the script files which display the main pages. Then you don't have to worry about it accidentally echoing other content in response to an Ajax request. – ADyson Dec 12 '20 at 09:23
  • " I did try it. Still the same response"...did you make sure the `if` statement is at the very start of the PHP script as I mentioned? Have you debugged to ensure that the POST array contains what you're expecting it to (so that the if statement will definitely be true)? I don't get the impression you are digging into the problem very much. – ADyson Dec 12 '20 at 09:24

0 Answers0