Obtain data from a popup window and transfer it back to the main parent window

I am having trouble with a pop-up window that contains selections. After the user chooses options, I want those selected options to appear in the main window without refreshing it. I am utilizing JavaScript for this task, but I am struggling to find a way to access the checkbox items in the pop-up window from the main window.

For example:

<input type="checkbox" name="vehicle[]" value="Bike" /> 
<input type="checkbox" name="vehicle[]" value="car" />

var chbox = document.getElementById("vehicle[]").value;

However, this method is not working as intended.

javascript

Answer №1

give this a try:

<input type="checkbox" name="vehicle" value="Bike" />
<input type="checkbox" name="vehicle" value="car" />

var chbox1 = document.form.vehicle[1].value;
var chbox2 = document.form.vehicle[2].value;

hopefully this solution works for you.

Answer №2

To determine the functionality of the popup window, the method of opening it plays a significant role.

If the popup is opened using window.open, you have the option to capture the result of this action in a variable and leverage it for communication with the window.

For instance:

var popup = window.open('url-here');
// You can utilize popup.document to interact with the DOM elements within the popup window.
alert( popup.document.getElementById('checkbox-id').value );

Answer №3

Are you referring to a popup window that is opened using the window.open method?

If so, this method will return a new window object which you can use to reference the child (popup) window and its properties.

The following code snippet will output all DOM elements from the child window to the console (e.g. in Firefox).

var popup = window.open(...); console.log(popup.document.all);

I hope this information proves helpful to you.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Stop Chrome from automatically scrolling to the top of the page when making changes to the DOM

Currently utilizing Action Cable to create a discussion room where users can exchange questions. Upon posting a question, all participants within the room are supposed to see it. Nonetheless, I've encountered an odd issue specifically on Chrome: whene ...

javascriptjqueryruby-on-railsgoogle-chromeactioncable

The presence of a backslash is preventing the state from transitioning to '/{username:[a-zA-Z0-9]{3,20}}' within the AngularJs UI-router

In my abstract root state named 'site', the empty URL ('') contains two child states: 'profile' and 'home'. The URL for home is '/', while the URL for profile is '/{username:[a-zA-Z0-9]{3,20}}'. I ...

javascriptangularjsangular-ui-router

Tampermonkey feature: Extract source code with a button click from a constantly updating AJAX page

My goal is to create a simple script that can copy the source code of a dynamic AJAX page whenever I press a button. The current code, which I have included below, seems to be working fine: // ==UserScript== // @require http://ajax.googleapis.com/ajax/li ...

javascriptjqueryajaxtampermonkey

When accessing nested objects in Props in Vue.js, an error may occur if the property of null/undefined

When I make an axios call, I receive an object which I pass to a child component. However, when I attempt to loop through the object in the child component to access a property of another nested object, I encounter an issue where the property is showing as ...

javascripthtmlvue.jsnuxt.js

What is the best way to showcase all tab content within a single tab menu labeled "ALL"?

I have created a tab menu example below. When you click on the button ALL, it will display all the tabcontent. Each tab content has its own tab menu. Thanks in advance! function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = doc ...

javascripthtmlcsstabs

Accessing feedback from Reddit's API

After writing some code to search Reddit's API with a specific query, I now want it to display comments as well. Inside my $.getJSON statement that retrieves each title/post based on the search query, I have the following nested code block. The goal i ...

javascriptjsonapigetjsonreddit

Enabling ng-disabled within an ng-repeat loop

I'm facing an issue with a form that is nested inside an ng-repeat directive. The form should only be enabled if a specific field (in this case a select dropdown) is selected, but for some reason, it's not working as expected. Can anyone provide ...

javascriptangularjs

The connected callback does not trigger when custom HTML elements are being created

Attempting to craft a custom HTML tag using JavaScript, I aimed to create the custom element with ES6 JavaScript syntax. The code devised for this task reads as follows: customElements.define('neo-element', NeoElement); function NeoElement (){ ...

javascripthtmlcssecmascript-6ecmascript-5

Occasionally, the function XMLHttpRequest() performs as expected while other times it may

I've encountered an issue with my XMLHttpRequest() function where it randomly works in both Chrome and IE. The function is triggered by On-click, but I'm having trouble catching the error. The only information I could gather is that readystate = ...

javascriptjqueryajaxxmlhttprequest

Troubleshooting HTML/CSS and JavaScript Issues with Dropdown Menus

I'm having trouble getting my dropdown menu to work properly and I can't figure out why. The JavaScript code should toggle a class that hides the language options and slides up the other tabs like "Contact". However, when I click the button, noth ...

javascripthtmlcss

Updating the route method in Backbone.js

I attempted to override the route function in Backbone.Router, and here is the code I used: router.js (function($, Backbone, _, app){ var AppRouter = Backbone.Router.extend({ routes: { '': 'home' }, ...

javascriptjquerybackbone.js

Prevent further triggering of the .click function when the user clicks repeatedly

Is there a way to prevent the .click function from executing if the user clicks too many times? This is my current code: $('button').click(function() { $('#bg').fadeToggle('200'); }); Check out the jsfiddle DEMO ...

javascriptclick

Is there a way to determine if a website is utilizing javascript?

Currently, I am in the process of developing a web scraping tool using beautifulsoup. Some of the websites I am targeting contain JavaScript elements that prevent me from using urllib3 efficiently. As a workaround, I have incorporated selenium into my sc ...

javascriptpythonseleniumweb-scrapingbeautifulsoup

Retrieving JSON data using Jquery (undefined)

When attempting to retrieve a value from JSON data, I am receiving 'undefined'. $.get( baseURL + 'vacation/show/' + name_surname, function( data ) { alert(data); // returns [{"id":"1","title":"Testas","start":"2015-03-04","end":"20 ...

javascriptjqueryjson

JavaScript: employing a for loop as a variable declaration

Recently, I've been delving into JavaScript and exploring the functionality of the 'for' statement. However, I have a question that's been on my mind. I've managed to use the 'for' statement to produce output, like this: ...

javascriptarraysvariablesfor-loop

Is there a way to divide my time during work hours using Javascript?

This is just a simple example. 9.00 - 18.00 I am looking to modify the schedule as follows: 9.00 - 10.00 10.00 - 11.00 11.00 - 12.00 12.00 - 13.00 13.00 - 14.00 14.00 - 15.00 15.00 - 16.00 16.00 - 17.00 17.00 - 18.00 The current code implementation see ...

javascriptnode.jsmomentjs

A step-by-step guide on transferring data from a dynamic user interface to a server using React Native

In the following code snippet, I am dynamically retrieving an array value to generate a user interface. The UI will vary based on the dynamic nature of this value. However, I'm facing confusion regarding how to upload all the data to the server upon ...

javascriptreactjsreact-nativeecmascript-6

Enhancing User Experience with Cascading Dropdown Menus in MVC 5

I've been working on this project for a few days now, trying to get Cascading Dropdownlists to function properly. I'm having an issue where my State dropdownlist is not populating and no error message is displayed when the Ajax call fails. What c ...

javascriptasp.netajaxasp.net-mvc

No cookie found in the system

Attempting to create an effect using bloom and shaders in post-processing. However, encountering an error in the console with a blank white screen. I have tried clearing cookies, caches, and even running this in incognito mode, but it's still not work ...

javascriptcookiesthree.jswebgl

Finding out which carousel the user is currently engaging with in the Slick Carousel can be accomplished by following these steps

I am struggling with applying a class to the carousel container when the first slide is active in a page that contains multiple Slick carousels. Is there a way to update the code below so that the class is only applied to the specific carousel the user is ...

javascriptjqueryslick.js