form within AJAX jQuery toggle, submits at parent onClick not from submit button

Question

Basically mysimplewebform.php form submits when the toggle is clicked, as opposed to after the form is loaded, used by user and SUBMITTED via submit button at form. Obviously I need to have form operate functionally; user fills it out, and clicks submit. I simply used AJAX to bring in the form on the template page. Now everytime toggle button is clicked 'Form is submitted with empty values' and then appears in the toggle. Making it pretty useless at this point, I have been struggling with this forever. I think this is a matter of toggling the data: below --

$(document).ready(function() {

    $('#toggle3').click(function(){
        var tog = $('.toggle');
        $.ajax({
            type: 'POST',
            url: '/mysimplewebform.php',
            data: $(this).closest('form').serialize(), // This was a recent suggestion
            success: function (fields){
                tog.html(fields);
                tog.slideToggle(1000);
            }
        });
      });
    });

Branched out from: How to send external form POST data through AJAX

Answer 1

Ok, so you want to display an html form when a user clicks a button? In that case you can use the simplified jquery load method:

$('#yourbutton').click(function(){
    $('#somediv').load('/mysimplewebform.php');
});

I know this doesnt handle your toggle requirement, but i dont think that is where you are having issues.

Now onto the php. I dont know exactly what should be in mysimplewebform so heres an example

if(isset($_POST['fname'])){
    //we have a post request, lets process it

    echo 'hello'.$_POST['fname'];
}?>

<form action="absolute/path/to/mysimplewebform.php" method="post" id="mysimplewebform">
    <input type="text" name="fname" placeholder="Enter Name">
    <input type="submit" value="submit">
</form>

Notice the action is an absolute path to the file, because a relative path will be wrong if the form is loaded into another page via ajax.

Now when this form is submitted, the browser will be redirected to mysimplewebform.php.

I expect you want to stay on the same page, in which case you could submit the form via ajax:

$('#mysimplewebform').submit(function(ev){
    ev.preventDefault();//stop normal redirecting submit
    $.post( $(this).attr('action'), $(this).serialize(), function(data){
          $('#somediv').html(data)
    });

This replaces the whole form in the dom with the output, so the hello message would be displayed.

All of the above is an attempt to help you understand where you have been going wrong in your attempts. It is not the best solution to your overall problem - i would separate the html form and processing into seperate files for a start, but it should be familiar to you.