1

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.

Improve this question
4
  • It seems to me that you have everything except the ajax call to execute the submit... Commented May 5, 2015 at 21:14
  • Actually it looks like you have an ajax call defined for #pizzatoppingsformid. Does that work? What do you get in the console? Commented May 5, 2015 at 21:20
  • Yeah, that is a snippit of code I pulled off the internet, However my limited experience using ajax limits my ability to screw with it enough to know what I need to get out of it.. I am guessing I need to send the form $post data via ajax to PHP and then just not have a return on it since PHP is the server side language storing it into sessions until I stick it into a DB later on.. But I might even be wrong about making it not return anything. Please let me know if that is the general idea of what I need to do.. Any code would be Greatly appreciated as well. Commented May 6, 2015 at 1:36
  • After doing e.preventDefault() which will prevent the form from being submitted "the normal way", you could do your POST call like: $.post( 'your_php.php', $('#pizzacrustformid').serialize(), function(data) { alert('AJAX call done, response: ' + data });. The info will be sent through AJAX and your PHP will work as usual using $_POST. Inside the callback function (where I did the alert()) do what's necessary to update the website (show a success mesage or whatever). Commented May 6, 2015 at 4:26

3 Answers 3

Reset to default
1

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Mind explain your answer a little more ?
Thanks for the help! So to my understanding I should just use my $('#btn').click(function(e) to start the function call to PHP instead of using the $('#pizzacrustformid').on('submit', function(e) . Is there a reason why you shouldn't use .on submit to start an ajax call? (That is me just wondering, I don't really have a preference of how to do it.). Also, I have updated my code and tried this, I have It point to submit.php and just have a simple hello world in that submit.php document for testing purposes. however, when I run the code. It returns in the alert(data) nothing.
From messing with it, it appears that ajax is connecting to submit.php. The problem seems that if (isset($_POST['pizzacrustformid'])) is not getting activated. When submit data via ajax, can I use something like if (isset($_POST['pizzacrustformid'])) to get the script activated? When I take out the If statement in the php and just have echo '<p>hello World!<p>';, it returns the echo. I have my Github Repository updated for this code github.com/dhierholzer/Basiconlineordering Thanks again for all the help!
0

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>
Improve this answer

3 Comments

Thank you, I am trying to go the ajax route but am still not having total luck, if you can, take a look at my full code on Github github.com/dhierholzer/Basiconlineordering and one of my functions towards the bottom of the source code has a bit of ajax in it. This was just some code I have pulled online however I am not totally sure how to use it. I understand that it needs to activate the php script or send the data from the form to the php script so i can store in data in sessions which needs to be server side. Thanks again!
Hi, try with this answer. It Works fine with ajax. This method only send once request at the end instead of many times.
Nice work dude, at First I didn't think much of your answer but it ended up working out well after toying with it a little bit. Thanks again.
0

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.

Improve this answer

1 Comment

He has e.preventDefault(). It shouldn't refresh his page.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.