Question

我想使用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>

感谢您的帮助。

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

Answer 2

// UPDATE

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

我建议使用javascript向服务器发送帖子请求，而不是拥有这么多表单元素。我解决这个问题的方法是使用一个带有无线电块的表单，并将一个click事件绑定到将自动提交表单的无线电元素。

简化Javascript表单提交

3 个答案: