Javascript checkbox

In my HTML form page I have a textfield and a checkbox.
I want user not to be able to write inside the text field before he/she checks the checkbox (that means by default the checkbox will be unchecked and by default the textfield is not writeable). After user checks the checkbox, user can type in the textfield. How can we do it. ..pls help.

Here is my code:

***abc.html***
 <html>
<head>
<script language="JavaScript">
</script>
</head>
<body bgcolor="#FFFFFF">
<form name="test" method="post" action="menu.jsp?option=2.1.4">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td>
              <input type=checkbox><input type="text" name="C_13" size="45" maxlength="128">
            </td>
          </tr>
        </table>  
</form>
</body>
</html>
***abc.html***
tookiAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GwynforWebCommented:
<body bgcolor="#FFFFFF">
<form name="test" method="post" action="menu.jsp?option=2.1.4">
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td><input type="checkbox" onClick="C_13.disabled=!C_13.disabled"> <input type="text"
      name="C_13" size="45" maxlength="128" disabled> </td>
    </tr>
  </table>
</form>
</body>
Saqib KhanSenior DeveloperCommented:
<html>
<head>
</head>
<body bgcolor="#FFFFFF">
<form name="test" method="post" action="menu.jsp?option=2.1.4">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td>
              <input type=checkbox value="ON" onClick="(this.checked)?C_13.disabled=false:C_13.disabled=true"><input type="text" name="C_13" size="45" maxlength="128" disabled>
            </td>
          </tr>
        </table>  
</form>
</body>
</html>
Saqib KhanSenior DeveloperCommented:
o00ps I guess we Submited at the Same Time, Guy you won the Auction:) hehehehe LOL
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

GwynforWebCommented:
Yep close one, I usually loose out on this I got there first for once. :-)
tookiAuthor Commented:
You guys are great!!
Hey..sorry actually I still have problem..actually in my page I have :
1 checkbox, 2 textfield and 1 selectfield.
When I choose one item in the selectfield, it populates the textfields (both) with some logic.

What I need is:
if checkbox is deselected:
"none of the textfields shall be writable", also even if we select any item in the selectfield, it will not populate any of the textfields!


if checkbox is selected:
both the textfield shall be writable and I should be able to populate the textfields by choosing items in the selectfield.

Is it possible?
Here is the code:

***abc2.html***
<html>
<head>
<title>FASTT</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="fastt.css" type="text/css">
<script language="JavaScript">

<!-- Hide script from older browsers
function fillInputValue(select_box, component_id) {
    var user_choice = select_box.options[select_box.selectedIndex].value
    var mynum = user_choice.indexOf(":")
    if (mynum == -1 )
    {
    var user_choice1 = user_choice
    var user_choice2 = ""
    }
    else
    {  
    var user_choice1 = user_choice.substring(0, mynum)
    var user_choice2 = user_choice.substring(mynum+1, user_choice.length)
    }
    eval("document.forms[0].C_" + component_id + ".value = \"" + user_choice1 + "\"")
    eval("document.forms[0].V_" + component_id + ".value = \"" + user_choice2 + "\"")
}

function setSelectValue(select_box, component_id) {
    var user_choice = select_box.options[select_box.selectedIndex].value
    var mynum = user_choice.indexOf(":")
    if (mynum == -1 )
    {
    var user_choice1 = user_choice
    var user_choice2 = ""
    }
    else
    {
    var user_choice1 = user_choice.substring(0, mynum)
    var user_choice2 = user_choice.substring(mynum+1, user_choice.length)
    }
    var target_select = eval("document.forms[0].C_" + component_id)
    for (var i = 0; i < target_select.length; i++) {
      if (target_select.options[i].value == user_choice1) {
          target_select.options[i].selected = true
            eval("document.forms[0].V_" + component_id + ".value = \"" + user_choice2 + "\"")
            break
      }
    }
}
// End hiding script -->
</script>
</head>
<body bgcolor="#FFFFFF">
<form name="model_config_create" method="post" action="menu.jsp?option=2.1.4">
    <tr>
      <td class="content_field_label" valign="top" width="100"><input type="checkbox" name="R_31" value="ON" onClick="(this.checked)?C_31.disabled=false:C_31.disabled=true"></td>
      <td>
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td>
              <input type="text" name="C_31" size="45" maxlength="128" disabled>
