2x 提交按钮以操作不同的 URL答案

【问题标题】：2x submit buttons to action different URL2x 提交按钮以操作不同的 URL
【发布时间】：2011-12-18 16:37:23
【问题描述】：

需要 jquery 帮助来更改我的表单操作，具体取决于按下 SUBMIT 按钮。我找到了一些 javascript 代码，但它不起作用。

<form name="myform" onsubmit="return onsubmitform();">

这里是函数

    <script type="text/javascript">
    function submitform()
    {
         if(document.pressed == 'Save')
         {
              document.myform.action ="jbupdate.php";
         } else
         if(document.pressed == 'Print')
         {
              document.myform.action ="ppage.php";
         }
         return true;
     }
     </script>

这些是我的提交按钮

     <input type="submit" name="operation" onclick="document.pressed=this.value" value="Save" />
     <input type="submit" name="operation" onclick="document.pressed=this.value" value="Print" />

我想根据按下的按钮将此信息发布到这些操作页面。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

如果您查看 JavaScript 控制台，当您尝试提交表单时会看到一条错误消息，该消息会告诉您大部分问题：在表单的 submit 处理程序中，您正在尝试调用一个名为onsubmitform的函数：

<form name="myform" onsubmit="return onsubmitform();">
<!--                                 ^--- here     -->

...但你的函数实际上被称为submitform:

<script type="text/javascript">
function submitform()
//       ^--- here

如果你让这些名称匹配，它可能大部分都可以工作，尽管我不确定完全期待提交按钮的 click 事件在表单的 submit 处理程序之前触发完全可靠的跨浏览器。

FWIW，不过，我可能会采取不同的做法。既然你说你正在使用 jQuery，我会完全放弃全局 submitform 函数，添加一个隐藏字段，并使按钮只是按钮（而不是提交按钮），因为除非启用 JavaScript，否则你的表单已经不起作用.

所以：

<input type="hidden" name="operation" value="" />
<input type="button" value="Save" />
<input type="button" value="Print" />

与：

jQuery(function($) {
    var form = document.myform;
    $(form).find("input[type='button']").click(function() {
        form.operation = this.value;
        form.action = this.value == 'Save' ? 'jbupdate.php' : 'ppage.php';
        form.submit();
        return false;
    });
});

【讨论】：

【解决方案2】：

以下 javascript 函数获取目标页面的 URL 和名称/值对的关联数组，并通过动态创建表单然后提交将数据 POST 到提供的 URL。

您可以使用两个输入按钮来代替提交。点击按钮后，您可以手动将操作部分更改为您想要的任何内容，然后提交。

 var myForm = document.getElementById(formid);
 myForm.action = to-wherever-u-want ;
 myForm.submit() ;

写两个函数，动作不同，或者写一个函数，判断哪个btn被按下了。

您的脚本有一些错误，例如您调用 onsubmitform()，但您的定义中只有 sumitform()。也请注意这一点。

【讨论】：

【解决方案3】：

这是另一个选择：

<form action="ThisActionIsReplacedInTheButtonOnclickEvent" method="POST" Name="MyForm" target="_blank" >
...
<input type="submit" name="MyBtn" value="do it" OnClick="document.forms['MyForm'].action = 'Destination1.aspx'" >
<input type="submit" name="MySecondBtn" value="do it different" OnClick="document.forms['MyForm'].action = 'Destination2.aspx'" >

顺便说一句，IE 似乎不太喜欢内联 js，因此您可能必须将 form.action 分配分解为一个单独的函数，如下所示：

   <input  type="submit" name="doitbtn" value="do it" OnClick="SetDest1()" />   

  <SCRIPT LANGUAGE="JavaScript">
        function SetDest1() {
            document.forms["MyForm"].action = "Destination1.aspx";
        }

        function SetDest2() {
            document.forms["MyForm"].action = "Destination2.aspx";
        }

    </script>

【讨论】：

【解决方案4】：

更简单：

<input type="submit" formaction="someaddress/whataver" value="Do X"/>
<input type="submit" formaction="/another/address" value="Do Y"/>

【讨论】：

【解决方案5】：

以下代码的调整版本可能会有所帮助。我添加了用于测试的警报。

$('form[name="myform"] input[type="submit"]').click(function(event){
       var $form = $('form[name="myform"]');
       if($(this).val()=='Print'){
           alert('print was pressed')   ;
           $form.attr('action','jbupdate.php');
       }
        else{
            alert('save was pressed')   ;
            $form.attr('action','ppage.php');
        }
});

//I added the following code just to check if the click handlers are called 
//before the form submission, The alert correctly shows the proper value.
$('form[name="myform"]').submit(function(event){
    alert("form action : " + $(this).attr('action'));
    //event.preventDefault();
});

你可以在http://jsfiddle.net/ryan_s/v4FtD/玩小提琴

【讨论】：

【解决方案6】：

<form name="myform" onsubmit="return onsubmitform();">

你的函数名不是onsubmitform()，它的submitform()

如果你想发布数据，我建议你添加method="post"

<form name="myform" onsubmit="return submitform();" method="post">

祝你好运；）

【讨论】：