Send data to PHP popup page

Question

I want to send an input type element to a PHP page without form submission, only with javascript. I tried with $.ajax but no way. I don't know if it is a syntax or a logical error. Someone told me to do a single PHP page instead of two.

HTML page: (but is .php)

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="../../js/jquery-3.2.0.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
      #prova{
          padding-right: 1%;
          padding-top: 1%; 
      }
    </style>
    <script>
function ajax_post(apri){
    var stile = "top=10, left=10, width=650, height=600, status=no, menubar=no, toolbar=no scrollbars=no";
    // Create our XMLHttpRequest object
    var hr = new XMLHttpRequest();
    // Create some variables we need to send to our PHP file
    var url = "sperem.php";
    var fn = document.getElementById("id_buyers").value;
    alert(fn);
    var vars = "postid="+fn;
    alert(vars);
    hr.open("POST", url, true);
    // Set content type header information for sending url encoded variables in the request
    hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    // Access the onreadystatechange event for the XMLHttpRequest object
    hr.onreadystatechange = function() {
        if(hr.readyState == 4 && hr.status == 200) {
            var return_data = hr.responseText;
            document.getElementById("status").innerHTML = return_data;
        }
    }
    // Send the data to PHP now... and wait for response to update the status div
    hr.send(vars); // Actually execute the request
    /*window.open(apri, "", stile);*/
    document.getElementById("status").innerHTML = "processing...";
}
</script>

</head>
<body>
    <div class="container">
        <center><h1>Add Orders:</h1></center>
        <form class="form-inline"  name="ordine">
            <div class="form-group" id="prova">
                <label for="Buyers">ID_Buyers:</label>
                <input type="text" class="form-control" placeholder="Enter IDBUYERS" id="id_buyers">
            </div>

            <div class="form-group" id="prova">
                <input type="submit" id="bottone"  value="show" onClick="ajax_post('sperem.php')"/>
            </div>

        </form>
        <br><div id="status"></div>

    </div>
</body>
</html>

This is the Php page:

<?php
    $dato = $_POST['postid'];
    echo($dato);
?>

You should check your network tab as stated in another comment, and tell us what is the status and response of the Ajax request. (what you echo in sperem.php will be in the response, you don't load a new page) — Kaddath
– Kaddath, Commented Aug 21, 2017 at 7:38
It doesn't return to me any error.... this is the stranger thing ! — Massimo Rostagno
– Massimo Rostagno, Commented Aug 21, 2017 at 7:59

shaan · Accepted Answer · 2017-08-21 09:25:03Z

1

change this from

input type="submit"

to

input type="button"

then you can get the data what you have given in textbox.

The problem here is the form is submitting when you run it on the browser, as if you want run the ajax you need to run the page with out submitting/reloading.

Hope it helps you.

answered Aug 21, 2017 at 9:25

shaan

969 bronze badges

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

4 Comments

shaan Over a year ago

did you got any error or any message you can see in the console.I copied the whole code and just changed the button it is working for me

shaan Over a year ago

do one thing write this line in your php file : echo "<pre>";print_r($_REQUEST);echo "</pre>"; and keep alert message below this line 'var return_data = hr.responseText;' alert(return_data); see what you will get

Massimo Rostagno Over a year ago

nono sorry i didn't see the result on the html page xD now work thx, shaan u had right with input type !!! thx

shaan Over a year ago

if it helped than you can also help me with upvote buddy

Collectives™ on Stack Overflow

Send data to PHP popup page

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related