3

本当にjQueryに慣れていません。jQueryを使用してフォームデータをPHPファイルに渡すことはできますか?

形：

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

これは jQuery を使用したポップアップ ダイアログであり、次のように送信されます。

$("#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");
      }
    }
  }
});

私がやりたいことは、ユーザーが入力したフォーム データを に送信することですprocess-form.php。そこで処理され、電子メールとして送信されます (これは可能です)。jQuery側についてはよくわかりません。それは可能ですか？

4

5 に答える 5

3

.serialize()機能を使用できます

$('yourform').serialize();

.serialize() のドキュメントはこちら

次のように使用します。

$.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");
                }
            }
        });
    }
});
于 2012-05-22T12:48:46.663 に答える
2

はい、こちら.post()で詳しく説明されている jQuery メソッドを使用できます

$.post( "process-form.php", $( "#dialog-form" ).serialize( ) );
于 2012-05-22T12:48:46.560 に答える
1

現在のコードを考えると、最も簡単な方法は、フォームをデータ プロパティにシリアル化することです。

[...]
url: 'process-form.php',
data: $('#dialog-form').serialize()
于 2012-05-22T12:50:06.600 に答える
0

あなたは$.ajaxで正しい方向に進んでいますが、実際には、これまでに行っていない送信でデータを渡す必要があります。'type'も設定するのが最善です。

$( "#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" );
                }

これらの変数は、PHPスクリプトで$ _POST ['name']、$ _ POST ['email']、および$_POST['phone']として使用できるようになります。

于 2012-05-22T12:55:23.847 に答える
0

ajaxで送信している場合、フォームのポイントは何ですか? 今の問題では、次の方法で入力を取得します。

var fields = [];
$("#dialog-form form fieldset > input").each(function() {
   fields.push( $(this)[0].value );
});
...
$.ajax({
   url: 'process-form.php',
   data:fields
...
于 2012-05-22T12:57:41.960 に答える