changing css bu javascript for all input boxes with the same name

Discussion in 'Javascript' started by amykimber@gmail.com, May 5, 2006.

  1. Guest

    Hi all,

    I know I'm doign something really daft, but I can't get this to
    work...

    I have a form with a bunch of inputs called ship_owner[] - why the
    []? Because I'm submitting this page though php and the [] put the data
    into an array in the post.... anywhat.

    I have a link <a href="javascript:change_class()" >Block mode</a> to
    call the following function that's in my head section.


    <script>
    function change_class(var_type)
    {
    for (i=0; i<document.getElementsByName('ship_owner[]').length; i++)
    {

    document.getElementsByName('ship_owner[]').style.className="input_to_text";
    }
    }
    </script>


    I have the following style sheet also in my head.

    <style>
    <!--
    input_to_text {
    border: 1px solid #000;
    background: #987;
    padding: 1px;
    Font-family: Veranda;
    font-size: 10px;
    color: #fff;
    font-weight: bold;
    }
    </style>


    When I click the link my input boxes aren't changing at all......

    help :)

    Many many thanks

    Amy
    , May 5, 2006
    #1
    1. Advertising

  2. ASM Guest

    Re: changing css bu javascript for all input boxes with the samename

    a écrit :
    >
    > <script>
    > function change_class(var_type)
    > {


    // if your form is the 1st in your file what say these alerts ?
    alert('dom = '+document.getElementsByName('ship_owner[]').length);
    alert('js = '+document.forms[0].elements['ship_owner[]'].length);

    > for (i=0; i<document.getElementsByName('ship_owner[]').length; i++)
    > {
    >
    > document.getElementsByName('ship_owner[]').style.className="input_to_text";
    > }
    > }
    > </script>
    >
    >
    > I have the following style sheet also in my head.
    >
    > <style>
    > <!--
    > input_to_text {
    > border: 1px solid #000;
    > background: #987;
    > padding: 1px;
    > Font-family: Veranda;


    font-family: Veranda;

    > font-size: 10px;
    > color: #fff;
    > font-weight: bold;
    > }


    /* don't forget --> in end */

    -->

    > </style>





    --
    Stephane Moriaux et son [moins] vieux Mac
    ASM, May 5, 2006
    #2
    1. Advertising

  3. Re: changing css by javascript for all input boxes with the samename

    wrote:
    > Hi all,
    >
    > I know I'm doign something really daft, but I can't get this to
    > work...
    >
    > I have a form with a bunch of inputs called ship_owner[] - why the
    > []? Because I'm submitting this page though php and the [] put the data
    > into an array in the post.... anywhat.
    >
    > I have a link <a href="javascript:change_class()" >Block mode</a> to
    > call the following function that's in my head section.
    >
    >
    > <script>
    > function change_class(var_type)
    > {
    > for (i=0; i<document.getElementsByName('ship_owner[]').length; i++)
    > {
    >
    > document.getElementsByName('ship_owner[]').style.className="input_to_text";
    >


    That should be

    var inputs = document.getElementsByName("ship_owner[]");
    for (var i = 0; i < inputs.length; i++)
    inputs.className = "input_to_text";


    1. "className" is a property of the Element, not it's style property.

    2. Avoid multiple calls to functions just for efficiency. <span
    class="GreybeardDeveloper">(Don't programmers think about things like
    this nowadays?)</span>

    > }
    > </script>
    >
    >
    > I have the following style sheet also in my head.
    >
    > <style>
    > <!--
    > input_to_text {
    > border: 1px solid #000;
    > background: #987;
    > padding: 1px;
    > Font-family: Veranda;
    > font-size: 10px;
    > color: #fff;
    > font-weight: bold;


    Try putting it into your document then!

    ;-)

    ......

    Nige
    TheBagbournes, May 6, 2006
    #3
  4. wrote:
    <snip>
    > I have a link <a href="javascript:change_class()" >Block mode</a>

    <snip>

    Do not ever use javascript pseudo-protocol HREFs as Windows IE (and a
    few other browsers) takes their activation as representing navigation,
    and that puts the current page into a 'waiting' state, pending its
    replacement. In that 'waiting' state various previously functional
    browser features stop working. Basically, once a user clicks such a link
    all bets are off as to what the browser may subsequently do. Use a
    default-action cancelling onclick handler to trigger the function
    instead.

    Richard.
    Richard Cornford, May 6, 2006
    #4
  5. ASM wrote:
    > a écrit :

    <snip>
    >> <style>
    >> <!--
    >> input_to_text {
    >> border: 1px solid #000;
    >> background: #987;
    >> padding: 1px;
    >> Font-family: Veranda;

    >
    > font-family: Veranda;


    Should not matter, as CSS property names used in STYLE elements are case
    insensitive.

    >> font-size: 10px;
    >> color: #fff;
    >> font-weight: bold;
    >> }

    >
    > /* don't forget --> in end */


    Or forget the <!-- at the beginning, as it is redundant.

    Richard.
    Richard Cornford, May 6, 2006
    #5
  6. Marcello Guest

    Hi guys;

    I'm not used to use same names for elements, but shouldn't it be

    <script>
    ....
    for (i=0; i<document.getElementsByName('ship_owner').length; i++)
    {

    document.getElementsByName('ship_owner').style.className="input_to_tex­t";

    }
    ....</script>

    instead? I removed the '[]' from the function calls. I believe by using
    just the name itself the function will return an array.

    Too bullshitty?
    Marcello, May 8, 2006
    #6
  7. Randy Webb Guest

    Re: changing css bu javascript for all input boxes with the samename

    Marcello said the following on 5/7/2006 8:25 PM:
    > Hi guys;
    >
    > I'm not used to use same names for elements, but shouldn't it be


    It is used in PHP where any elements that have a common name of
    fieldName[], when submitted, are automatically put into an Array for
    processing.

    > <script>
    > ....
    > for (i=0; i<document.getElementsByName('ship_owner').length; i++)
    > {
    >
    > document.getElementsByName('ship_owner').style.className="input_to_tex­t";
    >
    > }


    No, as the name is not ship_owner, but rather it is ship_owner[] so that
    when the page gets submitted to PHP it is already an array on the server
    so that the programmer doesn't have to create an array from it.

    > ....</script>
    >
    > instead? I removed the '[]' from the function calls. I believe by using
    > just the name itself the function will return an array.


    It won't, test it.

    > Too bullshitty?


    It is worse than that.

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
    Randy Webb, May 8, 2006
    #7
  8. Guest

    Hi guys,

    Thanks for all the advice - especially TheBagbournes for reminding me
    the .style bit was wrong.

    BTW you also said... "Avoid multiple calls to functions just for
    efficiency." - groovy, how would you go about this mission - i.e.
    changing the style of all input boxes called 'ship_owner[]'?

    Richard Cornford said that calling the function from the href wasn't
    really the thing to do, so I've gone back to the classic <a href="#"
    onClick="change_class('block')" >Block mode</a> - is this still
    considered ok?

    Now, I've done all you have suggested and I still can't get this to
    work..... below is my page in it's entirety, if you good people would
    cast your eye over it and tell me what daftness I've come up with I
    would be most appreciative! :)

    Thanks :)

    Amy - getting rather annoyed with herself and this page!


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1">

    <style>
    <!--
    input_to_text {
    background: pink;
    }
    -->
    </style>


    <script>

    function change_class(var_type)
    {
    // both of these alerts give me 7
    alert('dom = '+document.getElementsByName('ship_owner[]').length);
    alert('js = '+document.forms[0].elements['ship_owner[]'].length);

    if (var_type == 'block')
    {
    alert('proof I get to here')

    var inputs = document.getElementsByName("ship_owner[]");
    for (var i = 0; i < inputs.length; i++)
    {
    inputs.className = "input_to_text";
    }

    }
    else if (var_type == 'prop')
    {
    // not yet implemented, but will turn the boxes back to boxes
    alert('place-holder');
    }
    }
    </script>


    </head>
    <body>



    <form name="ship_reords" action="block_action.php" method="post">

    <table border="1">
    <tr>
    <th rowspan=1>Ship Name</th>
    <th>Ship Owner</th>
    </tr>
    <tr>
    <td>Alone Hammerhead</td>
    <td><input name="ship_owner[]" class="" value="Amy" /></td>
    </tr>
    <tr>
    <td>Ambitious Bluegill</td>
    <td><input name="ship_owner[]" value="Kate" /></td>
    </tr>
    <tr>
    <td>Dear Angelfish</td>
    <td><input name="ship_owner[]" value="Kate" /></td>
    </tr>
    <tr>
    <td>Decent Bullhead</td>
    <td><input name="ship_owner[]" value="Crew boat?" /></td>
    </tr>
    <tr>
    <td>Fat Carp</td>
    <td><input name="ship_owner[]" value="Amy" /></td>
    </tr>
    <tr>
    <td>Fatty Eel</td>
    <td><input name="ship_owner[]" value="Kate (& shop coffers?)"
    /></td>
    </tr>
    <tr>
    <td>Free Sprat</td>
    <td><input name="ship_owner[]" value="Flag Fleet" /></td>
    </tr>
    </table>

    <a href="#" onClick="change_class('block')" >Block mode</a>

    <input type="submit" value="submit"/>
    </form>

    </body>
    </html>
    , May 8, 2006
    #8
  9. Amykate Guest

    >hits head on desk repeatedly<

    if I add a . before input_to_text in my style definition it all works!

    <style>
    <!--
    ..input_to_text {
    background-color: pink;
    }
    -->
    </style>

    Thank you all for all your help :)

    Amy - relieved
    Amykate, May 8, 2006
    #9
  10. Randy Webb Guest

    Re: changing css bu javascript for all input boxes with the samename

    said the following on 5/8/2006 4:12 AM:
    > Hi guys,
    >
    > Thanks for all the advice - especially TheBagbournes for reminding me
    > the .style bit was wrong.
    >
    > BTW you also said... "Avoid multiple calls to functions just for
    > efficiency." - groovy, how would you go about this mission - i.e.
    > changing the style of all input boxes called 'ship_owner[]'?
    >
    > Richard Cornford said that calling the function from the href wasn't
    > really the thing to do, so I've gone back to the classic <a href="#"
    > onClick="change_class('block')" >Block mode</a> - is this still
    > considered ok?


    After you click the link, watch the location bar. It will append # to
    the URL. You can prevent that by returning false from the onclick event
    handler:

    onclick="change_class('block');return false"

    Or better:

    onclick="return change_class('block')"

    And have the function return true or false.

    If the only purpose of the element is to invoke a JS function, use a
    button instead:

    <button onclick="change_class('block')">Block Mode</button>

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
    Randy Webb, May 8, 2006
    #10
  11. wrote:

    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    > "http://www.w3.org/TR/html4/loose.dtd">
    > <html>
    > <head>
    > <title></title>


    <URL:http://www.w3.org/QA/Tips/good-titles>

    And a bit more indentation would be better.

    > <meta http-equiv="Content-Type" content="text/html;
    > charset=iso-8859-1">


    Can/should be omitted if served via HTTP at first; send the correct
    HTTP header instead, it will take precedence over this anyway.

    > <style>


    The `type' attribute is required for `style' and `script' elements:

    <style type="text/css">

    See also <URL:http://validator.w3.org/>.

    > <!--
    > input_to_text {
    > background: pink;


    This color name is not yet part of a Web standard, and it is intended for
    for SVG, not HTML:

    <URL:http://www.w3.org/TR/css3-color/#svg-color>

    Do not rely on it. (The color value it represents is not Truly Web-safe
    anyway; the nearest Truly Web-safe color value is #fcc.)

    If you declare only the background color, use `background-color' instead
    of `background'. And if you declare the background color, declare the
    foreground colors as well (and vice-versa):

    <URL:http://www.w3.org/QA/Tips/color>

    > }
    > -->
    > </style>
    >
    >
    > <script>


    See above.

    <script type="text/javascript">

    > function change_class(var_type)
    > {
    > // both of these alerts give me 7


    Do not indent your code using tabs (at least not when posting), use
    multiples of 2 or 4 spaces.

    [fixed indentation]
    > alert('dom = '+document.getElementsByName('ship_owner[]').length);
    > alert('js = '+document.forms[0].elements['ship_owner[]'].length);
    >
    > if (var_type == 'block')
    > {
    > alert('proof I get to here')
    > var inputs = document.getElementsByName("ship_owner[]");


    Since this relies on W3C DOM Level 1, it will break in older
    user agents, although it could have been avoided (see below):

    function change_class(o, var_type)
    {
    if (o && o.form && o.form.elements)
    {
    if (var_type == 'block')
    {
    // ...
    var inputs = o.form.elements["ship_owner[]"];
    if (inputs)
    {

    > for (var i = 0; i < inputs.length; i++)
    > {
    > inputs.className = "input_to_text";
    > }


    Since order does not matter here,

    for (var i = inputs.length; i--;)
    {
    inputs.className = "input_to_text";
    }

    is even more efficient. Be sure to feature-test the `className'
    property before you access it.

    > [...]
    > <form name="ship_reords" action="block_action.php" method="post">


    Your `form' element probably does not need a name.
    See <news:>, a.o.

    > <table border="1">


    Use only CSS for formatting, not deprecated format attributes.

    > [...]
    > <tr>
    > <td>Alone Hammerhead</td>
    > <td><input name="ship_owner[]" class="" value="Amy" /></td>


    This is declared HTML, not XHTML. Omit the `/'. (In HTML, `<... />' is
    equivalent to `<...>&gt;' as per built-in SHORTTAG feature. It is only
    that _Web browsers_ (only a subset of HTML user agents) tend to implement
    HTML insufficiently, and then do error correction; avoid that.)

    > [...]
    > <a href="#" onClick="change_class('block')" >Block mode</a>


    You need to cancel the click event, else navigation to the undefined target
    `#' will take place:

    <a href="#" onClick="change_class('block'); return false;">Block mode</a>

    However, this feature will not work without client-side script support at
    all. So you should create the link with client-side scripting:

    <script type="text/javascript">
    document.write('<a href="#"'
    + ' onclick="change_class(this, \'block\'); return false;"'
    + '>Block mode<\/a>');
    </script>

    A (formatted) button would be better suited for the task, though:

    <script type="text/javascript">
    document.write('<input type="button"'
    + ' onclick="change_class(this, \'block\');"'
    + '>Block mode<\/a>');
    </script>

    > <input type="submit" value="submit"/>

    ^
    See above. And I got the idea that control labels should start uppercase.


    PointedEars
    --
    Multiple exclamation marks are a sure sign of a diseased mind.
    -- Terry Pratchett
    Thomas 'PointedEars' Lahn, May 17, 2006
    #11
  12. Randy Webb Guest

    Re: changing css bu javascript for all input boxes with the samename

    Thomas 'PointedEars' Lahn posted the following on 17th of May in the
    year 2006 of the proleptic Gregorian Calendar in reply to a post that is
    ancient in terms of Usenet. Yet, in his almighty moment of ignorance
    though it important to post the following:
    > wrote:
    >
    >> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    >> "http://www.w3.org/TR/html4/loose.dtd">
    >> <html>
    >> <head>
    >> <title></title>

    >
    > <URL:http://www.w3.org/QA/Tips/good-titles>
    >
    > And a bit more indentation would be better.


    Irrelevant to the question.

    >> <meta http-equiv="Content-Type" content="text/html;
    >> charset=iso-8859-1">

    >
    > Can/should be omitted if served via HTTP at first; send the correct
    > HTTP header instead, it will take precedence over this anyway.


    Irrelevant to the question.

    >> <style>

    >
    > The `type' attribute is required for `style' and `script' elements:
    >
    > <style type="text/css">
    >
    > See also <URL:http://validator.w3.org/>.


    Decent information but guess what? Yep: Irrelevant to the question.

    >> <!--
    >> input_to_text {
    >> background: pink;

    >
    > This color name is not yet part of a Web standard, and it is intended for
    > for SVG, not HTML:
    >
    > <URL:http://www.w3.org/TR/css3-color/#svg-color>
    >
    > Do not rely on it. (The color value it represents is not Truly Web-safe
    > anyway; the nearest Truly Web-safe color value is #fcc.)
    >
    > If you declare only the background color, use `background-color' instead
    > of `background'. And if you declare the background color, declare the
    > foreground colors as well (and vice-versa):
    >
    > <URL:http://www.w3.org/QA/Tips/color>


    Again, decent information but guess what? Right again:
    Irrelevant to the question.

    And, OT to comp.lang.javascript

    >> }
    >> -->
    >> </style>
    >>
    >>
    >> <script>

    >
    > See above.
    >
    > <script type="text/javascript">


    Irrelevant to the question.

    >> function change_class(var_type)
    >> {
    >> // both of these alerts give me 7

    >
    > Do not indent your code using tabs (at least not when posting), use
    > multiples of 2 or 4 spaces.


    Use whatever indentation you want, as long as it doesn't wrap when posted.

    > [fixed indentation]
    >> alert('dom = '+document.getElementsByName('ship_owner[]').length);
    >> alert('js = '+document.forms[0].elements['ship_owner[]'].length);
    >>
    >> if (var_type == 'block')
    >> {
    >> alert('proof I get to here')
    >> var inputs = document.getElementsByName("ship_owner[]");

    >
    > Since this relies on W3C DOM Level 1, it will break in older
    > user agents, although it could have been avoided (see below):


    <snipped Thomas' attempt at coding>

    >> [...]
    >> <form name="ship_reords" action="block_action.php" method="post">

    >
    > Your `form' element probably does not need a name.
    > See <news:>, a.o.


    <sigh> Once again: Irrelevant to the question.

    >> <table border="1">

    >
    > Use only CSS for formatting, not deprecated format attributes.


    Ditto.
    Irrelevant to the question.
    OT in comp.lang.javascript.

    <snipped the rest of his ramblings, as 99% of it is irrelevant to the
    question and OT to comp.lang.javascript>

    P.S. Did de.comp.* die down to cause him to return here?

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
    Randy Webb, May 18, 2006
    #12
  13. JRS: In article <>, dated Wed, 17 May
    2006 19:31:54 remote, seen in news:comp.lang.javascript, Randy Webb
    <> posted :
    >Thomas 'PointedEars' Lahn posted the following on 17th of May in the
    >year 2006 of the proleptic Gregorian Calendar in reply to a post that is
    >ancient in terms of Usenet.


    Incorrect.

    In the British Empire and Colonies, which means you, the proleptic part
    of the Gregorian calendar does not apply after the end of 1752-09-13
    pGc.

    In the regions most directly under Papal influence, it does not apply
    after 1582-10-14 pGc.

    In the Lahnish regions, the change was generally completed by early
    1700.

    In Protestant Germany, 1700 was very much not a leap year; February
    finished after the 18th.

    But it's good to see that your system allows you to use non-FFF dates in
    attributions.

    --
    © John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 MIME. ©
    Web <URL:http://www.merlyn.demon.co.uk/> - w. FAQish topics, links, acronyms
    PAS EXE etc : <URL:http://www.merlyn.demon.co.uk/programs/> - see 00index.htm
    Dates - miscdate.htm moredate.htm js-dates.htm pas-time.htm critdate.htm etc.
    Dr John Stockton, May 18, 2006
    #13
  14. Randy Webb Guest

    Re: changing css bu javascript for all input boxes with the samename

    Dr John Stockton said the following on 5/18/2006 5:27 PM:
    > JRS: In article <>, dated Wed, 17 May
    > 2006 19:31:54 remote, seen in news:comp.lang.javascript, Randy Webb
    > <> posted :
    >> Thomas 'PointedEars' Lahn posted the following on 17th of May in the
    >> year 2006 of the proleptic Gregorian Calendar in reply to a post that is
    >> ancient in terms of Usenet.

    >
    > Incorrect.
    >
    > In the British Empire and Colonies, which means you, the proleptic part
    > of the Gregorian calendar does not apply after the end of 1752-09-13
    > pGc.


    The USA is part of some "Colonies"? Surely you jest. No part of it has
    been a Colony for over 225 years. Or is that an ancient term you are using?

    > But it's good to see that your system allows you to use non-FFF dates in
    > attributions.


    My system allows me to use any date format I choose and it uses the
    format I tell it to use.

    But, all in all, thanks for my daily laughter.

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
    Randy Webb, May 19, 2006
    #14
    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. Stefan Mueller
    Replies:
    5
    Views:
    12,349
    jamesxa
    Jun 16, 2009
  2. =?Utf-8?B?TmVpbCBTdGV2ZW50b24=?=

    CSS for form labels and input boxes

    =?Utf-8?B?TmVpbCBTdGV2ZW50b24=?=, Nov 11, 2006, in forum: ASP .Net
    Replies:
    0
    Views:
    386
    =?Utf-8?B?TmVpbCBTdGV2ZW50b24=?=
    Nov 11, 2006
  3. charlie caroff
    Replies:
    2
    Views:
    411
    Jukka K. Korpela
    Jun 18, 2007
  4. Ellie100

    Multiple text boxes with the same name

    Ellie100, Jul 23, 2003, in forum: Javascript
    Replies:
    2
    Views:
    107
    Ellie100
    Jul 25, 2003
  5. Suresh
    Replies:
    2
    Views:
    385
    Suresh
    Apr 22, 2004
Loading...

Share This Page