Jquery .live passes parameter twice in request - php

Question

I am creating simple login screen which will accept username & password on click of submit button.I tried using .click but its not working at all so i am using .live but its passes same parameter twice in request.
$("#loginsubmit").live('click', function (e) {
$.ajax({
url: 'auth_check.php',
data: $(loginForm1).serialize(),
type: 'POST',
cache: false,
success: function (result) {
if (result == 'success') {}
},
error: function (result) {}
});
e.preventDefault();
$.prettyPhoto.close();
return false;
});
This is what i am getting in request
pusername=&ppassword=&pusername=abc&ppassword=abc
I am using jquery first time and there is something called pretty photo used in my template.
I guess this pretty photo might be causing issues.
LoginForm1 looks like as follows :
<div class="login_register_stuff hide"><!-- Login/Register Modal forms - hidded by default to be opened through modal -->
<div id="login_panel">
<div class="inner-container login-panel">
<h3 class="m_title">SIGN IN YOUR ACCOUNT TO HAVE ACCESS TO DIFFERENT FEATURES</h3>
<form name="loginForm1" method="post" enctype="multipart/form-data" />
CREATE ACCOUNT
<input type="text" name="pusername" class="inputbox" placeholder="Username" />
<input type="password" name="ppassword" class="inputbox" placeholder="Password" />
<input type="submit" id="loginsubmit" name="loginsubmit" value="LOG IN" />
</form>
<div class="links">FORGOT YOUR USERNAME? / FORGOT YOUR PASSWORD?</div>
</div>
prettyphoto section snippet
enter <!-- prettyphoto scripts & styles -->
function ppOpen(panel, width){
jQuery.prettyPhoto.close();
setTimeout(function() {
jQuery.fn.prettyPhoto({social_tools: false, deeplinking: false, show_title: false, default_width: width, theme:'pp_kalypso'});
jQuery.prettyPhoto.open(panel);
}, 300);
} // function to open different panel within the panel
jQuery(document).ready(function($) {
jQuery("a[data-rel^='prettyPhoto'], .prettyphoto_link").prettyPhoto({theme:'pp_kalypso',social_tools:false, deeplinking:false});
jQuery("a[rel^='prettyPhoto']").prettyPhoto({theme:'pp_kalypso'});
jQuery("a[data-rel^='prettyPhoto[login_panel]']").prettyPhoto({theme:'pp_kalypso', default_width:800, social_tools:false, deeplinking:false});
jQuery(".prettyPhoto_transparent").click(function(e){
e.preventDefault();
jQuery.fn.prettyPhoto({social_tools: false, deeplinking: false, show_title: false, default_width: 980, theme:'pp_kalypso transparent', opacity: 0.95});
jQuery.prettyPhoto.open($(this).attr('href'),'','');
});
});
here
could you please help me to find out the issue.

Answer 1

This is, because prettyphoto clones your inline content by opening. After opening your inline content, you have to clear the original content - otherwise you've got everything twice - and if you close prettyphoto, you have to put it back there, if its not dynamic generated.
Example:
$.fn.prettyPhoto({
ajaxcallback:function(){
$("#yourhiddenformid").html("");
},
callback:function(){
no need, if its dynamic generated, otherwise:
rewrite html of div;
}

Answer 2

You have to bind onsubmit event on form:
$("#loginForm1").on('submit', function (e) {
$.ajax({
url: 'auth_check.php',
data: $('#loginForm1').serialize(),
type: 'POST',
cache: false,
success: function (result) {
if (result == 'success') {}
},
error: function (result) {}
});
e.preventDefault();
$.prettyPhoto.close();
return false;
});