Solved

replace input box value using multiple checkbox

Posted on 2011-03-23
10
448 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
[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
  • 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
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…

696 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