如何使<a>表现与<input type="image" />相同？

Question

在我们的网络应用程序中，我们有一些消息功能，可以向其他成员发送消息。这个表单正在进行界面升级，我需要替换一些功能：

<input type="image" name="cancel" src="/rpc/button/?text=Cancel" />
<input type="image" name="delete" src="/rpc/button/?text=Delete Draft" />
<input type="image" name="send" src="/rpc/button/?text=Send Message" />
<input type="image" name="save" src="/rpc/button/?text=Save Draft" />

我需要将那些按钮改为使用我们有的新CSS按钮：

<a href="" class="button">Cancel</a>

我曾尝试过这样做，虽然可以提交表单，但似乎name="cancel"被丢失了，表单只是简单地提交而已。

<a class="button" name="cancel" href="javascript:" onclick="$('#frmCompose').submit();">Cancel</a>

因为我们时间紧迫，没有时间重写后端功能。

我该如何用标签替换这些旧的，并仍然传递name属性？如果可能的话，我想避免为或创建新的CSS样式。

- velocityhead

---

<a href="?name=cancel" class="button">Cancel</a> - zb'

@eicto：我认为他也想提交表单的其余部分。 - gen_Eric

我认为你需要使用JS来将值放入隐藏字段中进行提交。 - Dave Newton

@Rocket 正确，还有一个to、subject和body也会被提交。 - velocityhead

另外，为什么要使用<a>标签？按钮/图片输入可以使用CSS进行样式设置以实现相同的效果。 - zb'

Answer 1

虽然不太美观，但可以使用隐藏表单字段：

<input type="hidden" id="clickedname" name="" value="" />

并且

<a class="button" name="cancel" href="javascript:" onclick="$('#clickedname').value = this.name; $('#frmCompose').submit();">Cancel</a>
                                                            ^^^^^^^^^^^^^^^^^^^^^^^^^

调整名称/值的分配以适应 - 我记不清图像输入如何提交自己。

- Marc B

Answer 2

你需要使用JS，例如将值放入隐藏字段进行提交，然后提交。

我建议编写一个小型实用程序函数来替换你的 onclick 属性值。更好的做法是在DOM准备就绪后附加功能，使事情不突兀且局部化。

<a class="button" href="#" onclick="submit('cancel')">Cancel</a>

submit 方法会填充隐藏字段并提交表单。如果你真的无法完全更改后端，那么你也可以更改隐藏字段的名称，但是这样做比较麻烦；更改后端以检查“操作”字段或其他类似字段似乎更加合理。

- Dave Newton

Answer 3

如果在您的中添加name="cancel"无效，那么您可能需要在JavaScript中进行一些高级操作。例如：

<input type="hidden" name="placeholder" value="true" />
<a class="button" name="cancel" href="javascript:" onclick="$(this).prev().attr('name', 'cancel'); $('#frmCompose').submit();">Cancel</a>

- Sean Adkinson

---

在这种情况下，我不会使用 prev，那太脆弱了。 - Dave Newton

这是最接近我最终解决方案的答案： <input type="hidden" class="form_action" name="" value="true" /> <a class="square small faded left" href="" onclick="$('.form_action').attr('name', 'cancel');$('#frmCompose').submit();return false;">取消</a>我遇到了额外的困难，因为控制器正在检查： if ($_POST ['cancel_x']) 而不是： if ($_POST ['cancel']) 因为输入是 type="image"。 - velocityhead

@DaveNewton，我同意prev()很脆弱，只是用来说明功能。看起来velocityhead使用了类选择器，这绝对感觉更清洁。 - Sean Adkinson

Answer 4

只有表单元素（<input>、<button>、<textarea>、<select>等）才能向表单提交值。如果要让 <a> 标签这样做，您需要使用 JavaScript 将该值添加到表单中。

一种方法是添加一个隐藏的表单元素，并设置其名称/值。

<a class="button" name="cancel" href="#">Cancel</a>
<input type="hidden" id="buttonClicked" />

然后使用JavaScript（jQuery）：

$(function(){
    $('a.button').click(function(e){
        e.preventDefault();
        $('#buttonClicked').prop({
            name: $(this).prop('name'),
            value: $(this).prop('name')
        });
        $('#frmCompose').submit();
    });
});

- gen_Eric

---

@eicto：是的，没错。在问题中，他使用了$('#frmCompose').submit();，所以我假设他在使用jQuery。 - gen_Eric

这是目前为止最好的解决方案；我错过了它最初是jQuery，因为它没有被标记为这样，而且我看不懂。 - Dave Newton

Answer 5

您可以在表单中添加一个隐藏字段。

<input type="hidden" id="action" value=""/>

然后在onclick事件中设置action的值

$("#action").attr("name","---ActionHere---");

因此，取消变成了：

<a class="button" href="javascript:" onclick='$("#action").attr("name","cancel");$("#frmCompose").submit();'>Cancel</a>

并变成：

<a class="button" href="javascript:" onclick='$("#action").attr("name","send");$("#frmCompose").submit();'>Send</a>

希望这能有所帮助。

- Scott

Answer 6

我认为最简单的方法就是创建一个带有你想要的名称的<input type="hidden" />，像这样：

<input type="hidden" name="cancel" />
<a class="button" href="javascript:" onclick="$('#frmCompose').submit();">Cancel</a>

- Abraham

Answer 7

也许你不需要使用 <a> 标签？

HTML：

<button class="alike">Test</button>
<a href="#">Test</a>​

CSS：

button.alike,a {
 border: 0px;   
 text-decoration: underline;
 color: #00E;
 width: auto;
 cursor: pointer;
 background-color: inherit;
 font-family: 'Times New Roman';
 font-size: 16px;
}​

- zb'