We help IT Professionals succeed at work.

Multiple Submit Buttons

APD Toronto
APD Toronto asked
on
Hi Experts,

How is it possible for me to have multiple Submit buttons on a form that act slightly differently?

For example,  1 submit button will have a value of "save", and that button will be clicked when the user wants the info. Here, I would like to trigger a JS function checkRequired() that would check if all mandatory fields are filled in, if they aren't, it will return false. To do this I have my checkRequired() under my form onSubmit.

The second submit button I need to have will be called "Upgrade Package". Here I need to get something from the database, so I need to post the already entered info by the user, but I don't want to checkRequired() because most likely not all information will be entered. The upgrade, as I mentioned need to get some info from the db, and load a different page.

As well, both submits need to go to a different URL, for example, index.php?action=save and index.php?action=upgrade

An alternate way I was thinking if it is possible to make both submit buttons as regular buttons, and have a function trigger the actual submission/posting.

Thank you
Comment
Watch Question

Mark BradyPrincipal Data Engineer

Commented:
If it were me I would have 1 submit button but have two checkboxes and name them 'action' for example. The labels would read 'Save' and the other 'Upgrade'.

For the submit button do not use an input type="submit" but instead just use a regular button that has an onclick event pointing to a function. Inside that function check to see which checkbox (if any) was checked and then build the url accordingly. Make a variable called action and assign the value from the checkboxes. If none are checked you could go ahead and check all information is correct before submitting the form info.

Hope this helps. Multiple for buttons can confuse people but a simple checkbox like a 'remember me' in a login form is quite normal and people are used to that.
APD TorontoSoftware Developer

Author

Commented:
but, even with 2 checkboxes, how would you build the action variable and embed it in the form's tag?

More so, you mention that not to have a input="submit", so then I assume you're saying to trigger submit through a function? If so, how would you do that? What would be the syntax within that function to a) build the target variable, and b) trigger the form submit
Mark BradyPrincipal Data Engineer

Commented:
Good questions and I'll try to answer them as best I can on my small notepad :). Say you have a basic form like this:

<form>
  <input type="checkbox" id="save" value="save"> Save<br>
  <input type="checkbox" id="upgrade" value="upgrade" checked> Upgrade<br>
  <input type="button" value="Submit" onClick="check_form()">
</form>

Open in new window


Now this is a very basic form and has no action= part. By default if you put a regular submit button in it, the form will post to itself and you would only do that if the form was on a php page so php can get the POST attributes and do something with it.

In your case you want a button similar to my example. When it is clicked it will call the javascript function called "check_form". This function should be written in the <head></head> part of your page. It could be something like this:

function check_page() {
    // we need to set the action variable
    var action = 'submit'; // initialize it and set it to some default value
    // which checkbox was clicked if any?
    if ( document.getElementById('save').checked) {
        action = 'save';
    } elseif ( document.getElementById('upgrade').checked) {
        action = 'upgrade';
    }

//Now if no checkboxes were checked this would be the default value of your choice.
// now to build the url
var url = 'index.php?action=' + action;

// go to that page
document.location=url;

// the user will be taken to that location with the correct action set in the url. 


}

Open in new window


Of course this is not a perfect solution as a user could check both boxes so you would probably use radio buttons instead. This should give you an idea of how to set the action in the url.
APD TorontoSoftware Developer

Author

Commented:
But how does that trigger the form to submit, opposed just to changing the URL with no post
Principal Data Engineer
Commented:
On line 16 of my last code JavaScript will send the user to the new page which will have the correct action value
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
I use method="POST" whenever I can along with onsubmit="jscheck()" where jscheck is a javascript routine that checks the data to be posted.  With "POST", the data does not go in the query string like index.php?action=save.  I would use check boxes to tell the action page what you want done. Radio buttons might be better since checking one unchecks the other.  Or even a link with index.php?action=upgrade somewhere in the form.  Note that 'onsubmit' goes in the <form> tag, not the submit button.
<form method="POST" action="index.php" onsubmit="jscheck()">
  <input type="radio" id="save" value="save"> Save<br>
  <input type="radio" id="upgrade" value="upgrade" checked> Upgrade<br>
  <input type="button" value="Submit" onClick="check_form()">
</form>

Open in new window

Most Valuable Expert 2011
Top Expert 2016

Commented:
Why not just use two separate forms?  If you want two different action scripts, that will be the cleanest implementation.

There is nothing magic about the submit input control.  When it is fired, the form submit handler is called.  The input control will be transferred along with the other form inputs (text, checkbox, whatever).  The submit input control can have a name and value like any other input control.  These names and values will be used to populate the PHP request arrays ($_GET or $_POST).
APD TorontoSoftware Developer

Author

Commented:
Mark, using your example I came up with the following, but as I suspected nothing is in my POST array.

<?php
print_r($_POST);
    if (isset($_POST['whatever'])){
        echo $_POST['whatever'];
    }

?>
<html>
    <body>

        <form>
            <input type="text" name="whatever">
            <input type="button" value="save" onclick="check_page('save');">
            <input type="button" value="upgrade" onclick="check_page('upgrade');">
        </form>
        
<script type="text/javascript">
function check_page(action) {
 
//Now if no checkboxes were checked this would be the default value of your choice.
// now to build the url
var url = 'multi-submit.php?action=' + action;

// go to that page
document.location=url;

// the user will be taken to that location with the correct action set in the url. 
}
</script>
</body>
</html>

Open in new window

APD TorontoSoftware Developer

Author

Commented:
I added method="post" to my form
APD TorontoSoftware Developer

Author

Commented:
Actually, this what works, but you lead me to it. Thank you all.

<?php
print_r($_POST);
    if (isset($_POST['whatever'])){
        echo $_POST['whatever'];
    }

?>
<html>
    <body>

        <form method="post" name="frm">
            <input type="text" name="whatever">
            <input type="button" value="save" name="btnSave" id="btnSave" onclick="check_page('save');">
            <input type="button" value="upgrade" name="btnUpgrade" id="btnUpgrade" onclick="check_page('upgrade');">
        </form>
        
<script type="text/javascript">
function check_page(action) {
 
//Now if no checkboxes were checked this would be the default value of your choice.
// now to build the url
var url = 'multi-submit.php?action=' + action;

// go to that page
document.forms["frm"].action = url;
document.forms["frm"].submit();

// the user will be taken to that location with the correct action set in the url. 
}
</script>
</body>
</html>

Open in new window

Mark BradyPrincipal Data Engineer

Commented:
Yes that should work. The reason why the first one didn't work is nothing was sent to the new page in the $_POST array. Creating that URL the way I did means you can pull data straight from the URL using $_GET.

Of course now you have both $_POST (the data from your form) and $_GET  ($_GET['action']).