brihol44
asked on
Need some help with textfield, select menu and checkbox interaction.
Everything is explained in the code window.
Thank you,
Brian
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 "disabled". 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>
Need more input please...
<<B field will automatically EQ the A field value >>
what does this means?
what does this means?
Are you familiar with javascript or jquery?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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 "disabled". 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>
ASKER
Perfect! Thanks ansudhindra! gurvinder372 the select menu wasn't working as the same as the other textfields... just FYI... but almost working correctly.