Question

是否真的不熟悉 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 的侧面。这是否可行?

Answer 1

您可以使用 . serialize () 函数

$( yourform ).serialize();

< a href=" "http://api.jquery.com/sirgize/" rel="no follow" >Docs for.sregize () 这里

你会用它这样:

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

Answer 2

是的, 您可以使用 jQuery < code>. post () 方法, 详细 < a href=" "http://api.jquery.com/jQuery. post/" rel="nofollow" > 这里

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

Answer 3

鉴于您当前的代码, 最容易的方法就是将窗体序列成数据属性 :

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

Answer 4

您使用$. ajax 的正确线条, 但是您需要将数据通过提交文件, 您还没有这样做过。您最好同时设定型号。

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

这些变量现在应该作为$_POST[名称]、$_POST[电子邮件]和$_POST[电话]在您的 PHP 脚本中提供

Answer 5

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

友情链接