Solved

updateParent() HTML Javascript

Posted on 2016-10-23
21
61 Views
Last Modified: 2016-11-09
This code is only working if the child has only one <FORM> if more than one it won't work.

<------------------------------------------------------------------------------------->
<SCRIPT LANGUAGE="JavaScript">
function openChild(file,window) {
    childWindow=open(file,window,"resizable=no,width=600,height=800");
    }
</SCRIPT>


<FORM NAME="parentForm">
<INPUT NAME="pf1" TYPE="TEXT" VALUE="">
<INPUT TYPE="button" VALUE="Velja greiðanda" onClick="openChild('pop1.htm','win2')">



<------------------------------------------------------------------------------------->
<SCRIPT LANGUAGE="JavaScript">
function updateParent() {
    opener.document.parentForm.pf1.value = document.childForm.cf1.value;
    self.close();
    return false;
}
</SCRIPT>

<FORM NAME="childForm" onSubmit="return updateParent();">
<INPUT NAME="cf1" TYPE="hidden" VALUE="TextFromChild">
<button style="float: left;">Transfer me to parent</button>
</FORM>

<br><br>

<FORM NAME="childForm" onSubmit="return updateParent();">
<INPUT NAME="cf1" TYPE="hidden" VALUE="MoreTextFromChild">
<button style="float: left;">Transfer me also to parent</button>
</FORM>

Open in new window

0
Comment
Question by:soffcec
  • 8
  • 7
  • 3
  • +2
21 Comments
 
LVL 32

Expert Comment

by:ste5an
ID: 41856101
<---> is not a valid comment. Use <!-- some text -->. The number of hyphens and the spaces after abd before them are mandatory.

Forms cannot be nested.

opener is undefined in your snippet.

Also using the same name twice is not a good idea. Use the id or the name with different, unique values to address them correctly.

Please post a concise and complete example.
0
 

Author Comment

by:soffcec
ID: 41856115
I need to select between 2 or more answers from the child and update to Parent
I don't think a can change the name CF1 as it transfers the data to PF1 who transfers to the Parent. I would prefer to do this with <a href> and onclick but I have not found out how.



<!----- Parent ------>
<SCRIPT LANGUAGE="JavaScript">
function openChild(file,window) {
    childWindow=open(file,window,"resizable=no,width=600,height=800");
    }
</SCRIPT>


<FORM NAME="parentForm">
<INPUT NAME="pf1" TYPE="TEXT" VALUE="">
<INPUT TYPE="button" VALUE="Velja greiðanda" onClick="openChild('pop1.htm','win2')">
</form>


<!------ Child ----->
<SCRIPT LANGUAGE="JavaScript">
function updateParent() {
    opener.document.parentForm.pf1.value = document.childForm.cf1.value;
    self.close();
    return false;
}
</SCRIPT>

<FORM NAME="childForm" onSubmit="return updateParent();">
<INPUT NAME="cf1" TYPE="hidden" VALUE="TextFromChild">
<button style="float: left;">Transfer me to parent</button>
</FORM>

<br><br>

<FORM NAME="childForm" onSubmit="return updateParent();">
<INPUT NAME="cf1" TYPE="hidden" VALUE="MoreTextFromChild">
<button style="float: left;">Transfer me also to parent</button>
</FORM>

Open in new window

