web-dev-qa-db-ja.com

WordpressのAjaxでアクションとフォームデータの両方を渡す方法は？

私は新しい会員を登録しようとしている登録フォームを持っています。画像のアップロード用のフォームデータとワードプレスのajaxアクションの両方を渡します。現在私はコンソールで値を印刷しようとしています。しかし、アクションが機能していないため、ajax関数はまったく呼び出されません。どうやってやるの。私を助けてください。

_ html _ 

<form id="landlordregform" method="post" action="" enctype="multipart/form-data" novalidate="novalidate">
   <div class="registrationformbox landloardregformbox">
      <div id="custommsg"></div>
      <table width="100%">
         <tbody>
            <tr>
               <td><input type="text" name="username" placeholder="USERNAME*" id="username" class="valid" aria-invalid="false"></td>
               <td><input type="password" name="password" placeholder="PASSWORD*" id="password" class="valid validate-equalTo-blur" aria-invalid="false"></td>
               <td><input type="password" name="confirmpassword" placeholder="CONFIRM PASSWORD*" class="valid" aria-invalid="false"></td>
            </tr>
            <tr>
               <td><input type="text" name="name" placeholder="NAME*" class="valid" aria-invalid="false"></td>
               <td><input type="text" name="email" placeholder="EMAIL*" id="email" class="valid" aria-invalid="false"></td>
               <td><input type="text" name="telephone" placeholder="TELEPHONE*" class="valid" aria-invalid="false"></td>
            </tr>
            <tr>
               <td><input type="text" name="town_city" placeholder="TOWN/CITY*" class="valid" aria-invalid="false"></td>
               <td><input type="text" name="postcode" placeholder="POST CODE*" class="valid" aria-invalid="false"></td>
               <td><input type="file" name="profilepic" class="valid" aria-invalid="false"></td>
            </tr>
         </tbody>
      </table>
      <table width="100%">
         <tbody>
            <tr>
               <td><textarea name="address" placeholder="ADDRESS*" class="valid" aria-invalid="false"></textarea></td>
            </tr>
         </tbody>
      </table>
      <div class="submitubttonbox"><button type="button" name="landlordregisterbutton" id="landlordregisterbutton" class="qbutton white big_large">Register</button></div>
   </div>
</form>

jQuery 

jQuery("#landlordregisterbutton").click(function(){
        if(jQuery("#landlordregform").valid()){
            var formData=new FormData(document.getElementById('landlordregform'));  
            //formData.append( 'file', input.files[0] );            
            jQuery.ajax({
                url: jQuery("#cusajaxurl").val(),
                type: 'POST',
                data: formData + '&action=custom_landlord_registration_process', 
                cache: false,
                processData: false, 
                contentType: false,     
                success: function(data) {
                    console.log(data);
                }
            });
        }
    });

関数 

add_action('wp_ajax_nopriv_custom_landlord_registration_process','custom_landlord_registration_process');

add_action('wp_ajax_custom_landlord_registration_process','custom_landlord_registration_process');

    function custom_landlord_registration_process(){
        //$formdata=array();
        //parse_str($_POST['formdata'],$formdata);


        print_r($_POST);

        die();
    }
jqueryajax
2
Nitin Johnson

フォームデータにアクションを追加してみます。

        var formData=new FormData(document.getElementById('landlordregform')); 

        formData.append("action", "custom_landlord_registration_process");   

        jQuery.ajax({
            url: jQuery("#cusajaxurl").val(),
            type: 'POST',
            data: formData, 
            cache: false,
            processData: false, 
            contentType: false,     
            success: function(data) {
                console.log(data);
            }
        });
1
mmm

このようにして、配列内のデータに含まれる任意の数のデータを送信できます。

jQuery.ajax({
        url: jQuery("#cusajaxurl").val(),
        type: 'POST',
        data: {
            'action' : 'custom_landlord_registration_process',
            'form_data' : formData,
        },
        cache: false,
        processData: false, 
        contentType: false,     
        success: function(data) {
            console.log(data);
        }
    });

そして、phpファイルのformDataに$ _POST ['form_data']としてアクセスします。

0
Annapurna