Sending data to server with $.ajax request

Question

I have a simple form with 2 input:

<form name="contact" id="contact">
<input type="text" id="firstName" name="firstName"/>
<input type="text" id="lastName" name="lastName"/>
<input type="submit" value="Send"/>
</form>

On submit I want using jQuery ajax method to send data to print.php. Code looks next:

var contact=$("#contact");

contact.on("submit",function(event){
  var firstName=$("#firstName").val();
  var lastName=$("#firstName").val();

  $.ajax({
        type:"POST",
        url:"print.php",
        dataType:"json",
        data:{
             fname:firstName,
             lname:lastName
        }               
  });
 });        

I want that Print.php script simply prints sent data, but nothing is happening. Script looks next:

<?php
$fname = $_POST['fname'];
$lname=$_POST['lname'];

echo $fname;
?>

Problem is obviusly in print.php.

Answer 1

you need to use following.

$("form").submit(function(event) {

  event.preventDefault();
  $.ajax({
    type: "POST",
    url: "print.php",
    dataType: "json",
    data: {
      fname: firstName,
      lname: lastName
    },
    success: functon(dt) {
      alert(dt);
    }
  });
});

Answer 2

There is no $subject variable anywhere.

You set the first name and last name variables properly.

To check your script's response (which will be an error), go to your console and check network, and then repsonse data.

Change $subject to $fname and it should "work"

Also add on .on() submit event handler to your jQuery AJAX call like so:

$('form').on('submit', function() {
    //ajax call
});

Edit:

You made an edit and changed $subject to $name . There is no $name variable either.

Answer 3

You do not need the JSON type on the ajax form. And include the preventDefault to avoid natural action(page refreshes when submitting)

contact.on("submit",function(event){
  var firstName=$("#firstName").val();
  var lastName=$("#firstName").val();

  event.preventDefault();

  $.ajax({
    type:"POST",
    url:"print.php",
    data:{
         fname:firstName,
         lname:lastName
    }               
  });
});

Answer 4

It looks like your problem is that your HTML form doesn't know where to go ounce the submit happens and that is why nothing is happening. You need to tell your HTML form to run javascript.

You could link your HTML form to your javascript by using JQuery's .submit() method document here http://api.jquery.com/submit/

This will trigger your javascript to run once it is submitted if you wrap all your javascript around it.

$("form").submit(function( event ) {

    var firstName=$("#firstName").val();
    var lastName=$("#firstName").val();

    $.ajax({
            type:"POST",
            url:"print.php",
            dataType:"json",
            data:{
                 fname:firstName,
                 lname:lastName
            }               
    }); 

});

Also you could give your HTML form an action so it knows what to do when the form is submitted.

Below we are saying run myFunction() when this form is submitted, we will then need to wrap all your javascript in myFunction().

<form name="contact" action=“javascript:myFunction();”>
    <input type="text" id="firstName" name="firstName"/>
    <input type="text" id="lastName" name="lastName"/>
    <input type="submit" value="Send"/>
</form>

Your javascript will look like this

function myFunction(){

    var firstName=$("#firstName").val();
    var lastName=$("#firstName").val();

    $.ajax({
            type:"POST",
            url:"print.php",
            dataType:"json",
            data:{
                 fname:firstName,
                 lname:lastName
            }               
    });

}

Once you get that far you will want to fix your php. The way you have it now $name is empty and won't print anything. You will want to fill the variable in before you echo it out. I am assuming you want $name to contain a concatenated version of $fname and $lname.

<?php
    $fname = $_POST['fname'];
    $lname=$_POST['lname'];

    $name =  $fname . ' ' . $lname;

    echo $name;
?>

That should work for you.