提交按钮工作，如果id不见了

Question

我的jQuery不工作。这是一个函数，应该从我的表单更新一个数字。我试图在我的外部JavaScript上设置一个“Hello World”，以查看脚本是否被调用。这是工作，如果我删除id =“sub”在我的按钮type =“submit”。如果id =“sub”在我的按钮type =“submit”中，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小提琴链接：

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(); 

的默认操作您删除按钮动作，而不是提交。 所以，你可以当你正在使用type="submit"当单击该按钮时按钮的submit事件被称为像这样

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

Answer 4

添加一个onClick属性到您的提交按钮。但是，由于您在点击处理程序中使用e.preventDefault();，它会取消该事件。

你需要按钮的type属性更改为button，使其充当简单的按钮

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

后上述变化，你将不需要0​​因此也将其删除。

Answer 5

您加入click方法您的按钮，那么这个按钮没有调用表单提交。

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

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