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

[amykimber]

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

 

[ASM]

(e-mail address removed) 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 */

-->

 

[TheBagbournes]

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

}
</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

 

[Richard Cornford]

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]

(e-mail address removed) a écrit :

font-family: Veranda;

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

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

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

Richard.

 

[Marcello]

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?

 

[Randy Webb]

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.

 

[amykimber]

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>

 

[Amykate]

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

 

[Randy Webb]

(e-mail address removed) 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>

 

[Thomas 'PointedEars' Lahn]

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

<!--
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):

}
-->
</style>


<script>

See above.

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.

<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>');

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

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


PointedEars

 

[Randy Webb]

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:

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

And a bit more indentation would be better.

Irrelevant to the question.

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.

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.

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

See above.

<script type="text/javascript">

Irrelevant to the question.

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

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

Your `form' element probably does not need a name.
See <a.o.

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

 

[Dr John Stockton]

JRS: In article <[email protected]>, dated Wed, 17 May
2006 19:31:54 remote, seen in Randy Webb

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.

 

[Randy Webb]

Dr John Stockton said the following on 5/18/2006 5:27 PM:

JRS: In article <[email protected]>, dated Wed, 17 May
2006 19:31:54 remote, seen in Randy Webb


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.