Question

这是我的表单页面。当我单击保存按钮时，应禁用输入字段和保存按钮，并提交表单以将其定向到message.jsp；如果我单击编辑按钮，则应启用输入字段和保存按钮，并且对于编辑内容，应重定向到message1.jsp页面。但是什么都没有发生。请告诉我我做错了什么，我是这些新手。

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html >
<head>
    <title>ed</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btn1").click(function () {
                $("#tt1").attr('disabled', 'disabled');
                $("#btn1").attr('disabled', true);
                window.location.href = "message.jsp";
            });
           $('#btn2').click(function () {
              $('#tt1').removeAttr('disabled');
              $('#btn1').removeAttr('disabled');
      
          });
    });
  </script>  
</head>
<body>

<form id="answer">
  <input type="text" value="xyz" id="tt1" /><br />
  <button type="submit" id="btn1">Save</button>
  <button type="submit" id="btn2">Edit</button>
</form>
</body>
</html>

编辑：我想要的是，当单击“保存”时，所有字段和“保存”按钮都被禁用，并重定向到Servlet控制器进行表单提交（我以message.jsp为例），然后重定向到根据代码的其他位置。当我再次打开此页面时，除非单击“编辑”按钮，否则所有字段和“保存”按钮都应被禁用。 编辑2：我想要的是第一次加载页面时应启用的所有功能，单击“保存”后，应禁用“保存”按钮n字段，当我单击该按钮后再次打开该页面进行编辑时在编辑按钮上，则仅应启用禁用的字段。

Answer 1

如果我当前正确理解了您的问题，那么您只是在不提交的情况下重定向到其他页面。如果您需要将submit的值更改为下一页，则只需将表单的action更改为所需的页面，然后将值提交到具有该值的表单。此外，如果您需要其他页面可用的值，则需要使用readonly属性而不是disabled。

演示代码：

$(document).ready(function() {
  $("#btn1").click(function() {
    $("#tt1").attr('disabled', 'disabled');
    $("#btn1").attr('disabled', true);
    //change action to message.jsp
    $("#answer").attr('action', 'message.jsp');
  $("#answer").submit(); //submit
   
  });
  $('#btn2').click(function() {
    $('#tt1').removeAttr('disabled');
    $('#btn1').removeAttr('disabled');
   //change action to message1.jsp
   $("#answer").attr('action', 'message1.jsp');
  $("#answer").submit(); //submit
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="answer" action="">
  <input type="text" value="xyz" id="tt1"  /><br />
  <button type="submit" id="btn1" >Save</button>
  <button type="submit" id="btn2">Edit</button>
</form>

更新1 ：

您可以使用localStorage存储单击哪个按钮的值，并且当页面再次加载时，您可以检查保存在localStorage中的值，并根据此禁用或启用按钮进行操作。

您的 jquery 代码：

$(document).ready(function() {
  //check if there is any value in localStorage
  if (localStorage.getItem("save") != null) {
    //get that value
    var value = localStorage.getItem("save");
    alert(value);
    //if value is btn1
    if (value == "btn1") {
      //disable
      $("#tt1").attr('disabled', 'disabled');
      $("#" + value).attr('disabled', true);

    } else {
      //enable
      $('#tt1').removeAttr('disabled');
      $('#btn1').removeAttr('disabled');
    }
  }
  $("#btn1").click(function() {
    $("#tt1").attr('disabled', 'disabled');
    $("#btn1").attr('disabled', true);
    var save = "btn1";
    console.log(save);
    localStorage.clear(); //clear previous data
    localStorage.setItem("save", save); //add data to storage
    //change action to message.jsp
    $("#answer").attr('action', 'message.jsp');
    $("#answer").submit(); //submit

  });
  $('#btn2').click(function() {
    $('#tt1').removeAttr('disabled');
    $('#btn1').removeAttr('disabled');
    var save = "btn2";
    console.log(save);
    localStorage.clear(); //clear previous data
    localStorage.setItem("save", save); //add data to storage
    //change action to message1.jsp
    $("#answer").attr('action', 'message1.jsp');
    $("#answer").submit(); //submit
  });
});

单击“保存”按钮后如何禁用“保存”按钮和输入字段并重定向到新页面？

1 个答案: