单击链接提交表单，而不使用提交按钮

Question

单击链接提交表单，而不使用提交按钮

3

我想通过点击链接来提交表单，而不使用提交按钮。表单的每个元素都有其值，必须在单击时提交。但它并不起作用。我可以使用JavaScript或jQuery。请看以下代码：

<head>
  <style>
  div {
    width: 100px;
    height: 100px;
    padding: 10px;
    margin: 10px;
    background-color: #EEEEEE;
  }
</style>
</head>
<body>
<form name="myform" action="test.php" method="post">
<div>
<a href="javascript: submitform()" value='h1'>h1</a><br>
<a href="javascript: submitform()" value='h2'>h2</a><br>
<a href="javascript: submitform()" value='h3'>h3</a><br>
</div>
</form>
<script type="text/javascript">
function submitform()
{
  document.myform.submit();
}
</script>
<div>
<?php
$form=$_POST['myform'];
echo $form.' bla<br>';
?> 
</div>
</body>
</html>

根据 Ofir Baruch 的建议——它有效果了！！！

<head>
<script src="jquery.js" type="text/javascript"></script>
  <style>
  div {
    width: 100px;
    height: 100px;
    padding: 10px;
    margin: 10px;
    background-color: #EEEEEE;
  }
</style>
</head>
<body>
<form name="myform" action="test.php" method="post">
<input type='hidden' id='hx' name='hx' value=''>

<div>
<a href="javascript: submitform('h1')">h1</a><br>
<a href="javascript: submitform('h2')">h2</a><br>
<a href="javascript: submitform('h3')">h3</a><br>
</div>
</form>
<script type="text/javascript">
function submitform(val)
{
  $("#hx").val(val);
  document.myform.submit();
}
</script>
<div>
<?php
echo $_POST['hx'];
?> 
</div>
</body>
</html>

- user985456

4个回答

2

首先，我不会使用href="javascript:submitForm();"，而是使用href="#" onclick="submitForm(this)"

在表单中添加一个隐藏字段

<input type="hidden" value="" id="hiddenId" />

在您的submitForm方法中，将myform更改为forms [0]。我相信这将更具跨浏览器友好性。无论如何......向您的方法添加一个参数，以便您可以设置隐藏字段的值。

<script type="text/javascript"> 
function submitform(el) 
{   
  document.getElementById('hiddenId').value = el.value;
  document.forms[0].submit(el); 
} 
</script>

- Chris Gessler

它不会更加跨浏览器友好，而且仍然无法提交值。 - Quentin

@Quentin - W3C推荐使用document.forms[] http://jibbering.com/faq/notes/form-access/ - Chris Gessler

@OfirBaruch - 在你发帖之前的几分钟内，我纠正了我的答案。我们同时在打字，但这并不重要，因为我们都想出了相同的解决方案，所以它一定是有价值的 :) - Chris Gessler

0

<a href="javascript: submitform('h1')">h1</a>

function submitform(val)
{
    $.post('.', { myform: val });
}

- Anber

这并不是提交表单，而是发起了一个Ajax请求。 - Quentin

@Quentin - form.submit() 和 $.post() 做的事情是一样的：它们执行一个 POST 操作到 Web 服务器。唯一的区别是第二个是异步 POST 请求。 - Chris Gessler

0

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script>
            $(function() {
                $("form a").click(function() {
                    var value = $(this).data('value');
                    $.post('.', { myform: value });
                    return false;
                });
            });
        </script>
    </head>
    <body>
        <form>
            <a href="" data-value="h1">h1</a>
            <a href="" data-value="h2">h2</a>
            <a href="" data-value="h3">h3</a>
        </form>
    </body>
</html>

- Anber

那么我如何获取提交的值？ code<?php $form=$_POST['myform']; echo $form.' bla<br>'; ?>code - user985456

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ofir Baruch · Accepted Answer

在<form...>标签后添加下一行：

<input type='hidden' id='hx' name='hx' value=''>

然后，将您的调用函数更改为：

<a href="javascript: submitform('h1')">h1</a><br>

你的功能：

<script type="text/javascript">
function submitform(val)
{
  $("#hx").val(val);
  document.myform.submit();
}
</script>

在你的php代码中：

echo $_POST['hx'];

它是如何工作的？

1.您单击链接

2.js函数更改隐藏输入字段的值

3.js函数提交表单

4.$_POST与隐藏输入值相关联