Question

I’m trying to use AJAX with jquery… this is what I’m trying to do :

    <div class="form">
            <form name="contact" class="js-form-contact" action="contact.php" method="post">
                <div class="clearfix">
                    <label>Mail</label>
                    <div class="input">
                        <input type="text" size="44" name="mail"/>
                    </div>

                    <div class="clearfix">
                        <label>Message</label>
                        <div class="input">
                            <textarea rows="6" name="message"></textarea>
                        </div>
                    </div>

                    <!-- recaptcha -->

                    <br/>

                    <div class="submit">
                        <input type="submit" class="btn primary" value="Enviar"/>
                    </div>

                    <div id="quote">
                        <p> :D </p>
                    </div>
                </div>  
            </form>
        </div>          
    </div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("btn primary").click(function(){
            $.ajax({
                type: "post",
                url: "contact.php",
                data: $('.js-form-contact').serialize(),
                success: function(data) {                                               
                    $('.js-form-contact .btn primary').attr("disabled", true);
                    $('#quote').html("Rock!!");
                    // $('.column:first-child .box').after('<p class="msg">' + data + '</p>');  
                }
            });         
        });
    });
</script>

the contact.php is just doing “echo “Hello”;” for now. When I click the submit button, the browser goes to contact.php and it echoes “Hello”…

What’s the problem here? , I’m quite new with JS and jQuery so please bare with my noobishness 🙂

Answer 1

Your jQuery selector is wrong. It should be $(".btn.primary"). The . denotes that it’s a class of the element you’re looking for. No whitespace between classes means the element should have all those classes to match.

Furthermore, you should probably use event.preventDefault() to prevent the click-event bubbling up to the organic submit handler.

To put the money where my mouth is…

// Note the parameter in the click-handler declaration
$(".btn.primary").click(function (event) {
    event.preventDefault();

    // Do ajax magic here
});