Prev: hide URL in status bar with onmouseover - help
Next: when string is not a string
From: RVince on 12 May 2010 16:03
I have a series of href's such that if the user clicks on them,
certain parameters are passed to the href's url.
I also have a select box, the value of which, of course, is not being
passed to the url's in the hrefs.

This is presented in the code below. Can someone please show me how to
pass the parameter for the "datacol" select in the href's, using
javadcript? Thanks, RVince

<table>
<tr><td><a href=rungraphno?queryno=9&graphtype=0>3D Columns</a>
</td><td><a href=rungraphno?queryno=9&graphtype=1>3D Pie</a>
</td><td><a href=rungraphno?queryno=9&graphtype=2>2D Pie</a>
</td><td><a href=rungraphno?queryno=9&graphtype=3>2D Doughnut</a>
</td><td><a href=rungraphno?queryno=9&graphtype=4>Line</a>
</td><td>Series:</td><td><select id="datacol" name="datacol" size="1"
>
<option value=3>Avg Sale to Date</option>
<option value=4>Sales Vol to Date</option>
<option value=5>Goal to Date</option>
<option value=6>Diff to Date</option>
<option value=7>Sales to Catch Up</option>
<option value=8>Goal for Month</option>
<option value=9>Close %</option>
<option value=10>UPS Needed for Month</option>
</select>
</td></tr>
</table>
From: RobG on 12 May 2010 21:57
On May 13, 6:03 am, RVince <rvinc...(a)gmail.com> wrote:
> I have a series of href's such that if the user clicks on them,
> certain parameters are passed to the href's url.
> I also have a select box, the value of which, of course, is not being
> passed to the url's in the hrefs.
>
> This is presented in the code below. Can someone please show me how to
> pass the parameter for the "datacol" select in the href's, using
> javadcript? Thanks, RVince
>
> <table>
> <tr><td><a href=rungraphno?queryno=9&graphtype=0>3D Columns</a>

HTML attribute values should be quoted if they contain other than a
limited set of characters. It is good practice to always quote them.

> </td><td><a href=rungraphno?queryno=9&graphtype=1>3D Pie</a>
> </td><td><a href=rungraphno?queryno=9&graphtype=2>2D Pie</a>
> </td><td><a href=rungraphno?queryno=9&graphtype=3>2D Doughnut</a>
> </td><td><a href=rungraphno?queryno=9&graphtype=4>Line</a>
> </td><td>Series:</td><td><select id="datacol" name="datacol" size="1"

Missing closing ">".

>
> <option value=3>Avg Sale to Date</option>
> <option value=4>Sales Vol to Date</option>
> <option value=5>Goal to Date</option>
> <option value=6>Diff to Date</option>
> <option value=7>Sales to Catch Up</option>
> <option value=8>Goal for Month</option>
> <option value=9>Close %</option>
> <option value=10>UPS Needed for Month</option>
> </select>
> </td></tr>
> </table>

There are a number of strategies you can employ, such as:

1. Add a listener to every link that uses the select's value to update
the href when the link clicked
2. Add a listener to the select to update every link's href property
whenever the select's value changes
3. Add a listener to the table, tr or tbody to do what #1 does, but
only using one listener not one for every link (i.e. event delegation)

My preference is #3, so you have something like:

<script type="text/javascript">

function updateURL(evt) {
var src = evt.target || evt.srcElement,
id = 'datacol',
el = document.getElementById(id),
value = el && el.value;

if (src && src.tagName && src.tagName.toLowerCase() == 'a') {
src.href = src.href + '&' + id + '=' + value;

// debug
alert(src.href);
}
}
</script>

And add the listener to the TR:

<table>
<tr onclick="updateURL(event);">
<td><a href="rungraphno?queryno=9&graphtype=0">3D Columns</a>
<td><a href="rungraphno?queryno=9&graphtype=1">3D Pie</a>
...

You may wish to add the listener dynamically and you may require a
more robust function for getting the value of the select element:

<URL: http://www.jibbering.com/faq/#formControlAccess >


--
Rob
From: Thomas 'PointedEars' Lahn on 13 May 2010 05:47
RobG wrote:

> RVince wrote:
>> I have a series of href's such that if the user clicks on them,
>> certain parameters are passed to the href's url.
>> I also have a select box, the value of which, of course, is not being
>> passed to the url's in the hrefs.
>>
>> This is presented in the code below. Can someone please show me how to
>> pass the parameter for the "datacol" select in the href's, using
>> javadcript? Thanks, RVince
>>
>> <table>
>> <tr><td><a href=rungraphno?queryno=9&graphtype=0>3D Columns</a>
>
> HTML attribute values should be quoted if they contain other than a
> limited set of characters. It is good practice to always quote them.

s/should/MUST/

In addition, `&' MUST be escaped in this attribute value so that
it does not delimit an (undefined) entity reference `&graphtype':

<a href="rungraphno?queryno=9&amp;graphtype=0">3D Columns</a>

<http://www.w3.org/TR/REC-html40/intro/sgmltut.html#h-3.2.2>
<http://validator.w3.org/>

