?
Solved

JavaScript clear textbox based on radio value

Posted on 2009-04-07
9
Medium Priority
?
708 Views
Last Modified: 2012-05-06
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

0
Comment
Question by:wkolasa
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
9 Comments
 
LVL 6

Expert Comment

by:mudbuggle
ID: 24090015
are you opposed to completely revamped code? or do you wanna keep the posted code as the base fpr it.
0
 

Author Comment

by:wkolasa
ID: 24090164
revamped code is cool
0
 
LVL 6

Expert Comment

by:mudbuggle
ID: 24091006
i'm almost finished.. I have to step away for now... but you'll have it in a few hours.
0
How to Create Failover DNS Record Sets in Route 53

Route 53 has the ability to easily configure DNS record sets specifically for failover scenarios. These failover record sets can be configured to failover to full-blown deployments in other regions or to a static HTML page that informs your customers of the issue.

 
LVL 6

Expert Comment

by:mudbuggle
ID: 24092460
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
 

Author Comment

by:wkolasa
ID: 24097967
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
 
LVL 6

Expert Comment

by:mudbuggle
ID: 24099715
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
 
LVL 6

Accepted Solution

by:
mudbuggle earned 2000 total points
ID: 24100474
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
 

Author Comment

by:wkolasa
ID: 24141986
Works Brill!  Thanks Mud!

~ Wendi
0
 

Author Closing Comment

by:wkolasa
ID: 31567533
Terrific code.  Thank you Mud.  
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question