SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot mattyj's Avatar
    Join Date
    Mar 2004
    Location
    Western Australia
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Having disabled form elements then activating them according to user input/selection

    basically rather than having a multitude of forms serving separate (but related) purposes for my users, I want to consolidate them as much as possible into my main contact page so maintenance is easier.

    Let's say I want to merge my order enquiries and parcel status/tracking functionality in my generic contact.htm;

    So (for order enquiries example) I have 'Order Number' and 'Order Date' textfields (with some descriptive text) visible on the form, but disabled until the Enquiry Category drop-down menu is selected as 'Retail Order' - then these fields become active and able to recieve input from the user. If it's a default general enquiry, the 'Order Number' and 'Order Date' options do not need to be used, but I want them still visible as part of the form 'psychology' (ie 'what's this') rather than appearing suddenly in a fright fashion for the user.

    So it's like turning 'on and off' a block/section of input element according to the drop-down selection - simple for a Javascript programmer but difficult for me.

    for the drop-down selector which governs the active or disabled status of form elements:

    <select name="menu1" onchange="MM_jumpMenu('parent',this,0)">
    <option>General</option>
    <option>Application Form</option>
    <option>Retail Order-received parcels</option>
    <option>Retail Order-awaiting parcels</option>
    <option>Product Usage</option>
    <option>Members Access</option>
    <option>Business Proposal</option>
    <option>Other</option>
    </select>

    Using my example, if the user chooses Retail Order-received parcels the following form elements & text are activated from their default disabled state:

    <p>Check the Tax Invoice you received with your parcel and enter the Order Number and Date below/p>
    <p>Order Number: <input name="ordernumber" type="text" size="10" />
    Order Date: <input name="orderdate" type="text" size="10" /></p>

    ..so they are instantly aware this is required of them for the selection.

    if the user chooses Retail Order-awaiting parcels the following form elements & text are activated from their default disabled state:

    <p>Select the Status you require about your order/p>
    <p><input name="#" type="checkbox" value="" /> consignment tracking - where is my parcel currently located<br />
    <input name="#" type="checkbox" value="" /> back ordered products - when are my back orders expected to be available</p>

    ..same again, this allows them to request special (parcel) status info rather than submit a general message. If they make any other Enquiry Category drop-down menu choices which don't require these extra fuctionality they are put back to disabled, so they know to leave them alone.

    thanks!

  2. #2
    Pointiest Petitions carrotflowers's Avatar
    Join Date
    Jul 2003
    Location
    Suburbs of DC (MD)
    Posts
    595
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You may wantthis moved to the Javascript forum. It sounds like you would want to write a function like:

    function turnOn () {
    if (document.formname.fieldname.selected) {
    document.formname.fieldname.disabled == false;
    }
    }

    and tie the function to the onclick method of option, like <option onclick = "turnOn();">something</option>

    I'm no JS expert tho, so like I said, you prob. want this moved. Also this w3schools reference is very helpful:
    http://www.w3schools.com/js/js_obj_htmldom.asp

  3. #3
    SitePoint Zealot mattyj's Avatar
    Join Date
    Mar 2004
    Location
    Western Australia
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks dude, and I'll have a closer peek. Cheers for the w3schools.com link, looks the goods. The thread appears to have been moved.

    I forgot to clarify that the form block that is disabled and activates on (and off) according to selection would have some kind of a 'masking' style applied to it (inactive state) to knock it back visually from the other active components on the interface - and then it is rendered in solid black details when selected.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •