MVC use jquery instead of submit button

Question

On my page I have a section like this:

using (Html.BeginForm("AddSubTor", "Maintor", FormMethod.Post, htmlAttributes: new { ID = "frmSubTors" }))
{
  @Html.AntiForgeryToken()

  @Html.Partial("_SublistPartial")

  <div class="row" style="margin-top: 15px;">
    <div class="col-sm-12 col-md-12 col-lg-12 text-center ">
      @* submit button here *@
      <input type="submit" class="btn btn-default" value="Add"  />
    </div>
  </div>
  @Html.ValidationSummary(true, "", new { @class = "text-danger" })
}

Instead of using the submit button, I would replace it then with an image that looks like a button, could I also do the same submit in a jquery function. Like in the click event of that button-like image? Would the data I'm submitting still be submitted?

The reason I want to do this is that in the partial I have two radio buttons. On both I have some Jquery code for retrieving data and other stuff.

If I use a simple submit button I can set the radiobuttons but there is no click event thus the data is not retrieved and other stuff is not done. So if I can use Jquery, then I can simple call the functions that the radiobutton-click events call and so get my data.

[edit] I'm kind of looking for something like this:

$.Ajax({
  url: 'controller/action',
  type: 'POST',
  success: function(data) {
    $('#frmSubTors').html(data);
  }
}).done(function() {
  // do my other stuff here
});

Would this work too?

I don't follow your reasoning. A `type="submit"` button doesn't require a `onclick` event, it will post the form values to your action. You last paragraph is kind of vague. — Kaizen Programmer, Dec 31 '15 at 16:27

score 3 · Answer 1 · answered Dec 31 '15 at 16:41

3

Yes, you can use jQuery to submit the form when the image is clicked. Replace the submit button with the image and give it an id.

<div class="col-sm-12 col-md-12 col-lg-12 text-center ">
      @* submit button here *@
      <img id="myImage" src="blah.jpg" />
</div>

Then have jQuery respond to a click event:

$(document).ready(function() {
    $("#myImage").click(function() {
        $("#frmSubTors").submit();
    }
}

More click event info for jQuery: http://www.w3schools.com/jquery/event_click.asp

answered Dec 31 '15 at 16:41

John G

98
5

But can I do any functions after the submit has finished and the partial is updated? Like with .Ajax you have a Done event that is fired after the data is returned, and then the Jquery script continues. Is that possible here too? – Eric Dec 31 '15 at 17:53

score 1 · Answer 2 · answered Dec 31 '15 at 16:27

1

Yes, If you use $('#frmSubTors').submit(), The form will be submitted wit all the fields.

answered Dec 31 '15 at 16:27

Aman Jain

655
5
17

score 1 · Answer 3 · answered Dec 31 '15 at 16:41

1

You could submit the form using your image event.

$('img').on("click", function () {
    $('#frmSubTors').submit();
});

answered Dec 31 '15 at 16:41

Moe

1,599
11
16

score 1 · Answer 4 · answered Jan 01 '16 at 06:45

You can submit form with ajax like following.

$("#your_img_id").click(function () {
    $.ajax({
        type: 'POST',
        url: '/Maintor/AddSubTor',
        data: $(this).serialize(), //serializes the form's elements.
        success: function (data) {
            // do your other stuff here after succesful form submit
        }
    });
});

If your form has <input type="file"> then do like following.

$("#your_img_id").click(function () {
    var formData = new FormData($('#frmSubTors')[0]);

    $.ajax({
        type: 'POST',
        url: '/Maintor/AddSubTor',
        data: formData,
        cache: false,
        contentType: false,
        processType: false,
        success: function(data) {
            // do your other stuff here after succesful form submit
        }
   });
});

Hope this will help you.

Thanks. This did help me a bit. The formdata needs to be serialized, but then I got a new issue, the anti-forgery token thing. Found a solution here: http://stackoverflow.com/questions/14473597/include-antiforgerytoken-in-ajax-post-asp-net-mvc — Eric, Jan 01 '16 at 19:38

MVC use jquery instead of submit button

4 Answers4