CODEWITHSUNDEEP
asp.net-mvc-3buttoncontrollersubmitcheckbox
jpo
jpo

Reputation: 4059

ASP MVC3 checkbox action without submit button

I am using ASP.net for a program with a number of check boxes and a submit button which initiates an action depending on the selected check boxes.

However, one of my check boxes should behave as this submit button, i.e, upon selecting/deselecting this check box, the same action as the button must be triggered. Can someone please help me in doing this (or perhaps direct me to a tutorial)

I have a controller class and model.

Thanks you

EDIT The program look like:

@using(Html.BeginForm("controllername", FormMethod.Get)) {
     @html.CheckBox("check1");
     @HTMl.Checkbos("check2");
     <input type="submit" value="Submit" />
}

Everything else is pretty much handled in the controller.

Upvotes: 0

Views: 5134

Answers (3)

Shyju
Shyju

Reputation: 218882

You can use javascript to listen to the check event of your check box and then invoke the form submit.

Assuming your markup of view is like this

<form id="yourFormId" action="user/post">
  <input type="checkbox" class="optionChk" value="1" /> One
  <input type="checkbox" class="optionChk" value="2" /> Two
  <input type="checkbox" class="optionChk" value="3" /> Three
</form>
<script type="text/javascript">
  $(function(){
    $(".optionChk").click(function(){
      var item=$(this);
      if(item.val()=="2")   //check your condition here
      {
         item.closest("form").submit();
      }
    });
  });
</script>

EDIT : As per the question edit.

Change the CheckBox Helper method usage like the below to add a css class to the checkbox so that we can use that for the jQuery selection.

 @Html.CheckBox("check1",new { @class="optionChk"})

Upvotes: 2

balexandre
balexandre

Reputation: 75113

imagining you have something like this:

@using(Html.BeginForm()) {

  <label class="checkbox">
    <input type="checkbox" name="chb_a" id="chb_a"> Option A
  </label>
  <label class="checkbox">
    <input type="checkbox" name="chb_b" id="chb_b"> Option B
  </label>
  <label class="checkbox">
    <input type="checkbox" name="chb_c" id="chb_c"> Option C
  </label>
  <label class="checkbox">
    <input type="checkbox" name="chb_d" id="chb_d"> Option D
  </label>

  <button type="submit" class="btn">Submit</button>

}

you can write a simple jQuery to complement:

$(".submit").click(function() {
  // find the <form> the element belongs and submit it
  $(this).closest('form').submit();
});

and with this, all you need is to add a class named submit to any checkbox or more buttons if you want them to submit

for example:

  <label class="checkbox">
    <input type="checkbox" name="chb_e" id="chb_e" class="submit"> Option E
  </label>

Upvotes: 1

Jarrett Meyer
Jarrett Meyer

Reputation: 19593

You can bind the click events on the checkboxes.

$( '.myCheckboxes' ).click(function () {
  var clickedBox = $( this );
  // now do something based on the clicked box...
});

If you need to know which checkboxes are checked, that's just another selector.

$( '.myCheckboxes:checked' ).each(function () {
  // Now you have access to each checked box.
  // Maybe you want to grab their values.
});

Just bind the checkbox to a click event. Assuming you have a way of uniquely identifying the checkbox that submits the form.

$( '#formSubmitCheckbox' ).click(function() {
  $( '#myForm' ).submit();
});

Upvotes: 0

Related Questions