How to submit form using multiple buttons/methods with different values

As I have come to learn the hard way that serialize() does not handle the values of submit buttons, I’ve now come to a point where I need some help in order to solve my issue.

What I want to accomplish is the following:
Submit a form when one of many buttons are pressed, using the value of the pressed button to determine the action.
I’m using PHP to process the data once the form is submitted

For example, when the button labeled Save is pressed, the form is submitted but since the save button was pressed, only session variables are set with values from the form elements using PHP.
When the button labeled Submit is pressed, the form is submitted once again, but since the submit button was pressed, the form is actually processed and the data can be added to a database.

But without knowing the value of the button, I can’t do something like this:


if (isset($_POST['send'])) {

   if ($_POST['send'] == 'save') {
       // Set session variables
   } elseif ($_POST['send'] == 'send') {
       // Insert all data into database
   }

}

I’m now trying to figure out a way to overcome this obstacle.

This is what I have right now that works like it should in terms of functionality (it saves data to session variable), but only for not submit button elements such as text boxes.


<?php session_start(); ?>

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
    $(function () {
        $('#test').on('submit', function (e) {
            $.ajax({
                type: 'post',
                url: 'actions.php',
                data: $('#test').serialize(),
                success: function () {
                    location.reload();
                }
            });
            e.preventDefault();
        });
    });
</script>


</head>
<body>

    <div style="margin-top: 1200px;"></div>
    <?php
    if (isset($_SESSION['email'])) {
        echo $_SESSION['email'];
        unset($_SESSION['email']);
    }

    ?>
<form action="" method="post" id="test">
        <input type="text" name="email"  />
        <button type="submit" name="send_form" value="send">Add To Databse</button>
        <button type="submit" name="send_form" value="save">Save</button>
    </form>>



</body>
</html>

actions.php


   if ($_POST['email'] != "") {
        $_SESSION['email'] = $_POST['email'];
    }

Using the existing code, the form is submitted causing the session variable to be set and is then displayed to the user without a visual page reload (meaning the page remains where it was during submission).

One method I’ve been playing around with is to create hidden form fields with different values that appears depending on what button to press, and use that field to determine the action of the submission. However, I’m not really sure how to proceed. At this point, any ideas are welcome.

Hi there,

To answer your question, you can do this:

$('button').on('click', function (e) {
  $.ajax({
    type: 'post',
    url: 'actions.php',
    data: $("#test").serialize() + '&submit='+ $(this).attr("value"),
    success: function (res) {
      location.reload();
    }
  });
  e.preventDefault();
});

Then, in actions.php $_POST will look like this:

Array
(
    [email] => me@me.com
    [submit] => send
)

Array
(
    [email] => me@me.com
    [submit] => save
)

However, sending the request via AJAX then immediately reloading the page kind of defeats the purpose of AJAX.
Is there any reason you are doing it this way?

Thanks for the help. This definitely pointed me in the right direction. Hopefully I’ll be able to make it work properly.

The reason for the reload is that the session variable will not be displayed on the screen otherwise. They will only be set but the user can’t see that fact.

No probs :slight_smile:

But then why use AJAX?
Just have the form submit to itself, or use AJAX to insert the server’s response into the page.

I don’t want a visual page reload.
Some of the forms I will be using this technique with are fairly large, causing the page to scroll all the way up upon page reload. All forms have many areas where they can select from a list what to populate some fields with (setting session variable to hold that data). But unless all the fields are saved in corresponding session variables when the user selects what to populate some of the fields with, already entered data will be lost. Also, this in turns forces the user to scroll down to where they were at the time of submittal, which get very irritating.

This way, I can have the user auto populate fields without loosing any data already entered (and thus not yet submitted to the server) once the page reloads, all without loosing the place on the form.

This probably made little sense.

No, that’s fair enough.
As I understand it window.location.reload(false); (which is the default) will have the browser reload the page from the cache as opposed to the server, so the user will not really see a visual page reload and will not be sent back to the top of the document.

I would have chosen another method of doing this, such as sending separate AJAX requests to the server and inserting the response into the page at the relevant points, but if you have something that is working for you, then fair enough.

My knowledge of Ajax is very limited. I’m confident there are many better ways of doing this, but this is what came to mind and with your generous help, it now works like I had somewhat envisioned it to. It certainly can work better, but I’ll work on that when it it makes sense.

I’m always thirsty for improvements in the software I build and I’m all ears if you are interested in presenting me with an alternative way of doing this. It is obviously outside the scope of this thread and I would of course have to present a more thorough example of how this portion of the system is built so you get the whole picture. So if you feel up for a challenge or just want to choke your curiosity, I’ll definitely prepare some documents highlighting this particular functionality in the system.

In either case, thank you for your help.

Hi there,

Sure I’d be up for helping you work out if there is a better way to do this.
I don’t want to write the whole thing for you, but I wouldn’t mind discussing a few techniques :slight_smile: