Question

I am trying to make a a form that will allow my to select a radio button that will change a button href location and open it in a javascript pop up. The JS for the href change that I have is:

<script type="text/javascript">
<!--
// return the value of the radio button that is checked
// return an empty string if none are checked, or
// 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 given value as being checked
// do nothing if there are no radio buttons
// if the given value does not exist, all the 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>

The JS for the pop up is from Highslide JS (highslide.com)

the from code I have 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>

Is it possible to combine these, if so, what am I doing wrong? Both JS work just not when I combine them.

Answer 1

Highslide allows you to override the iframe src via the src property of its configuration object:

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

As Joshua pointed out in your current code: return hs.htmlExpand .. will prevent your second statement (window.location ..) from executing. Even if it was to execute, all it would do is change the location of the current browser window to the target URL.

A solution would look 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>