2011-09-17 42 views
1

爲了在添加到購物車之前自定義產品,我使用了兩個提交點的php表單 - 上傳圖像&附加文本。每次點擊按鈕後頁面都不會刷新到頂部,我想將錨點設置爲更接近下一步,並使用該按鈕作爲<a href="#"></a>在PHP表單中提交按鈕是否也可以成爲主播?

這是上傳按鈕代碼:

<div id="virtueupl_form" style='width:100%'> 
    <form id="adminForm" name="adminForm" action="<?php echo JRoute::_('index.php?option=com_virtueupload&view=form'); ?>" method="post" enctype="multipart/form-data" onSubmit="return checkForm();"> 
    <table width="130px" border="0" cellpadding="0" cellspacing="0"> 
<tr> 
<td height="70px" colspan="2" valign="top"> 
    <label for="file"><?php echo VUOutput::_('YLANG_FORM_LBL_FILE'); ?></label>  <br/> 
    <input name="file" type="file" /> 
    <input id="upload_button" class="button" type="submit" value="<?php echo VUOutput::_('YLANG_UPLOAD'); ?>" onclick="this.form.status.value = '<?php echo VUOutput::_('YLANG_STAT_INITUPL'); ?> '; $('spinner').style.display = 'block'; this.form.status.style.color = '#339900'; " /> 
</td> 
</tr> 

哪裏錨標記屬於它進一步發送到一個地方下相同的形式,一旦按鈕被點擊?同樣,在「附加文本」之後,我想避免要求用戶從頁面頂部向下滾動到表單的下一部分。我嘗試了各種各樣的安排,但沒有真正知道我在做什麼,我沒有成功。

當我搜索這個論壇(和其他人)時,我只能找到簡單的html錨結構或關於使用提交按鈕與文本鏈接的討論。我想我明白錨是如何工作的,我只是無法弄清楚如何在一個窗體中配置它,並且使用同一個按鈕觸發的其他事件。從我看來,'onclick'命令似乎也很重要,但對於我有限的經驗,我找不到任何明顯的東西。也許我不是在尋找合適的條款?

謝謝。

回答

5

提交按鈕是特殊按鈕,會自動觸發表單的submit事件。使用任何其他方式,您必須從Javascript手動觸發事件。

例如,使用錨,你就必須像

<form id="frm" name="frm" action="" method="get"> 
    <input type="hidden" name="someinput1" value="hello" /> 
    <input type="hidden" name="someinput2" value="world" /> 
    <a href="#" onclick="document.forms['frm'].submit();">Submit</a> 
</form> 

通常情況下,使用一個提交按鈕是優選的,而不是任何其他方法,因爲它不依賴於JavaScript,默認爲本地化瀏覽器的語言環境。你實際上可以有一個提交按鈕,只需使用CSS進行設置即可。在同一個表單中有多個提交按鈕也很好。

此外,請注意,一些示例會觸發事件from the href attribute,但我不推薦此IMO,因爲它向用戶的錨提示公開了Javascript(當鼠標懸停的鏈接時,您可以看到它的內容是href屬性在頁面底部)。

最後,您可以使用任何元素來觸發表單提交事件!考慮這個例子(使用jQuery):

<form id="frm" name="frm" action="" method="get"> 
    <input type="hidden" name="someinput1" value="hello" /> 
    <input type="hidden" name="someinput2" value="world" /> 
    <div id="elemSubmit" style="text-align:center; border:1px solid black;">Submit</div> 
</form> 
<script type="text/javascript"> 
    $(function() { 
     $('elemSubmit').click(function() { $('#frm').submit(); }); 
    }); 
</script> 
相關問題