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

时间:2011-09-17 19:27:40

标签: php onclick anchor

为了在添加到购物车之前自定义产品,我使用的是带有两个提交点的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'命令也很重要,但我找不到任何明显的有限经验。也许我没有找到合适的条款?

谢谢。

1 个答案:

答案 0 :(得分: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>