how to Enable/Disable textbox dynamically

Discussion in 'Javascript' started by kamalesh, Aug 4, 2007.

  1. kamalesh

    kamalesh Guest

    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
    kamalesh, Aug 4, 2007
    #1
    1. Advertising

  2. kamalesh wrote:
    > <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    > pageEncoding="ISO-8859-1"%>


    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>


    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">


    language="javascript" is redundant.

    > [...]
    > function generateReport()
    > {
    > document.frmSelectReport.target="_blank";
    > document.frmSelectReport.submit();


    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>


    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>


    This must be placed before the first `<script ...>' in your code.

    > </head>


    This must be placed after the last `</script>' in your code.

    > <body>
    > [...]


    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;">


    <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)">


    `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">
    > [...]


    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()">


    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


    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
    --
    var bugRiddenCrashPronePieceOfJunk = (
    navigator.userAgent.indexOf('MSIE 5') != -1
    && navigator.userAgent.indexOf('Mac') != -1
    ) // Plone, register_function.js:16
    Thomas 'PointedEars' Lahn, Aug 4, 2007
    #2
    1. Advertising

  3. Thomas 'PointedEars' Lahn wrote:
    > kamalesh wrote:
    >> <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>

    >
    > This must be placed before the first `<script ...>' in your code.


    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">
    Thomas 'PointedEars' Lahn, Aug 4, 2007
    #3
  4. kamalesh

    kamalesh Guest

    On Aug 4, 8:52 pm, Thomas 'PointedEars' Lahn <>
    wrote:
    > Thomas 'PointedEars' Lahn wrote:
    > > kamalesh wrote:
    > >> <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>

    >
    > > This must be placed before the first `<script ...>' in your code.

    >
    > 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">



    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?
    kamalesh, Aug 4, 2007
    #4
  5. kamalesh wrote:
    > if i am not bothering you muuch then can you please explain what the
    > statement
    >
    > var dis = !/BETWEEN/i.test(o.value);
    >
    > means?


    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
    --
    var bugRiddenCrashPronePieceOfJunk = (
    navigator.userAgent.indexOf('MSIE 5') != -1
    && navigator.userAgent.indexOf('Mac') != -1
    ) // Plone, register_function.js:16
    Thomas 'PointedEars' Lahn, Aug 4, 2007
    #5
  6. Thomas 'PointedEars' Lahn wrote:
    > kamalesh wrote:
    >> if i am not bothering you muuch then can you please explain what the
    >> statement
    >>
    >> var dis = !/BETWEEN/i.test(o.value);
    >>
    >> means?

    >
    > It is a variable assignment using Regular Expression matching. `dis' is
    > assigned `true' if o.value contains "BETWEEN", otherwise `false'.


    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".



    PointedEars
    --
    Prototype.js was written by people who don't know javascript for people
    who don't know javascript. People who don't know javascript are not the
    best source of advice on designing systems that use javascript.
    -- Richard Cornford, <f806at$ail$1$>
    Thomas 'PointedEars' Lahn, Aug 4, 2007
    #6
  7. Thomas 'PointedEars' Lahn wrote:
    <snip>
    >> <select name="Loan_Amount_Operator"
    >> onchange="javascript:enableLoanFields(this.form, this.value)">

    >
    > `javascript:' here ranges from being redundant to being a syntax
    > error.


    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">

    <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.
    Richard Cornford, Aug 4, 2007
    #7
  8. Richard Cornford wrote:
    > Thomas 'PointedEars' Lahn wrote:
    > <snip>
    >>> <select name="Loan_Amount_Operator"
    >>> onchange="javascript:enableLoanFields(this.form, this.value)">

    >> `javascript:' here ranges from being redundant to being a syntax
    >> error.

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


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

    >> 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">

    > <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.


    Not yet, I daresay.

    > That would make it harmless but redundant (formal correctness only for
    > the sake of formal correctness).


    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.


    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
    --
    var bugRiddenCrashPronePieceOfJunk = (
    navigator.userAgent.indexOf('MSIE 5') != -1
    && navigator.userAgent.indexOf('Mac') != -1
    ) // Plone, register_function.js:16
    Thomas 'PointedEars' Lahn, Aug 4, 2007
    #8
  9. Thomas 'PointedEars' Lahn wrote:
    > Richard Cornford wrote:
    >> Thomas 'PointedEars' Lahn wrote:
    >> <snip>
    >>>> <select name="Loan_Amount_Operator"
    >>>> onchange="javascript:enableLoanFields(this.form, this.value)">
    >>> `javascript:' here ranges from being redundant to being a syntax
    >>> error.

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

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


    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.

    >>> 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">

    >> <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.

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

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


    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)).

    >> 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.

    >
    > Agreed. However, there is no Content-Script-Type header
    > defined in HTTP/1.0 or HTTP/1.1.


    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.


    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.
    Richard Cornford, Aug 4, 2007
    #9
  10. Bart Van der Donck, Aug 5, 2007
    #10
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Patrick
    Replies:
    1
    Views:
    634
  2. misiek
    Replies:
    7
    Views:
    50,149
    Sri123
    Apr 8, 2011
  3. Henrik Hjøllund Hansen

    Dynamically enable/disable an element inside a form.

    Henrik Hjøllund Hansen, Dec 18, 2003, in forum: HTML
    Replies:
    2
    Views:
    4,563
    Jukka K. Korpela
    Dec 19, 2003
  4. Plateriot
    Replies:
    3
    Views:
    1,533
    Plateriot
    Jul 4, 2008
  5. Ryan
    Replies:
    3
    Views:
    2,116
Loading...

Share This Page