在PHP中创建启用和禁用按钮

时间:2017-02-20 06:50:20

标签: javascript button

我有两个按钮,即提交按钮和保存按钮。

首次加载页面时,应启用提交按钮,同时应禁用保存按钮。

单击提交按钮后,应禁用提交按钮并显示记录,同时应启用保存按钮以便我可以保存记录。但是,在单击提交按钮并显示记录后,我无法启用保存按钮。

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);
    }
  });
});

演示

https://jsfiddle.net/kk5wxm37/

2 个答案:

答案 0 :(得分: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.net/7mu9Lk2r/

答案 1 :(得分:2)

永远不要提交提交按钮 - 它会杀死表单提交事件 - 我已将其重命名为“sub”

仅限PHP

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

如果表单未提交(Ajax):

FIDDLE

假设按钮是SUBMIT按钮和正确的语法(你有<input /></button>

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

如果您不使用提交按钮,那么这将起作用:

$(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>

如果你需要交换禁用:

$(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>