Welcome to WebmasterWorld Guest from 54.163.168.15

Forum Moderators: open

Disable input box using jquery

   
12:13 pm on Jul 29, 2012 (gmt 0)



Hi

I'm trying to recreate an intranet system that I had until my entire world was stolen. I've been hunting around the forums finding my old threads to help me get going.

HTML:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<form>
<tr>
<td><input type="text" class="w140" id="ref" name="ref" value="" /></td>
<td><input type="text" class="w80" id="in" name="in" value="" /></td>
<td><input type="text" class="w80" id="out" name="out" value="" /></td>
<td><input type="text" class="w140" id="detail" name="detail" value="" /></td>
</tr>
</form>
</table>


Jquery:

<script type="text/javascript">
$(document).ready(function() {
$("#in").blur(function() {
if ($(this).val() !== '')
$("#out").attr("disabled", "disabled").css({ "border": "1px solid #CCC" });
else
$("#out").attr("disabled", "").css({ "border": "1px solid #888" });
});
$("#out").blur(function() {
if ($(this).val() !== '')
$("#in").attr("disabled", "disabled").css({ "border": "1px solid #CCC" });
else
$("#in").attr("disabled", "").css({ "border": "1px solid #888" });
});
});
</script>


Here's what used to happen. If you typed a value into "In" then "Out" became disabled and vice versa. DW is telling me I have a coding error where it's highlighted in bold but I can't see it.

Please help, it's driving me mad as I know it used to work (obviously the fixed version).

Thanks
11:53 pm on Jul 29, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



You are missing a } before the first else and also a { after it.

<script type="text/javascript">
$(document).ready(function() {
$("#in").blur(function() {
if ($(this).val() !== '')
$("#out").attr("disabled", "disabled").css({ "border": "1px solid #CCC" });
}
else
{
$("#out").attr("disabled", "").css({ "border": "1px solid #888" });
});
$("#out").blur(function() {
if ($(this).val() !== '')
$("#in").attr("disabled", "disabled").css({ "border": "1px solid #CCC" });
else
$("#in").attr("disabled", "").css({ "border": "1px solid #888" });
});
});
</script>
1:32 pm on Jul 30, 2012 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



@Dijkgraaf, no, he's not. There is no opening { of the if. Here's the original code, but formatted to make it easier to read:

$(document).ready(function() {
$("#in").blur(function() {
if ($(this).val() !== '')
$("#out").attr("disabled", "disabled").css({ "border": "1px solid #CCC" });
else
$("#out").attr("disabled", "").css({ "border": "1px solid #888" });
});
$("#out").blur(function() {
if ($(this).val() !== '')
$("#in").attr("disabled", "disabled").css({ "border": "1px solid #CCC" });
else
$("#in").attr("disabled", "").css({ "border": "1px solid #888" });
});
});
1:35 pm on Jul 30, 2012 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



With that said, "in" is a reserved word in JavaScript, so I would not use that as an ID value, and I wonder if that might be what's causing you problems.
 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month