Making a ajax request to server using Javascript

Question

Im making an application similar to JSbin / JS fiddle. I want to make an ajax request to the server to update my database when the user clicks on the save code button with the values that the user has typed in the textarea. Could someone help me out. I don't know whats wrong , my database doesn't get updated with the textarea content .I would like to use only pure javascript

MY HTML code




<main>
  <form id="myform" method="post">
    <div id="bodyContainer">
      <div class="Panels" id="HtmlPanel">
        <textarea
          id="html"
          name="html"
          placeholder=" ENTER HTML CODE HERE"
        ></textarea>
      </div>
      <div class="Panels hidden" id="CssPanel">
        <textarea
          id="css"
          name="css"
          placeholder=" ENTER CSS CODE HERE"
        ></textarea>
      </div>
      <div class="Panels hidden" id="JsPanel">
        <textarea
          id="js"
          name="js"
          placeholder=" ENTER JAVASCRIPT HERE"
        ></textarea>
           </div>
              <iframe class="Panels" id="OutputPanel" placeholder="Output"></iframe>
           </div>
          </form>
          </main>

       button HTML:<button onclick="SaveCode()" type="submit" id="save-code-btn" name="save-code">
        Save Code
      </button>

JAVASCRIPT:

  function SaveCode(){  const request = new XMLHttpRequest();
    
    const requestData = {
    html: document.getElementById("html").value,
    css: document.getElementById("css").value,
    js: document.getElementById("js").value,
  };
    request.onreadystatechange = function() {
    // Check if the request is compete and was successful
    if(this.readyState === 4 && this.status === 200) {
        alert("Succesful")
    }
};
    request.open("post", "SaveCode.php",true);
    request.setRequestHeader(
      "Content-type",
      "application/x-www-form-urlencoded"
    );
    request.send("html="+requestData.html);
  }


PHP CODE(SaveCode.php)
  <?PHP
  session_start();
   include('DBconnection.php');
   if($_SERVER['REQUEST_METHOD']=='POST'){
   $html = mysqli_real_escape_string($_POST['html']);
   $query= 'UPDATE users details SET html="'.$html.'"WHERE 
     id="'.$_SESSION['id'].'"';
     $result= mysqli_query($connection, $query);
     if($result){
     echo "Success";
      }else{
      echo "Fail";
       }   


      }
       ?>

one thing that I would verify is that on EVERY PHP page you have session_start(); at the top — imvain2
– imvain2, Commented Oct 29, 2020 at 18:00
Did you checked that data are well sent ? Do you have any Exception triggered ? An error message in Javascript console ? — Grégory C
– Grégory C, Commented Oct 29, 2020 at 18:03
You don't actually execute the query anywhere, you just create a variable to contain it. When you do execute it, will the missing space between the closing quote and WHERE stop it working? — droopsnoot
– droopsnoot, Commented Oct 29, 2020 at 18:10
You really need to look at prepared statements instead of escaping the post string. — droopsnoot
– droopsnoot, Commented Oct 29, 2020 at 18:11

MTakumi · Accepted Answer · 2020-10-29 18:29:48Z

1

If you do it local machine you should run your files on some php server, like Openserver or lamp.

And try to change your url to something like that:

http://localhost/SaveCode.php

http://127.0.0.1/SaveCode.php

Hope this helps you if you are testing on local machine =)

answered Oct 29, 2020 at 18:29

MTakumi

3403 silver badges11 bronze badges

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

1 Comment

Kevin Rodrigues Over a year ago

Ya ,im doin it on a xampp server

Collectives™ on Stack Overflow

Making a ajax request to server using Javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related