I am doing a registration and my html code is
<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> </div> </div> </form> </div> <div class="tab-pane" id="step2"> <!--******8data**** --> <button type="submit" class='btn btn-next btn-primary' name='next' value='Next'>Next</button> </div> btn-next is making to move to the next tab. If I remove btn-next, It will not move to the next tab.
My vue js code is
submitBox = new Vue({ el: "#submitBox", data: { -- -- - }, methods: { handelSubmit: function(e) { var vm = this; data = {}; -- -- -- -- -- -- $.ajax({ url: '/add/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") } } }); return false; }, handleSubmit: function(e) { -- -- -- -- -- -- -- -- -- - } }, }); If e.status, then only I need to move to another tab. But now, if alert is failed also, I am going to another tab. How can I able to solve this issue. Please help me to have a solution for the same.
1 Answers
Answers 1
I hope i got your question right.
First, you don't need the onSubmit, you can use modifiers:
//REPLACE THIS <form method="POST" onSubmit="return false;" data-parsley-validate="true" v-on:submit="handelSubmit($event);"> //WITH THIS, NOTE THE 'prevent' MODIFIER <form method="POST" data-parsley-validate="true" v-on:submit.prevent="handelSubmit($event);"> Now, to disable/enable the button conditionally, just add a :disabled dynamic property:
//I'm assuming that if you got the pid it is considered a success, // obviously you can change it to be any property you like as long it has a true/false value <button type="submit" class='btn btn-next btn-primary' name='next' value='Next' :disabled="!pid">Next</button> 
0 comments:
Post a Comment