how to Enable/Disable textbox dynamically

K

kamalesh

Hello frndz,
i am a newbie to JavaScript and want a solution for following problem

Please see the code below

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
www.w3.org/TR/html4/loose.dtd">

<html>
<SCRIPT LANGUAGE="JavaScript" SRC="include\Calendar.js"></SCRIPT>
<script type="text/javascript" language="javascript">
function validateParameters()
{
alert(" validateParameters() called...");
}

function generateReport()
{
document.frmSelectReport.target="_blank";
document.frmSelectReport.submit();
}

function enableLoanFields(form, value)
{
if( ( value == "BETWEEN") || ( value == "NOT_BETWEEN") )
{
}
else
{
}
}
</script>

<head>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1">
<LINK HREF="include\CB.css" REL="stylesheet" TYPE="text/css"/>
<title>Report Selection</title>
</head>

<body>
<div id="overDiv" style="position:absolute; visibility:hidden; z-
index:1000;"></div>
<FORM NAME="frmSelectReport" ACTION="GenerateReport.jsp"
METHOD="POST" ENCTYPE="application/x-www-form-urlencoded"
onSubmit="return false;">
<table width="100%" height="100%" border="0" cellspacing="10"
align="center" class="MainTable">
<tr>
<th align="left">Paramaters</th>
</tr>
<tr>
<td>
<table cellspacing="10">
<tr>
<td>
<table cellspacing="5">
<tr>
<td>Loan Amount:</td>
<td>
<select name="Loan_Amount_Operator"
onchange="javascript:enableLoanFields(this.form, this.value)">
<option selected="selected" value="--SELECT--">--SELECT--
</option>
<option value="LESS_THAN">&lt;</option>
<option value="LESS_THAN_OR_EQUAL_TO">&lt;=</option>
<option value="EQUAL_TO">=</option>
<option value="EQUAL_TO_OR_GREATER_THAN">=&gt;</option>
<option value="GREATER_THAN">&gt;</option>
<option value="BETWEEN">Between</option>
<option value="NOT_BETWEEN">Not Between</option>
</select>
</td>
<td><input type="text" name="Min_Loan_Amount"></td>
<td><input type="text" name="Max_Loan_Amount"
disabled="disabled"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<br>
<div align="center" >
<input type="submit" class="dialogButton" value="Generate Report"
onclick="generateReport()">
</div>
</FORM>
</body>
</html>

Now what I want is when user selects loan amount operator as "Between"
or "NOT BETWEEN" then the seconf txt box "MAX_LOAN_AMOUNT" should be
enabled whereas if the user selects the loan amount anything other
that that then the text box "MAX_LOAN_AMOUNT" should be disabled...

I written the function "function enableLoanFields(form, value)" for
the same but don't know how to do this enabling disabling within the
function
 
T

Thomas 'PointedEars' Lahn

kamalesh said:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
Click to expand...

JavaScript has only the first letters in common with Java and JavaServer
Pages. If you need a client-side solution, don't post server-side code
here.
[...]
<html>
<SCRIPT LANGUAGE="JavaScript" SRC="include\Calendar.js"></SCRIPT>
Click to expand...

Should read

<script type="text/javascript" src="include/calendar.js"></script>

and must not occur as child of the `html' element. Your filenames
should all be lowercase to avoid problems when filename case becomes
important (e.g. after uploading to a server running a Unix system).
<script type="text/javascript" language="javascript">
Click to expand...

language="javascript" is redundant.
[...]
function generateReport()
{
document.frmSelectReport.target="_blank";
document.frmSelectReport.submit();
Click to expand...

function generateReport(f)
{
f.target = "_blank";
f.submit();

return false;
}

But see below.
}

function enableLoanFields(form, value)
{
if( ( value == "BETWEEN") || ( value == "NOT_BETWEEN") )
{
}
else
{
}
}
</script>
Click to expand...

This `script' element must be placed within the `head' or the `body'
element.
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1">
<LINK HREF="include\CB.css" REL="stylesheet" TYPE="text/css"/>
<title>Report Selection</title>
Click to expand...

This must be placed before the first ` said:
</head>
Click to expand...