&nbsp;&nbsp;<b>Version:</b><input type="text" name="V_31" size="25" maxlength="128">
              <input type="hidden" name="w_components" value="8|DCComp3|C_31">
            </td>
          </tr>
          <tr>
            <td>
              <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td width="100" class="content_field_label">Candidate #1:</td>
                  <td>
                    <select name="select_31_1" onChange="fillInputValue(this, 31)">
                      <option value="">(Choose One)</option>
          <option value="HE:V">HE:V</option>
          <option value="HEHE:HE_V">HE:HE_V</option>
          <option value="HI124:HI124_V">HI124:HI124_V</option>
                    </select>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</form>
</body>
</html>
***abc2.html***


thanks!
-tooki
Saqib KhanSenior DeveloperCommented:
<html>
<head>
<title>FASTT</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="fastt.css" type="text/css">
<script language="JavaScript">

<!-- Hide script from older browsers
function fillInputValue(select_box, component_id) {
    var user_choice = select_box.options[select_box.selectedIndex].value
    var mynum = user_choice.indexOf(":")
    if (mynum == -1 )
    {
    var user_choice1 = user_choice
    var user_choice2 = ""
    }
    else
    {  
    var user_choice1 = user_choice.substring(0, mynum)
    var user_choice2 = user_choice.substring(mynum+1, user_choice.length)
    }
    eval("document.forms[0].C_" + component_id + ".value = \"" + user_choice1 + "\"")
    eval("document.forms[0].V_" + component_id + ".value = \"" + user_choice2 + "\"")
}

function setSelectValue(select_box, component_id) {
    var user_choice = select_box.options[select_box.selectedIndex].value
    var mynum = user_choice.indexOf(":")
    if (mynum == -1 )
    {
    var user_choice1 = user_choice
    var user_choice2 = ""
    }
    else
    {
    var user_choice1 = user_choice.substring(0, mynum)
    var user_choice2 = user_choice.substring(mynum+1, user_choice.length)
    }
    var target_select = eval("document.forms[0].C_" + component_id)
    for (var i = 0; i < target_select.length; i++) {
     if (target_select.options[i].value == user_choice1) {
         target_select.options[i].selected = true
            eval("document.forms[0].V_" + component_id + ".value = \"" + user_choice2 + "\"")
            break
     }
    }
}
// End hiding script -->
</script>
</head>
<body bgcolor="#FFFFFF">
<form name="model_config_create" method="post" action="menu.jsp?option=2.1.4">
    <tr>
      <td class="content_field_label" valign="top" width="100"><input type="checkbox" name="R_31" value="ON" onClick="if(this.checked){C_31.disabled=false;select_31_1.disabled=false;V_31.disabled=false;} else {C_31.disabled=true;select_31_1.disabled=true;V_31.disabled=true;}"></td>
      <td>
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td>
              <input type="text" name="C_31" size="45" maxlength="128" disabled>
&nbsp;&nbsp;<b>Version:</b><input type="text" name="V_31" size="25" maxlength="128" disabled>
              <input type="hidden" name="w_components" value="8|DCComp3|C_31">
            </td>
          </tr>
          <tr>
            <td>
              <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td width="100" class="content_field_label">Candidate #1:</td>
                  <td>
                    <select name="select_31_1" onChange="fillInputValue(this, 31)" disabled>
                     <option value="">(Choose One)</option>
          <option value="HE:V">HE:V</option>
          <option value="HEHE:HE_V">HE:HE_V</option>
          <option value="HI124:HI124_V">HI124:HI124_V</option>
                    </select>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</form>
</body>
</html>
Timbo87Commented:
<html>
<head>
<title>FASTT</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="fastt.css" type="text/css">
<script language="JavaScript">

<!-- Hide script from older browsers
function fillInputValue(select_box, component_id) {
    var user_choice = select_box.options[select_box.selectedIndex].value
    var mynum = user_choice.indexOf(":")
    if (mynum == -1 )
    {
    var user_choice1 = user_choice
    var user_choice2 = ""
    }
    else
    {  
    var user_choice1 = user_choice.substring(0, mynum)
    var user_choice2 = user_choice.substring(mynum+1, user_choice.length)
    }
    eval("document.forms[0].C_" + component_id + ".value = \"" + user_choice1 + "\"")
    eval("document.forms[0].V_" + component_id + ".value = \"" + user_choice2 + "\"")
}

