Question

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

Answer 1

这是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 Fiddle链接：

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

Answer 2

而不是使用

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

请使用此

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

这可能会有所帮助。

由于

Answer 3

这可能是它的原因......当你删除了按钮的默认动作，即

e.preventDefault();

您删除了按钮操作，而不是提交。因此，您可以像这样

向提交按钮添加onClick属性

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

Answer 4

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

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

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

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

Answer 5

您在按钮中添加了click方法，然后此按钮未调用表单提交。

您应该在点击方式上将其称为:( jQuery submit）

    $("#myForm").submit();

如果id消失，则提交按钮

5 个答案: