jQuery .submit() .ajax() have to click send button two times to get the correct response

Question

I have a form with 5 fields that i am sending with AJAX to a PHP Script that does some simple validation and returns a string.

I have made a little jQuery script for the actual submission, and when i try to send the form i have to click the send button two times.

Update: Url to live site: http://www.dan-levi.no/new/#!/Kontakt

Here are some code:

HTML

<form id="contact_form" class="form-horizontal" action"includes/contact.php" method"post">
            <div class="control-group">
                <label class="control-label" for="contact_name">Ditt navn og evt. bedrift</label>
                <div class="controls">
                    <input type="text" class="input-large" id="contact_name" name="contact_name" placeholder="Ditt navn og evt. bedrift" />
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="contact_email">E-post</label>
                <div class="controls">
                    <input type="email" class="input-large" id="contact_email" name="contact_email" placeholder="E-post" />
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="contact_tel">Telefon</label>
                <div class="controls">
                    <input type="tel" class="input-large" id="tel" name="contact_tel" placeholder="Telefon" />
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="contact_subject">Emne</label>
                <div class="controls">
                    <input type="text" class="input-large" id="subject" name="contact_subject" placeholder="Emne for melding" />
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="contact_desc">Din beskjed</label>
                <div class="controls">
                    <textarea rows="10" class="input-large" id="contact_desc" name="contact_desc" placeholder="Din beskjed"></textarea>
                </div>
            </div>
            <div class="text-error pull-right" id="error_message"></div><br>
            <input class="btn btn-large pull-right" type="submit" name="" value="Send" /><br>
</form>

javaScript

$(document).ready(function() {
    $('#contact_form').submit(function(e) {
        data = $('#contact_form').serialize();
        $.ajax({
            url: 'includes/contact.php',
            type: 'POST',
            data: data,
        })
        .done(function(response) {
            if (response == 'empty') {
                $('#error_message').text('Noen av feltene er tomme.')
            } else {
                $('.message').html(response);
                $('#contact_form').fadeOut('400');
                $('#info_line').fadeIn('400').text('Takk for din henvendelse');
            };  
        })        
        e.preventDefault();
    });
});

PHP

$contact_name = $_POST['contact_name'];
$contact_email = $_POST['contact_email'];
$contact_tel = $_POST['contact_tel'];
$contact_subject = $_POST['contact_subject'];
$contact_desc = $_POST['contact_desc'];

if ($contact_name == '' || $contact_email == '' || $contact_tel == '' || $contact_subject == '' || $contact_desc == '') {
    echo "empty";
    die();
}
echo $contact_name.'<br><br>';
echo $contact_email.'<br><br>';
echo $contact_tel.'<br><br>';
echo $contact_subject.'<br><br>';
echo $contact_desc.'<br><br>';

I cant find out why i have to click the button two times, i have tried some trial and error, read the forum for answers. I tried to serialize the form outsite the submit function, i just cant get this to behave the way i want. All help is greatly appreciated.

Oh, worth to mention. The actual response is that the fields are empty (php validation) the first time i click, but the second time it works as it should.

that's happening because you are preventing the default behavior which is to submit mostly ! — Hussein Nazzal
– Hussein Nazzal, Commented Oct 7, 2013 at 16:16
you are missing a few = for the form attributes (method and action) — Gabriele Petrioli
– Gabriele Petrioli, Commented Oct 7, 2013 at 16:22
@Dan-LeviTømtaHansen, i mean in the html that you posted .. (i do not think it has anything to do with your problem.. it was just an observation. the action"includes/contact.php" should be action="includes/contact.php" and the same with the method) — Gabriele Petrioli
– Gabriele Petrioli, Commented Oct 7, 2013 at 16:33
@GabyakaG.Petrioli Thanks for pointing that out, did not see that one! :) — Dan-Levi Tømta
– Dan-Levi Tømta, Commented Oct 7, 2013 at 16:37

Justin · Accepted Answer · 2013-10-07 17:21:52Z

1

Make the ajax call using a regular input button instead of a submit button.

$("#button").click(function () { ... ajax ... }

answered Oct 7, 2013 at 17:21

Justin

4724 silver badges16 bronze badges

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

3 Comments

Dan-Levi Tømta Over a year ago

I did not find out of this, my guess is that it was some kind of conflict with another javascript, so i did another approach with your suggestion, making it a button and using a click function. case closed. Thanks mate.

Justin Over a year ago

No Problem. If you accept the answer with the checkmark it will indicate to other users with similar problems that this is the solution.

Viktor Bogutskii Over a year ago

$("#button").click(function () { ... ajax ... });

Jonathon · Accepted Answer · 2013-10-07 16:18:13Z

0

I'm not sure if it makes a difference but have you tried putting what you want to happen afterwards in a success callback?

$(document).ready(function() {
    $('#contact_form').submit(function(e) {
        data = $('#contact_form').serialize();
        $.ajax({
            url: 'includes/contact.php',
            type: 'POST',
            data: data,
            success: function(response) {
                if (response == 'empty') {
                    $('#error_message').text('Noen av feltene er tomme.')
                } else {
                    $('.message').html(response);
                    $('#contact_form').fadeOut('400');
                    $('#info_line').fadeIn('400').text('Takk for din henvendelse');
                }; 
            }
        });     
        e.preventDefault();
    });
});

answered Oct 7, 2013 at 16:18

Jonathon

16.4k12 gold badges78 silver badges98 bronze badges

1 Comment

Dan-Levi Tømta Over a year ago

Hi Jonathon, it behaves just the same but thanks, i am very confused about this. I want to prevent the default action and send the form via Ajax and have some validation but i still have to click the actual submit button twice. I have to fiddle around some. Oh, worth to mention. The actual response is that the fields are empty the first time i click, but the second time it works as it should

stevemiketa · Accepted Answer · 2013-10-07 17:08:18Z

I'm guessing it's because the default action (submit the form) is processing before your $.ajax request. Try making e.preventDefault() first in your submit callback.

$(document).ready(function() {
    $('#contact_form').submit(function(e) {
        e.preventDefault();
        data = $('#contact_form').serialize();
        $.ajax({
            url: 'includes/contact.php',
            type: 'POST',
            data: data,
            success: function(response) {
                if (response == 'empty') {
                    $('#error_message').text('Noen av feltene er tomme.')
                } else {
                    $('.message').html(response);
                    $('#contact_form').fadeOut('400');
                    $('#info_line').fadeIn('400').text('Takk for din henvendelse');
                }; 
            }
        });     
    });
});

Collectives™ on Stack Overflow

jQuery .submit() .ajax() have to click send button two times to get the correct response

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related