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

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 and read, seems like this should work. Yes, very new to jquery, 1 week.

I have container divs (class) each with an p toggle to show/hide each form. Upon submit I want the form to remain .show() so that errors or even response will be seen. p must be clicked to .hide form; so a person could open all the forms.

I know there are much more complicated ways to do this. I just want to learn the simple, possibly long hand version so help me understand what is going on. I added a number of alerts for hints. Some reason loops back to undefined.

Sorry I am so 'green'. I am sure this is too simple for most here.

css:

.set {
     }
.set form {
display: none;
   }
.set p {
    color: #996600;
    cursor: pointer;
    }
.set p.hover {
background-color: #00CCCC;
    }

the html:

<div class="set"><p>Click</p>
<form id="form1">

 <div id="here" style="text-align:center; border:1px solid black; width:60px;">form 1</div>
   <button id="form1button" class="button">BUTTON form1</button>

</form>
</div>


<div class="set"><p>Click2</p>
<form id="form2" >

<div id="here" style="text-align:center; border:1px solid black;  width:60px;">Click</div>
    <button id="form2button" class="button">BUTTON form2</button>
</form>
</div>


<div class="set"><p>Click3</p>
    <form id="form3" >

<div id="here" style="text-align:center; border:1px solid black;  width:60px;">Click</div>
<button id="form3button" class="button">BUTTON form3</button>
</form>
</div>

the jquery:

if($.cookie('toogle')=== undefined) {
$('.set form#form1').show();
alert('undefined');


if ($.cookie('toogle') == 'form1') {
    $('.set form#form1').show();
    $('.set form#form2').hide();
    $('.set form#form3').hide();
} else if ($.cookie('toogle') == 'form2') {
    $('.set form#form2').show();
    $('.set form#form1').hide();
    $('.set form#form3').hide();
} else if ($.cookie('toogle') == 'form3') {
    $('.set form#form3').show();
    $('.set form#form1').hide();
    $('.set form#form2').hide();
} else {
    $('.set form#form1').show();
    $('.set form#form2').hide();
    $('.set form#form3').hide();    
};

alert($.cookie('toggle'));

    $('#form1button').on('click', function() {

        $.cookie('toggle', 'form1');
            alert('form1 button!!!');
    });

    $('#form2button').on('click', function() {

        $.cookie('toggle', 'form2');
            alert('form2 button!!!');
    });

    $('#form3button').on('click', function() {

        $.cookie('toggle', 'form3');
            alert('form3 button!!!');
    }); 

$('.set p').click(function() {

    $(this).toggleClass('active').next().slideToggle('slow');

    });

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>";
        }
}

?>