Matt McManis Matt McManis -4 years ago 254
Ajax Question

OctoberCMS Ajax Form still Submits after pressing Cancel

I'm using OctoberCMS based on Laravel.

I have an Ajax checkbox form that uses Twig markup.

http://octobercms.com/docs/ajax/introduction




When you click the Delete button, it prompts with a popup asking to confirm. But if I press cancel, it still submits. However this was working before I switched to Twig/Ajax, but I need that to handle requests a regular form can't do.

{{ form_open() }}

<input type="checkbox" name="delete_queued[]" value="{{ record.name }}" />

<button data-request="onDelete" onclick="return confirm('Delete All Checked?');return false;">Delete Checked</button>

{{ form_close() }}


Note:
data-request="onDelete"
is a php function, it works fine. It's the
onclick
that is not working correctly.




I have tried to use the function outside of
onclick
, with same result:

<button data-request="onDelete" onclick="confirmDelete()">Delete Checked</button>


<script type="text/javascript">
function confirmDelete() {
if (confirm("Delete All Checked?")) {
//submit php data-request
}
return false;
}
</script>


I have also tried to use
event.preventDefault()
instead of
return false
.

Answer Source

I think this might be because you're mixing the Data attributes API and the JavaScript API.

Instead, pick one and it should work:

{{ form_open() }}

    <input type="checkbox" name="delete_queued[]" value="{{ record.name }}" />

    <button data-request="onDelete" data-request-confirm="Delete All Checked?">Delete Checked</button>

{{ form_close() }} 
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download