How to enable button if json answer is correct?

Question

I do the registration, and my html code

<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 jumps to the next tab. If I remove btn-next , it will not move to the next tab.

My vue js code

 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 I only need to switch to another tab. But now, if the warning also does not work, I will switch to another tab. How can I solve this problem. Please help me solve the same solution.

Answer 1

I hope I understood your question correctly.

Firstly, you do not need 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, simply add the property: disabled dynamic:

 //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> 

Answer 2

You can create logical data:

 data: { // ... toggleButton: false }, 

Now, after you get a successful response, just set toggleButton to true :

 if (e.status === 200) { vm.toggleButton = true; } 

Now, in your html button, set the toggbleButton class:

 <button type="submit" class="btn btn-primary" name="next" value="Next" :class="{ 'btn-next': toggleButton }">Next</button>