Question

当用户单击“休息”按钮时，我需要重置输入字段，除输入字段外，页面上还有其他内容正在清除，我不确定这是否正在发生，因为我在之后使用了旧值发布请求。

 <input type="text" name="app_number" class="form-control" onreset="this.value=''" value="{!! Request::input('app_number') !!}" id="app_number" placeholder="Application Number" required>

重置按钮的JS：

document.getElementById("appForm").onreset = function() {
   document.getElementById("app_number").value = "";
  };

重置按钮：

<button class="btn btn-primary" id="reset-button" type="reset">Reset</button>

Answer 1

尝试使用reset（）： document.getElementById（“ app_number”）。reset（）;

Answer 2

使用type="reset"作为按钮：

<button type="reset">Cancel</button>

Answer 3

在这种情况下，您必须使用JQuery Lib。基本，您需要为此元素设置ID。然后在jquery中，单击此元素。

$('#app_number').on('change', function () {
   // enter code here
});

Answer 4

您的重置按钮：

<button class="btn btn-primary" id="reset-button" onclick="myFunction()">Reset</button>

在js中：

function myFunction(){
   document.getElementById("app_number").value = "";
}

Answer 5

请尝试在js中使用：

$(document).on('click', '#YourOnclickButtonID', function(){
    var $alertas = $('#YourFormID');
    $alertas.validate().resetForm();
});

Answer 6

因此，回答我自己的问题，任何反馈将不胜感激，但这是可行的。

事实证明，无论什么value="{!! Request::input('app_number') !!}"都将始终具有价值，因为此代码在服务器端执行，除非您再次提出post请求，否则您将无法更改该值并且只能使用香草JS，没有发布请求，就无法完成。

因此，为什么不从Request中获取值，为什么不直接从用户输入中获取值并将其保存到本地存储，然后抓住它并注入到输入字段中。

我在输入字段中添加了onkeyup事件离子

<input type="text" name="app_number" class="form-control" onkeyup='saveValue(this);' id="app_number" placeholder="Application Number" required>

和JS来存储和检索输入

document.getElementById("app_number").value = getSavedValue("app_number"); // set the value to this input

function saveValue(e) {
  var id = e.id; // get the sender's id to save it .
  var val = e.value; // get the value.
  localStorage.setItem(id, val); // Every time user writing something, the localStorage's value will override .
}

//get the saved value function - return the value of "v" from localStorage.
function getSavedValue(v) {
  if (!localStorage.getItem(v)) {
      return ""; // You can change this to your defualt value.
  }
  return localStorage.getItem(v);
}

然后照常重置表单

document.getElementById("appForm").onreset = function() {
document.getElementById("app_number").value = '';
};

无法重置Laravel中的输入字段

6 个答案: