|
|||||||||
|
|||||||||
|
|||||||||
 |
|||||||||
| |
||
|
|
|
|
|||||||||
|
|||||||||
|
|||||||||
|
|||||||||
| |
||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
ASP Free Forums Sponsor:
|
|
|
|
#1
October 31st, 2004, 07:11 PM
|
|||
|
|||
Javascript to disable form field
Hi People,
I have made a simple ASP website. Need to add some spice to it. I have a check box, a text box and a combo box. I want the text boxes to be disabled if the check box is checked. I also want another text box to be disabled if a particular option in a combo box is selected. Any suggestions? What I have is this: How do I modify it? wHEN TEXT IS ENTERED IN TEXT BOX 1, TEXT BOX 2 IS DISABLED. FEATURES COLOR CHANGE -------------------------------------------------------------------------------------- <form name="form"> <input type="text" name="text1" onkeyup="this.form.text2.disabled=true;this.form.text2.styl e.background='#E8E8E8'" /><br><br> <input type="text" name="text2" onkeyup="this.form.text1.disabled=true;this.form.text1.styl e.background='#E8E8E8'" /> </form> Thanks Last edited by Lafinboy : October 31st, 2004 at 07:26 PM. Reason: Corrected title
|
|
#2
November 1st, 2004, 01:43 AM
|
||||
|
||||
|
we can't do all the work for you. look in the code, learn it, understand how it works and then you will be able to write your own code. that's the goal of my help here. not feeding with silver spoon.
|
|
#3
November 1st, 2004, 12:28 PM
|
|||
|
|||
|
If you need to look something up you can check here
http://msdn.microsoft.com/workshop/author/dhtml/dhtml_node_entry.asp
__________________
====== Doug G ====== I didn't attend the funeral, but I sent a nice letter saying I approved of it. --Mark Twain
|
|
#4
November 1st, 2004, 08:16 PM
|
|||
|
|||
|
Hi people,
Thanks a lot for your replies. I am sorry shadow if u felt i was trying to get a free lunch, but trust me, that was not my intention. Thanks to you too doug, your link was very helpful. This is what I got now: function checkstatus () { if S10C1.checked = true -----(S10C1 is the name of the checkbox) { " this.form.S10T8.disabled = true"; -----------(S10T8 is the name of the text box ) } } Input type = checkbox name= S10C1 value = Mainframe ----- other code----- This does not seem to work. When i paste the line of code in that function directly where my checkbox is defined ( for instance input type = checkbox name = S10C1 value = mainframe onclick= "whatever i want to happen..." it works, but when i uncheck the checkbox, the textbox is not enabled again. Thanks again, Rabbit
|
|
#5
November 1st, 2004, 08:50 PM
|
||||
|
||||
|
Try something more like this:
Code:
<input type="checkbox" name="checkbox1" id="chk" onChange="chkCheck();" value="ON" /><br />
<script language="javascript" type="text/javascript">
function chkCheck()
{
if (document.form1.checkbox1.checked)
{
document.form1.text.value=''; // clear the contents of the field
document.form1.text.disabled=true; // disable the field
}
else
{
document.form1.text.disabled=false; // change back to enabled
}
}
</script>
I'm no guru when it comes to JS, so I guess it could be optimised, but it does what you're after.
__________________
-
thought-after | my thoughts on web development Get Firefox, the developers browser Budget hosting - recommended [/left]
|
|
#6
November 1st, 2004, 08:59 PM
|
||||
|
||||
|
Lafinboy is on the right track, but if you actually want to hide the text boxes, change the code he posted slightly.
Code:
<input type="checkbox" name="checkbox1" id="chk" onChange="chkCheck();" value="ON" /><br />
<script language="javascript" type="text/javascript">
function chkCheck()
{
if (document.form1.checkbox1.checked)
{
document.form1.text.value=''; // clear the contents of the field
document.form1.text.style.visibility='hidden'; // hide the field
}
else
{
document.form1.text.style.visibility='visible'; // change back to visible
}
}
</script>
You can do the same thing for the combo box based on selection criteria. Hope this helps,
__________________
Neal Schafer The early worm gets eaten.
|
|
#7
November 2nd, 2004, 11:28 AM
|
|||
|
|||
|
Neal,
i think your code can help me with what I am trying to do. What other options are available with the .style.visibility='hidden' property? can I use style.??? to change the border color around a form field? So, instead of hiding the field, I color it or highlight it with a background color or bordercolor...then this becomes a validation tool? Thanks for your help, John
|
|
#8
November 2nd, 2004, 11:38 AM
|
||||
|
||||
|
You can set any available style setting for the object. Be aware that not all browsers treat styles the same way so you may have to do some browser dependent settings to ensure that all users see what you are trying to display. An example of this is that in some browsers visibility: collapse; for a table row will not only hide the information on the row, but make the row disappear as well. In other browsers this does not work and you use display:none; instead.
The following site has some good general information on CSS as well as a number of browser specific suggestions. http://www.htmlhelp.com/reference/css/references.html Hope this helps,
|
|
#9
November 2nd, 2004, 12:01 PM
|
||||
|
||||
|
Would you mind if I moved this post to the HTML Help forum? It has much more relevance there
__________________
selwonk If I've posted some code above, you might think it looks a bit simplistic. It might be. I'd rather people tried the next step themselves rather than getting a full solution on a plate. That way they learn more!
|
|
#10
November 2nd, 2004, 12:22 PM
|
|||
|
|||
|
nope, go ahead...
although I'm still struggling.... Soooo close too.... I have the script validating the form, alerting the user and even replacing the field class... but its only doing it to one field! Argghhhhhh a little help?  Please, with cherrys on top?Code:
<style type="text/css">
<!--
.field {
border: thin dashed #FF0000;
color: #990000;
background-color: #FFCCFF;
}
-->
</style>
Code:
<script language="JavaScript">
function change(id, newClass) {
identity=document.getElementById(id);
identity.className=newClass;
}
</script>
<script>
function validateForm() {
with (document.myform) {
var alertMsg = "The following REQUIRED fields\nhave been left empty:\n";
if (h.value == "") alertMsg += "\nYour First Name";
if (j.value == "") alertMsg += "\nYour Last Name";
if (alertMsg != "The following REQUIRED fields\nhave been left empty:\n") {
alert(alertMsg);
change('changeme','field');
return false;
} else {
return true;
}
} }
</script>
Code:
<TABLE> <TR> <TD align="right">First:</TD> <TD><input name="h" type="text" size="17" id="changeme"></TD> </TR> <TR> <TD align="right">Middle:</TD> <TD><input name="i" type="text" size="17" id="changeme2"></TD> </TR> <TR> <TD align="right">Last:</TD> <TD><input name="j" type="text" size="17" id="changeme3"></TD> </TR> </TABLE>
|
|
| Viewing: ASP Free Forums > Programming > HTML, JavaScript And CSS Help > Javascript to disable form field |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
 |
|
|
|
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
