Ik ben bezig met het maken van een formulier waarin je taken via ajax verstuurd.
Nu heb ik het formulier af en heb ik op onsubmit een jquery functie gezet.
Kom nu tegen het volgende probleem aan :
Het formulier wordt wel verzonden maar niet via ajax.
De pagina herlaadt zichzelf gewoon.
Nu weet ik niet zeker wat er mis gaat.
Hier is mijn code :
<script>
// JS
TASK.newTask = function(f) {
$(f).submit(function(event) {
var url = $(this).attr('action');
var data = $(this).serialize();
console.log(url);
console.log(data);
$.post(url, data, function(data) {
console.log(data);
$(ol).append(
'<li> ' +
'<label><span class="task-description">' + data.taskTitle + '</span> <span class="label label-' + data.taskColor + '">' + data.taskLabel + '</span></label>' +
'<div class="options todooptions ng-scope">' +
'<div class="btn-group">' +
'<button class="btn btn-default btn-xs completeTask" rel="'+ data.id +'"><i class="fa fa-fw fa-check"></i></button>' +
'<button class="btn btn-default btn-xs editTask" rel="'+ data.id +'"><i class="fa fa-fw fa-pencil"></i></button>' +
'<button class="btn btn-default btn-xs deleteTask" rel="'+ data.id +'"><i class="fa fa-fw fa-trash-o"></i></button>' +
'</div>' +
'</div>' +
'</li>');
}, 'json')
.done(function() {
TASK.getAll('.panel-tasks', '#taskCount');
})
.fail(function() {
alert( "error" );
});
event.preventDefault();
});
}
// END JS
</script>
<form id="taskForm" method="POST" class="form-horizontal" onsubmit="TASK.newTask('#taskForm')" action="@dmz_route(add_task)">
<div class="form-group">
<div class="col-lg-6 col-xs-5">
<input type="text" class="form-control" placeholder="Task title..." name="taskTitle" />
</div>
<div class="col-lg-2 col-xs-2">
<input type="text" class="form-control" placeholder="Task label..." name="taskLabel" />
</div>
<div class="col-lg-2 col-xs-2">
<select name="color" class="form-control">
<option selected class="label-success" value="success" selected="selected">Success</option>
<option class="label-primary" value="primary">Primary</option>
<option class="label-warning" value="warning">Warning</option>
<option class="label-danger" value="danger">Danger</option>
<option class="label-info" value="info">Info</option>
</select>
</div>
<div class="col-lg-2 col-xs-3">
<input class="btn btn-success btn-block" id="submit" value="Add" type="submit">
</div>
</div>
</form>
Heeft iemand enig idee waarom dit niet werkt ?
