2x submit buttons to action different URL

Question

Need help with jquery to change my forms action depending on with SUBMIT Button press. I found some javascript code but its not working.

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

Here is the function

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

and these are my submit buttons

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

I will like to POST this information to these action pages depending on the button pressed.

Answer 1

If you look in the JavaScript console, you'll see an error message when you try to submit the form that will tell you a big part of what's wrong: In your form's submit handler, you're trying to call a function called onsubmitform:

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

...but your function is actually called submitform:

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

If you make those names match, it'll probably mostly work, although I'm not entirely sure expecting the submit button's click event to fire prior to the form's submit handler is entirely reliable cross-browser.

FWIW, though, I'd probably do it differently. Since you say you're using jQuery, I'd ditch the global submitform function entirely, add a hidden field, and make the buttons just buttons (rather than submit buttons) since your form is already non-functional unless JavaScript is enabled.

So:

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

with:

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

Answer 2

Here's another option:

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

BTW, IE doesn't seem to like inline js much, so you may have to break the form.action assignment out into a separate function like this:

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

Answer 3

More simply:

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

Answer 4

The following javascript function takes the URL of the target page and an associative array of name/values pairs and POSTs the data to the supplied URL by dynamically creating a form and then submitting it.

You can use instead of submit, two input buttons. On click of the buttons, u can mannualy change the action part to whatever you want, and then submit it.

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

Write two functions, with different actions, or write one function, determine which btn was pressd.

Your script was having some errors like that you called onsubmitform(), but you only have sumitform() in defenition. Pls take care of that too.

Answer 5

Probably a tweaked version of the below code will help. I added the alerts for testing.

$('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();
});

You can play with the fiddle at http://jsfiddle.net/ryan_s/v4FtD/

Answer 6

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

your functions name is not onsubmitform(), its submitform()

and if you want to post data, I suggest you add method="post"

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

good luck ;)