Toggle visibility of buttons on forgotten required form fields

user_995931 0
Viewed 95

I have several forms on my profile page. Each form has its own submit button. When a user clicks the submit button, I want the button to disappear and show a spinner.

That works fine. The issue that I am running into, is that if the user forgets to fill-out a required field, the button does not return visible. The spinner stays visible. And the page would have to be reloaded.

Jquery is not intercepting the form submission (though I am open to that if it will fix the issue), it is only toggling the spinner and button visibility.

Any help?

 $("#profile-loading").hide();
        $("#social-loading").hide();
    
        $(document).ready(function () {
    
            $("#btn_profile").on("click", function (e) {
                $("#profile-loading").show();
                $("#btn_profile").hide();
                checkForm('#formProfile', "#btn_profile", "#profile-loading");
    
            });
    
            $("#btn_social").on("click", function (e) {
                $("#social-loading").show();
                $("#btn_social").hide();
            
                 checkForm('#formSocialMedia', "#btn_social", "#social-loading");
            });
    
        });
    
    
     //Check the passed in form and toggle the buttons and the loading spinner
        function checkForm($formid, $buttonid, $spinnerid) {
    
            var emptyFields = $('#formProfile .required').filter(function () {
                return $(this).val() === "";
            }).length;
    
            if (emptyFields === 0) {
                console.log("no emptyFields");
            } else {
                console.log("emptyFields");
                return false;
            }
    //I tried looping through each form field, but can't seem to get the form targeted.
            // $($formid + '.required').each(function () {
            //     console.log("checkForm");
            //
            //     var self = $(this)
            //     if (self.val() === '') {
            //         // empty
            //         console.log("empty");
            //     } else {
            //         // not empty
            //         console.log("NOT empty");
            //     }
            // });
    
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


    <form method="post" action="somelink" id="formProfile">
    <input id="name" name="name"  type="text" required="required">
    <input id="url" name="url"  type="text" required="required">
     <i class="fas fa-spinner fa-2x fa-spin" id="profile-loading"></i>
    <button id="btn_profile" type="submit">Save Changes</button>
    </form>
    
    <form method="post" action="someotherlink" id="formSocialMedia>
    <input id="facebook" name="facebook"  type="text" required="required">
    <input id="instagram" name="instagram"  type="text" required="required">
    <i class="fas fa-spinner fa-2x fa-spin" id="social-loading"></i>
    <button id="btn_social" type="submit">Save Changes</button>
    </form>

html jquery javascript
2 Answers

There are several issues with your code, but the most important one is that you are retrieving required form elements using a required class, which does not seem to be used in your html. Instead, you can retrieve required form elements using something like

$('#formProfile [required]')

which returns all subelements of formProfile which have the required attribute. You have another issue in that the id of the form is hard-coded. Instead of hard-coding it, use the variable $formid.

$($formid + ' [required]')
Jamie_859050

Try reordering your scripts, do validation first and check if it's pass. Make sure the checkForm returns true if valid.

$("#btn_profile").on("click", function (e) {
  if (checkForm('#formProfile', "#btn_profile", "#profile-loading")) {
    $("#profile-loading").show();
    $("#btn_profile").hide();
  }
});

$("#btn_social").on("click", function (e) {
  if (checkForm('#formSocialMedia', "#btn_social", "#social-loading")) {
    $("#social-loading").show();
    $("#btn_social").hide();
  }
});
user_21068600
Related