时间戳

首页 > 解决方案 > 如何在单击保存按钮时禁用保存按钮和输入字段并重定向到新页面？

jquery - 如何在单击保存按钮时禁用保存按钮和输入字段并重定向到新页面？

问题描述

这是我的表单页面。当我单击保存按钮时，输入字段和保存按钮应该被禁用并提交表单，它被定向到 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字段应该禁用，当我再次打开该页面进行编辑时，单击编辑按钮后只禁用字段应该启用。

标签： jqueryjsp

解决方案

如果我目前正确理解您的问题，您只是在不提交的情况下重定向到其他页面。如果您需要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
  });
});

推荐阅读