製作<a>的行爲與<input type =「image」/>相同？

在我們的Web應用程序中，我們有一些消息傳遞功能用於消息傳遞其他成員。這種形式的接受整容，我需要更換一些功能：製作<a>的行爲與<input type =「image」/>相同？

<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"正在消失，而只是形式不提交：

因爲我們是一個最後期限，也沒有T用於爲此重寫後端功能。

我該如何替換這些舊的<input type="image" />與<a>標籤，並仍然沿着name屬性傳遞？如果可能的話，我想避免爲<button>或<input type="submit" />創建新的CSS樣式。

來源

2012-08-29 velocityhead

''Cancel –

@eicto：我認爲他要提交表單的休息了。 –

我想你需要使用JS來爲例如提交一個隱藏字段的值，然後提交。 –

如果將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>

來源

2012-08-29 19:48:31

我不會在這種情況下使用'prev'，這是脆弱的。 –

這是最接近回答我最終溶液： '' 'Cancel' 我有額外的困難，因爲控制器被檢查： '如果（$ _POST [ 'cancel_x']）' 代替如果 '如果（$ _POST [ '取消']）' 因爲輸入是'類型= 「圖像」' – velocityhead

@DaveNewton，我同意prev（）是脆弱的，只是用來說明功能。看起來像velocityhead使用了一個類選擇器，它絕對讓人感覺更乾淨。 –

Uglyish，但使用一個隱藏的表單字段：

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

和

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

調整名稱/值分配，以滿足 - 我不記得確切副手圖像輸入如何提交自己。

來源

2012-08-29 19:47:12

你需要使用JS來爲例如提交一個隱藏字段賦值。

我建議您編寫一個小實用程序函數來替代您的onclick屬性值。更好的是，在DOM準備好之後附加功能，並保持不顯眼和局部化。

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

而且submit做你所期望，填充隱藏字段，並提交表單。如果你真的不能更改後端全部那麼你也可以改變隱藏字段的名稱，但是唉;看起來像改變後端檢查「行動」領域或更清潔。

來源

2012-08-29 19:48:13

只有形成元素（<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(); 
    }); 
});

來源

2012-08-29 19:49:42

這是jquery也 –

@ eicto：是的，是的。在這個問題中，他使用'$（'＃frmCompose'）。submit（）;'，所以我認爲他使用的是jQuery。 –

這是最好的解決方案（迄今爲止）;我錯過了它原來是jQuery，因爲它沒有被標記爲這樣，我無法閱讀。 –

您可以在一個隱藏字段添加到表單

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

然後設定行動的價值在onclick

$("#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>

希望這有助於

來源

2012-08-29 19:52:18 Scott

我認爲最簡單的方法就是創造你想要的名字，像這樣的<input type="hidden" />：

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

來源

2012-08-29 19:54:49 Abraham

可能你不需要使用<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; 
}

來源

2012-08-29 20:07:55

製作<a>的行爲與<input type =「image」/>相同？

回答

相關問題