Question

在我们的Web应用程序中，我们有一些消息传递功能用于消息传递其他成员。这个表单正在进行整容，我需要替换一些功能：

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

因为我们处于截止日期之前，所以没有时间为此重写后端功能。

如何将这些旧的<input type="image" />替换为<a>代码并仍然传递name属性？我希望尽可能避免为<button>或<input type="submit" />创建新的CSS样式。

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

调整名称/值分配以适应 - 我无法准确记录图像输入如何自我提交。

Answer 2

例如，您需要使用JS将值放入提交的隐藏字段中，然后提交。

我建议编写一个小的实用程序函数来替换onclick属性值。更好的是，在DOM准备好之后附加功能并保持不引人注目和本地化。

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

submit执行您期望的操作，填充隐藏字段，然后提交表单。如果你真的无法改变 all 的后端，那么你也可以改变隐藏字段的名称，但是呃;似乎更改后端以检查“动作”字段或某些东西更清晰。

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>

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();
    });
});

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>

希望这有帮助

Answer 6

我认为最简单的方法就是使用您想要的名称创建<input type="hidden" />，如下所示：

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

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

制作<a> behave the same as <input type="image"/>?</a>

7 个答案: