Create enable and disable button in PHP

Question

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.com/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.net/kk5wxm37/

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
– 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
– user9791, Commented Feb 20, 2017 at 7:03
If you are ajaxing or otherwise not submitting the form, please see my second example — mplungjan
– mplungjan, Commented Feb 20, 2017 at 7:05
Your HTML is not valid. And your buttons are no longer submit buttons — mplungjan
– mplungjan, Commented Feb 20, 2017 at 7:19

Saravanan Sampathkumar · Accepted Answer · 2017-02-20 07:13:07Z

3

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.net/7mu9Lk2r/

edited Feb 20, 2017 at 7:13

answered Feb 20, 2017 at 6:53

Saravanan Sampathkumar

3,2711 gold badge22 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user9791 Over a year ago

But the save button still disable

Saravanan Sampathkumar Over a year ago

Sorry made typo. Updated the answer

user9791 Over a year ago

No, the save button still disable, it should be enable after the submit button is disable

user9791 Over a year ago

can i know it is on the same php page or not?

Saravanan Sampathkumar Over a year ago

Yes, it is on same page.

|

mplungjan · Accepted Answer · 2017-03-23 08:48:07Z

2

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

edited Mar 23, 2017 at 8:48

answered Feb 20, 2017 at 6:58

mplungjan

180k29 gold badges183 silver badges246 bronze badges

15 Comments

mplungjan Over a year ago

What does "it did not work" mean? The buttons were not reversed? An error? Which of the two? Both? Only one? Please help us help you by giving proper comments

user9791 Over a year ago

The submit button wont disable and the save still disable

mplungjan Over a year ago

Please see update with fiddle and snippet. My code works when using correct HTML

mplungjan Over a year ago

Please note I RENAMED the submit button

user9791 Over a year ago

Its work. But what if after I save data, the submit button will be enable again? How can I do that?

|

Collectives™ on Stack Overflow

Create enable and disable button in PHP

HTML

JAVASCRIPT

Demo

2 Answers 2

HTML

Javascript

JSFIDDLE

6 Comments

15 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

HTML

JAVASCRIPT

Demo

2 Answers 2

HTML

Javascript

JSFIDDLE

6 Comments

15 Comments

Your Answer

Sign up or log in

Post as a guest

Related