sankar_bhatta Posted February 1, 2007 Share Posted February 1, 2007 Hi guys,I have started learning javascript recently. I am tring to build a smal program. the requirement is like thisI will ener into one page where i have button and an input field. When I clcick on the button a new window should open and this window inturn shoud contain a table with several rows and columns. probably like thisA | 1233 | dfgfdg----------------------------------B | 12313 | fgfg-----------------------------------C | 121 | fgfgf-----------------------------------So in the second window when i click on A , the program should go to the first window and place the A in the input field in the first window.I have succeded to some extent but could not bring back the values to the first window.can anybody please provide the code for the above requirement..thanks in advancesankar Link to comment Share on other sites More sharing options...
jesh Posted February 1, 2007 Share Posted February 1, 2007 To get a reference to the window that opened your popup window, you can use window.opener. // get a reference to the parentvar parent = window.opener;// get the value from some element in the current windowvar somevalue = document.getElementById("ElementInChildWindow").value;// set that value to an element on the parent windowparent.document.getElementById("ElementInParentWindow").value = somevalue; Link to comment Share on other sites More sharing options...
sankar_bhatta Posted February 2, 2007 Author Share Posted February 2, 2007 HI jeshthanks for the replyI have written the code as below. <html><head><script type="text/javascript">function createNewDoc() { var newwindow=window.open(); var txt="<html><body>Learning about the DOM is FUN!</body></html>"; newwindow.document.write(txt);var parent = window.opener;var newtext = newwindow.document.innerHTML;parent.document.getElementById("field").value = newtext; }</script></head><body><input type " "text" id = "field"><input type="button" value="Open and write to a new document" onclick="createNewDoc()"></body></html> PLease let me know what is going wrong. The value is not getting transferred to the parent window.thankssankar Link to comment Share on other sites More sharing options...
sankar_bhatta Posted February 5, 2007 Author Share Posted February 5, 2007 HiSomebody please give solution to my problem.thankssankar Link to comment Share on other sites More sharing options...
jesh Posted February 5, 2007 Share Posted February 5, 2007 As your code stands, there would be no parent window. Try this instead: function createNewDoc(){ var newwindow=window.open(); var txt="<html><body>Learning about the DOM is FUN!</body></html>"; newwindow.document.write(txt); var newtext = newwindow.document.innerHTML; document.getElementById("field").value = newtext;} Also, it appears that there is a typo in the input on the page: <input type " "text" id = "field"> Should be: <input type = "text" id = "field"> Link to comment Share on other sites More sharing options...
sankar_bhatta Posted February 6, 2007 Author Share Posted February 6, 2007 Hi Jesh,Thanks for your reply.I have wirtten the code as you said ,but the problem is whenever I click on the button in the parent window, a window is opening and the test field in the parent window is filled with "undefined". My requirement is ti fill the input field with words written in the new window. I am giving the code here. please suggest the corrections. <html><head><script type="text/javascript">function createNewDoc() { var newwindow=window.open(); var txt="<html><body>Learning about the DOM is FUN!</body></html>"; newwindow.document.write(txt);var newtext = newwindow.document.innerHTML;document.getElementById("field").value = newtext; }</script></head><body><input type = "text" id = "field"><input type="button" value="Open and write to a new document" onclick="createNewDoc()"></body></html> what i want here is the input field "field" should be filled with the sentence " Learning about the DOM is fun!". Instead of that it is coming as "undefined".thankssankar Link to comment Share on other sites More sharing options...
jesh Posted February 6, 2007 Share Posted February 6, 2007 It looks like the problem is the document.innerHTML call. It appears that there isn't a innerHTML property of the document object. Rather than: var newtext = newwindow.document.innerHTML; You might try: var newtext = newwindow.document.body.innerHTML; This will get you the contents of the body element on your child window.However, depending on your requirements, you can cheat a little and use something like this: function createNewDoc(){ var newwindow=window.open(); var txt="<html><body>Learning about the DOM is FUN!</body></html>"; newwindow.document.write(txt);// Since we are writing the HTML to the child window within this function, we // know what content is going to be written there so we'll just use the// value that is in the txt variable.var newtext = txt;document.getElementById("field").value = newtext; } One final piece of advice, rather than simply writing to the document in the child window, you'll be better off if you open the document, write to it, and then close it. Like this: newwindow.document.open();newwindow.document.write(txt);newwindow.document.close(); I hope this helps! Link to comment Share on other sites More sharing options...
sankar_bhatta Posted February 7, 2007 Author Share Posted February 7, 2007 Hi Jeshthank you verymuch for your reply. The problem is solved.I am moving to another step further and modify my program. Now I want to have a table in the child window with 2 rows and 2 cells . When I click on any of the cell the content of the cell should be copied to the input element in the parent window. I have first tried to create the table in the child window when i click on the button in parent window. i have written the code as below. It is not working. pelase let me know what is to be done and how do i bring the each cel content on which i have clicked to the input field in the parent window. <html><head><script type="text/javascript">function createNewDoc() { var newwindow=window.open(); var txt="<html><body><table><tr><td>ABC</td><td>good</td></tr><tr><td>123</td><td>verygood</td></tr></table></body></html>"; newwindow.document.write(txt); }</script></head><body><input type = "text" id = "field"><input type="button" value="Open and write to a new document" onclick="createNewDoc()"></body></html> thankssankar Link to comment Share on other sites More sharing options...
jesh Posted February 7, 2007 Share Posted February 7, 2007 var txt="<html><body><table><tr><td>ABC</td><td>good</td></tr><tr><td>123</td><td>verygood</td></tr></table></body></html>"; Or: var txt="<html><body><table><tr><td>ABC</td><td>good</td></tr>";txt += "<tr><td>123</td><td>verygood</td></tr></table></body></html>"; Link to comment Share on other sites More sharing options...
sankar_bhatta Posted February 8, 2007 Author Share Posted February 8, 2007 Hi Jeshthank you very muchI am now able to populate the cell values from child window to the aprent window. Now my problem is I want to populate the value of a cell on which I have clicked. How do i find out on which element I have clicked. I have taken the reference of an example from w3schools http://www.w3schools.com/js/tryit.asp?file...vent_srcelementI have written the code as below , but it si not working. please suggest a way out. <html><head><script type="text/javascript">var tvalue ;function whichelement(e){var targ;if(!e) var e = window.event;if (e.target ) targ = e.target;else if (e. srcElement ) targ = e.srcElement;tvalue = targ.value;}function createNewDoc() { var newwindow=window.open(); var txt="<html><body onmousedown = whichelement(event)><table border = 1 id = cells><tr><td>ABC</td><td>good</td></tr>";txt +="<tr><td>123</td><td>verygood</td></tr></table></body></html>"; newwindow.document.write(txt);document.getElementById("field").value = tvalue; }</script></head><body><input type = "text" id = "field"><input type="button" value="Open and write to a new document" onclick="createNewDoc()"></body></html> Link to comment Share on other sites More sharing options...
jesh Posted February 8, 2007 Share Posted February 8, 2007 I see two issues with the code you have currently. The first issue is that the child window has an event handler set up on the mousedown event of the body element but that event handler isn't available to the child window being as the function is defined on the parent window.Rather than: <body onmousedown = whichelement(event)> You might try: <body onmousedown="window.opener.whichelement(event);"> The second issue is that the only time your text field's value changes is when you click the button on the parent window to execute your createNewDoc function. There needs to be some code that ties clicking on the td in your child window to updating the value of that text input. Since you already have an event handler that deals with clicking the mouse button on the child window, we can tie in that functionality there. function whichelement(e){ var targ; if(!e) var e = window.event; if (e.target ) targ = e.target; else if (e. srcElement ) targ = e.srcElement; // now that "targ" has a reference to the element that sent the event, // let's look at that element to see what type it is if(targ.tagName == "td" || targ.tagName == "TD") { // OK, the element that sent the event was a td element. // now we can update the content of the text input. document.getElementById("field").value = targ.value; }} Link to comment Share on other sites More sharing options...
sankar_bhatta Posted February 9, 2007 Author Share Posted February 9, 2007 HI Jesh,I was successful to some extent ,but not completely. In the below code in function "whichelement" i have alert statement todetermine what are the values that are passed to the parent window. When I put the alert(tvalue) in function i got undefined as the output.I think using the targ.value will not fetch the value of the cell on which i have clicked. How do i get the value in the cel on which i have clicked. <html><head><script type="text/javascript">var tvalue ;var tname;function whichelement(e){var targ;if(!e) var e = window.event;if (e.target ) targ = e.target;else if (e. srcElement ) targ = e.srcElement;tname=targ.tagNameif(tname== "td" || tname == "TD") { // OK, the element that sent the event was a td element. // now we can update the content of the text input.tvalue = targ.value;alert(tvalue); document.getElementById("field").value = tvalue; }}function createNewDoc() { var newwindow=window.open(); var txt="<html><body onmousedown = window.opener.whichelement(event)><table border = 1 id = cells><tr><td>ABC</td><td>good</td></tr>";txt +="<tr><td>123</td><td>verygood</td></tr></table></body></html>"; newwindow.document.write(txt);<!-- var x = newwindow.document.getElementById("cells").rows[0].cells; --><!-- var firstcell = x[0].innerHTML; -->//document.getElementById("field").value = tvalue; }</script></head><body><input type = "text" id = "field"><input type="button" value="Open and write to a new document" onclick="createNewDoc()"></body></html> Link to comment Share on other sites More sharing options...
jesh Posted February 9, 2007 Share Posted February 9, 2007 Yeah, you're right, sorry. It's targ.innerHTML. TD elements don't have a "value" property, you'll have to use innerHTML. I had a brain-wracking day yesterday! Link to comment Share on other sites More sharing options...
sankar_bhatta Posted February 14, 2007 Author Share Posted February 14, 2007 Hi Jesh,Thank you very much. I am now able to get the selected values from the child window to parent window. I really appreciate ur help. I will be back with more queries :) thankssankar Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now