function setSelectValue(select_box, component_id) {
    var user_choice = select_box.options[select_box.selectedIndex].value
    var mynum = user_choice.indexOf(":")
    if (mynum == -1 )
    {
    var user_choice1 = user_choice
    var user_choice2 = ""
    }
    else
    {
    var user_choice1 = user_choice.substring(0, mynum)
    var user_choice2 = user_choice.substring(mynum+1, user_choice.length)
    }
    var target_select = eval("document.forms[0].C_" + component_id)
    for (var i = 0; i < target_select.length; i++) {
     if (target_select.options[i].value == user_choice1) {
         target_select.options[i].selected = true
            eval("document.forms[0].V_" + component_id + ".value = \"" + user_choice2 + "\"")
            break
     }
    }
}
// End hiding script -->
</script>
</head>
<body bgcolor="#FFFFFF">
<form name="model_config_create" method="post" action="menu.jsp?option=2.1.4">
    <tr>
      <td class="content_field_label" valign="top" width="100"><input type="checkbox" name="R_31" value="ON" onClick="if(this.checked){C_31.disabled = false; V_31.disabled = false} else {C_31.disabled=true; V_31.disabled= true;}"></td>
      <td>
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td>
              <input type="text" name="C_31" size="45" maxlength="128" disabled>
&nbsp;&nbsp;<b>Version:</b><input type="text" name="V_31" size="25" maxlength="128" disabled>
              <input type="hidden" name="w_components" value="8|DCComp3|C_31">
            </td>
          </tr>
          <tr>
            <td>
              <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td width="100" class="content_field_label">Candidate #1:</td>
                  <td>
                    <select name="select_31_1" onChange="if(!R_31.checked) return false; else fillInputValue(this, 31)">
                     <option value="">(Choose One)</option>
          <option value="HE:V">HE:V</option>
          <option value="HEHE:HE_V">HE:HE_V</option>
          <option value="HI124:HI124_V">HI124:HI124_V</option>
                    </select>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</form>
</body>
</html>

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Saqib KhanSenior DeveloperCommented:
You did not defined the Select name in the if statement.

<html>
<head>
<title>FASTT</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="fastt.css" type="text/css">
<script language="JavaScript">

<!-- Hide script from older browsers
function fillInputValue(select_box, component_id) {
    var user_choice = select_box.options[select_box.selectedIndex].value
    var mynum = user_choice.indexOf(":")
    if (mynum == -1 )
    {
    var user_choice1 = user_choice
    var user_choice2 = ""
    }
    else
    {  
    var user_choice1 = user_choice.substring(0, mynum)
    var user_choice2 = user_choice.substring(mynum+1, user_choice.length)
    }
    eval("document.forms[0].C_" + component_id + ".value = \"" + user_choice1 + "\"")
    eval("document.forms[0].V_" + component_id + ".value = \"" + user_choice2 + "\"")
}

function setSelectValue(select_box, component_id) {
    var user_choice = select_box.options[select_box.selectedIndex].value
    var mynum = user_choice.indexOf(":")
    if (mynum == -1 )
    {
    var user_choice1 = user_choice
    var user_choice2 = ""
    }
    else
    {
    var user_choice1 = user_choice.substring(0, mynum)
    var user_choice2 = user_choice.substring(mynum+1, user_choice.length)
    }
    var target_select = eval("document.forms[0].C_" + component_id)
    for (var i = 0; i < target_select.length; i++) {
     if (target_select.options[i].value == user_choice1) {
         target_select.options[i].selected = true
            eval("document.forms[0].V_" + component_id + ".value = \"" + user_choice2 + "\"")
            break
     }
    }
}
// End hiding script -->
</script>
</head>
<body bgcolor="#FFFFFF">
<form name="model_config_create" method="post" action="menu.jsp?option=2.1.4">
    <tr>
      <td class="content_field_label" valign="top" width="100"><input type="checkbox" name="R_31" value="ON" onClick="if(this.checked){C_31.disabled = false; V_31.disabled = false;select_31_1.disabled=false;} else {C_31.disabled=true; V_31.disabled= true;select_31_1.disabled=true;}"></td>
      <td>
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td>
              <input type="text" name="C_31" size="45" maxlength="128" disabled>
&nbsp;&nbsp;<b>Version:</b><input type="text" name="V_31" size="25" maxlength="128" disabled>
              <input type="hidden" name="w_components" value="8|DCComp3|C_31">
            </td>
          </tr>
          <tr>
            <td>
              <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td width="100" class="content_field_label">Candidate #1:</td>
                  <td>
                    <select name="select_31_1" onChange="if(!R_31.checked) return false; else fillInputValue(this, 31)">
                     <option value="">(Choose One)</option>
          <option value="HE:V">HE:V</option>
          <option value="HEHE:HE_V">HE:HE_V</option>
          <option value="HI124:HI124_V">HI124:HI124_V</option>
                    </select>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</form>
