Question

I am currently learning forms and Ajax posting without a page refresh. I have tree forms and one submit button. I have assigned php variables to each input field that will take the value of what’s typed in. The value is echoed for each input box. Is it possible to submit all three forms at the same time? And if yes, how would I submit these values to a MySQL database after the button click?

Ajax:

function() {
    $.ajax({
        type: "POST",
        url: "posting.php",
        data: { 
            "name": $("#name").val(),
            "age": $("#age").val(),
            "phone": $("#phone").val(),
            "email": $("#email").val(),
            "job": $("#job").val(),
            "hobby": $("#hobby").val(),
        },
        success: function(data) {
            $("#inputResult").html(data);
        }
    });
}

PHP

if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
    if (isset($_POST['name'])) {
        $name = $_POST['name'];
        echo '<div id="name_input"><h2 class="lastTab">Name:</h2>' . $name . '</div>';
    }

    if (isset($_POST['age'])) {
        $age = $_POST['age'];
        echo '<div id="age_input"><h2 class="lastTab">Age:</h2>' . $age . '</div>';
    }

    if (isset($_POST['phone'])) {
        $phone = $_POST['phone'];
        echo '<div id="phone_input"><h2 class="lastTab">Phone:</h2>' . $phone . '</div>';
    }

    if (isset($_POST['email'])) {
        $email = $_POST['email'];
        echo '<div id="email_input"><h2 class="lastTab">Email:</h2>' . $email . '</div>';
    }           

    if (isset($_POST['job'])) {
        $job = $_POST['job'];
        echo '<div id="job_input"><h2 class="lastTab">Job:</h2>' . $job . '</div>';
    }       

    if (isset($_POST['hobby'])) {
        $hobby = $_POST['hobby'];
        echo '<div id="hobby_input"><h2 class="lastTab">Hobby:</h2>' . $hobby . '</div>';
    }
}

HTML

<div id="tab-1" class="ui-tabs-panel ui-tabs-hide">
    <form autocomplete="off" method="post" enctype="multipart/form-data" id="postForm1" name="postForm1" class="postForm">
       Name
        <input type="text" id="name" class="detail" name="name" value="" /> 
        Age
        <input type="text" id="age" class="detail" name="age" value="" />   
    </form>         
    </div>.


    <div id="tab-2" class="ui-tabs-panel ui-tabs-hide">
    <form autocomplete="off" method="post" enctype="multipart/form-data" id="postForm2" name="postForm2" class="postForm">
        Phone Number
        <input type="text" id="phone" class="detail" name="phone" value="" />       
        Email
        <input type="text" id="email" class="detail" name="email" value="" /> 
    </form>     
    </div>

    <div id="tab-3" class="ui-tabs-panel ui-tabs-hide">
    <form autocomplete="off" method="post" enctype="multipart/form-data" id="postForm3" name="postForm3" class="postForm">
        Job
        <input type="text" id="job" class="detail" name="job" value="" /> 
        Hobby
        <input type="text" id="hobby" class="detail" name="hobby" value="" />       
    </form>     
    </div>

Answer 1

You can either use javascript to catch the submit of the form or you can trigger a function that you ve created. It doesn t have to be 3 forms or even a form element for the second case to work

HTML:

<div id="tab-1" class="ui-tabs-panel ui-tabs-hide">
    <form autocomplete="off" method="post" enctype="multipart/form-data" id="postForm1" name="postForm1" class="postForm">
       Name
        <input type="text" id="name" class="detail" name="name" value="" /> 
        Age
        <input type="text" id="age" class="detail" name="age" value="" />   
    </form>         
    </div>.


    <div id="tab-2" class="ui-tabs-panel ui-tabs-hide">
    <form autocomplete="off" method="post" enctype="multipart/form-data" id="postForm2" name="postForm2" class="postForm">
        Phone Number
        <input type="text" id="phone" class="detail" name="phone" value="" />       
        Email
        <input type="text" id="email" class="detail" name="email" value="" /> 
    </form>     
    </div>

    <div id="tab-3" class="ui-tabs-panel ui-tabs-hide">
    <form autocomplete="off" method="post" enctype="multipart/form-data" id="postForm3" name="postForm3" class="postForm">
        Job
        <input type="text" id="job" class="detail" name="job" value="" /> 
        Hobby
        <input type="text" id="hobby" class="detail" name="hobby" value="" />
        <input type="button" value="SAVE" onclick="saveThem()" />       
    </form>     
    </div>

AJAX:

    function saveThem() {

var name = $.trim($("#name").val());
var age = $.trim($("#age").val());
var phone = $.trim($("#phone").val());
var email = $.trim($("#email").val());
var job = $.trim($("#job").val());
var hobby = $.trim($("#hobby").val());

var dataString = 'name='+name+'&age='+age+'&phone='+phone+'&email='+email+'&job='+job+'&hobby='+hobby;

      $.ajax({
          type: "POST",
          url: 'http://www.yourdomain.com/something.php',
          data: dataString,
          dataType: "json",
          success: function(data) {
            if(data.response){ alert(data.message); }
            $("#inputResult").html(data);
          }
      });
    }

something.php

//Get posted variables
$name = (isset($_POST['name'])) ? strip_tags($_POST['name']) : NULL;
$age = (isset($_POST['age'])) ? strip_tags($_POST['age']) : NULL;
$phone = (isset($_POST['phone'])) ? strip_tags($_POST['phone']) : NULL;
$email = (isset($_POST['email'])) ? strip_tags($_POST['email']) : NULL;
$job = (isset($_POST['job'])) ? strip_tags($_POST['job']) : NULL;
$hobby = (isset($_POST['hobby'])) ? strip_tags($_POST['hobby']) : NULL;

//execute your query
$sql = "INSERT INTO ...";

//Return results back to ajax  
$result = array(
'response' => 1,
'message' => 'We have a success!'
);
echo json_encode($result);

So in conclusion is pretty much the same as using php but in the middle there is some javascript.
Form: create an id for each element that you want to send to your server(php)
Js: catch values based on element ids and send them to php
Php: get values, clean them, query or anything else and send results back to js

EDIT: Using jQuery serialize()

$('form').submit(function() {
 $dataString = $(this).serialize(); //This will produce the same result, based on input names

});