鐵手劍譜

第3.6式. 從圖像提交表單

問(wèn)題

你想要使用戶(hù)能夠通過(guò)點(diǎn)擊一個(gè)不在HTML表單標(biāo)簽中的圖像來(lái)提交表單。

動(dòng)作要領(lǐng)

適應(yīng)一個(gè)對(duì)JavaScript URL 的鏈接來(lái)提交表單：

<html:link href="javascript:document.myform.submit(  )">
    <html:img page="/submit-form.gif" 
               alt="Submit" border="0"/> 
</html:link>

動(dòng)作變化

Web 應(yīng)用經(jīng)常使用可點(diǎn)擊的圖像來(lái)提交表單而不是僅僅通過(guò)表單按鈕。Struts 的html:image標(biāo)簽可以用來(lái)產(chǎn)生一個(gè)顯示圖像的HTML input type="image" 標(biāo)簽。但是，對(duì)于復(fù)雜的 HTML 布局，并不總是能夠?qū)D像嵌入在表單<form> . . . </form>標(biāo)簽之中。有些時(shí)候，一個(gè) HTML 頁(yè)面可能在頁(yè)面的某一段可能有多個(gè)表單，而提交頁(yè)面的圖像則在頁(yè)面的另一個(gè)區(qū)域。比如，工具條風(fēng)格的圖像按鈕。

上面的方法可以用于從表單之外的圖像提交表單。所顯示的圖像嵌套在html:link標(biāo)簽中。該鏈接通過(guò)執(zhí)行一行JavaScript來(lái)提交表單。在上面的代碼中，JavaScript 將提交名為MyForm 的表單。表單名稱(chēng)必須匹配struts-config.xml文件中所配置的action元素的name屬性。下面是這種方法產(chǎn)生的HTML 代碼：

<a href="javascript:document.myform.submit(  )">
    <img src="/myapp/struts-power.gif"
         border="0" alt="Submit">
</a>

雖然你可以直接使用上述HTML標(biāo)記而不是Struts html標(biāo)簽，如果那樣的話(huà)你將失去那些標(biāo)簽所提供的特征。通過(guò)使用Struts tag，你就不是必須要指定context 名稱(chēng)，并且你可以使圖像名稱(chēng)和替換文本來(lái)自于資源束 (如果你需要的話(huà))。

另一個(gè)辦法是使用html:img 標(biāo)簽的onclick屬性：

<html:img page="/submit-form.gif"
       onclick="document.MyForm.submit( );"
           alt="Submit" border="0"/>

這種方式的缺點(diǎn)是，有些瀏覽器并不提供圖像是可以點(diǎn)擊的一些可視提示線(xiàn)索。因?yàn)閳D像嵌入到一個(gè)鏈接中，大多數(shù)瀏覽器都會(huì)在改變鼠標(biāo)指針以提示該圖像是可以點(diǎn)擊的。

相關(guān)招式

第3.9式會(huì)描述如何在表單的action屬性中指定的地方將表單提交到另外一個(gè)URL。