get value from loaded page in javascript

Question

I have main.aspx and second.aspx.The code in main.aspx:

<form id="form1">
    <div id="main">
    </div>
</form>

And in second.aspx:

<div id="second">
    <asp:Textbox runat="server" id="txt1"></asp:Textbox>
    <input type="button" id="bttn" value="send"></input>
</div>

At the run time I'm loading second.aspx page into main.aspx div id="main".

$("#main").load("second.aspx #second");

I'm trying to get the textbox value from main.aspx.But when I tried

$("#bttn").click(function(){
    var t=$("txt1").val();
    alert(t);
});

It gives nothing.It seems to be never going into the function.How can get the value from the textbox.

FYI, your selector is wrong too: `$("#txt1").val();` – A. Wolff Oct 19 '15 at 08:14 — A. Wolff, Oct 19 '15 at 08:14

score 0 · Answer 1 · edited Oct 19 '15 at 12:11

0

Try this:

$("#bttn").click(function(){
  var t=$("#txt1").val();
  alert(t);
});

edited Oct 19 '15 at 12:11

MarmiK

answered Oct 19 '15 at 08:13

Kaushik Maheta

score 0 · Accepted Answer · answered Oct 19 '15 at 08:13

0

That is because element do not exist when you are defining the event. You need to either use

1) Event Delegation

$("#main").on('click','#bttn',function(){
  var t = $("#txt1").val();
  alert(t);
});

or

2) Bind the event on success function of load event

answered Oct 19 '15 at 08:13

Milind Anantwar

2 Answers2