Solved

replace input box value using multiple checkbox

Posted on 2011-03-23
10
444 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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Printing a Google Form 2 25
Angular 2 complaining about map file 7 52
Popup to change image and store url in database 2 30
WordPress Themes 10 34
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
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…

929 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

17 Experts available now in Live!

Get 1:1 Help Now