Question

我有一个表单，想使用Ajax将表单数据发送到PHP文件：这是我的表格：

<div class="acc_content clearfix">
                                        <form name="contactForm" id="contactForm" class="nobottommargin" action="guarda_pass.php" method="post" >
                                            <div class="col_full" style="color: #898989">
                                                <label style="color: #898989" for="login-form-username">Escribe tu nueva contraseña:</label>
                                                <input type="text" id="password" name="password" value="" class="form-control" required />
                                            </div>
                                            <div class="col_full" style="color: #898989">
                                                <label style="color: #898989" for="login-form-username">Confirma tu nueva contraseña:</label>
                                                <input type="text" id="con_password" name="con_password" value="" class="form-control" required/>
                                            </div>


                                            <div class="col_full nobottommargin">
                                                <button class="button button-3d button-black nomargin" style="background-color: #6fb6e5"  type= "submit"  value="login">Registrar</button>


                                            </div>
                                        </form>
                                          <div id="contactResponse"></div>
                                    </div>

这是脚本：

<script src="js/jquery.js"></script>
        <script>
            $("#contactForm").submit(function(event) 
            {
                /* stop form from submitting normally */
                event.preventDefault();


                /* get some values from elements on the page: */
                var $form = $( this ),
                $submit = $form.find( 'button[type="submit"]' ),
                password_value = $form.find( 'input[name="password"]' ).val(),
                con_password_value = $form.find( 'input[name="con_password"]' ).val(),
                url = $form.attr('action');

                /* Send the data using post */
                var posting = $.post( url, { 
                    password: password_value, 
                    con_password: con_password_value 
                });

                posting.done(function( data )
                {
                    /* Put the results in a div */
                    $( "#contactResponse" ).html(data);

                    /* Change the button text. */
                    $submit.text('Sent, Thank you');

                    /* Disable the button. */
                    $submit.attr("disabled", true);
                });
            });
        </script>

单击提交按钮后，页面将重新加载自身，并且脚本不会执行。我在做什么错了？

Answer 1

您的代码似乎有效。 This jsfiddle展示了它（我已经注释掉$.post ajax调用并添加了alert来演示这一点）。也许您将脚本包含在未执行的地方，或者脚本执行得太早了-在DOM可用之前。您可以通过将脚本包装到以下位置来规避后者：

$(function() {
  // your script content with $("#contactForm")... here
});

有关更多详细信息，请参见.ready() on api.jquery.com。

提交表格时脚本未执行

1 个答案: