简化 Javascript 表单提交

Simplifying a Javascript Form Submit

本文关键字：表单提交 Javascript 简化      更新时间：2023-09-26

我喜欢使用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>

谢谢你的帮助。

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>

//UPDATE

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>

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

相关文章：