Writing a $.cookie to show a form upon submit in a multi form page

Question

Writing a page with use of $.cookie to show a form upon submit in a multi form page. I have seen similar questions go unanswered when it got to this specific code. I have read

Answer 1

Ok so overall we will have a page with the forms, and a php processing page. I explained most of it in the comments. Let me know if you have any questions!

Here is a demonstration page

This is a quick validation to see if the value is empty or not, you can do whatever validating you need to

Page 1 - send-ajax-form.php - CSS

 <style type="text/css">
     button.close {display:none;}
     form {display:none;}
     .form-wrapper {margin:10px; padding:10px; background-color:#E8E8E8;}
     .error {color:red;}
     .success {color:green;}
 </style>

Page 1 - send-ajax-form.php - HTML

<div class="form-wrapper">
    <div>Form One</div>
    <form id="form1">
        <input type="text" name="formval" />
        <button type="submit">Submit</button>
        <div id="form1status"></div>
    </form>    
    <button class="edit">Edit</button>
    <button class="close">Close</button>
</div>

<div class="form-wrapper">
    <div>Form Two</div>
    <form id="form2">
        <input type="text" name="formval" />
        <button type="submit">Submit</button>
        <div id="form2status"></div>
    </form>
    <button class="edit">Edit</button>
    <button class="close">Close</button>
</div>

<div class="form-wrapper">
    <div>Form Three</div>
    <form id="form3">
        <input type="text" name="formval" />
        <button type="submit">Submit</button>
        <div id="form3status"></div>
    </form>
    <button class="edit">Edit</button>
    <button class="close">Close</button>
</div>

Page 1 - send-ajax-form.php - Script (Buttons)

 <script type="text/javascript">

    // Edit and Close Button Functions

    $('body').on('click', '.edit', function(){
        $(this).hide().siblings('.close').show().siblings('form').slideDown();
    });
    $('body').on('click', '.close', function(){
        $(this).hide().siblings('.edit').show().siblings('form').slideUp();
    });

</script>

Page 1 - send-ajax-form.php - Script (Ajax Calls)

<script type="text/javascript">

    // Each form will have its own ajax call, all posted to the same php page.

    // Form 1   
    $('#form1').submit(function(e){

        e.preventDefault(); // Stop regular form submission     

        var randnum = Math.floor(Math.random()*1001); // This works around IE caching, as you see, I attach it to the end of the post below

        $.ajax({
            type: "POST", // Obviously we are posting to the php page.
            url: "process-ajax-form.php", //the php page to post to.
            cache: false, // This is needed to prevent caching, the random number from above will reinforce this as well.
                  // Serialize the form data, then add the formname key/value so php knows which form is coming over.
            data: $('#form1').serialize() + "&formname=form1&random=" + randnum, // random number at the end for no-caching.
            dataType: "html", // I am using html here, so it will expect html to be spit back from the php processing page.
                              //You could use other data types as well just make sure the php echos that type of data.
            timeout: 5000, // This will through an error after 5 seconds if it cannot connect with the server
            error: function(){
                // Show some server error message somehow (This has nothing to do with your php proccessing page)
            },
            success: function(response){ // Variable 'response' will hold the html that comes back from the php echos
                // Success means something was received back from the php page (No matter if your php outputs succes or error)
                // So lets do something with the results!!!!
                $('#form1status').html('').html(response);  // Clear current status message then insert PHP results         
            }

        }); 

    });

    // Form 2   
    $('#form2').submit(function(e){

        e.preventDefault(); // Stop regular form submission     

        var randnum = Math.floor(Math.random()*1001); // This works around IE caching, as you see, I attach it to the end of the post below

        $.ajax({
            type: "POST", // Obviously we are posting to the php page.
            url: "process-ajax-form.php", //the php page to post to.
            cache: false, // This is needed to prevent caching, the random number from above will reinforce this as well.
                  // Serialize the form data, then add the formname key/value so php knows which form is coming over.
            data: $('#form2').serialize() + "&formname=form2&random=" + randnum, // random number at the end for no-caching.
            dataType: "html", // I am using html here, so it will expect html to be spit back from the php processing page.
                              //You could use other data types as well just make sure the php echos that type of data.
            timeout: 5000, // This will through an error after 5 seconds if it cannot connect with the server
            error: function(){
                // Show some server error message somehow (This has nothing to do with your php proccessing page)
            },
            success: function(response){ // Variable 'response' will hold the html that comes back from the php echos
                // Success means something was received back from the php page (No matter if your php outputs succes or error)
                // So lets do something with the results!!!!
                $('#form2status').html('').html(response);  // Clear current status message then insert PHP results         
            }

        }); 

    });

    // Form 3   
    $('#form3').submit(function(e){

        e.preventDefault(); // Stop regular form submission     

        var randnum = Math.floor(Math.random()*1001); // This works around IE caching, as you see, I attach it to the end of the post below

        $.ajax({
            type: "POST", // Obviously we are posting to the php page.
            url: "process-ajax-form.php", //the php page to post to.
            cache: false, // This is needed to prevent caching, the random number from above will reinforce this as well.
                  // Serialize the form data, then add the formname key/value so php knows which form is coming over.
            data: $('#form3').serialize() + "&formname=form3&random=" + randnum, // random number at the end for no-caching.
            dataType: "html", // I am using html here, so it will expect html to be spit back from the php processing page.
                              //You could use other data types as well just make sure the php echos that type of data.
            timeout: 5000, // This will through an error after 5 seconds if it cannot connect with the server
            error: function(){
                // Show some server error message somehow (This has nothing to do with your php proccessing page)
            },
            success: function(response){ // Variable 'response' will hold the html that comes back from the php echos
                // Success means something was received back from the php page (No matter if your php outputs succes or error)
                // So lets do something with the results!!!!
                $('#form3status').html('').html(response);  // Clear current status message then insert PHP results         
            }

        }); 

    });

</script>

Page 2 - process-ajax-form.php - PHP

<!-- For each form on the page, set up your validation -->
<!-- Here I am doing a simple validation to see if the form value is empty or not -->

<?php

 //Check if its form 1
if($_POST['formname']==='form1'){

    $formval = $_POST['formval']; //Put value posted into variable

        // Validate however you would like
        if($formval===""){
            echo "<span class='error'>Uh oh, something went wrong with form 1!</span>";
        }else{
            echo "<span class='success'>Great, everything is all good with form 1!</span>";
        }
}

?>

 <?php

 //Check if its form 2
if($_POST['formname']==='form2'){

    $formval = $_POST['formval']; //Put value posted into variable

        // Validate however you would like
        if($formval===""){
            echo "<span class='error'>Uh oh, something went wrong with form 2!</span>";
        }else{
            echo "<span class='success'>Great, everything is all good with form 2!</span>";
        }
}

?>

    <?php

 //Check if its form 3
if($_POST['formname']==='form3'){

    $formval = $_POST['formval']; //Put value posted into variable

        // Validate however you would like
        if($formval===""){
            echo "<span class='error'>Uh oh, something went wrong with form 3!</span>";
        }else{
            echo "<span class='success'>Great, everything is all good with form 3!</span>";
        }
}

?>