</body>
</html>
Timbo87Commented:
To clear things up, the difference between my code and adilkhan's code is that my code allows you to use the select box, but it won't write to the text fields unless checked while adilkhan's disables the select box along with the text fields. Not sure which one you're looking for.
GwynforWebCommented:
Tooki, I come back to see how th equestion is going , I thought I ahd answered it now I find the has changed. This is my version, clicking the check box flips the disabled property for the field starting with all disabled. (ie !true=false and !false=true)

<html>

<head>
<title>FASTT</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="fastt.css" type="text/css">
<script language="JavaScript">

<!-- Hide script from older browsers
function fillInputValue(select_box, component_id) {
var user_choice = select_box.options[select_box.selectedIndex].value
var mynum = user_choice.indexOf(":")
if (mynum == -1 )
{
var user_choice1 = user_choice
var user_choice2 = ""
}
else
{
var user_choice1 = user_choice.substring(0, mynum)
var user_choice2 = user_choice.substring(mynum+1, user_choice.length)
}
eval("document.forms[0].C_" + component_id + ".value = \"" + user_choice1 + "\"")
eval("document.forms[0].V_" + component_id + ".value = \"" + user_choice2 + "\"")
}

function setSelectValue(select_box, component_id) {
var user_choice = select_box.options[select_box.selectedIndex].value
var mynum = user_choice.indexOf(":")
if (mynum == -1 )
{
var user_choice1 = user_choice
var user_choice2 = ""
}
else
{
var user_choice1 = user_choice.substring(0, mynum)
var user_choice2 = user_choice.substring(mynum+1, user_choice.length)
}
var target_select = eval("document.forms[0].C_" + component_id)
for (var i = 0; i < target_select.length; i++) {
if (target_select.options[i].value == user_choice1) {
target_select.options[i].selected = true
eval("document.forms[0].V_" + component_id + ".value = \"" + user_choice2 + "\"")
break
}
}
}
// End hiding script -->
</script>
</head>

<body bgcolor="#FFFFFF">

<form name="model_config_create" method="post" action="menu.jsp?option=2.1.4">
  <input type="hidden" name="w_components" value="8|DCComp3|C_31"><table>
    <tr>
      <td class="content_field_label" valign="top" width="100"><input type="checkbox"
      name="R_31" value="ON"
      onClick="C_31.disabled=!C_31.disabled;V_31.disabled=!V_31.disabled;select_31_1.disabled=!select_31_1.disabled"></td>
      <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td><input type="text" name="C_31" size="45" maxlength="128" disabled> &nbsp;&nbsp;<b>Version:</b>
          <input type="text" name="V_31" size="25" maxlength="128" disabled> </td>
        </tr>
        <tr>
          <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="100" class="content_field_label">Candidate #1:</td>
              <td><select name="select_31_1" onChange="fillInputValue(this, 31)" size="1" disabled>
                <option value>(Choose One)</option>
                <option value="HE:V">HE:V</option>
                <option value="HEHE:HE_V">HE:HE_V</option>
                <option value="HI124:HI124_V">HI124:HI124_V</option>
              </select> </td>
            </tr>
          </table>
          </td>
        </tr>
      </table>
      </td>
    </tr>
  </table>
</form>
</body>
</html>
GwynforWebCommented:
If the option box is always to be active remove select_31_1.disabled=!select_31_1.disabled and disabled attribute from it definition.
tookiAuthor Commented:
Thanks everyone!!Thanks a lot.Everyone's answer is acceptable to me.But there is one thing that :
after checking(selecting) the checkbox, if I type on the textfield(s) or choose an entry from the selectfield and then uncheck(deselect) the checkbox, the content of those textfield(s) remains and go through the form to the next page and I do not want that.

Is there any way that when the checkbox is deselected, the existing entries in the textfield(s) are set to null(blank)?

thanks!
-tooki
sajuksCommented:
Modify GwynforWeb script by replacing
__________________________________________________________________________________________________
<td class="content_field_label" valign="top" width="100"><input type="checkbox"
     name="R_31" value="ON"
     onClick="C_31.disabled=!C_31.disabled;V_31.disabled=!V_31.disabled;select_31_1.disabled=!select_31_1.disabled"></td>

