php variable in jquery.ajax request

Question

I have a form in a php file that takes user entered values and sends the data into a .txt file.

Now it works fine when the form is filled, the 'submit' button is clicked and the user is sent to a 'confirmation/completed' page, whilst the data received is put into a .txt file.

What i want to do is use ajax and jquery to have the form => completed/confirmation without being sent to the other page.

The problem is the user data is not being transmitted now to the .txt file.

PHP: (confirmation.php)

<?php
  $color = $_POST['color'];
  $fp = fopen('userdata.txt', 'w');
  $valstring = "What Color: " . $color . "\r\n";
  fwrite($fp, $valstring);
  fclose($fp);
?>

AJAX/JQUERY: (button clicked from form.php)

$(document).ready(function() {

var cir = {
    load: $('<div />', { class: 'loading' }),
    contain: $('#contain')
}

$('input[type="submit"]').on('click', function(e) {
e.preventDefault();

    $.ajax({
        url: 'confirmation.php',
        type: 'POST',
        beforeSend: function() {
            cir.contain.append(cir.load);
        },
        success: function(data) {
            cir.contain.html(data);
        }
    });
});

});

When using the ajax above the userdata.txt file only has the What Color: entered into it. The $color value that the user selected has not been recognised.

I know the code works without the ajax, but i would like to have the ajax (no page refresh) method, if possible.

Thanks in advance for any help.

Cyclonecode · Accepted Answer · 2013-07-05 15:02:34Z

1

You must set the data parameter in your ajax call, something like this should work:

<form>
   <select name="color" id="color">
      <option value="Red">Red</option>
      <option value="Green">Green</option>
   </select>
   <select id="age">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
   </select>
   <input type="text" id="name" />
   <input type="submit" value="SEND" />
</form>

$('input[type="submit"]').on('click', function(e) {
  $.ajax({
     url:'confirmation.php', 
     type:'POST',
     // get the selected values from 3 form fields
     data:'color=' + $('#color').val() + 
          '&age=' + $('#age').val() + 
          '&name=' + $('#name').val(),
     success:function(data) {
        // ...
     }
  });
  return false;
});

You should probably read more about jQuery.ajax

edited Jul 5, 2013 at 15:02

answered Jul 5, 2013 at 14:09

Cyclonecode

30.4k11 gold badges77 silver badges97 bronze badges

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

5 Comments

user1648449 Over a year ago

Thanks for trying to help me. My form has the method="POST" and action="confirmation.php" set. Is that needed? Also, my user values received are from selects. The user values are taken from drop down options, does that change things?

Cyclonecode Over a year ago

Nope it isn't needed if you're sending the data through ajax. Just try it and see how it works. If your have a select field you should set the id of the field to color for the above code to work. The return false part will stop the form from being sent in ordinary fashion.

user1648449 Over a year ago

Okay, using your code the value is being sent to the confirmation.php page (i used the echo function to check), but the userdata.txt file is empty. The $valstring = "What Color: " . $color . "\r\n"; is not recognised. The value is being carried over though.

user1648449 Over a year ago

Sorry, my mistake. I made an error. It does work. Thank You. One question though. If I have more than one form element, another select, input etc. How do I write in the data: line, to accommodate for multiple id fields?

Cyclonecode Over a year ago

@user1648449 - I updated the answer so it now sends data from 3 different form fields

clagio · Accepted Answer · 2013-07-05 14:13:26Z

0

you are not sending any data in your ajax post, for this reason the variable $color it's empty in the confirmation.php try changing this:

$.ajax({
    url: 'confirmation.php',
    type: 'POST',
    beforeSend: function() {
        cir.contain.append(cir.load);
    },
    success: function(data) {
        cir.contain.html(data);
    }

with:

var formColor = $("#colorId").val(); //where ColorId it's the color input type ID 
$.ajax({
    url: 'confirmation.php',
    type: 'POST',
    data: { color: formColor },
    beforeSend: function() {
        cir.contain.append(cir.load);
    },
    success: function(data) {
        cir.contain.html(data);
    }

answered Jul 5, 2013 at 14:13

clagio

1161 silver badge6 bronze badges

1 Comment

user1648449 Over a year ago

Thanks for the help, but it didn't work. Maybe I've messed up something in my code. I'm using select and option tags, as my values are listed in drop-downs.

Collectives™ on Stack Overflow

php variable in jquery.ajax request

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related