Implementing dual onClick events for the Download choices form

I am currently working on creating a form where selecting a radio button will change the href location of a button and open it in a JavaScript pop-up. The script I have for changing the href is as follows:

<script type="text/javascript">
<!--
// Retrieve the value of the checked radio button
// Return an empty string if none are checked, or if there are no radio buttons
function getCheckedValue(radioObj) {
if(!radioObj)
    return "";
var radioLength = radioObj.length;
if(radioLength == undefined)
    if(radioObj.checked)
        return radioObj.value;
    else
        return "";
for(var i = 0; i < radioLength; i++) {
    if(radioObj[i].checked) {
        return radioObj[i].value;
    }
}
return "";
}

// Set the radio button with the provided value as checked
// Do nothing if there are no radio buttons
// If the given value does not exist, all radio buttons are reset to unchecked
function setCheckedValue(radioObj, newValue) {
if(!radioObj)
    return;
var radioLength = radioObj.length;
if(radioLength == undefined) {
    radioObj.checked = (radioObj.value == newValue.toString());
    return;
}
for(var i = 0; i < radioLength; i++) {
    radioObj[i].checked = false;
    if(radioObj[i].value == newValue.toString()) {
        radioObj[i].checked = true;
    }
}
}
//-->
</script>

For the pop-up functionality, I am using Highslide JS from highslide.com.

The form code I have implemented is:

 <form name="radioExampleForm" method="get" action="" onsubmit="return false;">
<p><label for="number0"><input type="radio" value="popups/download1.html" name="number"     id="number0"> Free</label>
&nbsp;<label for="number1"><input type="radio" value="popups/download2.html" name="number" id="number1">Premium</label>

<p>
<input type="button" onclick="return hs.htmlExpand(this, { objectType: 'iframe' } ); window.location.href = (getCheckedValue(document.forms['radioExampleForm'].elements['number']));" value="Download" class="button">
</form>

I am trying to merge these scripts together, but they don't seem to work when combined. Any insights on what could be going wrong?

Answer №1

When using Highslide, you have the ability to change the iframe src by modifying the src property in its configuration object:

hs.htmlExpand(this, {
    objectType: 'iframe',
    src: 'mypage.html'
});

It's important to note, as highlighted by Joshua in your existing code, that using return hs.htmlExpand .. will prevent the second statement (window.location ..) from being executed. Even if it were to execute, it would simply alter the current browser window to the specified URL.

An improved solution could be structured like this:

<form name="radioExampleForm" method="get" action="" onsubmit="return false;">
    <p>
        <label for="number0"><input type="radio" value="popups/download1.html" name="number" id="number0"> Free</label>&nbsp;
        <label for="number1"><input type="radio" value="popups/download2.html" name="number" id="number1">Premium</label>
    <p>

    <input type="button" onclick="return hs.htmlExpand(this, { objectType: 'iframe', src: getCheckedValue(document.forms['radioExampleForm'].elements['number']) } );" value="Download" class="button">
</form>

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

"Is it possible to conditionally render a component depending on the state in

One of the challenges I'm facing is customizing a filter icon from MaterialUI. My goal is to change its color to black when a checkmark is checked, and adjust its position accordingly. Additionally, when a box is checked, it should fill in setFilters. ...

Using $sce in ng-repeat within Angular configuration parameters

I have been trying to incorporate videos using iframes, but no content is being displayed even with the correct embed link. Strangely, when I manually input the link into the iframe tag, the videos show up as expected. Here is the code snippet where I am f ...

Integrate individual characters into the div element sequentially using javascript, rather than all at once

After a few years, I decided to dive back into experimenting with JavaScript. I've encountered a situation where I'm trying to add the character "X" to a div element one at a time, instead of all at once. Currently, the DOM seems to be adding the ...

Click-triggered CSS animations

