submit button работает, если id ушел

Question

Мой jQuery не работает. Это функции, которые должны обновлять число из моей формы. Я попытался установить «Hello World» на моем внешнем JavaScript, чтобы узнать, вызван ли сценарий. Это работает, если я удалю id = "sub" в моей кнопке type = "submit". Если id = «sub» находится в моей кнопке type = «submit», мир привет не работает, а это значит, что мой сценарий ниже не работает, так как мне нужен 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 метод вашей кнопки, то эта кнопка не вызывала форму submit.

Вы должны назвать его, как это на ваш метод щелчка: (jQuery submit)

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