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 TorontoSoftware DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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 TorontoSoftware DeveloperAuthor 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
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
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

APD TorontoSoftware DeveloperAuthor Commented:
But how does that trigger the form to submit, opposed just to changing the URL with no post
0
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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 TorontoSoftware DeveloperAuthor 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 TorontoSoftware DeveloperAuthor Commented:
I added method="post" to my form
0
APD TorontoSoftware DeveloperAuthor 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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.