Dear All, I have a page here Untitled Document. You can select a value from the dropdown list and you will get a list of configurations with the word "Select". If you click on the "Select" word you will get a pop-up value with a list of checkboxes. So what I want is that once they click on the checkbox the window will close and update the "Select" with the revelant "Tyre Serial No". How to achieve the updates? I also want to limit the pop-up window to only at any one time.

Dear All, I have a page here Untitled Document. You can select a value from the dropdown list and you will get a list of configurations with the word "Select". If you click on the "Select" word you will get a pop-up value with a list of checkboxes. So what I want is that once they click on the checkbox the window will close and update the "Select" with the revelant "Tyre Serial No". How to achieve the updates? I also want to limit the pop-up window to only at any one time.

The last part is the easiest to solve. Just open the new window using the same window name.

Getting the child to communicate with the parent can be tricky, but the child is allowed to run functions in the parent window. So, the parent window can have a function that sets the relevant section to what was selected. All the child then has to do is to run that parent function with the appropriate information.

Dear Paul, Where do you set the window name for it to be same name? I have seen the child function updating the parent but in my case each time you use a new drop down list the a new set of information is out. How to update dynamic value in my case?

Ok will try on it. How about the data passing and updating any idea how to start and go about it? Thank you.

One way is for the parent window to have a function that alerts to let you know it was run. Then you can work at making the child window run that function, and when successful, you can pass information to that function.

The parent window function will then be allowed to perform changes to the parent window that you are requiring.

Dear Paul, Got one problem regarding the onlick I am using href like this <a href='tyreDetails.php' target='_blank' >Select</a>? So you want me to replace with window.open is it? Any codes for the parent and child communication or good example for me to start working on it?

Dear Paul, Got one problem regarding the onlick I am using href like this <a href='tyreDetails.php' target='_blank' >Select</a>? So you want me to replace with window.open is it? Any codes for the parent and child communication or good example for me to start working on it?

That _blank way of opening a new window is a technique from the last century, when HTML3 ruled the roost. With HTML4 in 1999 that technique was deprecated. It's allowed in HTML4 Transitional so that you can transition from HTML3 to HTML4, but in HTML4 Strict using _blank is not allowed.

It's time to use proper techniques such as window.open() for such behavioural changes to your page.

Dear Paul, Ok I have done the changes via this method <label id=".$roPosition." onClick=window.open('tyreDetails.php','TyreDetails')>Select</label> is this ok? Next thing I have this code in my pop-up window. The problem now how is best mechanism to pass the label it so that once is checked in the window then it will set the value accordingly? Shall I send via get method? Next thing my label ID will all be dynamic and how to make this work dynamically window.opener.document.form.details.value = val;I mean the element name?

Ok I have done the changes via this method <label id=".$roPosition." onClick=window.open('tyreDetails.php','TyreDetails')>Select</label> is this ok?

Not really, because a label doesn't provide the user the visual clue that it can be clicked, so leave it as a link.

<a id=".$roPosition." href="#">Select</a>

You are going to have the same onclick event code duplicated around many times on your page, which goes strongly against the DRY principle - don't repeat yourself. Don't use inline onclick attributes, and instead use one piece of scripting to attach a function to the onclick event of the links.

We can also let the child window know the id value of the one that was used, because the this keyword from the onclick event refers to the element that triggered the event, so we can easily pass the id to the child window.

The best place to put the script code is at the end of the body, just before the </body> tag. If the script is in the head, nothing below it exists yet, so there you're stymied when it comes to working with elements on the page.

Not only is it best-practice to put scripts at the bottom to speed up your web page, it also allows the script to work with page elements as the page is loading.

Dear Paul, I have put like this. But when I press the select is not working no pop-up comes out? So the best method to send value is via get is it? The next challenge how to assign the value according to the this.id? How manipulate this window.opener.document.form.details.value = val;?

I have put like this. But when I press the select is not working no pop-up comes out?

Sorry, my head's killing me right now with the flu. A return false should go at the end of the function too, just to prevent the web page from performing its default action of trying to follow the link.

The problem with the code you used though, is that your variable declarations are wrong. Look again at the code I used, where they are comma separated instead. The line breaks are just for clarity - it's all one variable declaration. No semicolon until the end of the last variable declaration.

It seems that the sections of HTML code that you want to apply this to do not yet exist when the page loads. After loading in the section of code and displaying it on the screen, that is when you need to update those onclick events.

Dear Paul, Ok the pop-up works well now. So how about the value assignment in the pop-up window. How to make this window.opener.document.form.details.value = val;dynamic?

The child window has a querystring where tyre is given the id value of the parent select. So, the child can retrieve that id value and do something useful with it.There are libraries available that allow you to easily manipulate it, but as you're only wanting to retrieve a value, you can use a regular expression for that.

The following in the child window will retrieve the tyre value from the querystring, that being the id of the link that was clicked in the parent:

var qs = location.search,
tyreID = qs.match(/tyre=(\\w+)/)[1];

\w is for any alphanumeric characters as well as an underscore, the plus sign is for one or more of them, and the parenthesis form a capture group from which we retrieve the first match.

Dear Paul, I guess this part when I call the pop up is like this for e.g. http://183.78.169.53/tm/tyreDetails.php?tyre=F1L. So cant I use the get function in php to capture first the tyre value. Then send over to javascript? How does your location.search works? So once we retrieve the tyreID using qs.match(/tyre=(\w+)/)[1]; where are we going to apply the tyreID?

Dear Paul, Ok in the pop-up I have this function in it. So I have this function selectAndUpdate. What I want is that the checkbox value to replace the select word. I know this line window.opener.document.form.details.value = val; The problem here is static but my tyreID is dynamic how to replace that here well?

Ok in the pop-up I have this function in it. So I have this function selectAndUpdate. What I want is that the checkbox value to replace the select word. I know this line window.opener.document.form.details.value = val;

There can be problems with a child updating the parent, so what seems to work best is for the parent to have a function that performs the update, and for the child to call that function so that the changes can be made.