时间戳

首页 > 解决方案 > 提交表单时未执行脚本

javascript - 提交表单时未执行脚本

问题描述

我有一个表单，想使用 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>

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

标签： javascriptjqueryhtmlajax

解决方案

您的代码似乎有效。 这个 jsfiddle 显示了它（我已经注释掉了$.postajax 调用并添加了一个alert来演示这一点）。也许您将脚本包含在一个没有执行的地方，或者它执行得太早——在 DOM 可用之前。您可以通过将脚本包装成以下内容来规避后者：

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

有关这方面的更多详细信息，请参阅api.jquery.com 上的 .ready() 。

推荐阅读