Question

我试图在第一个按钮上运行这个ajax o，在第二个按钮上我只是想看看我是否至少点击了jquery但是由于某种原因这不会发生，我的代码如下。< / p>

<form id="postform" >
                 <input class="btn btn-lg" style="border: 1px solid gray;" name="email" id="email" type="email" placeholder="Enter Your Email" required> &nbsp
                 <button class="btn btn-info btn-lg" id="emailbutton" onsubmit="submitting()" type="submit">Submit</button>
                 <input class="btn btn-info btn-lg" type="submit" id="#inputbutton" value="Shooter" ></input>
             </form>
             <script>
             (function ($) {
                 function submitting(e) 
                 {
                    e.preventDeafault();
                     $('#emailbutton').on('submit', (function () {
                         alert("Clicked");
                         $.ajax
                         ({
                             type: 'POST',
                             url: 'bootstrap/php/form.php',
                             data: $(this).serialize(),
                             success: function (result) {
                                 console.log(result);
                                 $('#postform').html(result);
                             }
                         });
                     }));
                 }

                 function subshooter() {
                 $('#inputbutton').click(function() { alert('testbutton clicked'); });
                 }

             });
             </script>

我的主要目的是让ajax工作，所以当人们在表单上提交他们的电子邮件地址时，生成的ajax将处理一个php文件，html将更改为“Thank You”，而不刷新整个页面。

Answer 1

当调用submitting时，它会向按钮附加一个click事件，但该事件已经发生，因此在再次单击Submit按钮之前不会再次调用它。

同样，preventDeafault拼写错误，最有可能导致执行停止。

另一个问题是您没有传递要提交的事件，因此e将是未定义的。

由于您使用的是jQuery，因此您应该使用jQuery附加事件，这将使您可以访问事件和preventDefault函数：

$('form').submit( function (e) {
  e.preventDefault();
});

Answer 2

您应该使用以下代码：

                         <script>

                        (function ($) {


                         $('#inputbutton').click(function() { 
                         alert('testbutton clicked'); });

                     });

                         function submitting(e) 
                         {
                            e.preventDefault();
                             $('#emailbutton').on('submit', (function () {
                                 alert("Clicked");
                                 $.ajax
                                 ({
                                     type: 'POST',
                                     url: 'bootstrap/php/form.php',
                                     data: $(this).serialize(),
                                     success: function (result) {
                                         console.log(result);
                                         $('#postform').html(result);
                                     }
                                 });
                             }));
                         }
                         </script>

你犯的错误：

防止默认的功能是e.preventDefault();

在jquery中，您应该将click事件绑定到页面加载时的按钮。

由于submitting(e)是一个函数，它应该在onbody load事件之外，即document.ready({ ... })函数。

Answer 3

修改后的Html

<form id="postform" >
                 <input class="btn btn-lg" style="border: 1px solid gray;" name="email" id="email" type="email" placeholder="Enter Your Email" required> &nbsp
                 <button class="btn btn-info btn-lg" id="emailbutton"  type="submit">Submit</button>
                 <input class="btn btn-info btn-lg" type="submit" id="inputbutton" value="Shooter" ></input>
             </form>

你的脚本有很多错误，这就是它失败的原因......以后总是检查浏览器控制台......

更正了js：

<script src="https://code.jquery.com/jquery-1.10.2.js" ></script>
<script>
$(document).ready(function (){
                 $('#inputbutton').on('click',function() { alert('testbutton clicked'); });
                 $('#postform').on('submit',function(e){
                            e.preventDefault();
                            alert("Clicked");
                            $.ajax({
                                     type: 'POST',
                                     url: "bootstrap/php/form.php",
                                     data: $(this).serialize(),
                                     success: function (result) {
                                         console.log(result);
                                          alert("success");
                                         $('#postform').html(result);
                                     },
                                     error: function (){
                                        alert("Unable To post");
                                     }
                                 }); 
                    });
});
             </script>

Jquery Ajax试图让它工作

3 个答案: