Solved

replace input box value using multiple checkbox

Posted on 2011-03-23
10
446 Views
Last Modified: 2012-08-13
hi
I m using the below code...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function list(c,n,z)
{
	s=document.InstantSMS1.maritalstatusdata.value;
	if(c.checked)
	{
		if(s.indexOf(n)<0) s+=','+n;
	}
	else
	{
		s=document.InstantSMS1.maritalstatusdata.value.replace(','+n,'');
	}
	z=",";

	if (s.substring(2) == z) s=s.substring(2);
		document.InstantSMS1.maritalstatusdata.value=s;
}


function txtrep() {
var newtext = "Second text here";
document.getElementById('data_marital_part').innerHTML = newtext;
}
</script>
</head>
<body>
<form name="InstantSMS1">
<h1>Marital Status :</h1><br />
<input name="mStatus" type="checkbox" id="doesntmatter" value="Doesn't Matter" onclick="r=document.getElementsByName('mStatus');for(var i=0;i<r.length;i++) if(r[i]!=this)r[i].checked=r[i].checked&&!this.checked;list(this,'Do Not Matter');txtrep()" />Doesn't Matter<br />
<input name="mStatus" type="checkbox" value="Never Married" onclick="if(this.checked) document.getElementsByName('mStatus')[0].checked=false;list(this,'Never Married');" />Never Married<br /> 
<input name="mStatus" type="checkbox" value="Divorced" onclick="if(this.checked) document.getElementsByName('mStatus')[0].checked=false;list(this,'Divorced');" />Divorced<br /> 
<input name="mStatus" type="checkbox" value="Widowed" onclick="if(this.checked) document.getElementsByName('mStatus')[0].checked=false;list(this,'Widowed');" />Widowed<br /> 
<input name="mStatus" type="checkbox" value="Separated" onclick="if(this.checked) document.getElementsByName('mStatus')[0].checked=false;list(this,'Separated');" />Separated<br /> 
<input name="mStatus" type="checkbox" value="Annulled" onclick="if(this.checked) document.getElementsByName('mStatus')[0].checked=false;list(this,'Annulled');" />Annulled<br /> 
<br />
<br />
<input type="text" name="maritalstatusdata" id="data_marital_part" value="" />
</form>
</body>
</html>
 

Open in new window



Its a marital status selection checkbox... wherein one can select either never married, divorced, widowed etc.. but if doesnt matter is selected rest gets unchecked...
so its like doesnt matter v/s rest of the check box..

Now i applied a javascript.. where in the value of checkbox is inserted in to inputbox ..
Now here also in input box... i want like suppos i selected doesnt matter... value is inserted in inputbox... but when the doesnt mattr or any checkbox is unchecked value should be removed from the input box again..

I added a javascrpt to replace ... but its not working..as its wrong..
so i need a quick help on this matter...
thanks
0
Comment
Question by:global_expert_advice
  • 4
  • 4
  • 2
10 Comments
 
LVL 6

Expert Comment

by:HyperBPP
ID: 35200211
I think that this is what you are trying to do...I had trouble following your description.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        <script type="text/javascript">
            function list(c){
                s=document.InstantSMS1.maritalstatusdata.value = c.value;
            }
        </script>
    </head>
    <body>
    <form name="InstantSMS1">
        <h1>Marital Status :</h1><br />
        <input name="mStatus" type="radio" id="doesntmatter" value="Doesn't Matter" onclick="list(this)" />Doesn't Matter<br />
        <input name="mStatus" type="radio" value="Never Married" onclick="list(this);" />Never Married<br /> 
        <input name="mStatus" type="radio" value="Divorced" onclick="list(this);" />Divorced<br /> 
        <input name="mStatus" type="radio" value="Widowed" onclick="list(this);" />Widowed<br /> 
        <input name="mStatus" type="radio" value="Separated" onclick="list(this);" />Separated<br /> 
        <input name="mStatus" type="radio" value="Annulled" onclick="list(this);" />Annulled<br /><br /><br />
        
        <input type="text" name="maritalstatusdata" id="data_marital_part" value="" />
    </form>
    </body>
</html>

Open in new window

0
 
LVL 9

Expert Comment

by:Roman Gherman
ID: 35200227
try this:

function txtrep() {
var newtext = "Second text here";
document.getElementById('data_marital_part').innerText = newtext;
}
0
 
