JavaScript clear textbox based on radio value

Hi, I need help creating a javaScript to do the following:

I have 1 text box and 3 radioButton choices.  They're within a loop so this set of 4 repeats (array).  What I need help with:

1) If radio value="1" id="1" is selected, then text box must be filled in. (So if user doesn't, the JavaScript validates and produces message: "you must enter a value for the text box)

2) If radio value="2" id="2" is selected, clear any value from the text box

3) If radio value="3" id="3" is selected, clear any value from the text box

4) If "Select All" link is click, tick all radio value="1" id="1" (I HAVE THIS PART WORKING)

I have the code posted below.

Thank you tons!
<script type="text/javascript">
var checkAll = function(begins){
  for(i=0; (a=document.getElementsByTagName('input')[i]); i++){
    if(a.type == "radio"){
      var id = a.id.substring(0, begins.length);
      if(id == begins){
        a.checked = true;
      }
    }
  }
}
</script>
 
<!---Coldfusion Loop... loop the dataset--->
<cfloop query="getAtt">
 
<input type="text" name="points#trim(getAtt.CurrentRow)#" value="#trim(getAtt.pts[getAtt.CurrentRow])#" size="3">
 
<input type="radio" name="attended#trim(getAtt.CurrentRow)#" id="1" value="1"/>Attended 
 
<input type="radio" name="attended#trim(getAtt.CurrentRow)#" id="2" value="2"/>No Show 
 
<input type="radio" name="attended#trim(getAtt.CurrentRow)#" id="3" value="3"/>PD Cancelled
 
</cfloop>

Open in new window

wkolasaAsked:
Who is Participating?
 
mudbuggleConnect With a Mentor Commented:
here it is fully functioning... you'll have to make the approriate adjustments to make it do what you want for multiple rows.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
function checkAll(obj)
{
        //getting the hidden value
        var r = document.getElementById(obj).parentNode.childNodes[0];
        //looping through radio elements changing them
        for(i=1;i<=3;i++)
        {
                var ui = document.getElementById(r.value + i);
                ui.value = 1;
                ui.checked = true;
        }
}
 
function unCheck(obj)
{
        //getting the hidden value
        var r = document.getElementById(obj).parentNode.childNodes[0];
        //looping through radio elements changing them
        for(i=1;i<=3;i++)
        {
                var ui = document.getElementById(r.value + i);
                ui.value = i;
                ui.checked = false;
        }
}
 
function check(obj)
{
        var r = document.getElementById(obj);
        for(i=1;i<=3;i++)
        {
                if(r.value == i)
                {
                        r.checked = true;
                }
   		}
}
 
function erase(obj)
{
		//getting text input field
        var ui = document.getElementById(obj).parentNode.childNodes[4];
        ui.value = '';
}
 
function rewrite(obj)
{
		//getting the hidden input value
		var v = document.getElementById(obj).parentNode.childNodes[2];
		var r = document.getElementById(obj).parentNode.childNodes[4];
		r.value = v.value;
}
 
function verify(obj)
{
		//getting the text input field
		var ui = document.getElementById(obj).parentNode.childNodes[4].value;
		//getting radio button 1
		var r = document.getElementById(obj).parentNode.childNodes[6].checked;
		if(r == true && ui == '' || r == true && ui == undefined)
		{
			alert('you must enter a value for the text box');
		}
}
</script>
</head> 
 
<body>
<!---Coldfusion Loop... loop the dataset--->
<input type="hidden" value="rowid"/>
<input type="hidden" value="yay it works"/>
<input type="text" value="yay it works" style="width:100px;">
 
<input type="radio" id="rowid1" value="1" onclick="unCheck(this.id);check(this.id);rewrite(this.id)"/>Attended
 
<input type="radio" id="rowid2" value="2" onclick="unCheck(this.id);check(this.id);erase(this.id)"/>No Show
 
<input type="radio" id="rowid3" value="3" onclick="unCheck(this.id);check(this.id);erase(this.id)"/>PD Cancelled
 
