Multiple Submit Buttons

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
APD TorontoAsked:
Who is Participating?
 
Mark BradyPrincipal Data EngineerCommented:
On line 16 of my last code JavaScript will send the user to the new page which will have the correct action value
0
 
Mark BradyPrincipal Data EngineerCommented:
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.
0
 
APD TorontoAuthor 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
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Mark BradyPrincipal Data EngineerCommented:
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.
0
 
APD TorontoAuthor Commented:
But how does that trigger the form to submit, opposed just to changing the URL with no post
0
 
Dave BaldwinFixer of ProblemsCommented:
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

0
 
Ray PaseurCommented:
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).
0
 
APD TorontoAuthor 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

0
 
APD TorontoAuthor Commented:
I added method="post" to my form
0
 
APD TorontoAuthor 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

0
 
Mark BradyPrincipal Data EngineerCommented:
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']).
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.