Question

页面中有很多表格。我想使用相同的表单来保存和编辑表单。我想使用ajax和php保存和编辑记录，并想在单击保存按钮并启用编辑按钮后禁用保存按钮，反之亦然。请帮助我。

我有类似这样的表格。

<form id="a" onsubmit="return func();">
       <input type="text" name="fname">
       <input type="text" name="lname">
       <input type="text" name="email">
       <input type="submit" id="saveButton" value="save" style="height:40px;width:70px">
                           <input type="submit" id="editButton" value="edit" style="height:40px;width:70px">
      </form>

<script src="js/bootstrap.min.js" type="text/javascript"></script>
    <script>
 function func(){   
    $.ajax({
        url     : "registration_detail.php", // in this you got serialize form data via post request
        type    : 'POST',
        data    : $('#a').serialize(),
        success: function(response){
            console.log(response);            
        }
    });
     return false;
}
function func(){   
    $.ajax({
        url     : "update_application.php", // in this you got serialize form data via post request
        type    : 'POST',
        data    : $('#a').serialize(),
        success: function(response){

            console.log(response);            
        }
    });
     return false;
}

    </script>

    <script type="text/javascript">
        $(document).ready(function(){
  $("#saveButton").click(function(){
 $("#saveButton").attr("disabled", true);
   $("#editButton").attr("enabled", true);
  });
  $("#editButton").click(function(){
  $("#editButton").attr("disabled", true);
  $("#saveButton").attr("enabled", true);
  });
});
    </script>

Answer 1

试试这个例子：

<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});
</script>
</head>
<body>



<button id="hide">Hide</button>
<button id="show">Show</button>
<p>Exemple</p>
</body>
</html>

Answer 2

请检查您的脚本，您创建了两个具有相同名称的函数。

<form id="a">
       <input type="text" name="fname">
       <input type="text" name="lname">
       <input type="text" name="email">
       <input type="button" id="saveButton" onclick="funcAdd();"value="save" style="height:40px;width:70px">
       <input type="button" id="editButton" onclick="funcUpdate()" value="edit" style="height:40px;width:70px">
      </form>



<script type="text/javascript">
        $(document).ready(function(){
  $("#saveButton").click(function(){
 $("#saveButton").attr("disabled", true);
   $("#editButton").attr("disabled", false);
  });
  $("#editButton").click(function(){
  $("#editButton").attr("disabled", true);
  $("#saveButton").attr("disabled", false);
  });
});
    </script>

<script>
 function funcAdd(){   
    console.log("in Add");
        $.ajax({
        url     : "registration_detail.php", // in this you got serialize form data via post request
        type    : 'POST',
        data    : $('#a').serialize(),
        success: function(response){
            console.log(response);            
        }
    });
     return false;
}
function funcUpdate(){   
    console.log("in update");   
    $.ajax({
        url     : "update_application.php", // in this you got serialize form data via post request
        type    : 'POST',
        data    : $('#a').serialize(),
        success: function(response){

            console.log(response);            
        }
    });
     return false;
}

</script>

Answer 3

尝试此代码。如果成功，更改ajax响应中的属性值

$(document).ready(function(){
    $('form').on("submit", function(){
        var submitted_form_id = $(this).attr("id");
        $("#"+submitted_form_id+"_save").attr("disabled", "disabled");
        $("#"+submitted_form_id+"_save").attr("type", "button");
        $("#"+submitted_form_id+"_edit").attr("type", "submit");
    })
})

无法使用相同的表单通过php和ajax调用进行插入和更新

3 个答案: