Working with multiple forms [AJAX]

[toxicandy]

Hi all,

I am newish to Ajax, I've used it in the past in very rare circumstances and I understand for the most part how ajax works to combine client side and server side by sending information off to the server and displaying returned information from whereever it sent it's data all without forcing the client to refresh. My Question is how do I get multiple forms on 1 page to send to different areas.

Here is the AJAX code I am using to send data FROM my html form to some php page, in this case database.php:

    <script>
      $(function () {

        $('form').on('submit', function (e) {

          e.preventDefault();

          $.ajax({
            type: 'post',
            url: 'database.php',
            data: $('form').serialize(),
            success: function (info) {
              $(".the-return").html(
                    info
                );
            }
          });

        });

      });
    </script>

And here is the form I am using:

<form action="javascript:void(0);" class="js-ajax-php-json" method="post" accept-charset="utf-8">
                        <table cellpadding="10">
                            <tr>
                                <td><label>Item Type</label></td>
                                <td><select name="itemType" id="itemType" required><option value="Chair">Chair</option><option value="Couch">Couch</option><option value="Credenza">Credenza</option><option value="Desk">Desk</option><option value="File Cabinet (2)">File Cabinet (2)</option><option value="File Cabinet (3)">File Cabinet (3)</option><option value="File Cabinet (4)">File Cabinet (4)</option><option value="Phone">Phone</option><option value="Printer">Printer</option><option value="Projector">Projector</option><option value="Shelf">Shelf</option><option value="Table">Table</option></select><br/></td>
                            </tr>
                            <tr>
                                <td><label>Location</label></td>
                                <td><input type="text" name="location" id="location" value="Enter Location" required /><br /></td>
                            </tr>
                            <tr>
                                <td><label>Extra Info</label></td>
                                <td><input type="text" name="extraInfo" id="extraInfo" value="Enter Extra Info" /><br /></td>
                            </tr>
                        </table>
                        <input type="submit" name="submit"  class="btn btn-primary" value="Submit form" />
                        </form>

This is used to insert data into the database which is done in database.php but if I want a second, third or fourth form all on this page with different functions, for instance searching the database, how do I send them to different files. Could I just send them all to database.php and use conditional statements to determine if some textarea is filled out which would be a search request or some check box is filled out which is a insert request. What is the best way? I thought about functions but I was unsure how I could specify with ajax which function I would want to send to.

I understand I may not be making much sense and I will try and answer any questions you may have about what I am trying to do to clear up any confusion.

Best
Andy

[Taywin]

Hmm... Not sure about how jquery syntax would be. However, in simple JavaScript, you just send each form data to the server when a button is clicked in your javascript. Currently, in your jquery, you push the form submission once a user click the submit button. So, you may have to call $.ajax( for each form inside the function and concatenate the return value (in success:).

[vasanth19]

You can design the page in a single form and still process the validations, insert, update and retrieval at once.
Declare variables and pass them as parameters if you need to use functions.

Posting more code may help us answer in detail.

[toxicandy]

Well essentially I will be using a theme similar to this one: Click Here which is why I say there will be many forums on one page. The forms will all be on 1 page but seperate from each other. As far as declaring a variable and passing them as arguments to a function, where are you saying I declare the variable? The database.php code is below. If I send the form data from the current form it gets filtered and then inserted into the database but how would I add a seperate and different form to the same page but use ajax to send it off? The ajax call I have currently takes any form that is complete and sends it off to that file but how would I distinguish which form was complete incase I wanted to have a different file. Alternatively I could use the inputs on database to check what was inputted and send information to functions that way correct? Something like if(isset(filter_input(.........'variable'.....)){ Do something } where variable is specific to a certain form for instance, searchType could be the variable and searchType is only in the form for searching. Would that also work? I feel like that is just putting a patch on a large issue though, it would work but is extremely wrong. Maybe it is right, I really just don't know.

<?php
try {
    $dbh = new PDO('mysql:host=localhost;dbname=', '', '');
} catch(PDOException $e) {
    echo $e->getMessage();
}

    $type = filter_input(INPUT_POST, "itemType", FILTER_SANITIZE_STRING);
    $location = filter_input(INPUT_POST, "location", FILTER_SANITIZE_STRING);
    $extraInfo = filter_input(INPUT_POST, "extraInfo", FILTER_SANITIZE_STRING);
    date_default_timezone_set('America/Chicago');
    $date = date("Y-m-d");

    $addQuery = "INSERT INTO items (`ItemType`, `Location`, `ExtraInfo`, `DateEntered`) VALUES ( :item, :location, :info, :dateE)";
    $prepared = $dbh->prepare($addQuery);
    $prepared->bindValue(':item', $type);
    $prepared->bindValue(':location', $location);
    $prepared->bindValue(':info', $extraInfo);
    $prepared->bindValue(':dateE', $date);
    $prepared->execute();
    echo $type . " was submitted on " . $date;