如果 ID 消失，提交按钮工作

submit button working if id is gone

本文关键字：按钮 工作 提交 ID 消失 如果      更新时间：2023-09-26

我的jQuery不起作用。这是一个应该从我的表单中更新数字的函数。我尝试在我的外部JavaScript上设置一个"Hello World"，以查看脚本是否被调用。如果我在我的按钮类型="提交"中删除 id="sub"，这是有效的。如果 id="sub" 在我的按钮类型="提交"中，hello 世界不起作用，这意味着我下面的脚本不起作用，因为我需要 id="sub"。

有人能明白为什么会这样吗？

.HTML：

    <div class="col-lg-6 bg-success">Content
    <form class="form-inline" id="myForm" action="select.php" method="post">
        <div class="form-group">
            <label for="inputNumber"></label>
            <input type="number" class="form-control" name="numbervalue" id="numberinput" placeholder="Number">
            <button type="button" class="btn btn-success" id="sub">Insert</button>
        </div>
    </form>
<span id="result"></span>
</div>

.JS：

    // Insert function for number
function clearInput() {
    $("#myForm :input").each( function() {
         $(this).val('');
    });
}
    $(document).ready(function(){
       $("#sub").click( function(e) { 
        e.preventDefault(); // remove default action(submitting the form) 
       $.post( $("#myForm").attr("action"), 
         $("#myForm :input").serializeArray(), 
         function(info){            
         $("#result").html(info);
       });
       clearInput();
    });
    });

// Recieve data from database
$(document).ready(function() {
      setInterval(function () {
        $('.latestnumbers').load('response.php')
      }, 3000);
    });

从div 中的数据库返回：

 <!-- Show Numbers In Left Side-->
                <div class="col-lg-1" id="show" style="list-style:none; padding: 4px 0px 0px 0px;">
                    <div class="fixed-width-col border" class="latestnumbers">
                        <?php include('response.php');?>
                    </div>
                </div>

这是 HTML：

<div class="col-lg-6 bg-success">Content
  <form class="form-inline" id="myForm" action="select.php" method="post" onSubmit="return sayHello()">
    <div class="form-group">
      <label for="inputNumber">
        <Label>
          <input type="number" class="form-control" name="numbervalue" id="numberinput" placeholder="Number">
          <button type="button" class="btn btn-success" id="sub">Insert</button>
          <span id="result"></span>
    </div>
  </form>
</div>

和Javascript：

function sayHello() {
  alert("Hello World");
  return true;
}
$(document).ready(function() {
  $("#sub").click(function(e) {
    sayHello();
  });
});

这是JS小提琴链接：

https://jsfiddle.net/2b0noxjw/6/

而不是使用

<button type="submit" class="btn btn-success" id="sub">Insert</button>

请使用这个

<button type="button" class="btn btn-success" id="sub">Insert</button>

也许这会有所帮助。

谢谢

这可能是

它的原因...当您删除按钮的默认操作时，

即 
e.preventDefault();

您删除了按钮操作，而不是提交。因此，您可以像这样将onClick属性添加到提交按钮中 

<button type="submit" id="sub" onClick="somefunctiontodosomestuff()">insert</button>

当您使用type="submit"时，单击按钮时将调用按钮的submit事件。但是，当您在单击处理程序中使用e.preventDefault();时，它会取消该事件。

您需要将按钮的type属性更改为button，以便它充当简单按钮

<button type="button" class="btn btn-success" id="sub">Insert</button>

完成上述更改后，您将不需要e.preventDefault()因此也将其删除。

您click方法添加到按钮，则此按钮未调用表单提交。

你应该在你的点击方法上这样称呼它：（jQuery submit）

    $("#myForm").submit();
相关文章：