这是html表格
<div class="tab-pane" id="step1">
<form method="POST" onSubmit="return false;" data-parsley-validate="true" v-on:submit="handelSubmit($event);">
**DATA COMES HERE**
<div class="wizard-footer">
<div class="pull-right">
<button type="submit" class='btn btn-next btn-primary' name='next' value='Next'>Next</button>
</form>
</div>
数据来到这里
我的VUE JS脚本是
我只添加了ajax请求
$.ajax({
url: 'http://127.0.0.1:8000/post/',
data: data,
type: "POST",
dataType: 'json',
success: function(e) {
if (e.status)
{
alert("Success")
vm.pid=e.pid;
console.log(vm.pid);
}
else {
vm.response = e;
alert("Failed")
}
}
});
我只有在成功时才需要移至下一个选项卡。但是现在,如果发生任何事情,它将移至下一个选项卡。只有在状态为真时,才能使按钮才能移动到下一个选项卡。只有警报消息是成功的情况。我需要搬到下一个选项卡。请帮助我解决问题?
如有正确答案的mroustamzade提到
1.默认情况下禁用该按钮的add
<div class="tab-pane" id="step1">
<form data-parsley-validate="true" >
**DATA COMES HERE**
<div class="wizard-footer">
<div class="pull-right">
<button type="submit" class='btn btn-next btn-primary' disabled name='next' value='Next'>Next</button>
</form>
</div>
2.仅当e.success = true
时,将禁用$('form').submit(function(e){
var data = $(this).serializeArray();
var btn= $(this).find('.btn-next');
var btnText = btn.text();
$.ajax({
url: 'http://127.0.0.1:8000/post/',
data: data,
type: "POST",
dataType: 'json',
beforeSend: function(){
btn.prop('disabled', true).removeClass('.btn-primary').addClass('.btn-warning').text('wait');
},
success: function(e) {
if (e.status)
{
btn.removeClass('.btn-warning').addClass('.btn-success').text('success');
vm.pid=e.pid;
setTimeout(function(){
btn.prop('disabled',false).removeClass('.btn-success').addClass('.btn-primary').text(btnText);
},2000);
}
else {
btn.removeClass('.btn-warning').addClass('.btn-danger').text('failed');
vm.response = e;
setTimeout(function(){
btn.removeClass('.btn-danger').addClass('.btn-primary').text(btnText);
},2000);
}
},
error: function(e){
console.log(e); //for debug the error msg
btn.removeClass('.btn-warning').addClass('.btn-danger').text('error');
setTimeout(function(){
btn.removeClass('.btn-danger').addClass('.btn-primary').text(btnText);
},2000);
}
});
});