Question

i am trying to built a popUp box in my page which asks userName and Alerts that user.. here is my html code..

<a class="pop-up-link" href="#" title="View Pop Up" onClick="popUp()">Click Here</a>

    <div class='popup'> <a href='#' title="Close" class='close'><img src='close.png' alt='close' height="20" width="20" /></a>
        <div class="pop-heading">
            <h3>Pop Up</h3>
        </div>
        <div class="pop-info">
        </div>
    </div>

And then i have jquery code like

function popUp()
{
    var htmlString = "";
    var height = $(document).height();
    var width = $(document).width();
    var spanHeight = $('.popup').height();
    var spanWidth = 500;

    $('.pop-up-link').click(function() { 
        $(this).next()
            .css({ "top" :  height/2 - spanHeight/2 })
            .css({ "left" : width/2 - spanWidth/2 })
            .fadeIn(100);
    });

    $(".close").click(function () {
        $('.pop-up-link').next().fadeOut(100);
    });

    htmlString+='<input type="text" id="User" name="User"/>';
    htmlString+='<input type="button" value="Login" onclick="userLogin()">';
    $(".pop-info").html(htmlString);
}

function userLogin()
{
 alert($('#User').val());
}

But the alert box doesnt get any value. Then i had tried to put some value(to check its working), like $('#User').val('hello'); in userLogin function. But it also is not working. Ithink that input field is not accessable..
Can anyone describe how could i take the value in that User textbox?

Answer 1

Here is the answer

<a class="pop-up-link" href="#" title="View Pop Up">Click Here</a>

<div class='popup'> <a href='#' title="Close" class='close'><img src='close.png' alt='close' height="20" width="20" /></a>
    <div class="pop-heading">
        <h3>Pop Up</h3>
    </div>

here is jquery

$('.pop-up-link').click(function() {
    var htmlString = "";
    var height = $(document).height();
    var width = $(document).width();
    var spanHeight = $('.popup').height();
    var spanWidth = 500;

    $('.pop-up-link').click(function() { 
        $(this).next()
            .css({ "top" :  height/2 - spanHeight/2 })
            .css({ "left" : width/2 - spanWidth/2 })
            .fadeIn(100);
    });

    $(".close").click(function () {
        $('.pop-up-link').next().fadeOut(100);
    });

    htmlString+='<input type="text" id="user" name="User"/>';
    htmlString+='<input type="button" value="Login" class="login">';
    $(".pop-info").html(htmlString);
});

$(document).on('click', '.login', function () {
     alert($(this).prev().val());
}​);

Check live example on JSFIDDLE​