I have a button that once it is clicked I load an HTML form from a different file using ajax, the code is this,
$( "#newDeck" ).click(function() {
$( "#right-panel" ).load( "../HTML_files/new_deck.html" );
});
This is the HTML form that is loaded in,
<form class="form-inline" id="new_deck_form" action="" method="post">
<div class="deck_name_holder">
</br>
</br>
</br>
</br>
Name the new Deck:
</br>
</br>
<!-- Text input-->
<div id="deck_nam_div" class="control-group">
<div class="col-xs-4 col-xs-offset-4">
<input id="deck_name" name="deck_name" type="text" class="form-control"
placeholder="Spanish 101" class="input-medium" required="">
</div>
</div>
</br>
</br>
<button id="name_deck_button" class="btn btn-primary" type="submit">Name Deck</button>
</div>
</form>
I am trying to submit it using jQuery with ajax, this is my code
$(document).ready(function(){
// process the form
$('#new_deck_form').submit(function(event) {
// stop the form from submitting the normal way and refreshing the page
event.preventDefault();
// get the form data
// there are many ways to get this data using jQuery (you can use the class or id also)
var formData = {
'deckName' : $('input[name=deck_name]').val()
};
// process the form
$.ajax({
type : 'POST', // define the type of HTTP verb we want to use (POST for our form)
url : '../API/deck_api.php', // the url where we want to POST
data : formData, // our data object
dataType : 'json', // what type of data do we expect back from the server
encode : true
})
// using the done promise callback
.done(function(data) {
// log data to the console so we can see
console.log(data);
// here we will handle errors and validation messages
});
});
});
I know the PHP code works because I originally used it with javascript but when I changed my code to jQuery it stopped working.
What happens when I push the button to submit the HTML form the page removes all of the modifications that java code has done to alter the page. It is as if it is submitting the page through PHP. Why isn't my jQuery working?
