-2

ログインボックス用のjqueryポップアップウィンドウを作成しました。これには、電子メールとパスワードのフィールドが含まれています。mysql dbでユーザー名とパスワードを確認するために、jqueryポップアップに入力された入力値を取得したいと考えています。ポップアップから値を取得できません。

誰も私にこれから抜け出すことを提案できますか??

私の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コード:

$(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;
    });
});
4

2 に答える 2

1

チェックインに$.ajax()を使用してみてくださいmysql db

値を取得してこれusernameをpassword試すには、

$('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;
});
于 2013-08-16T08:45:54.520 に答える
0

ポップアップからフィールドの値を取得できなかったとおっしゃいました。取得できることがわかりました。

その目的のためにコードを少し変更し、ログイン ボタンをクリックして単純な取得を行いました。

また、投稿されたマークアップには終了していないタグがいくつかあります。

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 の場合はアラートが表示されます。

于 2013-08-16T08:58:51.297 に答える