Question about this.from."operation" - php

Question

I have this form :
<form action="index.php?explore=browse" method="post">
<input type="hidden" name="artist" value="<?=$artist?>" />
<input type="hidden" name="event" value="<?=$event?>" />
<input type="hidden" name="date" value="<?=$date?>" />
<a onclick="this.form.artist.value=all; this.form.submit();return false" href="#">All</a>
</form>
and I'd like to know :
Why it doenst put the value "all" to the artist field?
Is this Javascript? Or easy HTML?
Is better translate this with jQuery/JS Handler or this is better? (light, crossbrowsers..and so on)
Hope you can help me!

Answer 1

You need to change the
this.form.artist.value=all;
to
this.parentNode.artist.value='all';
The way you use it makes two wrong assumptions
it assumes that links inside a form have a form attribute.. They do not. Only input elements have a form attribute. Using parentNode should do the trick for you particular case since the link is a direct child of the form element.
it expects a variable with name all exists and it tries to put the content of that variable in the input.
Making all be a string by wrapping it to single quotes ' should do what you want.
demo at http://jsfiddle.net/gaby/vzuFD/
With jQuery you could do
<form action="index.php?explore=browse" method="post">
<input type="hidden" name="artist" value="<?=$artist?>" />
<input type="hidden" name="event" value="<?=$event?>" />
<input type="hidden" name="date" value="<?=$date?>" />
<a id="all" href="#">All</a>
</form>
and
<script type="text/javascript">
$(function(){
$('#all').click(function(){
$(this)
.closest('form')
.find(':input[name=artist]')
.val('all')
.end()
.submit();
});
});
</script>
demo at http://jsfiddle.net/gaby/vzuFD/1/

Answer 2

If you want to use this JavaScript line then change your code with: this.form.artist.value="all"
Yes it is HTML with simple inline JavaScript.
You can use JQuery also by following changing :
First change your HTML Code with the following:
<form action="index.php?explore=browse" method="post">
<input type="hidden" id="artist" name="artist" value="<?=$artist?>" />
<input type="hidden" name="event" value="<?=$event?>" />
<input type="hidden" name="date" value="<?=$date?>" />
<a id="linkAll" href="#">All</a>
</form>
Then use the following jQuery :
$('#linkAll').click( function(){
$('#artist').val('All');
});

Answer 3

all is a reference to a variable that does not exist. 'all' is a string containing the text "all".
Additionally, you assume that this.form exists (but it likely doesn't). You could use parentNode instead, but this may stop working if you move the <a> tag.
So:
<form action="index.php?explore=browse" method="post">
<input type="hidden" name="artist" value="<?=$artist?>" />
<input type="hidden" name="event" value="<?=$event?>" />
<input type="hidden" name="date" value="<?=$date?>" />
<a onclick="this.parentNode.artist.value='all'; this.parentNode.submit();return false" href="#">All</a>
It's usually preferred not to write onclick handlers inside HTML, instead writing all your Javascript elsewhere in a dedicated Javascript block/file. It keeps things nice and separated.
We also prefer e.preventDefault to return false, here, though that's a little trickier to make cross-browser so I'll leave it for another question.)
Here's an example demonstrating an overall better solution:
<form action="index.php?explore=browse" method="post" id="theForm">
<input type="hidden" name="artist" value="<?=$artist?>" />
<input type="hidden" name="event" value="<?=$event?>" />
<input type="hidden" name="date" value="<?=$date?>" />
All
</form>
<script type="text/javascript">
var theLink = document.getElementById('theLink');
var theForm = document.getElementById('theForm');
theLink.onclick = function() {
theForm.artist.value = 'all';
theForm.submit();
return false;
};
</script>
A version of this with the use of jQuery might look like:
<script type="text/javascript">
var $theLink = $('#theLink');
var $theForm = $('#theForm');
$theLink.click(function() {
$theForm.find('[name=artist]').val('all');
$theForm.submit();
return false;
});
</script>