|
JavaScript - Opening Radio Button Links In A Separate Frame
Hello everyone,
I'm very new to Javascript, and I'm trying to build a simple webpage with frames with navigation links that open in other frames. I have three frames in the main part of my webpage, A, B, and C. Frame A is the header, Frame B is where I keep the links, and Frame C is where I want the links to display. I'm trying to get the links in Frame B to work both as text links and as radio button links. So far, I have managed to get the text links to open in Frame C as I wanted to, but when it comes to the radio buttons, I encounter a problem. The radio buttons do open as links... Except, they open in the frame they're contained, Frame B, rather than in Frame C like I want them to. Does anyone know how I might fix this problem? Is the coding completely wrong or is it just a simple mistake I've overlooked? Here is the relevant code: This is the code for the main page with the frames: Code: <html> <frameset rows="100,*"> <frame src="Hello.htm" NAME="A"/> <frameset cols="25%,75%"> <frame src="Linklist.htm" NAME="B"/> <frame src="Start.htm" NAME="C"/> </frameset> </frameset> </html> And this is the code for my links: Code: <html>
<head>
<SCRIPT LANGUAGE="JavaScript">
function go(loc) {
window.location.href = loc;
}
</script>
</head>
<BODY BGCOLOR="#000000" TEXT="#green">
<p><center><h4>Links</h4></center></p>
<form name="form">
<input type="radio" name="loc" onClick="go('http://www.wikipedia.org/');" TARGET="C"> <A HREF="http://www.wikipedia.org/" TARGET="C">Wikipedia</A><br>
<input type="radio" name="loc" onClick="go('http://dictionary.reference.com/'); TARGET="C""> <A HREF="http://dictionary.reference.com/" TARGET="C">Dictionary.com</A><br>
</form>
</html>
Any and all help would be much appreciated. This has me really stumped. Thank you for your time! Similar TutorialsHello. I am opening a new small window through javascript. Here is the code: Code: <script type="text/javascript">
function openwindow(id) {
var left = (screen.width/2)-350;
var top = (screen.height/2)-240;
var mywindow = window.open(" map.asp ?location="+id,"mywindow","menubar=0,resizable=0,width=700,height=400,left="+left+",top="+top+"");}
</script>
But on the same page I have another link for a new window which is essentially the same code: Code: <script type="text/javascript">
function openwindow(id) {
var left = (screen.width/2)-350;
var top = (screen.height/2)-240;
var mywindow = window.open(" pofull.asp ?poid="+id,"mywindow","menubar=0,resizable=0,width=700,height=400,left="+left+",top="+top+"");}
</script>
As you can see in the red text, one link should open map.asp and the other should open pofull.asp... but they BOTH open in pofull. So I have tried to change the function name for one of them but then it doesnt work at all. I am quite confused here. I have tried everything to separate the two scripts but nothing has worked. Can someone help? I have 4 rows in a table. Each row consist of 4 radio buttons. Each radio button per row has different values in it but has the same name (group) ex: <input type="radio" name="a" value="1"> <input type="radio" name="a" value="2"> <input type="radio" name="a" value="3"> <input type="radio" name="a" value="4"> <input type="radio" name="b" value="1"> <input type="radio" name="b" value="2"> <input type="radio" name="b" value="3"> <input type="radio" name="b" value="4"> and so on.. If I click radio button A with value 2, I want to output the total at the bottom as "2".. Also, if I click radio button B with value 3, I want to output the total of A and B as 5 and so on.. How can I automatically calculate the answer based on which radio button was click? update: I got my answer from this site: http://stackoverflow.com/questions/1...s-using-jquery Hi there! I've been trying to edit this script but it continues to open my slideshow images into new tabs. I would like that the images on the slideshows when clicked they will open in the same tab. How can I do that? Thanks in advanced Here is the script I am using <a href="javascript:gotoshow()"><img src="http://imgkk.com/i/hPnvq8.jpg"target="_self""_innerframe" name="slide" border=1 width=375 height=275></a> <script> <!-- //configure the paths of the images, plus corresponding target links slideshowimages("http://imgkk.com/i/hPnvq8.jpg","http://imgkk.com/i/blxJnL.jpg","http://imgkk.com/i/7UzTr8.jpg","http://imgkk.com/i/_CP_mA.jpg") slideshowlinks("http://www.pimpthatfood.com/ptf-articles","http://www.pimpthatfood.com/food-forum","http://www.pimpthatfood.com/ptf-store","http://www.pimpthatfood.com/healthips") //configure the speed of the slideshow, in miliseconds var slideshowspeed=5000 var whichlink=0 var whichimage=0 function slideit(){ if (!document.images) return document.images.slide.src=slideimages[whichimage].src whichlink=whichimage if (whichimage<slideimages.length-1) whichimage++ else whichimage=0 setTimeout("slideit()",slideshowspeed) } slideit() //--> </script> Hi, Question: How can I use a submit button to do two things? 1) return the value which is a url link, and 2) go to the url link. I use radio buttons with two selections. Each value is equal to different links (http://...). A select button calls a javascript function to see which one is selected. In java script, I set a variable to link text (http://....) HERE'S THE HTML Code: <FORM NAME=payment >
Select Payment Option:
<label>
<input type="radio" name="RadioGroup1" value="http://www.1Search5CC.html" checked="checked" />
Credit Card or </label>
<label>
<input type="radio" name="RadioGroup1" value="http://www.1Search5check.html" />
Check</label>
<input type="submit" value="CHECKOUT" onclick="GetSelectedItem()">
Code: function GetSelectedItem(){
chosen = ""
len = document.payment.RadioGroup1.length
for (i = 0; i <len; i++) {
if (document.payment.RadioGroup1[i].checked) {
var chosen = document.payment.RadioGroup1[i].value;
alert ("Chosen= " + chosen)
document.payment.chosen.value = chosen
}}}
I know I can just link to a page immediately when a choice is selected, but I want to use a submit button instead. Any help would be appreciated. All, I have the following code: Code: <form action="" name="myform" method="post">
<input type="hidden" id="picimages" name="picimages" value="<?php echo $resultsetstory['bigger_id']; ?>" />
<p>
<label>
<input type="radio" id="picimages" name="picimages" value="<?php echo $resultsetstory['picture_id']; ?>" />
<?php
if($resultsetstory['title']<>""){
echo $resultsetstory['title'];
}else{
echo "Image 1";
}
?>
</label>
<br />
<label>
<input type="radio" id="picimages" name="picimages" value="<?php echo $resultsetpic2['picture_id']; ?>" />
<?php
if($resultsetpic2['title']<>""){
echo $resultsetpic2['title'];
}else{
echo "Image 2";
}
?>
</label>
<br />
<input name="submit" type="button" value="Vote!" onclick="javascript:voteupdate(this.myform);"/>
</p>
</form>
When I submit this, it goes to this function: Code: function voteupdate(obj) {
var poststr = "picimage=" + document.getElementById("picimage").value +
"&bigger_id=" + encodeURI( document.getElementById("bigger_id").value );
alert(poststr);
makePOSTRequest('voteresults.php', poststr);
}
However I can't get the value of the radio group for the one that is selected. Can someone see what is wrong? Thanks. I don't exactly know how to word my issue. Basically, I need it so that if a user selects 'option1' in the group 'group1' when they go to 'group2' is only gives them a certain selection to choose from. If they choose 'option2' in 'group1' they will get a different set to choose from. My main dilemma is it must do this without them having to submit. All: I need some help with a radio button code. It seems simple but I am really new at JavaScript so I need help. I have created a JavaScript code that has three radio buttons (High, Medium, and Low). When you click on high two text boxes appear so that an email address can be added. What I need help with is making the text boxes disappear if someone accidentally click high and then went back to low or medium. Currently the High button stays clicked and the text boxes still show. Any help would be great. Thanks, Stephen Code: <script type="text/javascript">
function showHide(el){
obj = document.getElementById(el).style;
(obj.display == 'none')? obj.display = 'block' : obj.display = 'none';
}
</script>
<form id="form1" name="form1" method="post" action="">
<label>
<input type="Checkbox" name="High" value="High" onclick="showHide('group1')" /> High
</label>
<label>
<input type="Checkbox" name="Medium" value="Button" /> Mediun
</label>
<label>
<input type="Checkbox" name="Medium" value="Button" /> Low
</label>
<p id="group1" style="display: none;">
<label>
<b>friend1  </b><input type="Text" name="textGroup1" value="@gmail.com" /> <br/>
</label>
<br />
<label>
<b>friend2  </b><input type="text" name="textGroup1" value="@gmail.com" />
</label>
</p>
</form>
How can I style the background of a radio button? I have a form where it validates the users has selected one of the radio group values. If they don't the group gets focus and I would like to highlight the radio group. I tried the below it it seems focus goes to the correct group but no background changes. Now I know you can change the background of radios and apply a border of you would like. What am I doing wrong woth this. Code: <script type="text/javascript">
function validate(){
document.forms[0].myradio[0].checked = true
document.forms[0].myradio[0].style.border='2px dotted #00f';
document.forms[0].myradio[0].style.backgroundColor='#ffff99';
}
</script>
<form name="test" name="theForm" onsubmit="validate()">
<input type="radio" name="myradio" />
<input type="radio" name="myradio" />
<input type="radio" name="myradio" />
<BR>
<BR>
<BR>
<BR>
<input type="radio" name="myradio2" />
<input type="radio" name="myradio2" />
<input type="radio" name="myradio2" />
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<input type="radio" name="myradio3" />
<input type="radio" name="myradio3" />
<input type="radio" name="myradio3" />
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<input type="radio" name="myradio4" />
<input type="radio" name="myradio4" />
<input type="radio" name="myradio4" />
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<input type="radio" name="myradio5" />
<input type="radio" name="myradio5" />
<input type="radio" name="myradio5" />
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<input type="radio" name="myradio6" />
<input type="radio" name="myradio6" />
<input type="radio" name="myradio6" />
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<input type="submit" value="submit" name="submit">
</form>
I'm trying to implement a visibility on or off function for extra inputs when a radio button that is "yes" inside a table... it's so "Are you married?" "Yes" "No" (no is default checked) when you hit yes I want 3 more rows like a collapse or extend feature...within the same table. So basically what I want is the table to grow.. If you select "yes" then 3 more rows will be displayed that have other inputs available... do I need to construct these extra rows in javascript? or can I referance some html to do something? ..I'm just kinda lost and brain farted out today I think... any help much appreciated. Thanks! i need to add an alert if the male is not selected in following after clicking on submit button Code: <html><head> </HEAD><BODY> <br><form name="feedback" method=post> Your Gender: <input type="radio" name="gender" value="male" id="male" /> Male <input type="radio" name="gender" value="female" id="female"CHECKED> Female</td> <input type='button' value='Submit' /> </form></BODY></HTML> Hello, I am trying to implement a radio button option so that users can search specific sites such as google, yahoo, or bing from input box. Here's my code. Please help. <script type="text/javascript"> <!-- function goSearch(){ //search according to checked radio button } --> </script> <h1>Search Option</h1><br /> <input type="radio" name="search" id="google"/><a href="http://www.google.com" rel="nofollow" target="_blank"><img src="images/google.jpg" /></a> <input type="radio" name="search" id="yahoo"/><a href="http://www.yahoo.com" rel="nofollow" target="_blank"><img src="images/yahoo.jpg" /> </a> <input type="radio" name="search" id="bing" /><a href="http://www.bing.com" rel="nofollow" target="_blank"><img src="images/bing.jpg" /> </a> <br /><br /> <form method="get" action="goSearch()" rel="nofollow" target="_blank"> <div style="border:1px solid black;padding:4px;width:20em;"> <table border="0" cellpadding="0"> <tr> <td> <input type="text" name="q" size="25" maxlength="255" value="" /> <input type="submit" value="Search" /> </td> </tr> </table> </div> </form> I am looking for some help similar to this old post: http://www.codingforums.com/showthread.php?t=19588 I want my radio buttons to become submit buttons as well. So when a user clicks on a radio button it submits the action and refreshes the page accordingly. As of now using only using onclick="this.form.submit()" the page only refreshes with no change. Here is a copy of the entire form. It is a custom shipping options form (I did not create it). Any help would be appreciated. Code: <!-- Custom shipping form -->
<form action="" method="post" name="update_shipping">
<table width="300">
<tr>
<td><label>
<input <?php if (!(strcmp($_SESSION['shippingmethod'],"1"))) {echo "checked=\"checked\"";} ?> name="grpshipping" type="radio" id="grpshipping_0" value="1" checked="checked" onclick="this.form.submit()"/>
Ground Shipping</label></td>
<td class="style261"><?php echo date("m/d/Y",$grounddelivery);?></td>
<td class="style261">$<?php if(($_SESSION['roundedweight']) >= 21){
echo number_format($row_rsshippingprices['Ground'] + ($row_rsshippingpricesover21['Ground'] * ($varWeightover)) ,2);
} else {
echo number_format($row_rsshippingprices['Ground'],2);
} ?></td>
</tr>
<?php if($rainbowcart->ConditionalTotal("Quantity", "groundshiponly", "1") == 0) {//show other shipping options ONLY if a ground shipping only item is not in the cart ?>
<tr>
<td><label>
<input <?php if (!(strcmp($_SESSION['shippingmethod'],"2"))) {echo "checked=\"checked\"";} ?> type="radio" name="grpshipping" value="2" id="grpshipping_1" onclick="this.form.submit()" />
Fedex 3 Day</label></td>
<td class="style261"><?php echo date("m/d/Y",$fedex3delivery);?></td>
<td class="style261">$<?php if(($_SESSION['roundedweight']) >= 21){
echo number_format($row_rsshippingprices['Fedex3'] + ($row_rsshippingpricesover21['Fedex3'] * ($varWeightover)) ,2);
} else {
echo number_format($row_rsshippingprices['Fedex3'],2);
} ?></td>
</tr>
<tr>
<td><label>
<input <?php if (!(strcmp($_SESSION['shippingmethod'],"3"))) {echo "checked=\"checked\"";} ?> type="radio" name="grpshipping" value="3" id="grpshipping_2" onclick="this.form.submit()"/>
Fedex 2 Day</label></td>
<td class="style261"><?php echo date("m/d/Y",$fedex2delivery);?></td>
<td class="style261">$<?php if(($_SESSION['roundedweight']) >= 21){
echo number_format($row_rsshippingprices['Fedex2'] + ($row_rsshippingpricesover21['Fedex2'] * ($varWeightover)) ,2);
} else {
echo number_format($row_rsshippingprices['Fedex2'],2);
} ?></td>
</tr>
<tr>
<td><label>
<input <?php if (!(strcmp($_SESSION['shippingmethod'],"4"))) {echo "checked=\"checked\"";} ?> type="radio" name="grpshipping" value="4" id="grpshipping_3" onclick="this.form.submit()"/>
Next Day PM</label></td>
<td class="style261"><?php echo date("m/d/Y",$nddelivery);?></td>
<td class="style261">$<?php if(($_SESSION['roundedweight']) >= 21){
echo number_format($row_rsshippingprices['ONPM'] + ($row_rsshippingpricesover21['ONPM'] * ($varWeightover)) ,2);
} else {
echo number_format($row_rsshippingprices['ONPM'],2);
} ?></td>
</tr>
<tr>
<td><label>
<input <?php if (!(strcmp($_SESSION['shippingmethod'],"5"))) {echo "checked=\"checked\"";} ?> type="radio" name="grpshipping" value="5" id="grpshipping_4" onclick="this.form.submit()"/>
Next Day AM</label></td>
<td class="style261"><?php echo date("m/d/Y",$nddelivery);?></td>
<td class="style261">$<?php if(($_SESSION['roundedweight']) >= 21){
echo number_format($row_rsshippingprices['ONAM'] + ($row_rsshippingpricesover21['ONAM'] * ($varWeightover)) ,2);
} else {
echo number_format($row_rsshippingprices['ONAM'],2);
} ?></td>
</tr>
</table>
<table class="eC_ButtonWrapper" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left"><center>Choose an option above and click update to change your shipping preference.<br /><b>PLEASE BE SURE AND PRESS UPDATE IF YOU CHANGE YOUR SHIPPING OPTION<br /><br /><input type="image" name="Update_shipping" id="Update_shipping" value="Update_shipping" alt="Update_shipping" src="WA_eCart/Images/Nautica/Btn4_EN_update.gif" class="eC_ImageButton" /></center></td>
</tr>
</table>
<?php } //end of show if ground ship item is not in the cart?>
<?php if($rainbowcart->ConditionalTotal("Quantity", "groundshiponly", "1") <> 0) { ?>
<font color="red">The cart contains a Ground Shipping only item, this order can only be shipped ground</font><br /><br />
<?php } ?>
</form>
<!-- End of Custom shipping form -->
Hi hope someone here can help me with a problem i'm stuck on. Basically I have 3 radio buttons and one of them has to be selected otherwise display a error message but I cant figure it out. Here is my failed attempt: Code: <html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript">
function validateForm()
{
var x=document.forms["form1"]["name"].value;
var y=document.form1.difficulty.value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}
if (y==false)
{
alert(y);
return false;
}
}
</script>
</head>
<body>
<div id="horizon">
<div id="content">
<img src="images/logo.jpg" width="649" height="410"></div>
<div id="content2"><form name ="form1" method ="post" action ="game.php" onSubmit="return validateForm()" >
Name: <input type ='text' name='name' />
<br />
<Input type = 'Radio' Name ='difficulty' value= '1' />Easy
<Input type = 'Radio' Name ='difficulty' value= '2' />Medium
<Input type = 'Radio' Name ='difficulty' value= '3' />Hard
<br /><Input type = "Submit" Name = "Submit" VALUE = "Submit">
</form></div></div>
</body>
</html>
Thanks in advance how would i check to see if my radio button is not checked. I know in javascript the term "checked" works. Is there a way to us unchecked? here is what i am trying to figure out. Code: with (thisform)
{
if(document.getElementById('m21').unchecked)
{
window.alert('Please Verify Your Age')
m21.focus();
return false;}
}
Hi, Hit a snag creating code for toggling with radio buttons, alert debugs return undefined for the radio button values. Would someone assist? HTML Code: <input type="radio" name="artist" onclick="toggleForm(this.value)" value="existing" />
<label for="is_new0" class="artist_radio_label">Yes</label>
<input type="radio" name="artist" onclick="toggleForm(this.value)" value="new" />
<label for="is_new1" class="artist_radio_label">No</label>
From Document Head Code: <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>Add a Print</title> <link rel="stylesheet" href="../c/forms.css" type="text/css" /> <script type="text/javascript" src="../j/global.js"></script> <script type="text/javascript" src="../j/add_print.js"></script> </script> </head> add_print.js Code: function toggleForm(artist)
{
if (!document.getElementById) return false;
var existing = document.getElementById("existing_artist");
var newArtist = document.getElementById("new_artist");
existing.style.display = "none";
newArtist.style.display = "none";
if(this.value == existing){
existing.style.display = "block";
}else{
newArtist.style.display = "block";
}
}
addLoadEvent(toggleForm);
global.js - Add Load Event Code: function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
addLoadEvent();
I'm trying to get the value of a radio button when clicked. I'm dynamically creating these radio buttons while populating a table like this: Code: var rad
for(blah blah blah){
insert array data into table...
insert array data into table...
insert array data into table...
rad = document.createElement('input');
rad.setAttribute('type', 'radio');
rad.setAttribute('name', 'options');
rad.setAttribute('value', id);
rad.onclick = function() { doSomething() };
cell.appendChild(rad);
}
If I'm in the doSomething function, how do I access the value or ID of the radio button? Thanks! Hello, I have a form which can be saved (using a database) and later edited. When restoring data to the form , text fields are easy. There is a simple (existing) JavaScript which restores an option that was selected from a pull-down (select one) menu: Code: for (var q=0;q<document.Simple.Color.options.length;q++) {
if (document.Simple.Color.options[q].value == document.Restored.Color.value)
{ document.Simple.Color.options[q]. selected = true; break; }
I'm trying to make it work to restore a value to a radio button as well... but no luck: Code: for (var q=0;q<document.Simple.Color.options.length;q++) {
if (document.Simple.Color.options[q].value == document.Restored.Color.value)
{ document.Simple.Color.options[q]. checked = true; break; }
Any ideas? Thanks in advance. ~Wayne Hi all, This code works to place a mark in a radio button (check one) in a "restored" form: Code: for (var q=0;q<document.Simple.Colors.length;q++) {
if (document.Simple.Colors[q].value == document.Restored.Colors.value)
{ document.Simple.Colors[q].checked = true ; break; }
I'm curious why it won't work for a check box (check more than one): I figured it would be the same... no? Thanks, ~Wayne Hello I am very new to Java Script. I am working on a website which requires me to use it. The site is selling items that are priced depending on the size. There are 6 fixed sizes for the width and the length can come in any size 1 through 200. So that will be user input on the length and radio buttons on the width. I am trying to have the user put in the length and click a radio button for width and then calculate the price by multiplying them. I am trying to get 1 price to display right now just to test it but I can't figure out why it isn't working. Again I am fairly new at this so there might be multiple problems with my code. Thanks in advance for the help. Code: <script type = "text/javascript">
function buttoncheck(){
var selection1 = document.menu.selection;
if (selection1 == 60) {choice1()}
if (selection1 == 50) {choice2()}
if (selection1 == 25) {choice3()}
if (selection1 == 10) {choice4()}
if (selection1 == 4) {choice5()}
if (selection1 == 2) {choice6()}
function choice1(){
var len = Number(document.getElementById("length").value) || 0;
var area1 = selection1 * len;
var cost = 0;
if (area1 == 60) { cost = 60}
return cost;
document.getElementById("TotalCost").innerHTML = "$" + cost.toFixed(2);
}
Code: <h4 class="auto-style3">Pricing Calculator:</h4>
<p>
<form method="post">
<div class="auto-style1">
<span class="auto-style2">LENGTH:</span>
<input name="length" type="text" id="length" /><br />
</form>
<div class="auto-style1">
<form name="menu">
<input type="radio" value="60" name="selection">60 inch</input>
<input type="radio" value="50" name="selection">50 inch</input>
<input type="radio" value="25" name="selection">25 inch</input>
<input type="radio" value="10" name="selection">10 inch</input>
<input type="radio" value="4" name="selection">4 inch label</input>
<input type="radio" value="2" name="selection">2 inch label</input>
</form>
</div>
<p class="auto-style1">
<input type="button" value="Calculate" onClick="buttoncheck()" </p>
</p>
<p> </p>
<span id="TotalCost"></span><script type = "text/javascript">
document.getElementById("TotalCost").innerHTML = "Total cost is $" + cost.toFixed(2);
As the code example below shows, I have three radio buttons that perform an javascript action when selected. Code: <script language="javascript">
function OnProductClick(product)
{
if (product.value == "Car")
{
// do something
}
else if (product.value == "Boat")
{
// do something else..
}
else if (product.value == "Train")
{
// do else
}
}
</script>
<p>Select option
<input type="radio" name="product" onclick="OnProductClick(this)" value="Car">Car</input>
<input type="radio" name="product" onclick="OnProductClick(this)" value="Boat"> Boat</input>
<input type="radio" name="product" onclick="OnProductClick(this)" value="Train">Train</input>
</p>
This setup is triggerred by a click, clicking multiple times on the same radio button will yield multiple calls to the OnProductClick function. This last part is what I would like to prevent. Say a user selects the option 'car' and then for some reason clicks on the same option again, this will lead to the OnProductClick function being executed twice. How can I prevent the second execution? |
|||||||