0

I would like to display a spinner icon when the user clicks the HTML form submit button and want to hide it when the data is posted to the destination URL. But, In my case, It's not working. Below is the code which I used for this function:

function PostData(){

var validation=false;
jQuery("#training_submit").prop('disabled', true);

jQuery('#error_traff').hide();
jQuery('#error_epost').hide();
jQuery('#error_fname').hide();
jQuery('#error_lname').hide();
jQuery('#error_skola').hide();
jQuery('#error_grade').hide();
jQuery('#error_municipality').hide(); 

var traff= jQuery("#training_traff").val().trim();
var email= jQuery("#training_epost").val().trim();
var firstname=jQuery("#training_fname").val().trim();
var lastname= jQuery("#training_lname").val().trim();
var phone= jQuery("#training_phone").val().trim();
var school= jQuery("#training_skola").val().trim();
var municipality = jQuery("#training_municipality").val().trim();
var grade= jQuery("#training_grade").val().trim();
var other= jQuery("#training_other").val().trim();

if(traff =="")
{
 jQuery('#error_traff').show();
 jQuery("#training_traff").focus(); 

}else if(email =="")
{
 jQuery('#error_epost').show();
 jQuery("#training_epost").focus(); 

}else if(firstname =="")
{
jQuery('#error_fname').show();
jQuery("#training_fname").focus();

}else if(lastname =="")
{
jQuery('#error_lname').show();
jQuery("#training_lname").focus();

}else if(school =="")
{
jQuery('#error_skola').show();
jQuery("#training_skola").focus();

}else if(municipality =="")
{
jQuery('#error_municipality').show();
jQuery("#training_municipality").focus();  
}else if(grade =="")
{
jQuery('#error_grade').show();
jQuery("#training_grade").focus();
}
else{
    jQuery('#loading').show();
    validation=true;
}



if(validation==true)
{
var user = {
            person_eMail: email,
            person_firstName:firstname,
            person_lastName: lastname,
            company_name: school,
            company_municipality:municipality,
            person_schoolYear: grade,
            person_position: "",
            project_name: "",
            Place: "",
            DeliveryLocation: "",
            person_phone: phone,
            Title: "",
            ReqDelivery: "",
            MeetingName: traff,
            OtherInfo: other,
            PreSchool: false,
            Elementary_Fk6: false,
            FK9: false,
            HighSchool_Other: false,
        Peephole: false,
            FormName:"Pedagogträffsintresse",
            RegisterDate: ""

        };

        jQuery.ajax({
   type: "POST",
   data: user,
   url: 'https://example.com/xxxx/xxx/',
   dataType: 'text',
   async: false,
   headers: {'Authorization': 'xxxxx'},
   success: function (result) {
            clearData(); 
jQuery('#loading').hide();
            jQuery('#training_success').show();
     console.log(result);
            },
            error: function(error) {
                console.log(error);
        $("#training_submit").prop('disabled', false);
            }
         });        
}else
{
    jQuery("#training_submit").prop('disabled', false);
}
}

Please look into the code and help me to resolve this issue.

Thanks.

  • please confirm opensource name and version. – kunj Aug 14 '18 at 8:19
0

Add function beforeSend before success function like as in ajax call.

beforeSend:function(){
 jQuery('#loading').show();
},
success: function (result) {
  • I have tried as per your suggestion but still, it's not working. – Siva Aug 16 '18 at 6:28
  • can you send me complete html form ? – Ansar Husain Aug 16 '18 at 6:52
  • I could not able to send the full HTML form, since it shows "too long by 6663 characters". How can I send it to you? Please comment. – Siva Aug 16 '18 at 8:24

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.