关于this.from.“操作”的问题

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:

1. Why it doenst put the value "all" to the artist field?
2. Is this Javascript? Or easy HTML?
3. 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

1. 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.
2. 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?>" />

    <a href="#" id="theLink">All</a>
</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>