logo标签列表

根据不同的提交按钮来设置不同的表单操作

javascriptforms
3
如果我有一个表单上有2个按钮，当我点击Button1时，它将是action="submit1.php"，如果是Button2，则是action="submit2.php"。
我尝试了这个：
  <script language="javascript">

  function Button1()
   {
     document.Form1.action = "submit1.php"   
     document.Form1.target = "iframe1";    
     document.Form1.submit();        

   }

  function Button2()
   {
    document.Form1.action = "submit2.php" ;
    document.Form1.target = "iframe2";    
    document.Form1.submit();       
   }

 </script>

在 <body> 中的某个位置：

  <div style="visibility:hidden">
  <iframe NAME="iframe1" WIDTH="40" HEIGHT="40"></iframe>
  <iframe NAME="iframe2" WIDTH="40" HEIGHT="40"></iframe>
  </div>

在表单中：

  <form name="Form1" id="Form1" method="post">
  <input type="submit" name="Button1" onclick="Button1();">
  <input type="submit" name="Button2" onclick="Button2();">
  </form>

它不起作用了，我做错了什么吗？

谢谢。

具体是什么出了问题？你是说点击按钮时什么都没发生，还是有东西发生但是不正确（如果是的话是什么），或者其他情况？ - nnnnnn
@nnnnnn非常抱歉我回复晚了。如果我点击按钮，它就像刷新页面一样。不过现在已经修复了，谢谢。 - Irene Ling
4个回答
5

您有两个问题

要么

将按钮更改为type="button"

要么

从函数中删除submit

纯JS（使用更简单的表单访问方式）：

<script language="javascript">
function Button(theButton) {
  var theForm = theButton.form;
  if (theButton.name=="Button1") {
    theForm.action = "submit1.php"   
    theForm.target = "iframe1";    
  }
  else {
    theForm.action = "submit2.php"   
    theForm.target = "iframe2";    
  }
}
</script>

<form method="post" action="nojsavailable.php">
  <input type="submit" name="Button1" onclick="Button(this);" />
  <input type="submit" name="Button2" onclick="Button(this);" />
</form>

不影响原有代码（推荐）：

<script language="javascript">
window.onload=function() {
  var buttons = document.getElementsByName("button");
  for (var i=0;i<buttons.length;i++) {
    buttons[i].onclick=function() {
      var idx = i+1;
      var theForm = this.form;
      theForm.action = "submit"+idx+".php"   
      theForm.target = "iframe"+idx;    
    }
  }
}
</script>

<form method="post" action="nojsavailable.php">
  <input type="submit" name="button" id="button1" />
  <input type="submit" name="button" id="button2" />
</form>
非常抱歉回复晚了，真的非常感谢你的答复。 - Irene Ling
1

为函数使用小写命名。Javascript似乎将Button1函数与Button1对象混淆了。因此，您的解决方案应该是

 <script language="javascript">

  function button1()
   {
     document.Form1.action = "submit1.php"   
     document.Form1.target = "iframe1";    
     document.Form1.submit();        

   }

  function button2()
   {
    document.Form1.action = "submit2.php" ;
    document.Form1.target = "iframe2";    
    document.Form1.submit();       
   }

 </script>

并以表单形式返回

<form name="Form1" id="Form1" method="post">
  <input type="button" id="Button1" name="button1()" />
  <input type="button" id="Button2" name="button2()" />
</form>
我同意 - 完全不相关。 - mplungjan
0

我建议使用element.setAttribute('attributeName','attributeValue');。此外，在这种情况下，您不需要使用form.submit();，提交按钮将自动提交表单，只需在onclick方法中return true即可。

尝试：

 function Button1()
   {
     document.getElementById('Form1').setAttribute('action',"submit1.php");
     document.getElementById('Form1').setAttribute('target',"iframe1");

   }

  function Button2()
   {
     document.getElementById('Form2').setAttribute('action',"submit2.php");
     document.getElementById('Form2').setAttribute('target',"iframe2");   
   }
直接设置 action 属性应该没有问题。（虽然我更喜欢使用 .getElementById()。） - nnnnnn
不需要应该是不允许的 - mplungjan
是的，实际上如果他这样做，他将会提交表单两次。 - random_user
非常抱歉回复晚了，我已经得到解决方案，还是谢谢你的帮助。 - Irene Ling
0

这将是你的最终代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <script language="javascript">

  function button1()
   {
     document.Form1.action = "http://www.google.com"   
     document.Form1.target = "iframe1";    
     document.Form1.submit();        

   }

  function button2()
   {
    document.Form1.action = "http://www.yahoo.com" ;
    document.Form1.target = "iframe2";    
    document.Form1.submit();       
   }

 </script>
</head>
<body>
  <form name="Form1" id="Form1" method="post">

  <input type="button" value="btn1" name="Button1" onclick="button1()">
  <input type="button" value="btn2" name="Button2" onclick="button2()">  

  </form>
</body>
</html>
1
"type = 'button'" 已经在一个小时前讨论过了，这也是它无法工作的原因之一。 - mplungjan
非常抱歉回复晚了，仍然感谢您的回复。 - Irene Ling
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接