2017-07-25 17 views
0

フォームを生成してjQuery serializeArray()を使用してページ上のカスタムhtmlオプションを使用してindex.phpと同じディレクトリにあるPHPスクリプトにフォームを送信しようとしています。データをPHPスクリプトに送信します。jquery serializeArray()wordpress

コンソールでは、jQuery("#formID").serializeArray();を提出すると、各入力の名前と値を格納するオブジェクトが返されます。

ただし、jQuery("resultDiv").load("phpScript.php", jQuery("#formID").serializeArray());を使用すると、PHP $_POST変数が空になります。

私は過去にこの方法を使用していましたが、これはうまくいきました。何らかの理由で、このケースでは機能しません。誰でもこの問題がありますか?ここでは、スクリプトは次のようになります。JSON.stringify(jQuery("#Subscribe").serializeArray())

<script type="text/javascript"> 
//need to validate the form 
jQuery("#sendForm").click(function() { 
    var email = jQuery("#sub_email").val(); 
    var email2 = jQuery("#sub_verify_email").val(); 
    var type_reseller = jQuery("#sub_type").val(); 
    var province = jQuery("#sub_prov").val(); 
    var country_from = jQuery("#sub_country").val(); 
    var password = jQuery("#password").val(); 
    var pw_verify = jQuery("#pw_verify").val(); 

    if ((email!=email2) || (email=="")) 

    { 
    alert("Email addresses do not match. Please re-enter."); 
    jQuery("#sub_email").focus(); 
    jQuery("#sub_email").select(); 
    } 


    else 
    { 

    if (type_reseller=="") 
    { 
     alert("Please enter a Reseller Type"); 
    } 

    else 
    { 
     if (province=="--") 
     { 
     alert("Please select a Province or State"); 
     } 
     else 
     { 
     if (country_from == "") 
     { 
      alert("Please select which country you are from"); 
      jQuery("#sub_country").focus(); 
      jQuery("#sub_country").select(); 
     } 

     else 
     { 
      if ((password!=pw_verify) || (password=="")) 
      { 
      alert("Your Password entry does not match. Please re-enter"); 
      jQuery("#password").focus(); 
      jQuery("#password").select(); 
      } 

      else 
      { 
      jQuery("#submitResult").html("<h2>Sending Form...</h2>"); 
      //submit the form to the database 
      jQuery("#submitResult").load("../subscribeSubmit.php", jQuery("#Subscribe").serializeArray()); 
      } 
     } 
     } 
    } 
    } 
}); 
//--> 

//need to submit the form using ajax 


</script> 

コンソールエントリはこの出力を生成します...

"[{"name":"sub_conf","value":"Yes"},{"name":"sub_conf2","value":"Yes"},{"name":"sub_type","value":"Service Provider"},{"name":"sub_firstname","value":"hello"},{"name":"sub_lastname","value":"world"},{"name":"sub_company","value":"anycompany"},{"name":"sub_city","value":"anycity"},{"name":"sub_prov","value":"ON"},{"name":"sub_country","value":"Canada"},{"name":"sub_country","value":""},{"name":"sub_email","value":"[email protected]"},{"name":"sub_verify_email","value":"[email protected]"},{"name":"password","value":"hello"},{"name":"pw_verify","value":"hello"},{"name":"nl_version","value":"H"},{"name":"sub_comments","value":"this is a comment"},{"name":"form_submitted","value":"TRUE"}]" 

私は、スクリプトはそれがArray() (empty array)を返さ受けていたものを見るために先のスクリプトでprint_r($_POST)を使用した場合。

ネットワーク応答は次のようになります。

General: 
Request URL:http://example.com/subscribeSubmit.php 
Request Method:POST 
Status Code:200 OK 
Remote Address:222.222.222.222:80 
Referrer Policy:no-referrer-when-downgrade 

Response Header: 
Connection:keep-alive 
Content-Type:text/html; charset=UTF-8 
Date:Tue, 25 Jul 2017 18:04:51 GMT 
Server:nginx 
Transfer-Encoding:chunked 
X-Powered-By:PHP/7.1.7 
X-Powered-By:PleskLin 

Request Headers 
Accept:text/html, */*; q=0.01 
Accept-Encoding:gzip, deflate 
Accept-Language:en-US,en;q=0.8 
Connection:keep-alive 
Content-Length:0 
Cookie:pum-7361=true 
Host:example.com 
Origin:http://example.com 
Referer:http://example.com/subscribe/ 
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36 
X-Requested-With:XMLHttpRequest 

任意の洞察力が参考になります。

+0

2つのこと:まず、 'jQuery("#Subscribe ")によって生成されたより良いフォーマットのデータで質問を更新するべきです。serializeArray() ';あなたが提供したコンソール出力は、データ構造が本当に何であるかが分かりません(JSONにシリアライズしてみてください)。次に、コンソールの[ネットワーク]タブを確認して、要求でどのデータが送信されているかを確認します。 – wmorrell

+0

@wmorrell私はあなたのために 'console.log'出力をフォーマットしました(これは予想以上に時間がかかりました)。 –

答えて

0

短い答え:jQuery.serializeArray()の代わりにjQuery.serialize()を使用してください。


私はこの問題は、シリアル化されたデータは、load機能が期待された形ではないと思います。したがって、要求はデータを送信しません(要求ヘッダーのContent-Length:0行に注意してください)。 documentation for loadは、最後まで渡されるデータの形式についてあまり言及していません。関連セクションを読み取ります

$("#objectID").load("test.php", { "choices[]": [ "Jon", "Susan" ] }); 

ドキュメントのよりよい部分はjQuery.ajaxのためのページです。サーバーへのデータの送信下にあっセクションは、読み取ります

データオプションは、フォームkey1=value1&key2=value2のクエリ文字列、またはフォーム{key1: 'value1', key2: 'value2'}のオブジェクトのいずれかを含むことができます。後者の形式を使用すると、データは送信される前にjQuery.param()を使用してクエリ文字列に変換されます。

データの形式は、{key1: 'value1'}の代わりに[{name: 'key1', value: 'value1'}]であることに注意してください。値の配列を適切な形式のオブジェクトに再マップできますが、直接メソッドserialize()を使用してkey1=value1文字列を取得する方がはるかに簡単です。

0

私は問題を理解しました...フォームのIDを「送信フォーム」に置き換えたので、送信するフォームデータはありませんでした。私はその行を削除し、すべて正常に機能しました。

関連する問題