Disable button on click but cannot pass parameter to controller

Question

I have a button, which when clicked I want to disable.

<input type="submit" value="Save" class="btn btn-default" name="submit" style="float: right; position: relative; right: -18px;" />

The value "Save" needs to pass from the button to the controller:

 public ActionResult EditCall(ModelCallDetails call, string submit)

but, obviously when I put an OnClick event such as disable, the parameter is not pushing to the controller.

Is there anyway of actually passing the value to the controller, the form is still posting the model info.

Answer 1

Use onsubmit event.

Example :

<form action="" method="post" onsubmit="return submitForm(this);">  
    <input type="submit" value="Save" class="btn btn-default" name="submit" style="float: right; position: relative; right: -18px;" /> 
</form>  

<script type="text/javascript">  
    function submitForm(th) {   
        th.submit.disabled = true;  
        return true;
    }  
</script>  

You can test in the below snippet that when the button becomes disable, the submit event isn't called anymore. I only changed return true to return false because I shouldn't post to stackoverflow. It's just to show you that the event isn't callable anymore after having its submit button setted to disabled=true .

 <form action="" method="post" onsubmit="return submitForm(this);"> <input type="submit" value="Save" class="btn btn-default" name="submit" /> </form> <script type="text/javascript"> function submitForm(th) { th.submit.disabled = true; console.log("passed"); return false; } </script>