Question

I have a beginform that automatically sends EVERYTHING to the controller via a ajax script. The problem is I have one button in the form that should only send its value once per click. I cant seem to distinguish it between the rest of the automatic data.

GOAL: Once the button is clicked once, i want value 10 (from button) to stop posting to the controller.

AJAX FUNCTION (SUBMITS ALL DATA TO CONTROLLER)

 function toconroller() {
    $.ajax({
        type: 'POST',
        url: this.action,
        data: $('form').serialize(),
        success: function (result) {
            $('#box').html(result.info);
            }
        });
    }

BUTTON FUNCTION

 Function submitonce() { 
//I want to only submit value of button once.
 }

BEGINFORM WITH BUTTON

    @using (Html.BeginForm()) 
    { 
    <input id="data" onkeyup="tocontroller();">
   <input type="submit"  name="clicked" id="clicked" value="10" onclick="submitonce();" />
    }

Answer 1

You could remove the value attribute of the submit button when clicked:

function submitonce() { 
    $('#clicked').removeAttr('value');
}

or do it unobtrusively without using the onclick attribute but subscribing to the .click() handler using jQuery:

$(function() {
    $('#clicked').click(function() {
        $(this).removeAttr('value');
    });
});

or instead of removing the value attribute of the button you might want to set it to empty or something else:

$('#clicked').val('');

And since this is a submit button you might want to cancel its default action of submitting the form by returning false from its click handler (my second unobtrusive jQuery example).