Question

i have a html page sth.html containing

<div id="recoverpass">
    <h2>Recover Password</h2>
    <form action="#" method="post" name="recoverpass">
        <p><label> Enter E-Mail Address: </label> <input type="text" name="email" id="name" /></p>
        <input type="submit" value="Recover Password" />
    </form>
</div>
<div id="registernew">
        <h2>Register New User</h2>
        <form action="#" method="post" name="recoverpass">
            <p><label> Enter E-Mail Address: </label> <input type="text" name="email" id="name" /></p>
            <input type="submit" value="Recover Password" />
        </form>
</div>

In my index.html page, i have a popup that is loaded when corresponding links are clicked. What i want is that when forgot password popup is loaded, it should import html from sth.html then content of recoverpass ‘div’. and when register popup is loaded, it should import html from sth.html then content of registernew ‘div’.

Answer 1

easy to do with .load()

$("#popup").load("sth.html #recoverpass");
$("#popup").load("sth.html #registernew");