2

I have a registration form where i am trying to register new members. I am trying to pass both the formdata for image upload and ajax action in wordpress. Currently i am trying to print the values in console. But the ajax function is not at all called as action is not working. How can i do that. Please help me.

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

Functions

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();
    }
1

try to add the action in the formdata :

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

you can send any number of data in data in array this way :

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

and then access formData in php file as $_POST['form_data'].

  • This is actually not possible when processData = false and formData is a of type FormData – Jeffrey von Grumbkow Jan 22 '18 at 11:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.