Question

我有这样的表格：

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

我想知道：

为什么它会将值“all”设置为艺术家字段？
这是Javascript吗？还是简单的HTML？
最好用jQuery / JS Handler翻译这个或者这更好吗？（光，交叉浏览器等等）

希望你能帮助我！

Answer 1

您需要更改
this.form.artist.value=all;
到
this.parentNode.artist.value='all';

你使用它的方式有两个错误的假设

它假定表单中的链接具有表单属性..它们不具有。只有输入元素具有表单属性。因为链接是表单元素的直接子元素，所以使用parentNode应该可以解决特定情况。
它期望名称的变量全部存在，并尝试将该变量的内容放入输入中。通过将所有包装成单引号'来使所有成为字符串应该可以做到你想要的。

演示 http://jsfiddle.net/gaby/vzuFD/

使用jQuery，你可以做到

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

和

<script type="text/javascript">
  $(function(){
    $('#all').click(function(){
        $(this)
            .closest('form')
            .find(':input[name=artist]')
            .val('all')
            .end()
            .submit();
    });
  });
</script>

演示 http://jsfiddle.net/gaby/vzuFD/1/

Answer 2

如果您想使用此JavaScript行，请使用以下代码更改您的代码：this.form.artist.value="all"
是的，它是带有简单内联JavaScript的HTML。
您也可以通过以下更改来使用JQuery：

首先使用以下内容更改HTML代码：

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

然后使用以下jQuery：

$('#linkAll').click( function(){
  $('#artist').val('All');
});

Answer 3

all是对不存在的变量的引用。 'all'是一个包含文本“all”的字符串。

此外，您假设this.form存在（但可能不存在）。您可以改为使用parentNode，但如果移动<a>代码，则可能会停止工作。

所以：

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

通常首选不在HTML中编写onclick个处理程序，而是在专用的Javascript块/文件中将所有的Javascript写入其他地方。它保持了良好的分离。

^{我们也更喜欢e.preventDefault到return false，虽然这对于跨浏览器来说有点棘手，所以我会留下另一个问题。）}

以下是一个展示整体更好解决方案的示例：

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

使用jQuery的这个版本可能如下所示：

<script type="text/javascript">
var $theLink = $('#theLink');
var $theForm = $('#theForm');
$theLink.click(function() {
   $theForm.find('[name=artist]').val('all');
   $theForm.submit();

   return false;
});
</script>

关于这个的问题。来自“操作”

3 个答案: