Solved

Javascript checkbox

Posted on 2003-12-03
31
1,120 Views
Last Modified: 2012-06-27
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***
0
Comment
Question by:tooki
  • 10
  • 8
  • 6
  • +4
31 Comments
 
LVL 31

Assisted Solution

by:GwynforWeb
GwynforWeb earned 37 total points
ID: 9872237
<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>
0
 
LVL 23

Assisted Solution

by:adilkhan
adilkhan earned 37 total points
ID: 9872241
<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>
0
 
LVL 23

Expert Comment

by:adilkhan
ID: 9872267
o00ps I guess we Submited at the Same Time, Guy you won the Auction:) hehehehe LOL
0
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 9872282
Yep close one, I usually loose out on this I got there first for once. :-)
0
 

Author Comment

by:tooki
ID: 9872384
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
0
 
LVL 23

Expert Comment

by:adilkhan
ID: 9872414
<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>
0
 
LVL 15

Accepted Solution

by:
Timbo87 earned 39 total points
ID: 9872449
<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>
0
 
LVL 23

Expert Comment

by:adilkhan
ID: 9872480
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>
0
 
LVL 15

Expert Comment

by:Timbo87
ID: 9872484
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.
0
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 9872500
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>
0
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 9872524
If the option box is always to be active remove select_31_1.disabled=!select_31_1.disabled and disabled attribute from it definition.
0
 

Author Comment

by:tooki
ID: 9872823
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
0
 
LVL 33

Assisted Solution

by:sajuks
sajuks earned 37 total points
ID: 9873001
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.
0
 
LVL 23

Expert Comment

by:adilkhan
ID: 9875072
simply add this line on your onClick event

onClick="document.forms['form_name'].reset();all_other_scripts_for_disabling_textboxes"
0
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 9875980
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">
0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 31

Expert Comment

by:GwynforWeb
ID: 9879670
sajuks, did'nt see your post. GfW
0
 
LVL 33

Expert Comment

by:sajuks
ID: 9880075
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
0
 
LVL 10

Expert Comment

by:Nushi
ID: 9900042
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.
0
 

Author Comment

by:tooki
ID: 9917957
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
0
 

Author Comment

by:tooki
ID: 9933112
Anyone....to help!!!
thanks,-tooki
0
 
LVL 23

Expert Comment

by:adilkhan
ID: 9933141
Define Action on Body onLoad

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

OR

<Body onLoad="document.forms['myForm'].reset()">
0
 

Author Comment

by:tooki
ID: 9933536
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
0
 
LVL 23

Expert Comment

by:adilkhan
ID: 9935413
use the Same Function and Populate the Form Field's Status on Body onLoad

function default_vals()
0
 
LVL 23

Expert Comment

by:adilkhan
ID: 9935414
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()">
0
 

Author Comment

by:tooki
ID: 9935724
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
0
 
LVL 23

Expert Comment

by:adilkhan
ID: 9936676
function default_vals() {
document.forms['myForm'].reset();
document.forms['myForm'].C_31.disabled=false;
document.forms['myForm'].select_31_1.disabled=false;
}
0
 

Author Comment

by:tooki
ID: 9939592
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
0
 
LVL 23

Expert Comment

by:adilkhan
ID: 9939681
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.
0
 

Author Comment

by:tooki
ID: 9953787
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
0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 10394446
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
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…

746 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

13 Experts available now in Live!

Get 1:1 Help Now