PHP/JS - pass values with AJAX

Question

I am trying to get the value of a textbox without pass through form actions (because i cannot neither redirect to another page or refresh the current one).

index.php

into head

<script type="text/javascript">
    function send() {
       $.ajax({
       type:"POST",
       url: "script.php",
       data: {
              fname: document.getElementById("fname").value,
              lname: document.getElementById("lname").value
             },
       success: function callScriptAndReturnAlert() {
                     var sdata = new XMLHttpRequest();
                     sdata.onload = function() {
                        alert(this.responseText);
                     };
                     sdata.open("get", "script.php", true);
                     sdata.send();
                  } 
              });
        }
    </script>

into body

<button class="myclass" onclick="send();">MyButton</button>
<input type="text" id="fname" placeholder="First name here" />
<input type="text" id="lname" placeholder="Last name here" />

Button is before input just for UI stuffs

script.php

    $prev = $_SESSION['prev'];
    $fname = $_POST['fname'];
    $lname = $_POST['lname'];

    [....do something....]

    echo 'You used '.$fname.' and '.$lname;

Well.. the script.php doesnt receive the value of the inputs fname and lname.

I do get the values. Is this all the code? Didn't you include jQuery? It works if you include it. Why do you do a second ajax call when the first call to script.php completes? And why don't you use jQuery? — blablabla
– blablabla, Commented Mar 4, 2015 at 16:11

Thomas C. · Accepted Answer · 2015-03-04 17:05:19Z

2

You are trying to make two ajax calls when you only need one.

<script type="text/javascript">
    function send() {
      $.ajax({
       type:"POST",
       url: "script.php",
       data: {
              fname: $("#fname").val(),
              lname: $("#lname").val()
             },
       beforeSend: function(){
           alert('Sending');
       },
       success: function(data) {
              //Received data from PHP script
              alert(data);
       },
       error: function(){
           alert('Error !');
       },
       complete: function(){
           alert('Done');
       }  
     });
   }
    </script>

edited Mar 4, 2015 at 17:05

answered Mar 4, 2015 at 16:49

Thomas C.

3,7065 gold badges38 silver badges42 bronze badges

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

Comments

Alejandro Iván · Accepted Answer · 2015-03-04 17:02:16Z

0

$.post(
    'script.php', // Your PHP file
    { // The data to pass
        'fname' : $('#fname').val(),
        'lname' : $('#lname').val()
    }
).done(function(data) { // Here your AJAX already finished correctly.
    alert(data); // Show what the PHP script returned
});

The $.ajax(), $.get() and $.post() jQuery methods are for making AJAX calls and, due to that, they already manage their own XMLHttpRequest object.

answered Mar 4, 2015 at 17:02

Alejandro Iván

4,0611 gold badge23 silver badges31 bronze badges

Collectives™ on Stack Overflow

PHP/JS - pass values with AJAX

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related