代码之家 › 专栏 › 技术社区 › mvasco

提交表单时未执行脚本

ajax html jquery javascript

mvasco · 技术社区 · 6 年前

我有一个表单,希望使用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>

单击“提交”按钮后,页面会自动重新加载,脚本不会执行。我做错什么了?

1 回复 | 直到 6 年前

Hero Wanders 6 年前

您的代码似乎有效。 This jsfiddle 显示它(我已将 $.post Ajax调用并添加了 alert 以证明这一点)。也许您将脚本包含在一个没有执行的地方,或者在DOM可用之前执行得太早。您可以通过将脚本包装为以下内容来绕过后者:

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

见 .ready() on api.jquery.com 有关此的详细信息。