How do I enable a Submit button and change it's value after getting a successful ajax response in Django?

Question

I am using Django as my web framework. I am creating a sort of AWS lab or AWS account. Initially I am disabling the Submit button after the user fills in some details like lab name, cidr block, etc. for preventing multiple submissions and at the same time I am changing the Submit button value to ' CREATING '

Upon getting successful ajax response, I wish to enable the button and change the button value to CREATED and maybe refresh the page after a minute. I will add an alert for that saying that "The Page will automatically refreshed after 1 minute !"

Here is my snippet. I am trying the below code but it doesn't work..

 // handle a successful response
    success : function(json) {
        $('#form-labname').val(''); // remove the value from the input
        $('#form-cidr').val('');
        $('#form-type').val('');
        $('#form-budget').val('');
        $('#submit').attr("disabled", false);
        $('#submit').val('Created !');
        console.log(json); // log the returned json to the console
        console.log("success"); // another sanity check
        $("#result").prepend("<br><br><h3>Lab Creation Success</h3><br><li>
         <strong>Account Number:  "+json.account+"</strong></li><br><li>
         <strong>Lab Name:  "+json.labname+"</strong></li><br><li>
         <strong>Email ID:  "+json.email+"</strong></li><br><li><strong>New 
         VPC ID: "+json.vpcid+"</strong></li><br>");
     console.log("success"); // another sanity check
         },

My Submit button's id is 'submit'.. I have tried to enable and change it's value in the 5th and the 6th lines of the successful response handling code. What am I doing wrong and how should I refresh the page after a minute ? Please help. Thanks in advance

Here is the html snippet :

 <form  method="post" id="form-post">{% csrf_token %}
  <div class="form-group">
   <label for="form-labname">Lab Name</label><br>
    {{form.labname}}
  </div>
  <div class="form-group">
   <label for="form-cidr">CIDR Block</label><br>
    {{form.cidr}}
  </div>
  <div class="form-group">
   <label for="form-budget">Budget</label><br>
    {{form.budget}}
  </div>
  <input id="submit" type='submit' class="btn btn-primary" 
   style="background-color:#3facdb;border-color=#3facdb;" value='Submit' />
</form>

And below is the JQuery I used initially to disable the Submit button and change it's value to "Creating" :

 $(document).ready(function () {
  $("#form-post").submit(function () {
    $("#submit").attr("disabled", true);
    $("#submit").val("Creating ...");
    return false;
    //$("#submit").val("Creating ...");
   });
 });

Can Javascript be used to change the button value instead ? And enable it at the same time ?

Answer 1

You should use prop to set disabled state of the button

$('#submit').prop("disabled", false);

If your button is a <button> button, you'll have to use .text() to change its text.

$('#submit').text('Created !');

ps naming a form element submit can cause you some trouble, ie form.submit()