CODEWITHSUNDEEP
javascriptphpjqueryajaxforms
susanloek
susanloek

Reputation: 411

Ajax form submit on current page

I want to submit a form by ajax and send it to my current page to prevent a refresh.

This my HTML:

<form id="suchForm" method="post" action="<?=$PHP_SELF?>">
    <input type="text" id="suche" name="suche" placeholder="Suchen"/>
    <input type="submit style="display:none;" />
</form>

By the way the submit button is hidden, so I am submitting the form by pressing return on my keyboard.

This is my PHP Script:

if ( $_SERVER["REQUEST_METHOD"] == 'POST' ) {
    $suche = $_POST['suche'];
    if (!empty($suche)) {    
        <?php echo $suche ?>
    }  
 }

And finally, this is my current Ajax script:

var frm = $('#suchForm');
frm.submit(function (ev) {
    $.ajax({
        type: frm.attr('method'),
        url: frm.attr('action'),
        data: frm.serialize(),
        success: function (data) {
            alert('ok');
        }
    });
    ev.preventDefault();
    });

The form is submitting by Ajax successfully. The Problem: The Ajax Script prevents a refresh of the site, so nothing is shown by the PHP script (<?php echo $suche ?>). Do you have any solution to send the form with Ajax, preventing the refresh (cause some javascript should happen after the submit) and show the PHP echo?

Upvotes: 1

Views: 2058

Answers (2)

dp2050
dp2050

Reputation: 342

If $suche is not empty, php will echo it. So if you could view the page at the time, you would see what you expect, but in this case, you have AJAX doing the submit for you, so AJAX is the one who can "see" that. If you want to display what AJAX can "see", then simply do whatever you want inside success: function()... that received the data. You could alert(data) instead of alert("OK") to get more clues.

Upvotes: 0

Vivek Srivastava
Vivek Srivastava

Reputation: 569

Try replacing alert('ok'); with the code to display the ajax response. Something like this should work - 

var frm = $('#suchForm');
frm.submit(function (ev) {
$.ajax({
    type: frm.attr('method'),
    url: frm.attr('action'),
    data: frm.serialize(),
    success: function (data) {
        $('<NAME_OF_YOUR_CONTAINER_TO_DISPLAY_RESPONSE>').html(data);
    }
});
ev.preventDefault();
});

Upvotes: 1

Related Questions