• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 452
  • Last Modified:

replace input box value using multiple checkbox

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
global_expert_advice
Asked:
global_expert_advice
  • 4
  • 4
  • 2
1 Solution
 
HyperBPPCommented:
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
 
Roman GhermanCommented:
try this:

function txtrep() {
var newtext = "Second text here";
document.getElementById('data_marital_part').innerText = newtext;
}
0
 
HyperBPPCommented:
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
Roman GhermanCommented:
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
 
global_expert_adviceAuthor Commented:
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
 
Roman GhermanCommented:
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
 
global_expert_adviceAuthor Commented:
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
 
Roman GhermanCommented:
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
 
global_expert_adviceAuthor Commented:
thanks a lot...
will ask in separate question.
0
 
global_expert_adviceAuthor Commented:
good
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

  • 4
  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now