This must be placed after the last ` said:
<body>
[...]
Click to expand...

The snipped code is entirely irrelevant to your question, and should
have been omitted. Its indenting style is also awfully bad to read.
Use two spaces for each indentation level, not tab characters, at least
when posting code.

[repaired indentation]
<FORM [...] onSubmit="return false;">
Click to expand...

<form ... onsubmit="return generateReport(this);">

However, it escapes me why you are relying on client-side scripting this
much. AIUI, it would suffice if you defined target="_blank" in the
first place (instead of setting it in generateReport()) and used
client-side scripting only for form validation.
[...]
<select name="Loan_Amount_Operator"
onchange="javascript:enableLoanFields(this.form, this.value)">
Click to expand...

`javascript:' here ranges from being redundant to being a syntax error.
Omit it, and use the following declaration for the default scripting
language once within the `head' element:

<meta http-equiv="Content-Script-Type" content="text/javascript">

That will do no harm, but it may do some good.
<option selected="selected" value="--SELECT--">--SELECT--</option>
<option value="LESS_THAN">&lt;</option>
<option value="LESS_THAN_OR_EQUAL_TO">&lt;=</option>
<option value="EQUAL_TO">=</option>
<option value="EQUAL_TO_OR_GREATER_THAN">=&gt;</option>
<option value="GREATER_THAN">&gt;</option>
<option value="BETWEEN">Between</option>
<option value="NOT_BETWEEN">Not Between</option>
</select>
[...]
<input type="text" name="Min_Loan_Amount">
[...]
<input type="text" name="Max_Loan_Amount" disabled="disabled">
[...]
Click to expand...

type="text" is redundant, and names should be lowercase as to ease
scripting the corresponding element objects.
<input type="submit" class="dialogButton" value="Generate Report"
onclick="generateReport()">
Click to expand...

This is known to be unreliable. Use the `onsubmit' event handler
attribute of the `form' element instead. See above.
[...]
Now what I want is when user selects loan amount operator as "Between"
or "NOT BETWEEN" then the seconf txt box "MAX_LOAN_AMOUNT" should be
enabled whereas if the user selects the loan amount anything other
that that then the text box "MAX_LOAN_AMOUNT" should be disabled...

I written the function "function enableLoanFields(form, value)" for
the same but don't know how to do this enabling disabling within the
function
Click to expand...

Quickhack:

<form ...>
<script type="text/javascript">
function enableLoadFields(o)
{
var e;
if (o && (e = o.form) && (e = e.elements)
&& (e = e["max_loan_amount"]))
{
var dis = !/BETWEEN/i.test(o.value);
if (!(e.disabled = dis)) e.disabled = dis ? "disabled" : "";
}
}
</script>

...
<select ... onchange="enableLoanFields(this)">
...
</select>
...
</form>

As you can see here, your form probably does not need a name (no matter
the position of the `script' element).


HTH

PointedEars
 
T

Thomas 'PointedEars' Lahn

