使用 <a> 标签提交表单

Posted

技术标签:

【中文标题】使用 <a> 标签提交表单【英文标题】:Submit form using <a> tag 【发布时间】:2012-04-19 20:44:05 【问题描述】:

我正在尝试通过标签上的 onclick 事件提交表单。我曾尝试触发 document.myform.submit()、this.form.submit()、parentNode.submit() 等,但这些都不起作用!使用提交按钮,代码工作正常。但我想用标签代替它。需要一些帮助。

            <form id="myform" name="myform" method="POST" action="process_edit_questionnaire.php?project=<?php echo $project_id; ?>">
                <input name="module" type="hidden" value="<?php echo $module_id;?>"/>
                <input name="project" type="hidden" value="<?php echo $project_id;?>"/>
                <input name="hidden_ques_id" type="hidden" value="<?php echo $data_array_ques[$j]['ques_id'];?>"/>

            <div id="question_block">

                <div id="serial_block">
                    <p id="s_original_<?php echo $j+1; ?>"><a href="#" onclick="showSelectBox(<?php echo $j+1; ?>)">Serial : 
                        <?php 
                        if($data_array_ques[$j]['ques_position']==NULL) 
                            echo $j+1;                            
                         
                        else  
                            echo $data_array_ques[$j]['ques_position'];         
                         ?></a></p>
                    <p id="s_select_box_<?php echo $j+1; ?>" style="display: none;">Serial : 
                        <select name="serial">
                          <?php for($p=1;$p<=count($data_array_ques);$p++) ?>
                                    <option value="<?php echo $p; ?>" <?php if($p==$data_array_ques[$j]['ques_position']) echo "selected=\"selected\""; ?> ><?php echo $p; ?></option>
                          <?php   ?>
                        </select>
                    </p>
                </div>

                <div id="question_text">
                    <a href="#" onclick="showTextBox(<?php echo $j+1; ?>)"><p id="q_original_<?php echo $j+1; ?>"><?php echo $data_array_ques[$j]['ques_text']; ?></p></a>
                    <p id="q_text_box_<?php echo $j+1; ?>" style="display:none;"><textarea id="ques_text" name="ques_text" rows="3" cols="30"><?php echo $data_array_ques[$j]['ques_text']; ?></textarea></p>                     
                </div>

            </div>

            <div id="menu_block">
                <a href="" onclick="document.myform.submit()">Save Changes</a> |
                <a href="delete_question.php?project=<?php echo $project_id; ?>&module=<?php echo $module_id; ?>">Delete This Question</a>
            </div>
            </form>

【问题讨论】:

如果它有效并帮助你可能会很高兴在这里接受一个答案,这就是这个网站的工作方式:) 等一下……我经常看到 PHP 输出 $j,它看起来像一个迭代器……这整个事情是在循环中发生的吗?您要输出此表单的多个副本吗?如果是这样,这意味着有多个表单具有相同的 ID 和名称,您需要像处理其他所有内容一样将 $j 添加到 ID 和名称中。如果没有,请忽略。 【参考方案1】:

像这样提交您的表单...

您的 html 代码

    <form name="myform" action="handle-data.php"> Search: <input type='text' name='query' />
     <a href="javascript: submitform()">Search</a> 
   </form> 

JavaScript 代码

  <script type="text/javascript"> 
        function submitform()    document.myform.submit();  
   </script> 

【讨论】:

