jquery – How to add a ” waiting” icon for an ajax in WP frontend?

[ad_1]

.error
{color: black;}
/*onsubmit=”return validation()”*/

html,body{
peak: 100%;
}
.loader{
display: none;
}

Contact Us

Your Name

Your Email

Your message

Send !!
–>

jQuery(document).prepared(perform($) 
{   
    $('#reg_form').validate(
    {           
        guidelines:
        {
            inputuname:
            {
                required: true,
                minlength: 2,
                maxlength: 10
            },
            inputemail:
            {
                required: true
            },
            message:
            {
                required: true
            }               
        },
        messages:
        {               
            inputuname:
                    {
                        required: "Please Enter A Valid UserName",
                        minlength: "Input Is Must Grater Than Two Words"
                    }

            //message:"Enter Your Message Please!"
        },
        submitHandler: perform(kind) 
        {                           
            event.preventDefault();
            var namenew=$('#nameid').val();
            var emailnew=$('#emailid').val();
            var msgnew=$('#message').val();
            //console.log('okay');
            var form1=$('#reg_form');
            var hyperlink="<?php echo admin_url('admin-ajax.php'); ?>";  
                //alert(hyperlink);
            $.ajax(
            {
                url: hyperlink,
                kind: 'POST',
                data: 
                {
                    action: 'form_data',
                    data:form1.serialize()
                },
                earlier thanSend:perform()
                {
                    $('.loader').present();
             },
                success:perform(respo)
                {                           
                    $('#reg_form')[0].reset();
                    //$('#reg_form')[0].closest;
                    msg="<div>"+respo+ "</div>";
                    $('#msg').html(msg);
                    console.log(respo);
                    $('.loader').conceal();                        
                                                                    
                }
            })// Ajax Closed    
            
        }// submitHandler Closed
    })
    
});

[ad_2]

Source link

Leave a Reply