Submitting a form to the same page without reloading it

Question

I am trying to send a form using Ajax without refreshing the page. It is important that the form gets submitted to the same page, that's why I use url: 'customer-management?form_sent=yes'.

HTML:

<form action="' . $_SERVER['REQUEST_URI'] . '" method="post">    
      <i onclick="$(this).closest(\'form\').submit()" id="' . $get_uncontacted_member->id . '" class="fa fa-phone-square called"></i>
</form>

JS:

$('.called').click(function() {
    $.ajax({
        type: 'post',
        url: 'customer-management?form_sent=yes',
        data: $(this).attr('id');
        success: function(r) {
            alert(r);
        } 
    })
})

PHP:

if (isset($_POST['form_sent']) && $_POST['form_sent'] === 'yes') { return 'That worked!' }

The page gets reloaded and I guess I am doing everything wrong.

Remove this `onclick="$(this).closest(\'form\').submit()"`. That's reloading the page. — Farzher, May 16 '15 at 01:44
@StephenBugsKamenar true, thanks! But I still don't get an alert. — Reza Saadati, May 16 '15 at 01:46
You have `onclick="$(this).closest(\'form\').submit()"` in your html AND `$('.called').click(function() { });` in your javascript? Why both? Also, in neither one do you prevent the default form submission. Try adding a `event.preventDefault();` in your `$('.called').click(function() { });` code — Sean, May 16 '15 at 01:46
I believe you just want to use AJAX here is an example http://stackoverflow.com/questions/16323360/submitting-html-form-using-jquery-ajax/16324058#16324058 — abc123, May 16 '15 at 02:10

Jake Opena · Accepted Answer · 2015-05-16T02:01:31.000

2

You are not passing your data correctly. Since you are doing a POST Request, you should not pass your data as a query string. Instead, pass it thru the data property. Also, add return false; so that the form will not submit.

$.ajax({
    type: 'post',
    url: 'customer-management',
    data: { form_sent: 'yes' },
    success: function(r) {
        alert(r);
    } 
});

return false;

You can remove this code:

onclick="$(this).closest(\'form\').submit()"

edited May 16 '15 at 02:01

answered May 16 '15 at 01:56

Jake Opena

1,357
1
10
18

Thank you, this seems to work. The page is not reloading anymore and I get an alert. But there is an issue with the message of the alert. It shows me the whole source of my HTML page instead of what PHP should have returned ('That worked!'). – Reza Saadati May 16 '15 at 02:09
I did, still the same. – Reza Saadati May 16 '15 at 02:26
Oh. don't forget to `exit;` after you echo as it will continue to render the remaining html source in your page. – Jake Opena May 16 '15 at 02:33
Ok it looks better now. I see 'That worked!' at the end of the alert message but above there is still some HTML source (I am using Wordpress, maybe that's why?). Could I use e.g. `$data = 'That worked!'` and then alert only the value of this variable anyhow? – Reza Saadati May 16 '15 at 02:43
I believe so. If you really have to mix your php code with html, you should put that specific code before the tag. – Jake Opena May 16 '15 at 02:52

score 1 · Answer 2 · answered May 16 '15 at 01:45

1

You have to return false; from your onclick even, or else the browser will continue to submit the form.

onclick="$(this).closest('form').submit(); return false;"

answered May 16 '15 at 01:45

Chloe

21,167
37
143
289

Thank you, I have now completely removed that onclick() part. The page is not reloading anymore but yet nothing happens and I don't get an alert. – Reza Saadati May 16 '15 at 01:50
1

Right idea, but wrong place. That just says `submit the form, wait don't submit the form`. That should be done in the javascript code block where the OP is doing their ajax request. – Sean May 16 '15 at 01:50

score 1 · Answer 3 · answered May 16 '15 at 01:54

Try this:

<form method="post">
            <i id="<?php echo $get_uncontacted_member->id; ?>" class="fa fa-phone-square called"></i>
    </form>
    <script>
            $('.called').click(function()
            {
                    $.ajax({
                            type   : 'post',
                            url    : 'customer-management',
                            data   : {form_sent: 'yes',id:$(this).attr('id')},
                            success: function(r)
                            {
                                    alert(r);
                            }
                    })
            });
    </script>

PHP:

    <?php
if(isset($_POST['form_sent']) && $_POST['form_sent'] === 'yes')
{
        echo 'That worked!';
        exit;
}
?>

Submitting a form to the same page without reloading it

3 Answers3