Thomas said:
This must be placed before the first `<script ...>' in your code.
Click to expand...

And it should read

<head>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
<title>Report Selection</title>
<link rel="stylesheet" href="include/cb.css" type="text/css">
 
K

kamalesh

And it should read

<head>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
<title>Report Selection</title>
<link rel="stylesheet" href="include/cb.css" type="text/css">
Click to expand...


hey guys thanks a lot...
I really am very thankful to you for such an explanatory and STANDARD
response...

if i am not bothering you muuch then can you please explain what the
statement

var dis = !/BETWEEN/i.test(o.value);

means?
 
T

Thomas 'PointedEars' Lahn

kamalesh said:
if i am not bothering you muuch then can you please explain what the
statement

var dis = !/BETWEEN/i.test(o.value);

means?
Click to expand...

It is a variable assignment using Regular Expression matching. `dis' is
assigned `true' if o.value contains "BETWEEN", otherwise `false'. The
match is case-insensitive (`i'). It is a shortcut for a string compare
against "Between" and "NOT BETWEEN".


PointedEars
 
T

Thomas 'PointedEars' Lahn

Thomas said:
It is a variable assignment using Regular Expression matching. `dis' is
assigned `true' if o.value contains "BETWEEN", otherwise `false'.
Click to expand...

It is vice-versa, of course, because of the Not operator (`!'). Sorry
for the confusion.
The match is case-insensitive (`i'). It is a shortcut for a string compare
against "Between" and "NOT BETWEEN".
Click to expand...


PointedEars
 
R

Richard Cornford

Thomas 'PointedEars' Lahn wrote:
`javascript:' here ranges from being redundant to being a syntax
error.
Click to expand...

No it is not a syntax error as a label may appear associated with any
statement in javascript. It is redundant in context (and all but the
most specialised contexts; i.e. mixing VBScript and JScript on (what
then become) IE only pages, where VBScript is the implied default
language for the interpretation of attribute code due to the context of
the first use of VBScript).
Omit it, and use the following declaration for the default
scripting language once within the `head' element:

<meta http-equiv="Content-Script-Type" content="text/javascript">
Click to expand...
<snip>

No evidence exists that any browsers pay any attention to either this
META element or would pay any attention to the HTTP header that it is
supposed to be the 'http-equiv' of. That would make it harmless but
redundant (formal correctness only for the sake of formal correctness).
However, in a JSP you have direct access to a facility for setting the
HTTP headers for the generated page, and so you can (and should) provide
the actual HTTP header rather than (any) 'http-equiv' META elements.

Richard.
 
T

Thomas 'PointedEars' Lahn

Richard said:
Thomas 'PointedEars' Lahn wrote:
`javascript:' here ranges from being redundant to being a syntax
error.
Click to expand...

No it is not a syntax error as a label may appear associated with any
statement in javascript. [...]
Click to expand...

Labels (LabelledStatement production) were not introduced before
ECMAScript Edition 3.
<snip>

No evidence exists that any browsers pay any attention to either this
META element or would pay any attention to the HTTP header that it is
supposed to be the 'http-equiv' of.
Click to expand...

Not yet, I daresay.
That would make it harmless but redundant (formal correctness only for
the sake of formal correctness).
Click to expand...

It is not incorrect to omit it, but given the recommendation in the HTML
4.01 Specification, it would be unwise.
However, in a JSP you have direct access to a facility for setting the
HTTP headers for the generated page, and so you can (and should) provide
the actual HTTP header rather than (any) 'http-equiv' META elements.
Click to expand...

Agreed. However, there is no Content-Script-Type header defined in
HTTP/1.0 or HTTP/1.1. It is recommended in HTML 4.01 to use that `meta'
element when using event handler attributes anyway.


PointedEars
 
R

Richard Cornford

Thomas said:
Richard said:
Thomas 'PointedEars' Lahn wrote:
<select name="Loan_Amount_Operator"
onchange="javascript:enableLoanFields(this.form, this.value)">
`javascript:' here ranges from being redundant to being a syntax
error.
Click to expand...

No it is not a syntax error as a label may appear associated
with any statement in javascript. [...]
Click to expand...

Labels (LabelledStatement production) were not introduced
before ECMAScript Edition 3.
Click to expand...

But they were implemented long before they were formally specified, so
worrying about them being syntax errors may be worrying about
environments that have long since gone out of use.
Not yet, I daresay.


It is not incorrect to omit it, but given the recommendation in the
HTML 4.01 Specification, it would be unwise.
Click to expand...

I think that to recommend doing things for the sake of formal
correctness alone without saying as much is a mistake, it undermines the
credibility of your recommending doing things that are formally correct
where doing them or not may make a difference, such your recommendation
to correct the structural invalidity in the mark-up by not placing the
SCRIPT elements as the first children of the HTML element (or, as the
mark-up would be interpreted, not having two opening HEAD tags (the
first implied and the second actual)).
Agreed. However, there is no Content-Script-Type header
defined in HTTP/1.0 or HTTP/1.1.
Click to expand...

Which is the reason that the HTML 4.01 proposal for defaulting script
languages is commonly perceived as a joke. On the other hand, HTTP is
tolerant of 'unrecognised' headers.
It is recommended in HTML 4.01 to use that `meta'
element when using event handler attributes anyway.
Click to expand...

The perception of scripting by the authors of HTML 4.01 was distinctly
confused, to the point of being near unworkable. Apart from
demonstrating the use of a non-existing MIME type for javascript, they
specified a TYPE attribute for SCRIPT elements but forgot to mirror it
in NOSCRIPT element attributes (making a nonsense of their own example
of the use of NOSCRIPT by putting it next to a SCRIPT element of
type="text/tcl" so that in real world browsers exposed to the code not
only would the script not be executed (due to them not supporting
text/tcl) but the NOSCRIPT content would not be shown either because
javascript would be enabled on the browser). If these people make a joke
out defaulting the interpretation of attribute code then the joke may be
on us if we play along.

Richard.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
Checking dynamically populated data using ajax with user entered value 5
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
How to add dropdown selected data to table using jquery 2
How can I calculate the last payment of the year to be the sum of all previous payments for that year and subtracting it from Research Costs value? 7
Add Image and label dynamically inside the dropdown 2

Members online

No members online now.
Total: 21 (members: 0, guests: 21)
Robots: 470

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,055
Latest member
SlimSparkKetoACVReview

Latest Threads

Top