jQuery password confirmation

Question

I have built a "reset and confirm password" section on a site. It works great. I just have this suspicion that maybe it isn't the most efficient way. I am relatively new to jQuery but I can usually make things work well. I am just wanting to make sure I am doing them right.

Any suggestions are appreciated.

/////////////// RESET PASSWORD /////////////////////
$('#reset_password').click(function reset_password(){
 //Enter a password input field a button
 $('#new_pass_field').html('<input type="text" id="new_password" name="new_password"><button id="submit_new_pass">Submit New Password</button>');
 // Bind a click to the button
 $('#submit_new_pass').bind('click', function submit_new_pass (){
 // When clicked get val of the new_password field. 
 $get_val = $("#new_password").val();
 // Hide the new_pass field and button so the confirm field and button can be entered. 
 $('#new_pass_field').hide("fast").html('<input type="text" id="password" name="password"><button id="confirm_new_pass">Confirm New Password</button>');
 // Bind click to that confirm button
 $('#confirm_new_pass').bind('click', function confirm_new(){ 
 // Get val of the confirm pass field
 $get_confirm_val = $("#password").val();
 // Check valdation if 2 passwords match
 if($get_val == $get_confirm_val){
 // If they match send to DB and encrypt. 
 $.get(uri_base +'/AJAX/update_password/admin_users/'+$get_confirm_val+'/'+Math.random(), function(msg){
 //If returns true then send msg password changed. and hide the password row. 
 if(msg){
 $("#err_password").html("Your Password has been changed.").queue(function(){
 setTimeout(function(){
 $("#err_password").dequeue();
 }, 3000);
 })
 $('#reset_pass_results').slideUp("slow");
 $('#new_pass_field').hide("fast").html('');
 }else{
 // Error in the DB
 $("#err_password").html("There was an error. Your password was not changed.");
 }
 });
 }else{
 // Passwords didn't match now reset the clicks to try again and hide the error
 $("#err_password").html("Your Passwords didn't match!").delay(3000).fadeOut("slow");
 $('#confirm_new_pass').bind('click', confirm_new);
 $('#reset_password').bind('click', reset_password);
 }
 return false;
 });
 // Show the password field
 $('#new_pass_field').show("fast");
 return false;
 });
 // Show initial field and button. 
 $('#reset_pass_results').slideDown("slow", function(){
 $('#new_pass_field').show("fast"); 
 });
 return false;
});

• Jarrod Dixon: Just in glancing, I would not use a GET request to change a user's password - this leaves you open for CSRF attacks. Use a POST and pass along a user-specific 'secret' token, as shown in the Prevention section.

Answer 1

Looks fine to me but one way to write a lot less code for these relatively simple ajax calls is to use the Jquery Form plugin that converts a form tag to an ajax call. I believe you'll find it a huge time save going forward.