HTML:
<div class="form-group">
{!! Form::label('phone','',['class' => 'col-md-2 control-label']) !!}
<div class="col-md-5">
{!! Form::text('phone',null,['class'=>'form-control']) !!}
</div>
<div class="col-md-4">
<p class="form-control-static">
<a id="send-captcha" href="-sharp"></a>
</div>
</div>
JS:
<script>
// btn
var btn = $("-sharpsend-captcha");
// (s)
var SEND_INTERVAL = 60;
var timeLeft = SEND_INTERVAL;
/**
* btn
*/
var bindBtn = function(){
btn.click(function(){
//
btn.unbind('click');
btn.attr('disabled', 'disabled');
$.ajax({
// ajax...
})
.done(function () {
alert('');
//
timeLeft = SEND_INTERVAL;
timeCount();
})
.fail(function () {
//
alert('');
// ** : **
bindBtn();
btn.remove('disabled');
});
})
}
/**
*
**/
var timeCount = function() {
window.setTimeout(function() {
if(timeLeft > 0) {
timeLeft -= 1;
btn.html(timeLeft + "");
timeCount();
} else {
btn.html("");
bindBtn();
}
}, 1000);
}
</script>
after refresh send CAPTCHA can I click again?
has not found a more elegant code.
countdown to 60s after sending CAPTCHA, and the countdown to refresh continues.
requires jquery and jquery.cookie
var SendCode = (function($, Cookies) {
return {
_config : {sendObj:$('-sharpsendCode'), mobile:$('input[name=mobile]')},
_timer : null,
/**
*
*
*/
init : function(config) {
this._initDisable();
$.extend(this._config, config);
return this;
},
/**
*
*/
AsynCheckMobile : function(url, data, successCallback, errorCallback) {
this.doPost({ url: url, data:data, successCallback:successCallback, errorCallback:errorCallback});
},
/**
*
*/
sendCode : function(url, data, successCallback, errorCallback) {
this.doPost({ url: url, data:data, successCallback:successCallback, errorCallback:errorCallback});
},
/**
*
*/
doPost : function(params) {
if (toString.call(params.successCallback) !== "[object Function]") {
params.successCallback = function() {};
}
if (toString.call(params.errorCallback) !== "[object Function]") {
params.errorCallback = function() {};
}
var _this = this;
$.ajax({
url : params.url,
data : params.data,
type : 'post',
dataType : 'json',
success : function(result) {
if (result.code == 200) {
params.successCallback.call(_this, result);
} else {
params.errorCallback.call(_this, result);
}
}
})
},
checkMobile: function() {
return /\d{11}/.test(this._config.mobile.val());
},
/**
*
*/
_disableButton : function() {
var TotalSeconds = 60;
var storeState = Cookies.getJSON('state');
storeState = storeState || {TotalSeconds:TotalSeconds, enable:false};
Cookies.set('state', JSON.stringify(storeState), {path:''});
this._config.sendObj.prop('disabled', true);
var _this = this;
this._timer = setInterval(function() {
var _state = Cookies.getJSON('state');
if (_state.TotalSeconds <= 0) {
clearInterval(_this._timer);
Cookies.remove('state', { path: '' });
_this._config.sendObj.removeAttr('disabled');
_this._config.sendObj.html('');
} else {
_this._config.sendObj.html(_state.TotalSeconds + '');
_state.TotalSeconds -= 1;
Cookies.set('state', _state, {path:''})
}
}, 1000);
},
_initDisable : function() {
var _state = Cookies.getJSON('state');
if (_state) {
this._disableButton();
}
}
}
})(jQuery, Cookies);
var AsynV = {
'asynValidateCode' : function(data, successCallback, errorCallback) {
data = data || { code:$('input[name=captcha]').val()};
successCallback = successCallback || function() { return true;};
errorCallback = errorCallback || function() {return false;};
$.post('/simple/_asyn_check_code', data, function(result) {
if (200 == result.code) {
(successCallback)();
} else {
(errorCallback)();
}
}, 'json');
}
};
SendCode.init();
$('-sharpsendCode').bind('click', function() {
var captcha = $('input[name=captcha]').val();
if (captcha != '') {
AsynV.asynValidateCode({ code:captcha}, function() {
if (SendCode.checkMobile()) {
SendCode.sendCode('/simple/_send_mobile_validate_code', { mobile:SendCode._config.mobile.val()}, function(result) {
alert(result.message);
this._disableButton();
}, function(result) {
alert(result.message);
});
} else {
alert('');
}
}, function() {
alert('');
});
} else {
alert('');
}
});
Don't use jq. Pure es6 is popular now, with vuejs, leverage ~
now the trend of sf is to reach out and ask for the code directly.
not to say that other people's writing is not necessarily suitable for you, just to study, at least think about it for yourself, try it, knock, right? It's not a difficult thing in itself.
if you are really a rookie and don't want to mess with anything, try some integrated account services, such as http://www.onlyid.net. The experience is also much better than the rookie himself!