LVL 6

Expert Comment

by:HyperBPP
ID: 35200236
I replaced the checkboxes with radio buttons because you can have only one "Marital Status" at a time.  What I think you described was more of "What is your Martical History".  If you are looking for the capability to capture Marital History, let me know - it's a simple change.
0
Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

 
LVL 9

Expert Comment

by:Roman Gherman
ID: 35200279
HyperBPP,
I think he needed checkboxes because in the textbox he is concatenating  the strings from selected checkboxes.
So making them radio buttons is not what he needs :)
0
 
LVL 1

Author Comment

by:global_expert_advice
ID: 35200334
roma1123 you are right... i added innerText... and its work...
but problem is now...similarly... doest matter value should be replaced or removed when any other checkbox is selected...
right now if doesnt matter is selected... after that if u select any other doesnt matter value is not going...

thanks
0
 
LVL 9

Accepted Solution

by:
Roman Gherman earned 500 total points
ID: 35200379
use this code then:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
var clearTextWhenOtherSelected = true;
function list(c,n,z)
{
	if(clearTextWhenOtherSelected)
	{
		document.getElementById('data_marital_part').value = '';
		clearTextWhenOtherSelected = false;
	}
	s=document.InstantSMS1.maritalstatusdata.value;
	if(c.checked)
	{
		if(s.indexOf(n)<0) s+=','+n;
	}
	else
	{
		s=document.InstantSMS1.maritalstatusdata.value.replace(','+n,'');
	}
	z=",";

	if (s.substring(2) == z) s=s.substring(2);
		document.InstantSMS1.maritalstatusdata.value=s;
}


function txtrep() {
var newtext = "Second text here";
document.getElementById('data_marital_part').value = newtext;
clearTextWhenOtherSelected = true;

}
</script>
</head>
<body>
<form name="InstantSMS1">
<h1>Marital Status :</h1><br />
<input name="mStatus" type="checkbox" id="doesntmatter" value="Doesn't Matter" onclick="r=document.getElementsByName('mStatus');for(var i=0;i<r.length;i++) if(r[i]!=this)r[i].checked=r[i].checked&&!this.checked;list(this,'Do Not Matter');txtrep()" />Doesn't Matter<br />
<input name="mStatus" type="checkbox" value="Never Married" onclick="if(this.checked) document.getElementsByName('mStatus')[0].checked=false;list(this,'Never Married');" />Never Married<br /> 
<input name="mStatus" type="checkbox" value="Divorced" onclick="if(this.checked) document.getElementsByName('mStatus')[0].checked=false;list(this,'Divorced');" />Divorced<br /> 
<input name="mStatus" type="checkbox" value="Widowed" onclick="if(this.checked) document.getElementsByName('mStatus')[0].checked=false;list(this,'Widowed');" />Widowed<br /> 
<input name="mStatus" type="checkbox" value="Separated" onclick="if(this.checked) document.getElementsByName('mStatus')[0].checked=false;list(this,'Separated');" />Separated<br /> 
<input name="mStatus" type="checkbox" value="Annulled" onclick="if(this.checked) document.getElementsByName('mStatus')[0].checked=false;list(this,'Annulled');" />Annulled<br /> 
<br />
<br />
<input type="text" name="maritalstatusdata" id="data_marital_part" value="" />
</form>
</body>
</html>

Open in new window

0
 
LVL 1

Author Comment

by:global_expert_advice
ID: 35200399
Also i have a similar problem.. in another part...
i have a text box... which gets values like ,3,5,7,8 when checkbox is selected...
Now its just like a parent child box thing....
 sampleYou can check the above image...
the cross (X) is image... and i need a onlick function which can remove the respective value from input box...
each image entry on the right side is having one of the values you see in input box.. which i think we can get by id...
in simple words.. right side box adds the value and from left side onclick value should be removed..
0
 
LVL 9

Expert Comment

by:Roman Gherman
ID: 35200448
It is not very clear what you need to do plus you will have to post some code here in order for someone to tell you how to implement/fix this.
But anyway this is another question.
0
 
LVL 1

Author Comment

by:global_expert_advice
ID: 35200577
thanks a lot...
will ask in separate question.
0
 
LVL 1

Author Closing Comment

by:global_expert_advice
ID: 35200584
good
0

Featured Post

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

776 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