0
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 125 total points
ID: 41856128
code :
function updateParent(form) {
    opener.document.parentForm.pf1.value = form.getElementsByName("cf1")[0].value;

childs HTML :
<FORM NAME="childForm" onSubmit="return updateParent(this);">
0
 
LVL 82

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 125 total points
ID: 41856145
Both forms have the same name.  That normally means that only the first form will be found.
0
 

Author Comment

by:soffcec
ID: 41856247
Not so good writing Javscript, where do I go from here:
<SCRIPT LANGUAGE="JavaScript">
function updateParent(form) {
    //opener.document.parentForm.pf1.value = document.childForm.cf1.value;
	  opener.document.parentForm.pf1.value = form.getElementsByName("cf1")[0].value;
    self.close();
    return false;
}
</SCRIPT>

<FORM NAME="childForm" onSubmit="return updateParent(this);">
<INPUT NAME="cf1" TYPE="hidden" id="a" VALUE="TextFromChild">
<button style="float: left;">Transfer me to parent</button>
</FORM>

<br><br>

<FORM NAME="childForm1" onSubmit="return updateParent(this);">
<INPUT NAME="cf1" TYPE="hidden" id="b" VALUE="MoreTextFromChild">
<button style="float: left;">Transfer me also to parent</button>
</FORM>

Open in new window

0
 
LVL 51

Assisted Solution

by:Julian Hansen
Julian Hansen earned 250 total points
ID: 41856777
You have two elements with the same name - in your update child you are accessing index [0] - the first one.

Before trying to answer this - please can you explain what the intent is here. Your code looks extremely dated CAPS for tag names, use of the language attribute - which is no longer needed.

Can you give a brief synopsis of what it is you are wanting to achieve. We can correct coding errors and make suggestions but these might be taking you in the wrong direction.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 41856877
where do I go from here
test it !
0
 

Author Comment

by:soffcec
ID: 41856998
I am making a list to select customers and other information from a pop page.
I can do this by generate JavaScript with each record on the list by replacing the 'x' with unique code (0-999 a-z etc.)
<SCRIPT>
   function uPx() {
   opener.document.parentForm.pf1.value = document.childFormx.cfx.value;
   self.close();
}
</SCRIPT>

<tr><td><FORM NAME="childFormx" onSubmit="return uPx();">
<INPUT NAME="cfx" TYPE="hidden" VALUE="somedata">
<button style="float: left;">Information to display</button></FORM>

Open in new window


But I rather want to generate the JavaScript only once.
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41857053
Any reason you don't use <div> popups that remain on the same page and don't require you to open a separate browser window?

Bootstrap includes a Modal component - you can also add plugins like jQueryUI that provide the functionality.

Is there any specific reason you want to open a new browser window?
0
 

Author Comment

by:soffcec
ID: 41857062
I don´t want to load the whole list every time I open the webpage. It consist of more then 2000 records.
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41857092
I don´t want to load the whole list every time I open the webpage. It consist of more then 2000 records.
Ok - lets backup a bit here - I am still not understanding the use case here.

Based on your opening post you have this
<form name="parentForm">
	<input name="pf1" TYPE="TEXT" VALUE="">
	<input TYPE="button" VALUE="Velja greiðanda" onClick="openChild('pop1.htm','win2')">
</form>

Open in new window

If the button is clicked - it opens a new window with a form in it (the child).
The example of the child you have given is showing two forms with identical names and identical hidden fields. There is a button that says "Transfer to parent"

What is going on here - why the multiple duplicate forms? What is the function of the forms in the popup.
0
 
LVL 32

Expert Comment

by:ste5an
ID: 41857095
Does your stack support caching?

btw, how does your stack look like?
0
 

Author Comment

by:soffcec
ID: 41857333
Hope this explains.

http://dev.fq.is/pop.htm
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41857348
Yes, I understand the need for a popup - we can deal with better alternatives to a window.open later - for now I am interested to know about the two forms on the same popup with the same names - what are you trying to do there?
0
 

Author Comment

by:soffcec
ID: 41857355
I want to click on the customer name and transfer it to pop.htm and it is working fine, but I need smaller code because I repeat the Javascript with each record.
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41857435
Ok I think I see where you are going with this and we can definitely make this a lot simpler for you.

Can we see your full source listing to give a context.
0
 

Author Comment

by:soffcec
ID: 41857499
Now it's all there as I want it but need smaller code.
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41857544
To be clear - is the child you want to simplify - you don't want to repeat the JavaScriptfor each option in the child?
<tbody><tr><td><form name="childForm1" onsubmit="return line1();">
<input name="cf1" value="1023587" type="hidden">
<button style="float: left;">1023587</button></form>




<script>
   function line2() {
   opener.document.parentForm1.pf2.value = document.childForm2.cf2.value;
   self.close();
}
</script>

</td></tr><tr><td><form name="childForm2" onsubmit="return line2();"><input name="cf2" value="1028745" type="hidden"><button style="float: left;">1028745</button></form>


<script>
   function line3() {
   opener.document.parentForm1.pf2.value = document.childForm3.cf3.value;
   self.close();
}
</script>

</td></tr><tr><td><form name="childForm3" onsubmit="return line3();"><input name="cf3" value="1023457" type="hidden"><button style="float: left;">1023457</button></form>
</td></tr></tbody>

Open in new window

0
 

Author Comment

by:soffcec
ID: 41858826
It's only the child form I want to make smaller. I don't want repeat the JavaScript for each option in the child.
0
 
LVL 51

Accepted Solution

by:
Julian Hansen earned 250 total points
ID: 41858896
Here is a sample
Parent
<!doctype>
<html>
<body>
<form name="parentForm">
  <input name="pf2" type="text" value="" />
  <input type="button" value="Velja greiðanda" onClick="openChild('t1772-pop.html','win2')">
</form>
<script>
function openChild(file,window) {
  childWindow=open(file,window,"resizable=no,width=600,height=800");
}
</script>
</body>
</html>

Open in new window

Child
<!doctype html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<style type="text/css">
</style>
</head>
<body>
<ul class="list-group">
  <li class="list-group-item"><a href="#" data-value="1028745">1028745</a></li>
  <li class="list-group-item"><a href="#" data-value="1023457">1023457</li>
</ul>
<script src="http://code.jquery.com/jquery.js"></script>
<script>
$(function() {
  $('li.list-group-item a').click(function(e) {
    opener.document.parentForm.pf2.value = $(this).data('value');
    self.close();
  });
});
</script>
</body>
</html>

Open in new window

Working sample here

Notes:
I have used jQuery in the child to assist with the selection and retrieval of values.
I have used bootstrap in the child to assist with the styling.

Neither of the above is necessary the same effect can be achieved with plain JavaScript - however I recommend using jQuery if you can.

It is also not necessary to open the window in a new window. You can use modal dialogs which are in page Div's to do the same thing. One of the draw backs with the method you are using is that because you are using a named window, if that window happens to be open and you click the button and the window is not visible it will appear as if the button is not doing anything.

With a modal <div> the popup is in the same page so you will always see it. It also has the benefit that you can't do anything in the parent until the child is closed.

Let's start with this first to see if this is doing what you want and we can take it from there.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 41879805
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now