Link to home
Start Free TrialLog in
Avatar of tooki
tooki

asked on

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***
SOLUTION
Avatar of GwynforWeb
GwynforWeb
Flag of Canada image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Avatar of Saqib Khan
Saqib Khan
Flag of United States of America image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Saqib Khan
Saqib Khan
Flag of United States of America image
o00ps I guess we Submited at the Same Time, Guy you won the Auction:) hehehehe LOL
Avatar of GwynforWeb
GwynforWeb
Flag of Canada image
Yep close one, I usually loose out on this I got there first for once. :-)
Avatar of tooki
tooki

ASKER

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
Avatar of Saqib Khan
Saqib Khan
Flag of United States of America image
<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>
ASKER CERTIFIED SOLUTION
Avatar of Timbo87
Timbo87
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Saqib Khan
Saqib Khan
Flag of United States of America image
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>
Avatar of Timbo87
Timbo87
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.
Avatar of GwynforWeb
GwynforWeb
Flag of Canada image
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>
Avatar of GwynforWeb
GwynforWeb
Flag of Canada image
If the option box is always to be active remove select_31_1.disabled=!select_31_1.disabled and disabled attribute from it definition.
Avatar of tooki
tooki

ASKER

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
SOLUTION
Avatar of sajuks
sajuks
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Saqib Khan
Saqib Khan
Flag of United States of America image
simply add this line on your onClick event

onClick="document.forms['form_name'].reset();all_other_scripts_for_disabling_textboxes"
Avatar of GwynforWeb
GwynforWeb
Flag of Canada image
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">
Avatar of GwynforWeb
GwynforWeb
Flag of Canada image
sajuks, did'nt see your post. GfW
Avatar of sajuks
sajuks
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
Avatar of Nushi
Nushi
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.
Avatar of tooki
tooki

ASKER

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
Avatar of tooki
tooki

ASKER

Anyone....to help!!!
thanks,-tooki
Avatar of Saqib Khan
Saqib Khan
Flag of United States of America image
Define Action on Body onLoad

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

OR

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

ASKER

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
Avatar of Saqib Khan
Saqib Khan
Flag of United States of America image
use the Same Function and Populate the Form Field's Status on Body onLoad

function default_vals()
Avatar of Saqib Khan
Saqib Khan
Flag of United States of America image
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()">
Avatar of tooki
tooki

ASKER

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
Avatar of Saqib Khan
Saqib Khan
Flag of United States of America image
function default_vals() {
document.forms['myForm'].reset();
document.forms['myForm'].C_31.disabled=false;
document.forms['myForm'].select_31_1.disabled=false;
}
Avatar of tooki
tooki

ASKER

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
Avatar of Saqib Khan
Saqib Khan
Flag of United States of America image
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.
Avatar of tooki
tooki

ASKER

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
Avatar of jaysolomon
jaysolomon
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