php表单中的提交按钮也可以成为锚点吗？

Question

为了在添加到购物车之前自定义产品,我使用带有两个提交点的php表单 - 上传图像并附加文本.在每次单击按钮后,我不想让页面刷新到顶部,而是希望将锚点设置为更接近下一步并使用按钮作为<a href="#"></a>.

这是上传按钮代码:

    <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'命令也很重要,但我找不到任何明显的有限经验.也许我没有找到合适的条款？

谢谢.

Answer 1

提交按钮是特殊按钮,将自动触发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设置它.并且在同一表单中有多个提交按钮也很好.

另外,还要注意一些例子将触发事件从href属性的,但我不建议这样做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>