Add form values via jQuery, and POST to controller method

Question

I have a table with misc. data. Each row has a checkbox. This table is NOT in a form. I want to use jQuery to grab a value from each "checked row", add those values to a form, and then post to my controller method via a traditional POST.

I grab the values I need like this:

$('#some-button').click(function(){

    var theValues = [];

    $('#some-table tbody tr td:first-child input:checkbox').each(function(){
        if(this.checked){
            theValues.push($(this).parent().next().val());
        }
    });
    $('#some-form').val(theValues.serialize()).submit();
});

The form in the view looks like this:

@using(Html.BeginForm("TheAction", "TheController",
    FormMethod.Post, new { @id = "some-form" }))
{
    <input id="some-button" type="button" value="Do Stuff" />
}

And my controller method looks like this:

[HttpPost]
public ActionResult TheAction(IEnumerable<string> values)
{
    // Do stuff with values...

    return RedirectToAction("SomewhereElse");
}

Problem is, nothing happens. Quite literally Firebug is showing zero activity going on. The values are being grabbed properly according to running the jQuery statement (where I grab the values I want from the table rows) in the FB console.

Any ideas???

UPDATE:

As per praveen's suggestion, I've tried using a hidden form field, but the problem remains...

Added this to the form:

@Html.Hidden("values", new { @id = "the-values" })

And updated my JavaScript to this:

$('#some-button').click(function(){

    var theValues = [];

    $('#some-table tbody td td:first-child input:checkbox').each(function(){
        if(this.checked){
            theValues.push($(this).parent().next().val())
        }        
    });
    $('#the-values').val(theValues);
    $('#some-form').submit();
});

Again, the problem remains. The JS 'click' event is firing, but no POST is happening. Nothing, nadda, zip.

bobek · Accepted Answer · 2012-01-12 15:54:31Z

1

Try changing your form like this:

@using(Html.BeginForm("TheAction", "TheController", FormMethod.Post, new { @id = "some-form" }))
{
    <input id="some-button" type="button" value="Do Stuff" />
}

answered Jan 12, 2012 at 15:54

bobek

8,0388 gold badges41 silver badges76 bronze badges

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

2 Comments

Didaxis Over a year ago

My code did have the FormMethod.Post, just forgot to put it in my question.

Giorgio Minardi Over a year ago

try changing the signature of the method in the controller by deleting the Ienumerable<string> as the input param. See if the action get called. If not check also if the routing is correct.

Alfred · Accepted Answer · 2012-08-17 15:53:21Z

0

The above approach works, what ever the values you want to access you can put them in the hidden variables.

@using(Html.BeginForm("TheAction", "TheController", FormMethod.Post, new { @id = "some-form" })) {     <input id="some-button" type="button" value="Do Stuff" />
  @Html.HiddenFor................
 }

edited Aug 17, 2012 at 15:53

Alfred

21.5k64 gold badges175 silver badges258 bronze badges

answered Jan 12, 2012 at 16:08

praveen

1

Collectives™ on Stack Overflow

Add form values via jQuery, and POST to controller method

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related