I have two buttons which are the submit button and save button.

The first time the page loads, the submit button should be enabled while the save button should be disabled.

After the submit button is clicked, the submit button should be disabled and record will be display while the save button should be enabled so that I can save record. But I cant enable the save button after the submit button is clicked and the record is displayed.

HTML

<header><h4>Customer Purchase Order</h4></header>
<form action="" method="post" class="form-disable">
<script src=".1.1/jquery.min.js"></script>
<script src="global.js"></script>
<table style="border-collapse:collapse;" width="1400px" height="172px" border="1">
        Delivery Date:&nbsp;&nbsp;<input type="text" name="sdate2" placeholder="yyyy-mm-dd" onkeypress="return noenter()">
        Date:&nbsp;&nbsp;<input type="text" name="sdate" placeholder="yyyy-mm-dd" value="" onkeypress="return noenter()">&nbsp;&nbsp;
        <input type="button" class="but" name="sub" id="sub" value="Submit" formaction="" style="WIDTH: 57px; HEIGHT: 31px;" onkeypress="return noenter()" onclick="myFunction()">
        <input type="button" class="but" name="save" id="save" value="Save" disabled formaction="addorder1.php" style="WIDTH: 57px; HEIGHT: 31px;" onkeypress="return noenter()" onclick="myFunction()"><br><br>

JAVASCRIPT

$(function() 
{
  $(".but").on("click", function(e) 
  {
    e.preventDefault(); // not really necessary if buttons
    $(this).prop("disabled", true);    
    if (this.id=="sub") 
    {
      // do the submit and enable other button
      $("#save").prop("disabled", false);
    }
    else 
    {
      // do the save and enable other button
      $("#sub").prop("disabled", false);
    }
  });
});

Demo

/

I have two buttons which are the submit button and save button.

The first time the page loads, the submit button should be enabled while the save button should be disabled.

After the submit button is clicked, the submit button should be disabled and record will be display while the save button should be enabled so that I can save record. But I cant enable the save button after the submit button is clicked and the record is displayed.

HTML

<header><h4>Customer Purchase Order</h4></header>
<form action="" method="post" class="form-disable">
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="global.js"></script>
<table style="border-collapse:collapse;" width="1400px" height="172px" border="1">
        Delivery Date:&nbsp;&nbsp;<input type="text" name="sdate2" placeholder="yyyy-mm-dd" onkeypress="return noenter()">
        Date:&nbsp;&nbsp;<input type="text" name="sdate" placeholder="yyyy-mm-dd" value="" onkeypress="return noenter()">&nbsp;&nbsp;
        <input type="button" class="but" name="sub" id="sub" value="Submit" formaction="" style="WIDTH: 57px; HEIGHT: 31px;" onkeypress="return noenter()" onclick="myFunction()">
        <input type="button" class="but" name="save" id="save" value="Save" disabled formaction="addorder1.php" style="WIDTH: 57px; HEIGHT: 31px;" onkeypress="return noenter()" onclick="myFunction()"><br><br>

JAVASCRIPT

$(function() 
{
  $(".but").on("click", function(e) 
  {
    e.preventDefault(); // not really necessary if buttons
    $(this).prop("disabled", true);    
    if (this.id=="sub") 
    {
      // do the submit and enable other button
      $("#save").prop("disabled", false);
    }
    else 
    {
      // do the save and enable other button
      $("#sub").prop("disabled", false);
    }
  });
});

Demo

https://jsfiddle/kk5wxm37/

• javascript
• button

• You want a enabled "Save" after submitting, so your page loads again, so you dont need to control it with javascript, use php just like the other way with "Submit" and control your "disable" – Kwenk Commented Feb 20, 2017 at 6:57
• @Kwenk Can I know how? Because after submit, it still on the same page and I don't know how to do that. – user9791 Commented Feb 20, 2017 at 7:03
• If you are ajaxing or otherwise not submitting the form, please see my second example – mplungjan Commented Feb 20, 2017 at 7:05
• Your HTML is not valid. And your buttons are no longer submit buttons – mplungjan Commented Feb 20, 2017 at 7:19

2 Answers 2

HTML

<form action="" method="post" class="form-disable">
    <input type="text" name="name" placeholder="name"/>
    <button type="submit" id="submit" name="submit" <?php echo isset($_POST['submit']) ? 'disabled="true"' : ''; ?>/> Submit</button>           
    <button type="submit" name="save" id="save" disabled value="true" >Save</button> 
</form>     

Javascript

<script>
$(document).ready(function(){
    $('#submit').click(function(e){
        e.preventDefault();
        $(this).attr('disabled', true);
        $('#save').attr('disabled', false);
    });
});
</script>

JSFIDDLE

https://jsfiddle/7mu9Lk2r/

NEVER call a submit button submit - it kills the form submit event - I have renamed it to "sub"

PHP Only

<?PHP
  $sub = isset($_POST['sub']);
$>
  <button type="submit" name="sub"  id="sub"  <?php $sub ? 'disabled' : ''; ?>> Submit</button>             
  <button type="submit" name="save" id="save" <?php $sub ? '' : 'disabled'; ?> onblur="validate()">Save</button> 

If the form is not submitted (Ajax):

FIDDLE

Assuming the buttons are SUBMIT buttons and correct syntax (you had <input /></button>)

$(function() {
  $("form.form-disable").on("submit",function(e) {
    e.preventDefault();
    $("#sub").prop("disabled",true);
    $("#save").prop("disabled",false);
  });
});

If you do NOT use submit buttons, then this will work:

$(function() {
  $("#sub").on("click", function(e) {
    e.preventDefault();
    $(this).prop("disabled", true);
    $("#save").prop("disabled", false);
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" class="form-disable">
  <input type="text" name="name" placeholder="name" />
  <button type="button" name="sub" id="sub">Submit</button>
  <button type="button" name="save" id="save" disabled value="true">Save</button>
</form>

If you need to swap disable:

$(function() {
  $(".but").on("click", function(e) {
    e.preventDefault(); // not really necessary if buttons
    $(this).prop("disabled", true);    
    if (this.id=="sub") {
      // do the submit and enable other button
      $("#save").prop("disabled", false);
    }
    else {
      // do the save and enable other button
      $("#sub").prop("disabled", false);
    }
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" class="form-disable">
  <input type="text" name="name" placeholder="name" />
  <button type="button" class="but" name="sub"  id="sub">Submit</button>
  <button type="button" class="but" name="save" id="save" disabled value="true">Save</button>
</form>