How to Get Button to Trigger Ajax Request in Bootstrap

Question

I have a modal form with Bootstrap that is associated with a specific item that is customized by the user before being added to the cart. I'm trying to trigger an Ajax request when the "Add to Cart" button is clicked. But the button doesn't seem to be triggering anything. I'm using a modified version of Bootstrap's sample code: http://getbootstrap.com/javascript/#modals-related-target

Any suggestions on how to get the button to trigger an ajax request properly?

UPDATE: I've added the PHP code below in case that might be the issue.

HTML:

<div class="modal-body">
  <form name="formBasic" id="formBasic">
    <input type="hidden" name="function" value="basic-form">
     <div class="form-group">
       <label for="message-text" class="control-label">Enter customized information</label>
       <textarea class="form-control" id="customized-information"></textarea>
 </div>
 </form>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  <button type="button" class="btn btn-primary" id="basic-submit">Add to Cart</button>
 </div>

Javascript:

$(document).ready(function () {
var formBasic = function () {
    var formData = $("#formBasic").serialize();
    $(form).ajaxSubmit({

        type: 'post',
        data: formData,
        dataType: 'json',
        url: 'http://localhost/forms.php'

        error: function () {
            console.log(output);
            alert("There was an error processing this page.");
            return false;
        },

        complete: function (output) {
            $('#formBasicResults').html(output.responseText);
        }
    });
    return false;
};

   $("#basic-submit").on("click", function (e) {
   e.preventDefault();
   formBasic();
});
});

PHP:

//formBasic Processing
function formBasic(){
$output = 'Output from Form Basic:
';
foreach ($_POST as $key => $value) {
$output .= $key . ': ' . $value . '
';
}
echo $output;
}

//FormAdvanced Processing
//. . . 

if(in_array($_POST['function'], array('formBasic','formAdvanced'))){
$_POST['function']();
}else{
echo 'There was an error processing the form';
}

Answer 1

Your code should be:

$(document).ready(function () {
var formBasic = function () {
var formData = $("#formBasic").serialize();
$.ajax({
    type: 'post',
    data: formData,
    dataType: 'json',
    url: 'http://localhost/forms.php',
    error: function () {
        alert("There was an error processing this page.");
        return false;
    },
    complete: function (output) {
        $('#formBasicResults').html(output.responseText);
    }
});
return false;
};

$("#basic-submit").on("click", function (e) {
  e.preventDefault();
  formBasic();
});
});

Issues:

1- Missing comma on line:

url: 'http://localhost/forms.php'

2- form not defined:

$(form).ajaxSubmit({

Working fiddle: http://jsfiddle.net/p9v2eg4u/2/

Answer 2

$('#basic-submit').click(function() {
  var formData = $("#formBasic").serialize();
  console.log(formData);

added a console.log(); of the value of form data

  $('#formBasic').ajaxSubmit({
     type: 'POST',
     data: formData,
     dataType: 'JSON',
     url: 'http://localhost/forms.php', 

added missing comma after URL

     error: function () {
         alert("There was an error processing this page.");
         return false;
     },
     complete: function (output) {
        console.log(output);

another console.log of output object

        $('#formBasicResults').html(output.responseText);
     },
     success: function(output) {}

consider using success instead of complete, complete will execute if success or error.

  });
  return false;
});