Jquery表单未提交答案

【问题标题】：Jquery form is not submittingJquery表单未提交
【发布时间】：2020-11-21 18:10:51
【问题描述】：

我有一个带有表单的页面，我正在尝试禁用提交时带有自定义禁用消息的按钮，并在使用 jquery 后提交表单。

<form>
<input type="text" name="run"/>
<input type="submit" class="send" value="Save" data-attr-message="Sending..."/>
</form>

我尝试了表单提交或表单[0]提交都没有提交表单，我尝试记录表单，表单正确记录到控制台，单击提交时控制台没有错误。

$(document).ready(function() {
      $('.send').click(function(e) {
        e.preventDefault();
        e.stopPropagation();
        var button = $(this);
        var form = button.closest("form");
        button.prop('disabled', true);
        button.val($(this).attr('data-attr-message'));
        console.log(form); //Logs form fine
        form[0].submit();
        //  form.submit();
      });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input type="text" name="run" />
  <input type="submit" class="send" value="Save" data-attr-message="Sending..." />
</form>

【问题讨论】：

你遇到了什么错误？
你需要把最后一个input改成button
@holtc 不，这绝对没有必要 -> "<input> submit 类型的元素呈现为按钮。当click 事件发生时（通常是因为用户单击按钮），用户代理会尝试将表单提交到服务器。”
@rykamol，我没有收到任何错误，在 console.log 之后它什么也没做
我无法理解“使用 jquery 之后”是什么意思。短语。您自己决定是否使用 jquery？你是什么意思？您希望在哪种情况下启用按钮？

标签： javascript html jquery forms

【解决方案1】：

您的表单没有“动作”和“方法”。

应该是这样的：

<form action = "http://example.com/backendScript" method = "POST">

【讨论】：

这不是问题浏览器默认此为当前页面和 GET。如果我没有 jquery，表单提交就好了
属性不是必需的。缺少action 与action="<this page>" 相同，缺少method 属性与method="get" 相同 -> w3.org/TR/html52/…
哦，我的错……你试过使用 $.ajax、$post 或 $.get 来发送请求吗？但是，您需要使用 FormData 对象填充数据元素。

【解决方案2】：

如果您的目标是“模拟”发送数据所需的时间，并且您希望看到该按钮在该时间之前被禁用，则一种方法是使用 javascript 的“setTimeout()”方法。您不需要使用“e.preventDefault()”，因为它会阻止表单提交。我在下面发布了我认为符合您预期的代码：

$(document).ready(function() {
      $('.send').click(function(e) {

          var button = $(this);
          var form = button.closest("form");
          button.prop('disabled', true);
          button.val($(this).attr('data-attr-message'));
        setTimeout(function() {
            
            form.submit();
        }, 1000)  
      
      });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form</title>
</head>
<body>
   
<form action="submit.html">
<input type="text" name="run"/>
<input type="submit" class="send" value="Save" data-attr-message="Sending..."/>
</form>
   

   <script src="jquery-3.5.1.js"></script>
   <script src="script.js"></script>
    
</body>
</html>

“submit.html”只是一个带有消息的 html 文件，您可以自己将其添加到文件夹中以查看表单正在提交。

【讨论】：

我不想模拟任何东西
我的意思是你想看看它所花费的“时间”。但在每种情况下，表单都使用我发布的代码提交。
你试过这个吗？不做你建议的事情。没有延迟，并且在点击事件处理程序中禁用与阻止默认不同
您可以尝试上面的“运行代码 sn-p”按钮，看看它会禁用按钮并显示消息一秒钟，然后一秒钟后转到“submit.html”页面，您应该为您的文件添加它以查看提交。只需在同一个文件夹中创建一个“submit.html”文件，并在其中放置一个带有消息的“h1”标签。