> function updateURL(evt) {
> var src = evt.target || evt.srcElement,
> id = 'datacol',
> el = document.getElementById(id),
> value = el && el.value;
>
> if (src && src.tagName && src.tagName.toLowerCase() == 'a') {
> src.href = src.href + '&' + id + '=' + value;

Do not do that, it breaks navigation. Prevent the default action for the
`click' event and assign to `window.location' instead. It is best to design
the requirement of navigation out of the scripted part of the application,
of course.


PointedEars
--
Danny Goodman's books are out of date and teach practices that are
positively harmful for cross-browser scripting.
-- Richard Cornford, cljs, <cife6q$253$1$8300dec7(a)news.demon.co.uk> (2004)
From: RVince on 13 May 2010 07:16
Guys,

Forgive my typos in the post -- I was trying to present a more
simplified example for the porpose of providing things in a more
straightforward manner.
PointedEars -- you said "Do not do that...Prevent the default action
for the `click' event and assign to `window.location' instead."
I'm not understanding what you mean -- can you show me by way of an
example please? (preventing the default click event.....and what would
I assign to window.location?) Thanks, RVince

>
> > function updateURL(evt) {
> >   var src = evt.target || evt.srcElement,
> >       id = 'datacol',
> >       el = document.getElementById(id),
> >       value = el && el.value;
>
> >   if (src && src.tagName && src.tagName.toLowerCase() == 'a') {
> >     src.href = src.href + '&' + id + '=' + value;
>
> Do not do that, it breaks navigation.  Prevent the default action for the
> `click' event and assign to `window.location' instead.  It is best to design
> the requirement of navigation out of the scripted part of the application,
> of course.
>
From: RobG on 13 May 2010 21:08
On May 13, 9:16 pm, RVince <rvinc...(a)gmail.com> wrote:
> Guys,

Please don't top-post here, reply below trimmed quotes.


> Forgive my typos in the post -- I was trying to present a more
> simplified example for the porpose of providing things in a more
> straightforward manner.

That's fine, however we don't know if your issues are from the typos
or have some other cause. Best to make sure posted code "works" to the
extent that it can be cut and pasted and shows the issue.

> PointedEars -- you said "Do not do that...Prevent the default action
> for the `click' event and assign to `window.location' instead."

He means don't modify the href attribute of the link, instead cancel
the navigation and assign the value to window.location. The effect is
the same, however he says modifying the href "breaks navigation".


> I'm not understanding what you mean -- can you show me by way of an
> example please? (preventing the default click event.....and what would
> I assign to window.location?) Thanks, RVince

To stop the browser navigating to a link, the onclick handler has to
return false or in event delegation, the event object itself must be
used by calling its preventDefault method (if it has one) or setting
its returnValue property to false (see below).

The value you assign to window.location is the one I suggested be
assigned to the href.


> > > function updateURL(evt) {
> > > var src = evt.target || evt.srcElement,
> > > id = 'datacol',
> > > el = document.getElementById(id),
> > > value = el && el.value;
>
> > > if (src && src.tagName && src.tagName.toLowerCase() == 'a') {
> > > src.href = src.href + '&' + id + '=' + value;
>
> > Do not do that, it breaks navigation. Prevent the default action for the
> > `click' event and assign to `window.location' instead. It is best to design
> > the requirement of navigation out of the scripted part of the application,
> > of course.

So instead of assigning to src.href, assign to window.location. The
new function becomes:

function updateURL(e) {
var src = e.target || e.srcElement,
id = 'datacol',
el = document.getElementById(id),
value = el && el.value;

if (src && src.tagName && src.tagName.toLowerCase() == 'a') {

// Don't follow the link
if (e.preventDefault){
e.preventDefault();
}
e.returnValue = false;

// debug
alert(src.href + '&' + id + '=' + value);

// Assign to window.location
window.location = src.href + '&' + id + '=' + value;
}
}

You may also want to test src.href before using it.

As an alternative, have you considered a straight form with no
javascript? It will be more reliable, allowing for simple fallback if
feature detection shows your script isn't going to work. It is a good
strategy to have pages work without any script, then use scripting to
improve the UI.

Most Google pages (even their maps) work with scripting disabled,
however the interface isn't as flash as if scripting is enabled.
That's not necessarily an endorsement of everything Google, just an
example that you can make quite complex pages fully functional using
just HTML, then improve things with script. It is the most robust way
to provide fallback to basic functionality.

e.g. your HTML could be:

<form action="rungraphno">
<table style="border: 1px solid #999;">
<tr onclick="updateURL(event);">
<td><input type="hidden" name="queryno" value="9">
<label for="rb0">
<input type="radio" name="graphtype" id="rb0"
value="0">3D Columns</label>
<br><label for="rb1">
<input type="radio" name="graphtype" id="rb1"
value="1">3D Pie</label>
<br><label for="rb2">
<input type="radio" name="graphtype" id="rb2"
value="2">2D Pie</label>
<br><label for="rb3">
<input type="radio" name="graphtype" id="rb3"
value="3">2D Doughnut</label>
<br><label for="rb4">
<input type="radio" name="graphtype" id="rb4"
value="4" checked>Line</label>
<td>Series:
<td><select id="datacol" name="datacol" size="1">
<option value=3>Avg Sale to Date</option>
<option value=4>Sales Vol to Date</option>
<option value=5>Goal to Date</option>
<option value=6>Diff to Date</option>
<option value=7>Sales to Catch Up</option>
<option value=8>Goal for Month</option>
<option value=9>Close %</option>
<option value=10>UPS Needed for Month</option>
</select>
<tr>
<td colspan="2"><input type="reset"><input type="submit">
</table>
</form>

Then at some time after the HTML is loaded and on or before the load
event, change the UI to whatever using script and appropriate feature
detection.


--
Rob
 |  Next  |  Last
Pages: 1 2
Prev: hide URL in status bar with onmouseover - help
Next: when string is not a string