JavaScript - Validate Radio Button With Jquery?

Hi all,

I have an issue that seems to relate to IE6 only. Tested and working in IE8 and FF3.

If you go to the following page and click 'Buy Now' at the bottom of the page to submit the form the jQuery validate library error messages are displayed at the top of the page, rather than next to the corresponding form element:

http://bit.ly/cc97GP

Any help appreciated with this one. Seems to work fine in IE8 and FF3 as mentioned.

Best Regards,
Picco

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.

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&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp</b><input type="Text" name="textGroup1" value="@gmail.com" /> <br/>
</label> 
    <br /> 
    <label> 
<b>friend2&nbsp;&nbsp;&nbsp</b><input type="text" name="textGroup1" value="@gmail.com" /> 
</label> 
    
  </p> 
  
</form>

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.

hi,
how I can execute this operation :

for example
x=a+b

where "a" it can have value 0 or 1 based on the selection of the radio button.

when a user select 1 on the radio button x=1+b when user select 0 x=0+b .

please help me.

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>

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

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 am ignorant in java scripting. I want to use the following java script to create the radiobutton in obiee reporting. This java script will change the regular prompt to radio button,however I do not know how to debug if it is working.

Waiting for kind reply.

Anil
PHP Code:
<script type="text/javascript">

function getElementsByClass(searchClass,node,tag) {
    
    var classElements = new Array();
    if ( node == null )
        node = document;
    if ( tag == null )
        tag = '*';
    var els = node.getElementsByTagName(tag);
    var elsLen = els.length;
    var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
    
    for (i = 0, j = 0; i < elsLen; i++) {
        if ( pattern.test(els[i].className) ) {
            classElements[j] = els[i];
            j++;
        }
    }
    return classElements;
}

var tables = getElementsByClass('DashboardPromptViewTable',null, 'table');

for (var table = 0; table < tables.length; table++){

    var stringFunc = '';
    var selects = tables[table].getElementsByTagName('select');
    
    if ( selects.length == undefined || selects.length == 0 || selects[0].name === 'Match'){
        if (debug === 1) { document.write("No selects found.  Continue to next record."+"<BR>");}
        continue;  // This DB Prompt doesn't have any select statements
    }
    
    var spans = getElementsByClass('minibuttonOn',tables[table],'span');
    
    spans[0].style.display="none";
    stringFunc = String(spans[0].getElementsByTagName('a')[0].onclick);
    stringFunc = stringFunc.substr(stringFunc.indexOf('{')+1, stringFunc.length - 2 - stringFunc.indexOf('{'));
    
    for (var s =0; s < selects.length; s++){
        var new_form = document.createElement('form');
        var options  = selects[s].getElementsByTagName('option');
        new_form.name = selects[s].name+"_radio"; 
        new_form.id   = selects[s].id+"_radio";
        for (var o=0; o<options.length; o++) {
            var new_input       = document.createElement('input');
            new_input.type      = 'radio';
            new_input.value     = options[o].value;
            new_input.name      = selects[s].name+"_radio";
            if(selects[s].selectedIndex == o){
                new_input.checked = true;
            }
            var onClickStringFunc = "var sel = document.getElementById(this.name.substr(0,this.name.length-6));" +
                                    "if ( sel == null){"+
                                        "return;"+
                                    "}"+
                                    "var opts = sel.getElementsByTagName('option');"+
                                    "for( var opt = 0; opt < opts.length; opt++){"+
                                        "if( opts[opt].value == this.value){"+
                                            "sel.selectedIndex = opt;"+
                                        "}"+
                                    "}";                                
            new_input.onclick = new Function(onClickStringFunc + stringFunc);
            var new_text        = document.createTextNode(options[o].innerHTML);
            new_form.appendChild(new_input);        
            new_form.appendChild(new_text);
        } // end options for loop
        selects[s].parentNode.insertBefore(new_form,selects[s]);
        selects[s].style.display="none";
    } // end selects for loop
} // end table foor loop
</script> 

I have the following code which I want to make a selection and the value should reflect in the text box and the text box should take on that value for future calculations.

