How to add additional data in my JQUERY submit?

Question

In my razor view, I'm using a Html.BeginForm. In it I have two elements where when I set clic, should submit the form but I need to add an additional string parameter.

@using (Html.BeginForm("Index", "Quiz", FormMethod.Post, new { id = "form" }))
{
    ...
}

    [HttpPost]
    public ActionResult Index(string parameter, QuizCompletedViewModel q)  //FormCollection f)
    {            
        ...
        if (button.Equals("d"))
        {
            ...
            return RedirectToAction("ShowResults", new { testId = Quiz.QuizId, answeredTest = answeredId });
        }
        else
        {
            ...
            return RedirectToAction("Index", "Dashboard");
        }
    }

So, in my jquery function I utilize $("#element").submit() and the parameter parameter always is null (and that's normal). How can I add additional data for parameter using JQUERY?

NOTE: I'm not using AJAX.

What additional data? from where? what is `#element` - the form or some other element? — tvanfosson, Feb 06 '13 at 04:28
@BhushanFirake Using the same whole model that my razor view — Darf Zon, Feb 06 '13 at 04:36
@tvanfosson #element is the form, sorry. I mean pass the data something like this: { parameter: "d", q: $("#form").serialize() } — Darf Zon, Feb 06 '13 at 04:36
possible duplicate of [jQuery - add additional parameters on submit (NOT ajax)](http://stackoverflow.com/questions/2530635/jquery-add-additional-parameters-on-submit-not-ajax) — Marijn, Mar 25 '14 at 13:02

Iain · Answer 1 · 2013-02-06T05:16:57.293

You could add a hidden input with the name and value you require in your form. This value will be submitted along with all the other form items.

<input type="hidden" name="someName" value="someValue" />

Edit for comment:

If you give each of your submit buttons the value as an attribute you could grab it in the click handler and then append a hidden field with the value inside the form. Something like:

$(function(){
   $('#form input[type=submit]').click(function(e) {
       var val = this.getAttribute("data-param");
       $(this).closest('form').append('<input type="hidden" name="param" value="' + val + '" />");
   });
});

Untested, just a hunch. Hope that the form submit event does not get fired before the button click event. Also you will need to handle the enter event and key press etc.

Why don't you want to use ajax?

Well, imagine that I have two buttons in my razor view, one of them should send "d" as `parameter` and the another send "a" as `parameter` — Darf Zon, Feb 06 '13 at 04:39

Karthik Chintala · Accepted Answer · 2013-02-06T05:16:57.753

6

On your form sumbit try like this:

        $("form").submit(function(){
           $.ajax({     
                type: 'POST',  
                url: "/Quiz/Index",
                dataType: "json",
                data: $("form").serialize() + '&parameter=param1' ,   
                success: function () { 
                    alert("Successful"); 
                }
                error: function(){
                    alert('error');
                }

            }); 
        });

Hope it helps.

Edit

Try like this in your jQuery function:

$('form').append('&param=a');

edited Feb 06 '13 at 05:16

answered Feb 06 '13 at 04:41

Karthik Chintala

5,465
5
30
60

Am I missing something? It's still passing a NULL value in `parameter` value: $("#form").append('button=a').submit(); – Darf Zon Feb 06 '13 at 05:46
can you see any querystring's in your url of browser when you submit the form – Karthik Chintala Feb 06 '13 at 05:53
1

With you last answer, I can achieve more information since your solution: http://stackoverflow.com/questions/3761051/adding-dynamic-parameters-with-html-beginform-and-jquery-submit – Darf Zon Feb 06 '13 at 06:01
Wow! the number of times I monkeyed around with hidden elements, and that was all I had to do. Thanks! – jmadsen Jul 01 '13 at 03:25

score 4 · Answer 3 · edited May 23 '17 at 11:48

Based on your comments, the easiest thing for you to do is make your buttons of type submit and give them a name. If they have a name, the value of the button that is clicked will be sent automatically with the form post, see: sending form's submit button's value?

Example:

When the a button is clicked, parameter will be posted with value a. Likewise for b and c. If the none button is clicked, no value will be sent and parameter will be null (shown for demonstration purposes, you may not need this).

@using (Html.BeginForm("Index", "Quiz", FormMethod.Post, new { id = "form" }))
{
    ...

    <input type="submit" value="a" name="parameter" />
    <input type="submit" value="b" name="parameter" />
    <input type="submit" value="c" name="parameter" />
    <input type="submit" value="none" />
}

How to add additional data in my JQUERY submit?

3 Answers3

Linked

Related