Trying to achieve an effect with regular JS (not jQuery) by making images shake after they are clicked, but running into issues. HTML: <img id='s1_imgB' class="fragment"... onClick="wrongAnswer()"... JS: function wrongAnswer(){ docume ...

Connecting Angular forms to retrieve form data using email

Hello, I am new to Angular and haven't had experience hosting a website before. I have created a contact form on my website and would like the form inputs to be sent to my email address whenever someone submits the form. Can anyone guide me on how to ...

NPM Messer - the innovative chat tool for Facebook Messenger. Ready to see it in action?

Previously, I had the idea of creating my own Messenger client. However, when I reviewed the documentation, it only provided instructions on how to write a chatbot. Despite this obstacle, I stumbled upon something intriguing - a Messer command line client. ...

The data type of Subscription: prototype, NOT ASSIGNED

I am encountering the following error when attempting to return a subscription object. Error Message:-------- Type 'Subscription' does not have the prototype and EMPTY properties that are expected from type 'typeof Subscription' Here ...

What specific portion of the code will be transformed into a virtual DOM?

As a newcomer to the virtual DOM concept, I have been pondering how it functions over the past few days. Let's envision that I have integrated a simple template engine like twig into my project, and I am utilizing vue.js as my chosen javascript frame ...

Simultaneously sending jQuery.ajax data while submitting a form

I'm facing a bit of a dilemma here. I have a form with multiple fields, including one for entering links. When you input a link and click the add button, the link is added to a link_array using jQuery. My goal is to send this array through the jQuery. ...

Trigger Object RuntimeError

Initially, I attempted to pass the object :id to the URL and it was successful. However, when I tried to pass the object to the list, I encountered a ReferenceError. index.ejs: <tr> <th class="text-center">AWB NO</th> <th c ...

Convert a linear gradient into an object

Can someone help me convert the linear-gradient value into an object with keys and values? Here is the initial value: linear-gradient(10deg,#111,rgba(111,111,11,0.4),rgba(255,255,25,0.1)) I would like it to be structured like this: linear-gradient: { ...

Encountering issues when attempting to render a function within the render method in React

When attempting to render the gridWithNode function inside the render method, I encountered an error message stating: "Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant ...

Retrieving the necessary key values from a JSON dictionary

I'm attempting to retrieve keys from a dictionary using JavaScript. The user uploads a .json file containing the dictionary, and I want to display the keys from that uploaded dictionary. It's important to note that only .json dictionaries can be ...

Refresh the data list displayed within a specified div container

On my jsp page, I initially populate a model attribute with some data. Then, I use the following code to display this list on the jsp page: <c:forEach var="pattern" items="${patterns}"> <li class="list-group-item liitem"><st ...

What is the best way to import the L module from the "leaflet" library in Next.js?

Implementing Leaflet into my Next.js development posed a challenge as it did not support server side rendering (SSR). To address this, I had to import the library with SSR disabled using the following approach: import React, {Component} from "react&qu ...

Use Google Maps and MySql to retrieve specific markers within a designated radius using unique latitude and longitude coordinates

Can the latitude and longitude of specific coordinates within a certain radius be retrieved from a database? ...

Unable to execute mongoose operation on database collection due to certain restrictions

Currently utilizing Mongoose for communication with MongoDB. Running into issues while attempting to execute certain operations. The database contains a collection named USERS, characterized by the following schema: {username: 'user1', id: 1, l ...

Adding an item to an array within a local scope using an asynchronous callback

I am utilizing node.js on my server and using Redis as a key-store for storing character data. Each connection on my server has its own unique character assigned to it. My goal is to gather all the data about these characters (such as their name, age, prof ...

Configuring a Meteor.js application requires defining variable scopes for templates in order to manage

Is there a way to define a variable that is limited in scope to a specific template? I want this variable to be accessible by multiple helpers within the template, but not outside of it. For example, how can the game variable be shared between two templat ...

Iterate through list A in vuejs, and mark each item as "checked" if it is also found in list

I'm currently creating a loop to display a list of available items along with checkboxes so that the user can select the ones they want. For instance, here is an example of the allAtivos data: "allAtivos": [ { "id": 1, "tit ...