jQuery 팝업 창에서 입력 값을 얻는 방법

Question

로그인 상자에 jquery 팝업 창을 만들었습니다. & password.i 사용자 이름 확인을 위해 jquery 팝업에 입력 된 값을 얻고 싶습니다. & mysql db와 암호. iam은 팝업에서 값을 가져올 수 없습니다.

어떤 사람이 나에게이 제안을 할 수 있습니까 ??

내 HTML 코드 :

<div class="login-box"><a href="#login-box" class="login-window">Login</a></div> 

<div id="login-box" class="login-popup"> 
    <a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a> 
    <form method="post" class="signin" id="sign" action="" > 
    <fieldset class="textbox"> 
     <label class="username"> 
     <!-- <span>Username or email</span>--> 
     <input id="username" name="username" value="" type="text" autocomplete="on" placeholder="Email"> 
     </label> 

     <label class="password"> 
     <!-- <span>Password</span>--> 
     <input id="password" name="password" value="" type="password" placeholder="Password"> 
     </label> 
     <div class="clear"></div> 
     <button class="submit button" type="button" name="submit" >Login</button> 

     <p class="forgot"><a href="#">Forgot your password?</a></p> 
    </fieldset> 
    </form> 
</div> 

내 jQuery 코드 : mysql db

체크인 및 username 및 password의 점점 값

$(document).ready(function() { 
    $('a.login-window').click(function() { 

     // Getting the variable's value from a link 
     var loginBox = $(this).attr('href'); 

     //Fade in the Popup and add close button 
     $(loginBox).fadeIn(300); 

     //Set the center alignment padding + border 
     var popMargTop = ($(loginBox).height() + 24)/2; 
     var popMargLeft = ($(loginBox).width() + 24)/2; 

     $(loginBox).css({ 
      'margin-top' : -popMargTop, 
      'margin-left' : -popMargLeft 
     }); 

     // Add the mask to body 
     $('body').append('<div id="mask"></div>'); 
     $('#mask').fadeIn(300); 

     return false; 
    }); 

    // When clicking on the button close or the mask layer the popup closed 
    $('a.close, #mask').live('click', function() { 
     $('#mask , .login-popup').fadeOut(300 , function() { 
      $('#mask').remove(); 
     }); 
     return false; 
    }); 
}); 

Answer 1

당신은 팝업에서 필드 값을 가져올 수 없다고하셨습니다. 밝혀지면 얻을 수 있습니다.

코드를 약간 수정하여 로그인 버튼을 클릭하면 일반 검색을 수행했습니다.

또한 게시 된 마크 업에는 종료되지 않은 태그가 있습니다.

HTML :

<div class="login-box"><a href="#login-box" class="login-window">Login</a></div> 

<div id="login-box" class="login-popup"> 
    <a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a> 
    <form method="post" class="signin" id="sign" action="" > 
    <fieldset class="textbox"> 
     <label class="username"> 
     <!-- <span>Username or email</span>--> 
      <input id="username" name="username" value="" type="text" autocomplete="on" placeholder="Email"/> 
     </label> 

     <label class="password"> 
     <!-- <span>Password</span>--> 
      <input id="password" name="password" value="" type="password" placeholder="Password"/> 
     </label> 
     <div class="clear"></div> 
     <button class="submit button" id="subMitBtn" type="button" name="submit" >Login</button> 

     <p class="forgot"><a href="#">Forgot your password?</a></p> 
    </fieldset> 
    </form> 
</div> 

JS :

$(document).ready(function() { 
    $("#subMitBtn").click(function() { 

     var userName = $("#username").val(); 
     var password = $("#password").val(); 
     console.log("userName::"+userName); 
     console.log("password::"+password); 
    }); 

}); 

내가 말했듯이, 내가 JS의 전체 기능이 무엇을 아주 확실하지 않다, 그래서 난에 상당히을 손질했다 위의 코드는 필드 검색을 보여줍니다.

여기에 동작하는 예제입니다 : http://jsfiddle.net/cVm7W/

실행 그것은 당신의 브라우저 콘솔에서 볼 수, 당신은 값을 찾거나 IE의 경우에는 경고를 줄 것이다.

Answer 2

해보십시오 가나 사용 $.ajax()는

이 시도

$('a.login-window').click(function() { 

    // Getting the variable's value from a link 
    var loginBox = $(this).attr('href'); 
    //Fade in the Popup and add close button 
    $(loginBox).fadeIn(300); 
    //Set the center alignment padding + border 
    var popMargTop = ($(loginBox).height() + 24)/2; 
    var popMargLeft = ($(loginBox).width() + 24)/2; 

    var uname=$("#username").val(); 
    var pass=$("#password").val(); 
    // use the above values in Ajax function 


    $(loginBox).css({ 
     'margin-top' : -popMargTop, 
     'margin-left' : -popMargLeft 
    }); 
    // Add the mask to body 
    $('body').append('<div id="mask"></div>'); 
    $('#mask').fadeIn(300); 
    return false; 
});