phpwordpress

how convert simple form submit to ajax submit without loading page like add product to cart function


how convert simple form submit to ajax submit without loading page like add the product to cart function ` "> ">

                    <button  type="submit" name="addift_add_wl_btn_popup">Add to Wishlist</button>
                </form>

session

public function addify_get_sectiuon_btn() {
        $wl_p_id     = '';

            if ( isset( $_POST['addift_add_wl_btn_popup'] ) ) {

            if ( isset( $_POST['addify_wl_product_id'] ) ) {
                $addify_add_to_wl_pro = sanitize_text_field( wp_unslash( $_POST ['addify_wl_product_id'] ) );
            }
            $addify_wl_var1 = array();
         $addify_wl_var1 = WC()->session->get( 'addify_section_name' );
         if ( !empty( $addify_wl_var1) ) {
            $addify_wl_var2 =$addify_add_to_wl_pro;
            array_push( $addify_wl_var1 ,$addify_wl_var2);
            WC()->session->set( 'addify_section_name',  $addify_wl_var1 );
         } else {
            WC()->session->set( 'addify_section_name',  array($addify_add_to_wl_pro) );
         }
         // WC()->session->set( 'addify_section_name', null );
        }
    }

Solution

  • #In jQuery# listen to form submit and attach this code.

    Remember to add event.preventDefault()'

      $.post(
                        ajaxurl,
                        { action: 'action_registered_by_add_action', addift_add_wl_btn_popup: addift_add_wl_btn_popup, addify_wl_product_id:addify_wl_product_id  },
                        function( response ) {
                            //do something
                        }
                    );
    
    

    #In PHP#

    //register ajax
    add_action( 'wp_ajax_ACTION_NAME', function(){
                //base stufs here
            } );
    ```--
    ###or### 
    

    add_action( 'wp_ajax_ACTION_NAME', [$this, 'method'] );

    
    
    
    
    ##EDITED##
    
    
        
        //add this register to handle both logged in and not logged in users
        
        //add_action( 'wp_ajax_addify_get_sectiuon_btn',array( $this, 'addify_get_sectiuon_btn'));
        //add_action( 'wp_ajax_nopriv_addify_get_sectiuon_btn',array( $this, 'addify_get_sectiuon_btn'));
    
        
    
    ( function ( $ ) {
        $( function () {
            
            $( document ).ready( function ( $ ) {
                jQuery( '.addift_add_wl_btn_popup_class' ).click( function () {
                    alert( "ok" );
                } );
                
                $( '.addift_add_wl_btn_popup_class' ).click( function ( event ) {
                    
                    event.preventDefault(); //prevent default behaviour - you have must add function param named `event`
    
                    /*
                    *   if its *.js file you must localize script to add variable see more https://wordpress.stackexchange.com/a/190299
                    *   if its *.php file you can do this dirty inline php inside script
                    */
                    let ajaxurl = "<?php echo admin_url( 'admin-ajax.php' ) ?>"; // wp ajax url obtain by wc helper {{ admin_url( 'admin-ajax.php' ) }}
                    
                    let addift_add_wl_btn_popup = $('#addift_add_wl_btn_popup').val(); // or anything else - value taken from form
                    let addify_wl_product_id = $('#addify_wl_product_id').val();  // or anything else - value taken from form
    
                    $.post( ajaxurl, {
                        action: 'addify_get_sectiuon_btn',
                        addift_add_wl_btn_popup: addift_add_wl_btn_popup,
                        addify_wl_product_id: addify_wl_product_id
                    },
                    function ( response ) {
                        //do something s
                    } );
                } );
            } );
            
        } );
    } )( jQuery );