Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Modify posted input values on onbegin of ajax.beginform

Tags:

asp.net-mvc

Can posted input values on onbegin of ajax.beginform be modified? I have to modify values of some of the input fields after the form is submitted. But even if I change the values through js, at server side in request.form I am getting the old values which were set initially at the time of form submit. How to get the modified values in request.form?

The code block is as follows:

<% using(Ajax.BeginForm("action", "controller",
     new AjaxOptions{onbegin="funBegin",oncomplete="funComplete"})){ 
%>

<input type="text" id="txtName" name="txtName" value="gaurav"/>
<input type="text" name="txtAge" value="26"/>
<input type="submit" value="click here" />

<% } %>

<script type="text/javascript">
    function funBegin() {
        $("#txtName").val("gaurav pandey");
    }
    function funBegin(result) {
        $("#divParent").html(result.get_data());
    }
</script>

Now when I try to get request.form["txtname"] at server side, I am getting "gaurav" instead of "gaurav pandey".

like image 943
Gaurav Pandey Avatar asked Oct 28 '10 14:10

Gaurav Pandey


People also ask

What is the difference between Ajax BeginForm and HTML BeginForm?

BeginForm() will create a form on the page that submits its values to the server as a synchronous HTTP request, refreshing the entire page in the process. Ajax. BeginForm() creates a form that submits its values using an asynchronous ajax request.

What is Ajax BeginForm in MVC?

Ajax. BeginForm is the extension method of the ASP.NET MVC Ajax helper class, which is used to submit form data to the server without whole page postback. To work Ajax. BeginForm functionality properly, we need to add the reference of jquery.


3 Answers

I didn't feel like going outside of MVC's form submission handling so I solved this differently. Just bind to the form's submit button's click handler. Do your input value fiddling there. The onclick is fired before MVC's form serialization. The onclick also gets called even if the form is submitted by the user hitting enter.

like image 93
xanadont Avatar answered Oct 14 '22 06:10

xanadont


You're having this issue because funBegin is called after the form data has been serialized. From MSDN:

AjaxOptions.OnBegin Property: Gets or sets the name of the JavaScript function to call immediately before the page is updated.

I suggest you write your own submit handler:

<form id="myform" action="/Home/MyAction">
    <input type="text" id="txtName" name="txtName" value="gaurav" />
    <input type="submit" value="Submit" />
</form>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#myform').submit(function() {
            $("#txtName").val("gaurav pandey");

            var form = $(this);
            var url = form.attr('action');
            var formData = form.serialize();
            $.post(url, formData, function(result) {
                // Do something with result
            });

            return false;
        });
    });
</script>
like image 30
sheikhomar Avatar answered Oct 14 '22 07:10

sheikhomar


There is another way to do that :

function funBegin(jqXHR, settings) {
    // before POST - change whatever posted value you want and then 
  // serialize again your form supposedly identified here by form

        settings.data = form.serialize();

  // the advantage is when you arrive here, the form validators have already been executed
  // and you know you have valid values - so you can post
    }
}

For meaning of parameters, see [http://api.jquery.com/jquery.ajax/]

like image 25
Serge Tahé Avatar answered Oct 14 '22 07:10

Serge Tahé