<div id="rowidALL" onclick="checkAll(this.id)">Select All</div>
 
<input type="submit" id="rowidsub" onClick="verify(this.id)"/>
</body>
</html>

Open in new window

0
 
mudbuggleCommented:
are you opposed to completely revamped code? or do you wanna keep the posted code as the base fpr it.
0
 
wkolasaAuthor Commented:
revamped code is cool
0
The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

 
mudbuggleCommented:
i'm almost finished.. I have to step away for now... but you'll have it in a few hours.
0
 
mudbuggleCommented:
this should work, although I haven't had the time to test it... I split the javascript into multiple functions so you can mix and match with the different elements depending on what you are aiming for... Play around with it and see if it's what your looking for.

Also make sure to adjust the coldfusion so that #rowid# is equal to the row id.
Let me know if you need any further assistance.
<script type="text/javascript">
function checkAll(obj)
{
        \\getting the hidden value
        var r = document.getElementById(obj).parentNode.childNodes[0];
        \\looping through radio elements changing them
        for(i=1;i<=3;i++)
        {
                var ui = document.getElementById(obj + i);
                ui.value = 1;
                ui.checked = true;
        }
}
 
function unCheck(obj)
{
        \\getting the hidden value
        var r = document.getElementById(obj).parentNode.childNodes[0];
        \\looping through radio elements changing them
        for(i=1;i<=3;i++)
        {
                var ui = document.getElementById(obj + i);
                ui.value = i;
                ui.checked = false;
        }
}
 
function check(obj)
{
        var r = document.getElementById(obj);
        for(i=2;i<=3;i++)
        {
                if(r.value == i)
                {
                        r.checked = true;
                        clear(obj);
                {
   		}
}
 
function clear(obj)
{
		\\getting text input field
        var ui = document.getElementById(obj).parentNode.childNodes[2];
        ui.value = '';
		v.checked = true;
}
 
function insert(obj);
{
		\\getting the hidden input value
		var v = document.getElementById(obj).parentNode[1].value;
		var r = document.getElementById(obj);
		r.value = v;
}
 
function verify(obj)
{
		\\getting the text input field
		var ui = document.getElementById(obj).parentNode.childNodes[2];
		\\getting radio button 1
		var r = document.getElementById(obj).parentNode.childNodes[3].checked;
		if(r == true && ui == '' || r == true && ui == undefined)
		{
			alert('you must enter a value for the text box');
		}
}
</script>
 
<!---Coldfusion Loop... loop the dataset--->
<cfloop query="getAtt">
<input type="hidden" value="#rowid#"/>
<input type="hidden" value="#trim(getAtt.pts[getAtt.CurrentRow])#">
<input type="text" value="#trim(getAtt.pts[getAtt.CurrentRow])#" size="3">
 
<input type="radio" id="#rowid#1" value="1" onclick="uncheck(this.id);check(this.id);insert(this.id)"/>Attended
 
<input type="radio" id="#rowid#2" value="2" onclick="uncheck(this.id);check(this.id);clear(this.id)"/>No Show
 
<input type="radio" id="#rowid#3" value="3" onclick="uncheck(this.id);check(this.id);clear(this.id)"/>PD Cancelled
 
<div id="#rowid#ALL" onclick="checkAll(this.id)">
 
<input type="submit" id="#rowid#sub" onClick="verify(this.id)"/>
 
</cfloop> 

Open in new window

0
 
wkolasaAuthor Commented:
this doesn't quite work. for instance, there's no visible 'check all' link/button/option.  Also, the radio buttons can't be check (you can check them, but nothing happens).  I'm going to tinker with it.
0
 
mudbuggleCommented:
Yeah there are a bunch of typos and some logic that needs straightened out. I have a bunch of it fixed and tested.. i'll post the corrected code.
0
 
wkolasaAuthor Commented:
Works Brill!  Thanks Mud!

~ Wendi
0
 
wkolasaAuthor Commented:
Terrific code.  Thank you Mud.  
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.