在HTML表单不起作用的情况下使用“提交”

问题描述

谁能给我一个线索，为什么这行不通。

我有一个表格：

<form id="add">
    .
    .
    .
    <button id="button1" type="submit">Submit</button>
</form>

并希望在提交时以只读方式在表单中输入内容（我知道有更好的方法来完成此操作，但是我正在研究这种特定情况）。

为什么这个jQuery不起作用：

$(document).ready(function(){

    $("#add").on("submit","input",function(event) {
        console.log("hello");
        event.preventDefault();
        $(this).prop("readonly",true);
    });

});

谢谢！

解决方法

您将input作为on的第二个参数传递，因此实际上是在submit上监听#add input事件。输入没有submit事件。删除第二个参数，就可以了。

,

实际上，您并未在提交事件的readonly上添加inputs属性，但是$(this)实际上是指整个HTML form-您无法应用只读属性

您的示例为何不起作用：您正在将表单提交绑定到表单的一部分上，从而对表单提交进行事件绑定。这意味着您的eventDelegation位于inputs上，其格式为submit处理程序是一个按钮type="submit"-因此，这样做总是可以刷新页面，并且不提交表单，也不将道具设置为readonly。简而言之，它根本不做任何事情，因为eventDelegation不正确。

要启用表单提交中的所有输入readyOnly，您可以使用.find()方法jQuery并查找所有:input，包括任何textarea（如果有一个）也是

$(this).find(':input').prop("readonly",true); //prop all readonly

此外，您不需要也不需要在提交事件功能中添加input。

工作演示：

$(document).ready(function() {
  $("#add").on("submit",function(event) {
    event.preventDefault();
    $(this).find(':input').prop("readonly",true); //prop all readonly
    console.log("form submitted - all inputs are readonly now");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<form id="add">
  <input class="form-control" type="text" value="Some value" />
  <br>
  <input class="form-control" type="text" value="Some other value" />
  <br>
  <textarea class="form-control">I am a textarea</textarea>
  <br>
  <button class="btn btn-success" id="button1" type="submit">Click me to submit</button>
</form>