javascript - submitting a form via AJAX -

i have form looks following:

 <form accept-charset="utf-8" action="{{ path("fos_user_resetting_send_email") }}" method="post">      <div class="field">           <label for="username">email:</label>           <input class="text" id="passwordemail" name="username" required="required" size="30" type="text">           <div class="field-meta">put in email, , send instructions changing password.</div>      </div>       <div class="field">           <input id="submitpasswordrequest" class="full-width button" name="commit" tabindex="3" type="submit" value="get password">      </div>       <div class="field center">           <a href="#" onclick='togglepasswordform(); return false;' class="password_link extra_form_link">nevermind, remembered</a>      </div> 

i trying post via ajax, did simple test this:

  $("#submitpasswordrequest").click(function() {        var username = $('#passwordemail').value();        console.log(username);         /*        $.ajax({            type: "post",            url: "/resetting/send-email",            data: { username: username}, // serializes form's elements.            success: function( data ) {                console.log(data); // show response php script.            }        });        */         return false;   }); 

however seems click function not triggered , goes posting form via regular form action. doing wrong here? want handle via ajax.

when click upon button, submit form back-end. override behavior should override submit action on form. old style:

<form onsubmit="javascript: return false;"> 

new style:

$('form').submit(function() { return false; }); 

and on submit want perform ajax query:

$('form').submit(function() {     $.ajax({  }); // here perform ajax query     return false; // don't want our form submitted });