Passing variables to a PHP file through jQuery

Question

Really not familiar with jQuery. Is there anyway I can pass form data to a PHP file using jQuery?

FORM:

<div id="dialog-form" title="Fill in your details!">
  <form>
<fieldset>
  <label for="name">Name</label>
  <input type="text" name="name" id="name"/>
  <label for="email">Email</label>
  <input type="text" name="email" id="email" value=""/>
  <label for="phone">Phone</label>
  <input type="phone" name="phone" id="phone" value=""/>
</fieldset>
  </form>

It's a pop-up dialog with jQuery and gets submitted with:

$("#dialog-form").dialog({
  autoOpen: false,
  height: 450,
  width: 350,
  modal: true,
  buttons: {
    "Sumbit": function() {
    //VALIDATES FORM INFO, IF CORRECT
      if (Valid) {
        $.ajax({
          url: 'process-form.php',
          success: function (response) {
          //response is value returned from php
            $("#dialog-success").dialog({
              modal: true,
              buttons: {
                Ok: function() {
                  $(this).dialog("close");
                }
              }
            });
          }
        });
        $(this).dialog("close");
      }
    }
  }
});

What I want to do is to send the form data that the user enters into process-form.php, where it will be processed and sent as an email (which I can do). Just not to sure on the jQuery side of things. Is it even possible?

possible duplicate of jQuery POST form data and so many others... :-) — T.J. Crowder
– T.J. Crowder, Commented May 22, 2012 at 12:50
Got it going, thanks guys. ^Had a look through other questions first obviously. If i don't understand the code much, then i can't really tell if that's what i need or not. — user1410070
– user1410070, Commented May 22, 2012 at 13:10

Manse · Accepted Answer · 2012-05-22 12:48:46Z

3

You can use the .serialize() function

$('yourform').serialize();

Docs for .serialize() here

You would use it like this :

$.ajax({
    url: 'process-form.php',
    data: $('form').serialize(),  // **** added this line ****
    success: function (response) { //response is value returned from php
        $("#dialog-success").dialog({
            modal: true,
            buttons: {
                Ok: function () {
                    $(this).dialog("close");
                }
            }
        });
    }
});

answered May 22, 2012 at 12:48

Manse

38.1k11 gold badges88 silver badges112 bronze badges

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

Comments

jeffjenx · Accepted Answer · 2012-05-22 12:48:46Z

2

Yes, you can use the jQuery .post() method, which is detailed here

$.post( "process-form.php", $( "#dialog-form" ).serialize( ) );

answered May 22, 2012 at 12:48

jeffjenx

17.6k6 gold badges63 silver badges104 bronze badges

Comments

Jamie Dixon · Accepted Answer · 2012-05-22 12:50:06Z

1

Given your current code the easiest way is to serialize the form into the data property:

[...]
url: 'process-form.php',
data: $('#dialog-form').serialize()

answered May 22, 2012 at 12:50

Jamie Dixon

54.1k21 gold badges131 silver badges168 bronze badges

Comments

nealio82 · Accepted Answer · 2012-05-22 12:55:23Z

You're on the right lines with $.ajax, but you need to actually pass the data with the submission, which you haven't done so far. You're best off setting the 'type' as well.

$( "#dialog-form" ).dialog({
        autoOpen: false,
        height: 450,
        width: 350,
        modal: true,
        buttons: {
            "Sumbit": function() {
                //VALIDATES FORM INFO, IF CORRECT
                if (Valid ) {
                    $.ajax({
                       url: 'process-form.php',
                       type: "post",
                       data: {
                           name: $('[name=name]').val(),
                           email: $('[name=email]').val(),
                           phone: $('[name=phone]').val(),
                       },
                       success: function (response) { //response is value returned from php
                            $( "#dialog-success" ).dialog({
                                modal: true,
                                buttons: {
                                    Ok: function() {
                                        $( this ).dialog( "close" );
                                    }
                                }
                            });
                       }
                    });
                    $( this ).dialog( "close" );
                }

These variables should now be available in your PHP script as $_POST['name'], $_POST['email'] and $_POST['phone']

user1299518 · Accepted Answer · 2012-05-22 12:57:41Z

0

Whats the point for form if you're sending with ajax? On the problem now, get the inputs by:

var fields = [];
$("#dialog-form form fieldset > input").each(function() {
   fields.push( $(this)[0].value );
});
...
$.ajax({
   url: 'process-form.php',
   data:fields
...

answered May 22, 2012 at 12:57

user1299518

Collectives™ on Stack Overflow

Passing variables to a PHP file through jQuery

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related