I have a form which submits via ajax and returns data inside a div on the page.

This works perfectly well. However, one of the requirements was to add an export functionality to the form so the client can export the data to a csv and open it in Excel.


No big deal right? I’ve written data export code before see my post on exporting data to excel. Well actually there was a slight problem because it was an ajax form it meant the contents of the csv was being loaded into the div inside the form.


I needed a solution. I realised that I needed to change the mode of the form depending on which button was pressed. So I came up with this bit of javascript/jquery.

//Ajax switching by Paul Seal at MEDIAmaker
//Licensed under MIT. Free for all uses including commercial
var ajaxSwitching = {
    clickCount: 0,
    submitWithAjax: function (e, control, ajaxOn) {
        if (ajaxSwitching.clickCount == 0) {
            var form = $(control).closest('form');
            $(form).attr("data-ajax", ajaxOn);
        else {
            ajaxSwitching.clickCount = 0;
$(document).on('click', '.use-ajax', function (e) {
    ajaxSwitching.submitWithAjax(e, this, true);
$(document).on('click', '.no-ajax', function (e) {
    ajaxSwitching.submitWithAjax(e, this, false);

To use this, link to the script in your page and then you just add the class to the button or link on the page which submits the form.

Like this:

<button class="use-ajax" name="submit">Submit</button>
<button class="no-ajax" name="export">Export</button>

Paul Seal

A .NET Web Developer from Derby (UK) who specialises in building Content Management System (CMS) websites using MVC with Umbraco as a framework. Paul is passionate about web development and programming as a whole. Apart from when he's with his wife and son, if he's not writing code, he's thinking about it or listening to a podcast about it.