简化 Javascript 表单提交答案

【问题标题】：Simplifying a Javascript Form Submit简化 Javascript 表单提交
【发布时间】：2014-11-25 22:42:55
【问题描述】：

我喜欢使用 javascript 提交表单。我是 javascript 新手，不知道如何简化下一个代码：（此代码有效，但我认为可以简化）：

<html>
<body>
<?php
$actual_link = "$_SERVER[REQUEST_URI]";
?>
<form id="countryDE" method="post" action="geo-country.php">
<input type="hidden" name="gobackto" value="<?php echo htmlspecialchars($actual_link);?>">
<input type="hidden" name="countrycookie" value="DE">
</form>
<form id="countryIT" method="post" action="geo-country.php">
<input type="hidden" name="gobackto" value="<?php echo htmlspecialchars($actual_link);?>">
<input type="hidden" name="countrycookie" value="IT">
</form>
<form id="countryUS" method="post" action="geo-country.php">
<input type="hidden" name="gobackto" value="<?php echo htmlspecialchars($actual_link);?>">
<input type="hidden" name="countrycookie" value="US">
</form>
<form id="countryCA" method="post" action="geo-country.php">
<input type="hidden" name="gobackto" value="<?php echo htmlspecialchars($actual_link);?>">
<input type="hidden" name="countrycookie" value="CA">
</form>
<?php
echo $_COOKIE["cbccountry"];
?>
<ul>
<li><a href="#" title="Germany" onclick="submitformDE()">Germany</a></li>
<li><a href="#" title="Italy" onclick="submitformIT()">Italy</a></li>
<li><a href="#" title="United States" onclick="submitformUS()">United States</a></li>
<li><a href="#" title="Canada" onclick="submitformCA()">Canada</a></li>
</ul>

<script type="text/javascript">
function submitformDE()
{
document.forms["countryDE"].submit();
}
function submitformIT()
{
document.forms["countryIT"].submit();
}
function submitformUS()
{
document.forms["countryUS"].submit();
}
function submitformCA()
{
document.forms["countryCA"].submit();
}
</script>
</body>
</html>

感谢您的帮助。

【问题讨论】：

如果输入是隐藏的，为什么还有表单？为什么不直接在单击链接时提交值 - 使用 ajax？ api.jquery.com/jquery.ajax
如果您使用命名提交按钮，如果它是用于提交的表单，则在提交表单时提交按钮的名称。不需要脚本。你为什么要提交表格？为什么不在搜索查询中使用普通链接？
感谢您的回复。我喜欢使用脚本来阻止搜索引擎跟踪链接......但我现在在想搜索引擎不遵循 POST 表单。我是对的？

标签： javascript forms form-submit

【解决方案1】：

http://jsfiddle.net/tracker1/9pfxL4Lz/

刚刚使用了样式化的提交按钮，其名称与您要传递的键/值匹配。

<!DOCTYPE html>
<html>
<head>
<?php
$actual_link = "$_SERVER[REQUEST_URI]";
?>
<style type="text/css">
button.link {
  display:inline-block;
  position:relative;
  background-color: transparent;
  cursor: pointer;
  border:0;
  padding:0;
  color:#00f;
  text-decoration:underline;
}
</style>
</head>
<body>
<form method="post" action="geo-country.php">
    <input type="hidden" name="gobackto" value="<?php echo htmlspecialchars($actual_link);?>">
    <button class="link" type="submit" name="countrycookie" value="DE">Germany</button>
    <button class="link" type="submit" name="countrycookie" value="IT">Italy</button>
    <button class="link" type="submit" name="countrycookie" value="US">United States</button>
    <button class="link" type="submit" name="countrycookie" value="CA">Canada</button>
</form>
</body>
</html>

【讨论】：

【解决方案2】：

//更新

http://jsfiddle.net/v5dejopw/11/

function submitform()
{
    var submit=document.forms["test"]["country"].value;
   switch (submit) 
   {
     case 'Germany': 
        submit = 'Germany';
     break;
        case 'Italy': 
        submit = 'Italy';
     break;
        case 'United States': 
        submit = 'United States';
     break;
        case 'Canada': 
        submit = 'Canada';
     break;
   }
    
    

}

<body>

<form name="test" id="test" method="post" onsubmit="return submitform();">
<input type="hidden" name="gobackto" value="<?php echo htmlspecialchars($actual_link);?>" onsubmit="return submitformDE();">
<input type="hidden" name="countrycookie" value="DE">
<input type="submit" name="country" value="Germany" class="submitInput">

<input type="hidden" name="gobackto" value="<?php echo htmlspecialchars($actual_link);?>">
<input type="hidden" name="countrycookie" value="IT">
<input type="submit" name="country" value="Italy" class="submitInput">

<input type="hidden" name="gobackto" value="<?php echo htmlspecialchars($actual_link);?>">
<input type="hidden" name="countrycookie" value="US">
<input type="submit"  name="country"value="United States" class="submitInput">
    
<input type="hidden" name="gobackto" value="<?php echo htmlspecialchars($actual_link);?>">
<input type="hidden" name="countrycookie" value="CA">
<input type="submit"  name="country" value="Canada" class="submitInput">
 
</form>

【讨论】：

那么如果 submit 的值是 'Germany'，你分配的值是 'Germany'？

【解决方案3】：

我建议考虑使用 javascript 向服务器发出 post 请求，而不是使用太多的表单元素。我解决这个问题的方法是使用带有单选块的单个表单，并将点击事件绑定到将自动提交表单的单选元素。

【讨论】：