Currently I'm working on a project which has a form that connects to an external database. First I made an example, just to test if it worked. This worked fine.
But when I tried implementing it, the form doesn't empty anymore, while the example does empty the fields. My code is exactly the same, so I don't understand what's wrong. The only difference is that one file is within a jquery-mobile/phonegap folder, and the other on my htdocs.
(It does work, the only thing that it doesn't do is empty the form input fields after submitting, which is confusing for the user)
Here's my code:
HTML:
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile.structure-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
<script>
function onBodyLoad() {
document.addEventListener("deviceready",onDeviceReady,false);
}
</script>
</head>
<body onload="onBodyLoad()">
<div data-role="page" id="page7" class="pagina">
<div data-role="header">
<h1>Name</h1>
</div><!-- /header -->
<div data-role="content" id="content">
<div id="weekoverzicht">
<form id="overzicht" method="post" onsubmit="return infoOverzicht()">
<label for="fruit">
<b>Fruit</b>
<input type="text" id="fruit" name="fruit">
</label>
<label for="groente">
<b>Groente</b>
<input type="text" id="groente" name="groente">
</label>
<label for="beweging">
<b>Beweging</b>
<input type="text" id="beweging" name="beweging">
</label>
<label for="duur">
<b>Duur</b>
<input type="text" id="duur" name="duur">
</label>
<input type="submit" value="Save">
</form>
</div>
<div data-role="content">
<a data-role="button" data-transition="fade" href="#" id="button"> Data ophalen </a>
<table data-role="table" data-mode="columntoggle" class="ui-responsive" id="myTable">
<thead>
<tr>
<th data-priority="1">Fruit</th>
<th data-priority="1">Groente</th>
<th data-priority="1">Beweging</th>
</tr>
</thead>
<tbody data-role='listview' data-theme='c' id='mylist'></tbody>
</table>
<p id="showData"></p>
</div>
</div>
<div data-role="footer" style="text-align:center;" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="index.html" data-icon="home">Home</a></li>
<li><a href="test.html" data-icon="plus">Test</a></li>
<li><a href="doel.html" data-icon="star">Doel</a></li>
<li><a href="score.html" data-icon="check">Score</a></li>
</ul>
</div>
</div><!-- /footer -->
</div>
</body>
</html>
Js file:
var url = "http://example.com/";
console.log("first page initialized");
$.ajax({
type: "POST",
url: url + "complex.php",
cache: "false",
dataType: "json",
success: function(phpData){
console.log("Complex: " + phpData);
$("#showData2").append("<b>" + phpData.comments[0].sport + "</b>");
$.each(phpData.comments, function(index, berichtje){
console.log(berichtje);
$("#mylist").append(
"<tr>" +
"<td>" + berichtje.fruit + "</td>" +
"<td>" + berichtje.groente + "</td>" +
"<td>" + berichtje.beweging + "</td>" + "</tr>"
);
});
$('#mylist').listview('refresh');
},
error: errorHandling
});
function infoOverzicht(){
var data = $('form#overzicht').serialize();
$('form#overzicht').unbind('submit');
$.ajax({
url: "http://example.com/save.php",
type: 'POST',
data: data,
beforeSend: function() {
},
success: function(data, textStatus, xhr) {
},
error: function(xhr, textStatus, errorThrown) {
}
});
return false;
}
function errorHandling(){
console.log('er gaat iets fout');
}
I tried solutions like this one, but to no avail: Clear form after submission with jQuery
Does anyone know what I'm doing wrong? It's probably some stupid little thing, but I can't find it, haha.
