代码之家 › 专栏 › 技术社区 › user-44651

切换所需表单字段上按钮的可见性

html jquery javascript

user-44651 · 技术社区 · 8 年前

我的个人资料页上有几个表格。每个表单都有自己的提交按钮。当用户单击submit按钮时,我希望该按钮消失并显示一个微调器。

Jquery并没有截取表单提交(尽管如果它能解决这个问题,我愿意这样做),它只是切换微调器和按钮可见性。

有什么帮助吗?

 $("#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>

2 回复 | 直到 8 年前

Jamie 8 年前

代码中有几个问题,但最重要的问题是使用 required 类,该类似乎未在html中使用。相反,您可以使用

$('#formProfile [required]')

返回 formProfile 必修的 $formid .

$($formid + ' [required]')

Chaska 8 年前

尝试重新排序脚本,首先进行验证,然后检查是否通过。确保 checkForm true

$("#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();
  }
});