感谢您的回复。已经试过了。没有结果。我想我的代码有一些问题。但不知道是什么.. @Potheek - 如果没有尝试发出警报,请使用调试器,它会给您一个想法,因为这是您可以使用它在链接上提交表单的最终代码 为什么你在没有 jquery 的情况下对我投了反对票,因为我在你投反对票之前以我的编辑方式删除了它,你最好在投反对票之前阅读 cmets @Rana,javascript 函数被调用但表单没有被提交:( 最好不要写这段代码 ==> &lt;a onclick="this.parentElement.submit()"&gt;search&lt;/a&gt;【参考方案2】:

你可以用原始的 javascript 做到这一点

<html>
    <body>
        <form id="my_form" method="post" action="mailto://test@test.com">
            <a href="javascript:" onclick="document.getElementById('my_form').submit();">submit</a>
        </form>
    </body>
</html>

对于那些问我为什么在我的锚标记中有href 元素的人,因为它是锚标记的强制部分,没有它可能很好,但不是规范。所以如果你想保证渲染等,你必须给引擎一个完整的标签。所以上面实现了这一点。您会看到 href="#" 有时被使用,但这并不总是需要,因为浏览器会改变页面位置。

【讨论】:

防止&lt;a&gt;标签点击事件的默认行为。 最后两个解决方案不起作用。我不知道如何使用 jQuery。 这在什么方面不起作用?你得到一个javascript错误吗?页面有什么作用吗?您能否提供一个链接失败以及使用哪个浏览器和版本? 不要忘记
标签上的 id="my_form"。
我很好奇 href="javascript:" 的原因,有什么原因吗?我使用了 href="#" 并且效果很好。【参考方案3】:

试试这个:

假设 HTML 是这样的:

   <form id="myform" name="myform" method="POST" action="process_edit_questionnaire.php?project=<?php echo $project_id; ?>">
      <div id="question_block">
            testing form
        </div>
     <a href="javascript: submit();">Submit</a>
        </form>

JS:

   <script type='text/javascript'>
     function submit()
      
         document.forms["myform"].submit();
      
   </script>

你可以在这里查看:http://jsfiddle.net/Zm426/7/

【讨论】:

我已经尝试过你在这里写的,但没有奏效:( 控制台出现什么样的错误?你有没有把函数放在Script标签中 @Jigs,我知道它有效,我认为我的代码有问题。感谢您的回复。【参考方案4】:

下面是我使用 vanilla JS 的方法

<form id="myform" method="POST" action="xxx">
    <!-- your stuff here -->
    <a href="javascript:void()" onclick="document.getElementById('myform').submit();>Ponies await!</a>
</form>

您可以使用return falses 和href="#" vs void 以及任何您需要的方法,但这种方法在 Chrome 18、IE 9 和 Firefox 14 中对我有效,其余的主要取决于您的 javascript。

【讨论】:

刚刚注意到其他人也使用了这种方法。我很遗憾没有检查。【参考方案5】:

我建议使用“return false”而不是在 href-tag 中使用一些 javascript:

<form id="">
...
</form>

<a href="#" onclick="document.getElementById('myform').submit(); return false;">send form</a>

【讨论】:

【参考方案6】:

如果允许使用 jquery,那么您可以使用以下代码以最简单的方式实现它:

<a href="javascript:$('#form_id').submit();">Login</a>

<a href="javascript:$('form').submit()">Login</a>

您可以在 head 标签 () 中使用以下行将 jquery 导入您的代码中

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

【讨论】:

这当然也可以不使用 jQuery:登录 【参考方案7】:

是否有任何理由不使用 提交按钮,然后使用 css 对其进行样式设置以匹配您的其他 a 标签?

我认为这会减少您对启用 javascript 的依赖,并且仍然可以获得所需的结果。

【讨论】:

该问题专门询问如何使用 &lt;a&gt; 元素来做到这一点。 OP 表示它与提交按钮配合得很好。虽然在某些情况下它可能是一个有效的反对意见,但禁用 JavaScript 现在不是一个大问题(也不是问题的一部分)。 抱歉,你说得对,这个问题确实说明了这一点。但是,我不明白您为什么要花时间推广解决方案,这些解决方案在工作时需要更多代码,并且可以在更少的情况下工作。 javascript 的问题实际上取决于您对潜在客户的重视程度,无论他们浏览的是什么用户。如果我遗漏了我应该贡献的内容,请告诉我,我会删除它【参考方案8】:

您可以使用隐藏的提交按钮并使用 java script/jquery 点击它,如下所示:

  <form id="contactForm" method="post" class="contact-form">

        <button type="submit" id="submitBtn" style="display:none;" data-validate="contact-form">Hidden Button</button>
        <a href="javascript:;" class="myClass" onclick="$('#submitBtn').click();">Submit</a>

  </form>

【讨论】:

【参考方案9】:

使用 Jquery 你可以做这样的事情:

$(document).ready(function() 
  $('#btnSubmit').click(function() 
    $('#deleteFrm').submit();
  );

);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" id="deleteFrm" method="POST">
  <a id="btnSubmit">Submit</a>
</form>

【讨论】:

【参考方案10】:
<form  id="myform_id" action="/myMethode"  role="form"  method="post" > 
   <a  href="javascript:$('#myform_id').submit();" >submit</a>
</form>

【讨论】:

当您发布 HTML、XML 或任何基于标签的内容时,正确格式化您的代码非常重要。否则,它会被格式化为帖子的一部分。见the help center【参考方案11】:

干净简单:

  <form action="/myaction" method="post" target="_blank">
    <!-- other elements -->
    <a href="#" onclick="this.parentNode.submit();">Submit</a>
 </form>

如果在新标签页中打开表单action url (target="_blank"):

  <form action="/myaction" method="post" target="_blank">
    <!-- other elements -->
    <a href="#" onclick="this.parentNode.submit();">Submit</a>
 </form>

【讨论】:

以上是关于使用 <a> 标签提交表单的主要内容,如果未能解决你的问题,请参考以下文章

a标签指定的url,在表单提交前进行js验证的实现

在 vuejs 中提交表单,我应该使用表单标签吗?

使用 <form> 标签外的按钮提交表单

前端基础表单标签/提交

button提交表单 a标签提交表单

a标签提交表单