PHP JQUERY AJAX表单提交响应

Question

I have a very detailed form built with php when i try to do the regular GET submit with php it works just fine, but i need to do this with ajax as i need to make a live preview with some information from the php file, I am familiar with PHP, HTML, CSS but i have no experience with ajax

So my form is like this and it has two submit buttons i am concerned about the preview button. Basically i want the page to submit to the php dopdf.php and bring back the results from it.

<form action="dopdf.php" name="formular" id="form" method="GET" enctype="multipart/form-data">
<!-- Lots of input -->
<input type="submit" value="Create PDF" name="print" class="btn btn-primary submit-button" onclick="javascript:document.getElementById('act').value='0'" style="margin-left: 0;" />
<input type="submit" value="Preview!" name="preview" class="btn btn-primary submit-button" onclick="javascript:document.getElementById('act').value='0'" style="margin-left: 0;" />

And this here is the jquery i am using to sumbit via ajax:

<script>
$('#form').submit(function() { // catch the form's submit event
$.ajax({ // create an AJAX call...
    data: $(this).serialize(), // get the form data
    type: $(this).attr('GET'), // GET or POST
    url: $(this).attr('dopdf.php'), // the file to call
    success: function(response) { // on success..
    //    $('#created').append(response); // update the DIV
    alert(response);
    }
});
return false; // cancel original event to prevent form submitting
});
</script>

and this here is the code as a test that i am trying if this works i'll put in the data in the if statement:

if (isset($_GET['preview'])) { ?>
   <?php echo = "This is a test";  exit();?>
<?php } else {
   // This is for the other submit button.
}

The Issue that i have is the ajax works and i get a response in the alert but the alert response that i get is the same page that i posting from since i am posting this form from document.php so i am getting document.php back.

Answer 1

You have a mistake when setting the url. The following should be correct:

$(this).attr('action')

Answer 2

I think you are actually doing things twice. When you press the button it is running the javascript but also processing the submit as it always did.

You need to tell the browser not to do the normal submit as you are now doing it with js/Ajax so add this line to your javascript

Also you have a few error in setting the ajax parameters.

Use

<script type="text/javascript">
$('#form').submit(function(event) { // catch the form's submit event
    event.preventDefault();

    $.ajax({ // create an AJAX call...

        data: $(this).serialize(), // get the form data
        type: $(this).attr('method'), // GET or POST
        url: $(this).attr('action'), // the file to call
        success: function(response) { // on success..
        //    $('#created').append(response); // update the DIV
        alert(response);
        }
    });

});
</script>