__________________________________________________________________________________________________

WITH-->

<td class="content_field_label" valign="top" width="100"><input type="checkbox"
name="R_31" value="ON"
onClick="C_31.disabled=!C_31.disabled;V_31.disabled=!V_31.disabled;select_31_1.disabled=!select_31_1.disabled;C_31.value='';V_31.value=''"></td>

this will blank out the text values.
Saqib KhanSenior DeveloperCommented:
simply add this line on your onClick event

onClick="document.forms['form_name'].reset();all_other_scripts_for_disabling_textboxes"
GwynforWebCommented:
in my code change


 onClick="C_31.disabled=!C_31.disabled;V_31.disabled=!V_31.disabled;select_31_1.disabled=!select_31_1.disabled">

to
onClick="C_13.value="";C_31.disabled=!C_31.disabled;V_13.value="";V_31.disabled=!V_31.disabled;select_31_1.disabled=!select_31_1.disabled">
GwynforWebCommented:
sajuks, did'nt see your post. GfW
sajuksCommented:
No problems GwynforWeb , since you hadnt replied to the post for a long time i had replied. Hope you dont mind.
If you get the points it all yours. none needed for me. ( Not expecting any for me :-) )

Regards
NushiCommented:
tooki.
if you dont want the context to send to the next form simply disable the textfield/textarea
in this case it will not be submitted.

Nushi.
tookiAuthor Commented:
Thanks much! It works but there is a problem too. After I submit (with some content in the textfields and the checkbox checked) and then if I come back to the previous page (current page that we are talking about), then the "checkbox remain checked but the textfields and the select field goes disabled!! If we uncheck the checkbox, the textfields and the select field becomes enabled, just the opposite of what was before the submit button was pressed"!!! Is there any way to make sure if the checkbox is selected certainly the textfields/selectfields are enables and if the checkbox is deselected the textfields/selectfields are disabled?

