CODEWITHSUNDEEP
javascriptjqueryhtmlajax
mvasco
mvasco

Reputation: 5107

Script not executed when submitting form

I have a form and want to send the form data to a PHP file using Ajax: This is my form:

<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>

And this is the script:

<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>

After clicking the submit button, the page reloads itself and the script is not executed. What am I doing wrong?

Upvotes: 0

Views: 65

Answers (1)

Hero Wanders
Hero Wanders

Reputation: 3292

Your code seems to work. This jsfiddle shows it (I have commented out the $.post ajax call and added an alert to demonstrate this). Maybe you included the script in a place where it is not executed or maybe it gets executed too early -- before the DOM becomes available. You can circumvent the latter by wrapping your script into:

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

See .ready() on api.jquery.com for more details about this.

Upvotes: 2

Related Questions