updateParent() HTML Javascript

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

soffcecManagerAsked:
Who is Participating?
 
Julian HansenConnect With a Mentor Commented:
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
 
ste5anSenior DeveloperCommented:
<---> 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
 
soffcecManagerAuthor Commented:
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
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
leakim971Connect With a Mentor PluritechnicianCommented:
code :
function updateParent(form) {
    opener.document.parentForm.pf1.value = form.getElementsByName("cf1")[0].value;

childs HTML :
<FORM NAME="childForm" onSubmit="return updateParent(this);">
0
 
Dave BaldwinConnect With a Mentor Fixer of ProblemsCommented:
Both forms have the same name.  That normally means that only the first form will be found.
0
 
soffcecManagerAuthor Commented:
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
 
Julian HansenConnect With a Mentor Commented:
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
 
leakim971PluritechnicianCommented:
where do I go from here
test it !
0
 
soffcecManagerAuthor Commented:
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
 
Julian HansenCommented:
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
 
soffcecManagerAuthor Commented:
I don´t want to load the whole list every time I open the webpage. It consist of more then 2000 records.
0
 
Julian HansenCommented:
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
 
ste5anSenior DeveloperCommented:
Does your stack support caching?

btw, how does your stack look like?
0
 
soffcecManagerAuthor Commented:
Hope this explains.

http://dev.fq.is/pop.htm
0
 
Julian HansenCommented:
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
 
soffcecManagerAuthor Commented:
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
 
Julian HansenCommented:
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
 
soffcecManagerAuthor Commented:
Now it's all there as I want it but need smaller code.
0
 
Julian HansenCommented:
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
 
soffcecManagerAuthor Commented:
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
 
leakim971PluritechnicianCommented:
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.