通過單擊鏈接提交表單，而無需使用提交按鈕

我試圖通過單擊鏈接提交表單，而無需使用提交按鈕。表單中的每個元素都有其值，點擊時必須提交。它不起作用。我可以使用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>

與奧菲爾巴魯克suggestions-作品！

<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>

來源

2012-03-10 user985456

添加下一行<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.You點擊一個鏈接

2. js函數改變了隱藏的輸入字段的值

3. js函數提交表單

4。$ _ POST涉及隱藏的輸入值

來源

2012-03-10 13:15:47

不起作用:(你能在我的例子中顯示你的想法嗎？ – user985456 2012-03-10 14:25:18

這正是我所做的。你能更具體地說明什麼不起作用嗎？（得到錯誤？） – 2012-03-10 14:27:14

我剛剛發佈了你的建議的代碼，當你點擊鏈接時，它不會返回任何東西 – user985456 2012-03-10 14:54:53

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

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

來源

2012-03-10 13:11:45 Anber

不提交表單。它發出一個Ajax請求。 – Quentin 2012-03-10 13:13:22

@Quentin - form.submit（）和$ .post（）做同樣的事情：它們對Web服務器執行POST操作。唯一的區別是第二個是異步發佈請求。 – 2012-03-10 13:44:49

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

隱藏字段到表單

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

添加在您的submitForm方法，改變myForm的形式來[0]。我相信這會更加跨瀏覽器友好。 Anywho ...爲您的方法添加一個參數，以便您可以設置隱藏的字段值。

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

來源

2012-03-10 13:12:53

它不會更加跨瀏覽器友好，它仍然不會提交值。 – Quentin 2012-03-10 13:13:48

@Quentin - 是的，您對提交值是正確的。 – 2012-03-10 13:20:41

我已經提出了這種方法。 – 2012-03-10 13:27:59

<!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>

來源

2012-03-10 13:16:50 Anber

所以我如何得到提交的值？ 'code' <？php $ form = $ _ POST ['myform']; echo $ form。' bla
'; ？''code' – user985456 2012-03-10 14:29:43

閱讀** $。post ** [here]（http://api.jquery.com/jQuery.post/）。 – Anber 2012-03-10 14:45:59

通過單擊鏈接提交表單，而無需使用提交按鈕

回答

相關問題