SitePoint Sponsor

User Tag List

View Poll Results: Is it helfull for you?

Voters
3. You may not vote on this poll
  • YES

    0 0%
  • NO

    3 100.00%
Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jun 2008
    Location
    Dhaka, Bangladesh
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Have any body to solve this problem?

    I have a problem that is:
    Here have a list
    -------------------
    Code = Products
    -------------------
    001 = Shirt
    002 = Pant etc

    I have a form where have a text box name is "Products Name" I want that when I input 001 in the text box then text box will automatically get "shirt" and if we input 002 then text box will automatically get "pant"

    Have any body to solve this problem?

  2. #2
    Follow Me On Twitter: @djg gold trophysilver trophybronze trophy Dan Grossman's Avatar
    Join Date
    Aug 2000
    Location
    Philadephia, PA
    Posts
    20,580
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    How about using a select list (dropdown) instead of a text box? Then the user can just choose "shirt" or "pant" from the list, but the value sent with your form can be 001 or 002.

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Form elements need to be contained either in fieldsets or paragraphs. I'll use paragraphs here.
    Form labels can either be specified separately and linked via an identifier, or you can place the input directly inside the label and get away from needing so many identifiers. I'll use the latter choice here.

    Because the code field will be picking the name, I'll disable the products field too.

    Code html4strict:
    <form id="myForm">
        <p><label>Code: <input type="text" name="code"></label></p>
        <p><label>Product: <input type="text" name="product"></label></p>
        <p><input type="submit" value="Submit">
    </form>

    With the script, place it at the bottom of the body. If you want to place it in the head instead, you'll need to use one of the techniques to run scripts after the page has finished loading.

    Where is the script to get the product name from? I'll keep it simple and place them in an object list.

    Code javascript:
    var products = {
    	'001': 'Shirt',
    	'002': 'Pants'
    };

    We want to use the onblur event for the code field, so that we can set the product name. What happens if no valid name is available though? For now, if there is no valid name we can just leave the field empty.

    Code javascript:
    var form = document.getElementById('myForm');
    form.elements.code.onblur = setProductByCode;
     
    function setProductByCode() {
        var name = products[this.value] || '';
        var form = document.getElementById('myForm');
        form.elements.product.value = name;
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Offtopic:
    Form elements just need a block, any block. And it could wrap all the controls instead of individually wrapping them.

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    label and input elements are not block-level elements.

    The controls all could be wrapped, but then you would have to prevent them from all being on the same line. The break element is not appropriate for that, and is even explicitly declared as being a non-conforming use of the br tag in html5.

    As a result, the paragraph is the standard means by which to separate lines within a form.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    label and input elements are not block-level elements.
    I'm aware of that. I said you need a block of any sort.

    The controls all could be wrapped, but then you would have to prevent them from all being on the same line.
    This is easily and regularly done with standard CSS (though I do use individual wrappers in addition to the whole-block wrapper to keep the labels and inputs together as a unit, but if my code were like yours, with the labels wrapping the inputs, that wouldn't even be necessary-- they are already sitting as a unit).

    The break element is not appropriate for that, and is even explicitly declared as being a non-conforming use of the br tag in html5.
    I never suggested using breaks in forms (not that I or anyone I know uses HTML5). You can float to your heart's content though : )

    As a result, the paragraph is the standard means by which to separate lines within a form.
    The p is used in w3c examples, but since form controls aren't paragraphs, it's one of the least semantic element to use.

    I didn't mean to derail the thread but I wouldn't want anyone walking away from it thinking one's only choices are fieldsets and paragraphs, or that paragraphs are a better choice (using them for examples is quite understandable, the W3C themselves do it for whatever reason).


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
  •