how to enable the button if json response is true?

Question

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.

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