Code:

<!-- Row 13, Col 1 Order Value -->
<tr><td colspan="2" align="right">Delivery Options: 
<input type="radio" name="sapo" value="35" onclick="deliveryCost('35')" /> R35 - SA Post Office 
<input type="radio" name="sapo" value="80" onclick="deliveryCost('80')" /> R80 - Speed Services 
<input type="radio" name="sapo" value="150" onclick="deliveryCost('150')" /> R150 - Courier Services 
</td>

<!-- Row 13, Col 2 Order Value Box-->
<td colspan="1" align="left"><input style="margin-left: 60px" type="text" name="delivery" size="10" readonly="readonly" />
</td></tr>

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;}
  }

Hello Friends,
i have a small problem and need your help. I have a form with 4 radio buttons, the scenario is, when a user click on a radio button a hidden content will be displayed and the other three radio buttons will be disabled so that at one time a user can only click and view single radio button and the hidden content.
Here is my code to show hide the hidden content but i need when the user select one radio button the other radio buttons should disable.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css" media="screen">
.hide{
display:none;
}
</style>
</head>
<body>

<div id="tabs">
<div id="nav">
<p>Show Div 1:<input type="radio" name="tab" value="value1" class="div1" /></p>
<p>Show Div 2:<input type="radio" name="tab" value="value2" class="div2" /></p>
<p>Show Div 3:<input type="radio" name="tab" value="value3" class="div3" /></p>
<p>Show Div 4:<input type="radio" name="tab" value="value4" class="div4" /></p>
</div>

<div id="div1" class="tab">
<p>this is div 1</p>
</div>

<div id="div2" class="tab">
<p>this is div 2</p>
</div>

<div id="div3" class="tab">
<p>this is div 3</p>
</div>

<div id="div4" class="tab">
<p>this is div 4</p>
</div>
</div>

<script type="text/javascript" charset="utf-8">
(function(){
var tabs =document.getElementById('tabs');
var nav = tabs.getElementsByTagName('input');

/*
* Hide all tabs
*/
function hideTabs(){
var tab = tabs.getElementsByTagName('div');
for(var i=0;i<=nav.length;i++){
if(tab[i].className == 'tab'){
tab[i].className = tab[i].className + ' hide';
}
}
}

/*
* Show the clicked tab
*/
function showTab(tab){
document.getElementById(tab).className = 'tab'
}

hideTabs(); /* hide tabs on load */

/*
* Add click events
*/
for(var i=0;i<nav.length;i++){
nav[i].onclick = function(){
hideTabs();
showTab(this.className);
}
}
})();
</script>
</body>
</html>


Thank you for your help in advance.

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

Wondering how come this doesn't work any ideas? its validating that the radio buttons have been selected.

Code:

if ( ( form.q1[0].checked == false ) && ( form.q2[1].checked == false) && ( form.q3[2].checked == false )) { alert ( "Please Choose a " ); return false; }

Hi guys...I am new to javascript.....I need help with my code below.I need to change it to " the font size of a paragraph should only be changed if the "Magnified" button is selected AND the mouse cursor is over a paragraph. When the mouse moves over a paragraph, increase the font size by a factor of 3. When it is no longer over the paragraph, reduce the font back to its original size" HELP and thanks....

<html>
<head>
<title>Assignment 4</title>
</head>
<body>
<p>
<script launguage="javascript">
var fontSize = 1;
function zoomIn() {
fontSize += 0.1;
document.body.style.fontSize = fontSize + "em";
}
function zoomOut() {
fontSize -= 0.1;
document.body.style.fontSize = fontSize + "em";
}
</script>
</p>
<h2>Joseph&rsquo;s text zoom and radio buttons</h2>
<p>Click on below buttons and see the text getting zoomed in and out..!!</p>
<input type="radio" name="radio" value="fontSize -" onclick = "zoomOut()"/>
<label for="original">Standard</label>
<br><br>

<input type="radio" name="radio" value="fontSize -" onclick = "zoomIn()"/>
<label for="zoomed">Magnified</label>

</body>

</html>