4

私は現在、ページを更新せずにフォームとAjax投稿を学習しています。ツリーフォームと1つの送信ボタンがあります。入力された値を取得するphp変数を各入力フィールドに割り当てました。値は入力ボックスごとにエコーされます。3つのフォームすべてを同時に送信することはできますか？はいの場合、ボタンをクリックした後、これらの値をMySQLデータベースに送信するにはどうすればよいですか？

アヤックス：

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>
4

1 に答える 1

3

javascriptを使用しsubmitてフォームをキャッチするか、作成した関数をトリガーすることができます。2番目のケースが機能するために、3つのフォームまたはフォーム要素である必要はありません。

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);

したがって、結論としてはphpを使用するのとほとんど同じですが、途中にjavascriptがあります。
フォーム：サーバーに送信する要素ごとにIDを作成します（php）
Js：要素IDに基づいて値をキャッチし、phpに送信します
Php：値を取得し、クリーンアップし、クエリを実行し、結果をjsに送り返します

編集：jQueryserialize（）の使用 

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

});
于 2013-02-02T18:59:37.977 に答える