How do you use twitter bootstrap button with jquery?

Question

What I want to do is when a user clicks on the submit button in a forum, it should send the data collected to the php script and ideally, stay on the same page. Currently, I have in the form(I have other tags in the form but these are the two things I need to focus on)

<form name = "reply" id="replyForm" action="sqlinserter.php" method = "POST">
<button id = "newThread" class="btn btn-primary" type="submit">Submit</button>

As you can see, I use a form that sends the data to sqlinserter.php when the user clicks the submit button. Basic form stuff. Right now, when it clicks submit it goes to the actual sqlinsert.php page which is blank because it is just sending data to the database.

However, I would like to create a simple jquery script where you click the button it sends the data using ajax. I have been noticing that twitter bootstrap works differently with buttons and I am not sure how to use their buttons with jquery. Any help with this would be great.

So,

1. I need to figure out how to use twitter bootstrap buttons with jquery. Specifically, I need to figure out how to use the submit button.
2. How to send data using ajax?

Answer 1

1. I need to figure out how to use twitter bootstrap buttons with jquery. Specifically, I need to figure out how to use the submit button.

Bootstrap can be used together with jQuery, no additional steps required. Actually even bootstrap itself use jQuery in their framework.

You can still use jQuery like usual, and bootstrap like usual. Both will work, without any conflicts.

2. How to send data using ajax?

It can be done by using one of jQuery AJAX function, for example $.ajax.

Just add new event, click, on your button #newThread. Write the AJAX inside the event handler. Example based on your code can be seen in below.

HTML

<form name = "reply" id="replyForm" action="sqlinserter.php" method = "POST">
    <button id = "newThread" class="btn btn-primary" type="submit">Submit</button>
</form>

JS

$(function() {
    $('#newThread').on('click', function (e) {
        e.preventDefault(); // disable the default form submit event

        var $form = $('#replyForm');

        $.ajax({
            url: $form.attr("action"),
            type: $form.attr("method"),
            data: $form.serialize(),
            success: function (response) {
                alert('response received');
                // ajax success callback
            },
            error: function (response) {
                alert('ajax failed');
                // ajax error callback
            },
        });
    });
});

Answer 2

There isn't any specific way to use a twitter bootstrap button. Just grab the id of this submit and submit the data via ajax like below:

$.ajax({
            type:'GET',
            dataType:'xml',
            url:'path/to/phpfile.php',
            success:function(data) {
                // Do the handling here
            },
            error:function() {
                alert("Sorry, Ajax call Failed");  
            }
        });