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

Need some help with textfield, select menu and checkbox interaction.

Everything is explained in the code window.

Thank you,

Brian
<!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>
</head>

<body>
<label>
		<input type="checkbox" name="checkbox" id="checkbox" />
</label>
If Checkbox is checked then the B field will automatically EQ the A field value and so on with C and D and E and F. Fields B, D and F will also be &quot;disabled&quot;. If the checkbox is unchecked then the values will remain the same but editable again.<br />
<br />
<br />
<table width="0" border="0" cellspacing="0" cellpadding="0">
		<tr>
				<td colspan="2"><label>
						A Field
										<input type="text" name="textfield" id="textfield" value="First Name" /> 
						B Field
				</label></td>
				<td width="155"><input type="text" name="textfield2" id="textfield2" /></td>
		</tr>
		<tr>
				<td colspan="2"><label> C Field
								<input type="text" name="textfield3" id="textfield3" value="First Name" />
						D Field </label></td>
				<td><input type="text" name="textfield3" id="textfield4" /></td>
		</tr>
		<tr>
				<td width="193">E Field 
						<label>
								<select name="select" id="select">
										<option value="1">A</option>
										<option value="2">B</option>
								</select>
				</label></td>
				<td width="118"> F Field</td>
				<td><select name="select2" id="select2">
						<option value="1">A</option>
						<option value="2">B</option>
				</select></td>
		</tr>
</table>

</body>
</html>

Open in new window

0
brihol44
Asked:
brihol44
2 Solutions
 
drakesheCommented:
Need more input please...
0
 
Gurvinder Pal SinghCommented:
<<B field will automatically EQ the A field value >>
what does this means?
0
 
drakesheCommented:
Are you familiar with javascript or jquery?
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.

 
ansudhindraCommented:
Hi, try th following code, let me know in case of ny thing neede....
test1.html
0
 
Gurvinder Pal SinghCommented:
try this code as well (assuming EQ means Equal :))
<!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>
   function enableAndCopy(thisObj)
   {
      if ( thisObj.checked )
	  {
		document.getElementById("textfield2").disabled = true;
		document.getElementById("textfield2").value = document.getElementById("textfield1").value;
		document.getElementById("textfield4").disabled = true;
		document.getElementById("textfield2").disabled = document.getElementById("textfield3").value;
		document.getElementById("select2").disabled = true;
		document.getElementById("select2").value = document.getElementById("select1").value;
	  }
	  else
	  {
		document.getElementById("textfield2").disabled = false;
		document.getElementById("textfield4").disabled = false;
		document.getElementById("select2").disabled = false;
	  }
   }
</script>
</head>

<body>
<label>
		<input type="checkbox" name="checkbox" id="checkbox" onclick="enableAndCopy(this)"/>
</label>
If Checkbox is checked then the B field will automatically EQ the A field value and so on with C and D and E and F. Fields B, D and F will also be &quot;disabled&quot;. If the checkbox is unchecked then the values will remain the same but editable again.<br />
<br />
<br />
<table width="0" border="0" cellspacing="0" cellpadding="0">
		<tr>
				<td colspan="2"><label>
						A Field
										<input type="text" name="textfield" id="textfield" value="First Name" /> 
						B Field
				</label></td>
				<td width="155"><input type="text" name="textfield2" id="textfield2"  /></td>
		</tr>
		<tr>
				<td colspan="2"><label> C Field
								<input type="text" name="textfield3" id="textfield3" value="First Name" />
						D Field </label></td>
				<td><input type="text" name="textfield3" id="textfield4" /></td>
		</tr>
		<tr>
				<td width="193">E Field 
						<label>
								<select name="select" id="select">
										<option value="1">A</option>
										<option value="2">B</option>
								</select>
				</label></td>
				<td width="118"> F Field</td>
				<td><select name="select2" id="select2" >
						<option value="1">A</option>
						<option value="2">B</option>
				</select></td>
		</tr>
</table>

</body>
</html>

Open in new window

0
 
Gurvinder Pal SinghCommented:
Sorry, small change
<!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>
	   function enableAndCopy(thisObj)
	   {
		  if ( thisObj.checked )
		  {
			document.getElementById("textfield2").value = document.getElementById("textfield").value;
			document.getElementById("textfield2").disabled = true;
			document.getElementById("textfield4").value = document.getElementById("textfield3").value;
			document.getElementById("textfield4").disabled = true;
			document.getElementById("select2").value = document.getElementById("select1").value;
			document.getElementById("select2").disabled = true;
		  }
		  else
		  {
			document.getElementById("textfield2").disabled = false;
			document.getElementById("textfield4").disabled = false;
			document.getElementById("select2").disabled = false;
		  }
	   }
	</script>
	</head>

	<body>
	<label>
			<input type="checkbox" name="checkbox" id="checkbox" onclick="enableAndCopy(this)"/>
	</label>
	If Checkbox is checked then the B field will automatically EQ the A field value and so on with C and D and E and F. Fields B, D and F will also be &quot;disabled&quot;. If the checkbox is unchecked then the values will remain the same but editable again.<br />
	<br />
	<br />
	<table width="0" border="0" cellspacing="0" cellpadding="0">
			<tr>
					<td colspan="2"><label>
							A Field
											<input type="text" name="textfield" id="textfield" value="First Name" /> 
							B Field
					</label></td>
					<td width="155"><input type="text" name="textfield2" id="textfield2"  /></td>
			</tr>
			<tr>
					<td colspan="2"><label> C Field
									<input type="text" name="textfield3" id="textfield3" value="First Name" />
							D Field </label></td>
					<td><input type="text" name="textfield3" id="textfield4" /></td>
			</tr>
			<tr>
					<td width="193">E Field 
							<label>
									<select name="select" id="select">
											<option value="1">A</option>
											<option value="2">B</option>
									</select>
					</label></td>
					<td width="118"> F Field</td>
					<td><select name="select2" id="select2" >
							<option value="1">A</option>
							<option value="2">B</option>
					</select></td>
			</tr>
	</table>

	</body>
	</html>

Open in new window

0
 
brihol44Author Commented:
Perfect! Thanks ansudhindra! gurvinder372 the select menu wasn't working as the same as the other textfields... just FYI... but almost working correctly.
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

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