Solved

replace input box value using multiple checkbox

Posted on 2011-03-23
10
442 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
Comment Utility
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
Comment Utility
try this:

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

Expert Comment

by:HyperBPP
Comment Utility
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
 
LVL 9

Expert Comment

by:Roman Gherman
Comment Utility
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
Comment Utility
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 9

Accepted Solution

by:
Roman Gherman earned 500 total points
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
thanks a lot...
will ask in separate question.
0
 
LVL 1

Author Closing Comment

by:global_expert_advice
Comment Utility
good
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Suggested Solutions

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 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.…

763 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now