Here are the two files  (the later one 2.html is the one that the form in 1.html calls:

***1.html**
<html>

<head>
<title>FASTT</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="fastt.css" type="text/css">
<script language="JavaScript">

<!-- Hide script from older browsers
function fillInputValue(select_box, component_id) {
var user_choice = select_box.options[select_box.selectedIndex].value
var mynum = user_choice.indexOf(":")
if (mynum == -1 )
{
var user_choice1 = user_choice
var user_choice2 = ""
}
else
{
var user_choice1 = user_choice.substring(0, mynum)
var user_choice2 = user_choice.substring(mynum+1, user_choice.length)
}
eval("document.forms[0].C_" + component_id + ".value = \"" + user_choice1 + "\"")
eval("document.forms[0].V_" + component_id + ".value = \"" + user_choice2 + "\"")
}

function setSelectValue(select_box, component_id) {
var user_choice = select_box.options[select_box.selectedIndex].value
var mynum = user_choice.indexOf(":")
if (mynum == -1 )
{
var user_choice1 = user_choice
var user_choice2 = ""
}
else
{
var user_choice1 = user_choice.substring(0, mynum)
var user_choice2 = user_choice.substring(mynum+1, user_choice.length)
}
var target_select = eval("document.forms[0].C_" + component_id)
for (var i = 0; i < target_select.length; i++) {
if (target_select.options[i].value == user_choice1) {
target_select.options[i].selected = true
eval("document.forms[0].V_" + component_id + ".value = \"" + user_choice2 + "\"")
break
}
}
}
// End hiding script -->
</script>
</head>

<body bgcolor="#FFFFFF">

<form name="model_config_create" method="post" action="2.html">
  <input type="hidden" name="w_components" value="8|DCComp3|C_31"><table>
    <tr>
      <td class="content_field_label" valign="top" width="100"><input type="checkbox"
      name="R_31" value="ON"

onClick="C_31.disabled=!C_31.disabled;V_31.disabled=!V_31.disabled;select_31_1.disabled=!select_31_1.disabled;C_31.value='';V_31.value=''"></td>
</td>
      <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td><input type="text" name="C_31" size="45" maxlength="128" disabled> &nbsp;&nbsp;<b>Version:</b>
          <input type="text" name="V_31" size="25" maxlength="128" disabled> </td>
        </tr>
        <tr>
          <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="100" class="content_field_label">Candidate #1:</td>
              <td><select name="select_31_1" onChange="fillInputValue(this, 31)" size="1" disabled>
                <option value>(Choose One)</option>
                <option value="HE:V">HE:V</option>
                <option value="HEHE:HE_V">HE:HE_V</option>
                <option value="HI124:HI124_V">HI124:HI124_V</option>
              </select> </td>
            </tr>
          </table>
          </td>
        </tr>
      </table>
      </td>
    </tr>
  </table>
<input type=submit value=Submit>
</form>
</body>
</html>
***1.html***

***2.html***
<html>
<body>
2.html
</body>
</html>
***2.html**


-tooki
tookiAuthor Commented:
Anyone....to help!!!
thanks,-tooki
Saqib KhanSenior DeveloperCommented:
Define Action on Body onLoad

<Body onLoad = "whatever.checked=true">

OR

<Body onLoad="document.forms['myForm'].reset()">
tookiAuthor Commented:
Thanks Adilkhan!
I tried <Body onLoad="document.forms['myForm'].reset()">
Ok it keeps the checked checkbox checked when hit browser back button and it keeps unchecked checkbox unchecked,ok!
But how any textfield (that contains values before submitting the form) that are enabled before submit gets disabled after coming back using browser back button. How can I keep that same enabled status for the textfields (also the selectbox)?
thanks.
-tooki
Saqib KhanSenior DeveloperCommented:
use the Same Function and Populate the Form Field's Status on Body onLoad

function default_vals()
Saqib KhanSenior DeveloperCommented:
use the Same Function and Populate the Form Field's Status on Body onLoad

function default_vals() {
// whatever you want to enable/disable
}
<body onLoad="default_vals()">
tookiAuthor Commented:
Thanks.But I wrote the <body onLoad="default_vals()"> but I wrote below the default_vals() function but still the textfield C_31 andselect field select_31_1 always get disabled after I come back after the form submission,could you please help me with the syntax in the default_vals() function bolow:

function default_vals() {
document.forms['myForm'].reset()
document.forms['myForm'].C_31.disabled=!document.forms['myForm'].C_31.disabled
document.forms['myForm'].select_31_1.disabled=!document.forms['myForm'].select_31_1.disabled
}


Thanks!-tooki
Saqib KhanSenior DeveloperCommented:
function default_vals() {
document.forms['myForm'].reset();
document.forms['myForm'].C_31.disabled=false;
document.forms['myForm'].select_31_1.disabled=false;
}
tookiAuthor Commented:
Thanks.
But still this function default_vals() cannot enable the textfield C_31 and the select field select_31_1 (if they were enabled before the form submission).
I think this is because in the form the textfields/selectfield are craeated as 'disabled' by default:

<input type="text" name="V_31" size="25" maxlength="128" disabled>
<select name="select_31_1" onChange="fillInputValue(this, 31)" size="1" disabled>

...

-tooki
Saqib KhanSenior DeveloperCommented:
yes tooki, you are right.

You can take out disabled from the Text input type and select field and populate them in a function instead.
tookiAuthor Commented:
No,actually it does not work for me. When we load the html page (1.html) fro the first time, I need everything disabled (V_31 disabled, select_31_1 disabled and R_31 unchecked).

Before I hit "submit" in 1.html, if R_31 is checked (i.e. V_31 enabled, select_31_1 enabled), I need to see R_31 checked, V_31 enabled and select_31_1 enabled after the "submit" in 1.html is pressed and I used the browser "Back" button to come back to "1.html".

If in 1.html I write:
<input type="text" name="V_31" size="25" maxlength="128">
<select name="select_31_1" onChange="fillInputValue(this, 31)" size="1">
(Instead of: <input type="text" name="V_31" size="25" maxlength="128" disabled>
<select name="select_31_1" onChange="fillInputValue(this, 31)" size="1" disabled>
)

then at the beginning (when 1.html is called)  V_31 enabled and select_31_1 enabled will be enabled and I do not want that.

Is there any way to have it done...

Thanks.-tooki
jaysolomonCommented:
No comment has been added lately, so it's time to clean up this TA.
I will leave the following recommendation for this question in the Cleanup topic area:

Split: GwynforWeb {http:#9872237} & adilkhan {http:#9872241} & Timbo87 {http:#9872449} & sajuks {http:#9873001}

Please leave any comments here within the next four days.
PLEASE DO NOT ACCEPT THIS COMMENT AS AN ANSWER!

jAy
EE Cleanup Volunteer
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.