如果输入已填充，则在单击时使用加载动画答案

【问题标题】：Use loading animation onlick if inputs are filled如果输入已填充，则在单击时使用加载动画
【发布时间】：2017-08-18 20:45:24
【问题描述】：

我有输入和选择的页面。这是我正在处理页面加载的加载动画，但我想在按钮单击时设置它并使其仅在填充输入时才起作用。我需要它，因为用户应该确认规则，检查书面信息并在提交时发送邮件，这需要 3-15 秒。我需要用加载 gif 来填补这个暂停

$(window).load(function() {
		// Animate loader off screen
		$(".se-pre-con").fadeOut("slow");;
	});

.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url(path-to-gif) center no-repeat #fff;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>

<div class="se-pre-con"></div>

【问题讨论】：

你自己试过什么来检查输入是否被填满？
@CarstenLøvboAndersen 向问题添加了 js 代码

标签： javascript jquery html animation button

【解决方案1】：

尝试使用这种方式：

演示：https://jsfiddle.net/ok6byo68/1/

$('#formz').submit(function(event) {
		$('#load').show();
    var valid = true;
    $(this).find('input').each(function() {
    	if(!$(this).val()){
      	valid = false;
      }
    })
    if(!valid) {
      	event.preventDefault();
        console.log('All fields are required!');
        setTimeout(function(){
					$('#load').hide();
        },1000);
        return;
    }
});

#load{
    width:100%;
    height:100%;
    position:fixed;
    z-index:9999;
    background: url("https://www.creditmutuel.fr/cmne/fr/banques/webservices/nswr/images/loading.gif") no-repeat center center rgba(0,0,0,0.25)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<form action="" method="POST" enctype="multipart/form-data" name="formz" id="formz" >

<input type="text"  name="first" >

<input type="text"   name="second" >

<input type="text" name="third"   >

<button type="submit" id="button" class = 'button' >Done</button>

</form>
<div id="load" style="display:none;"></div>

【讨论】：

感谢您的回复。我也可以这样做，但只有在所有输入都填满时，我才需要让它工作。在你和我的情况下，如果按下按钮，我不需要它。
@Orik3ll0 - 您可以在不按按钮的情况下提交表单。 Check here
问题是我必须按下按钮，因为用户应该再次提交规则并检查书面信息。

【解决方案2】：

我通过 Jquery 解决了我的问题。还有更简单的方法。以下是检查输入验证的方法，具体取决于您的输入要求和成功显示动画：

jQuery.validator.setDefaults({
  debug: true,
  success: "valid"
});


$('#My-Button').on('click', function() {
  if ($("#My-Form").valid()) {
    $("#My-Form")[0].submit();
    $('#My-Animation').show();
  }

});

【讨论】：

【解决方案3】：

希望以下内容对您有所帮助。

$(document).ready(function (e) {
    e.preventDefault();
$('#buttonID').click(function(){
$.ajax({
    beforeSend : function(xhr, opts){
        //show loading gif
        $('#load').show(); 
    },
    success: function(){
         //hide loading gif
                $('#load').hide(); 
    }
});

}

});

【讨论】：

感谢您的帮助，但我在此代码中没有看到空输入检查。只有当所有输入都填满时，我才需要它工作
您可以根据需要使所有输入字段。