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
– Kaizen Programmer, Commented Dec 31, 2015 at 16:27

John G · Accepted Answer · 2015-12-31 16:41:14Z

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, 2015 at 16:41

John G

985 bronze badges

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

1 Comment

Eric Over a year ago

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?

Aman Jain · Accepted Answer · 2015-12-31 16:27:07Z

1

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

answered Dec 31, 2015 at 16:27

Aman Jain

6675 silver badges17 bronze badges

Comments

Moe · Accepted Answer · 2015-12-31 16:41:35Z

1

You could submit the form using your image event.

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

answered Dec 31, 2015 at 16:41

Moe

1,59911 silver badges16 bronze badges

Comments

Ibrahim Khan · Accepted Answer · 2016-01-01 06:45:07Z

1

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.

answered Jan 1, 2016 at 6:45

Ibrahim Khan

20.8k7 gold badges46 silver badges57 bronze badges

1 Comment

Eric Over a year ago

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: stackoverflow.com/questions/14473597/…

Collectives™ on Stack Overflow

MVC use jquery instead of submit button

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related