Getting Javascript/jQuery and PHP To work together

UPDATED: Okay, Thanks to OneSneakyMofo's Help below, I have managed to use ajax to call a submit.php form and have it return for example an echo statement. My problem is that none of my $post values are being carried over, for example if my start my php script with if (isset($_POST['pizzacrustformid'])) { the javascript will return blank, also when I do a var_dump($_POST);, Nothing is being saved into it which means the data is not being carried over, the php script is just being called. Please let me know if there is something I need to do in order to get the POST information to get carried over from the form as it would with a < Submit > Button traditionally. I Have Updated my code on Github to reflect my progress. https://github.com/dhierholzer/Basiconlineordering Thanks Again!

ORIGINAL POST: I am new to using jquery and having forms be submitted without loading a newpage /refreshing the page.

In my Code I have multiple forms on one page that display one at a time via fade in and out effects by hitting the next button.

My problem is now that I do this, I cannot seem to get a PHP script to activate when hitting the next button to save those form options into sessions.

So here is an example:

<!--First Pizza Form, Pick Pizza Crust Type-->
<div id="pizzacrust">
      <form method="post" name="pizzacrustform" id="pizzacrustformid">  
        <div id="main">
            <div class="example">
              <div>
                <input id="freshpizza" type="radio" name="pizzacrust" value="1" checked="checked"><label style="color:black" for="freshpizza"><span><span></span></span>Fresh Dough</label>
              </div>
              <div>
                <input id="originalpizza" type="radio" name="pizzacrust" value="2"><label style="color:black" for="originalpizza"><span><span></span></span>Original</label>
              </div>
              <div>
                <input id="panpizza" type="radio" name="pizzacrust" value="3"><label style="color:black" for="panpizza"><span><span></span></span>Deep Dish Pan</label>
              </div>              
            </div>
        </div>
     </form>                  
</div>
<div><button href="#" id="btn">Show Pizza Size</button></div>

So this Is my First Form, One thing to pay attention to is that instead of a < Submit > button, I am using a normal button and using javascript to do the submitting part.

Here is that Javascript:

 <!--Controls All Button Fades-->
 $('#btn').click(function(e){    
    $('#pizzacrust, #btn').fadeOut('slow', function(){
        $('#pizzasize, #btn2').fadeIn('slow');
        $('#pizzacrustformid').submit();        
    });
});

and Then:

$(document).ready(function () {
    $('#pizzacrustformid').on('submit', function(e) {
        e.preventDefault();

    });
});

Now Traditionally being a php programmer, I just had a button in my form and then my php activated by having something like:

if (isset($_POST['submitted'])) { //MY Code To save values into sessions}

I cant seem To Get a function like that working when the form is submitted via a javascript function as I have it.

Here is my full code in my GitHub which may make it easier to see more so how these forms are working together right now.

https://github.com/dhierholzer/Basiconlineordering

Please Let me know any solutions that might be possible Thanks again.

Answers


I recommend you do requests via ajax, here a tutorial and examples: http://www.w3schools.com/jquery/jquery_ajax_get_post.asp

delete all jquery functions about submit

create a file called blu.php with the php code

add the jquery code in index.php

with this you only do once request at the end. I hope this helps you.

<?php echo 'tus datos son: '; 
echo ' '.$_POST["data1"]; 
echo ' '.$_POST["data2"]; 
echo ' '.$_POST["data3"]; ?>


<script>
    $(document).ready(function(){
    $("#btn5").click(function(){

        var pizzacrust= $('input[name="pizzacrust"]:checked').val();
        var pizzasize= $('input[name="pizzasize"]:checked').val();
        var pizzatoppings= $('input[name="pizzatoppings"]:checked').val();


        $.post("blu.php",
        {
          data1: pizzacrust,
          data2: pizzasize,
          data3: pizzatoppings
        },
        function(data,status){
            alert("Data: " + data);
        });
    });
    });
    </script>

I think you need to using click() func call ajax, dont use on() submit. Submit action makes current page will refresh. I will review your code later, but you should to try this solution above.


Edit:

OP, it looks like you are wanting to do AJAX, but you don't have anywhere to submit your AJAX to. Firstly, you will need to create a file that accepts the form.

Let's call it submit.php.

With that in place, you can start working on the AJAX call. To begin, you will need to separate your code from index.php.

Take this out of index.php and put it in submit.php:

if (isset($_POST['pizzacrustformid'])) {
// use a foreach loop to read and display array elements
echo '<p>hello!<p>';
}

In your Javascript, you will need to do something like the following:

$('#btn').click(function(e){    
        $.ajax({
          method: "POST",
          url: "some.php",
          data: $('#pizzacrustformid').serializeArray()
        })

          .done(function(data) {
            alert(data); //should be "Hello world"
            $('#pizzacrust, #btn').fadeOut('slow', function(){
              $('#pizzasize, #btn2').fadeIn('slow');
            });
          })
          .fail(function() {
            alert( "error" );
          })
         .always(function() {
           alert( "complete" );
         });        

});

What is happening here is is on submit, your form data will pass over to the submit.php page, and it will generate the PHP code. That code will hit the done function (if it's successful), call an alert, then fade out to the next section.

That should get you on the right path. I would create another branch and strip out all of the forms and work on getting this done before continuing.

Also, I would set this all up in one single form and show the first section, do some validation, and then move on to the next section before finally submitting eveyrthing you need.

Hope this helps.


Need Your Help