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
– tvanfosson, Commented Feb 6, 2013 at 4:28
@BhushanFirake Using the same whole model that my razor view — Darf Zon
– Darf Zon, Commented Feb 6, 2013 at 4:36
@tvanfosson #element is the form, sorry. I mean pass the data something like this: { parameter: "d", q: $("#form").serialize() } — Darf Zon
– Darf Zon, Commented Feb 6, 2013 at 4:36
possible duplicate of jQuery - add additional parameters on submit (NOT ajax) — Marijn
– Marijn, Commented Mar 25, 2014 at 13:02

Karthik Chintala · Accepted Answer · 2013-02-06 05:16:57Z

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 6, 2013 at 5:16

answered Feb 6, 2013 at 4:41

Karthik Chintala

5,5455 gold badges33 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Darf Zon Over a year ago

Am I missing something? It's still passing a NULL value in parameter value: $("#form").append('button=a').submit();

Karthik Chintala Over a year ago

can you see any querystring's in your url of browser when you submit the form

Darf Zon Over a year ago

With you last answer, I can achieve more information since your solution: stackoverflow.com/questions/3761051/…

jmadsen Over a year ago

Wow! the number of times I monkeyed around with hidden elements, and that was all I had to do. Thanks!

Iain · Accepted Answer · 2013-02-06 05:16:57Z

6

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?

edited Feb 6, 2013 at 5:16

answered Feb 6, 2013 at 4:29

Iain

2,3091 gold badge16 silver badges18 bronze badges

1 Comment

Darf Zon Over a year ago

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

Community · Accepted Answer · 2017-05-23 11:48:50Z

4

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" />
}

edited May 23, 2017 at 11:48

CommunityBot

11 silver badge

answered Feb 6, 2013 at 12:49

tvanfosson

534k102 gold badges703 silver badges801 bronze badges

Collectives™ on Stack Overflow

How to add additional data in my JQUERY submit?

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related