CODEWITHSUNDEEP
jqueryasp.net-mvc-3html
Kadir.K
Kadir.K

Reputation: 376

jQuery Element Value Manipulation

I have a series of checkboxes which I want to bind to my MVC model. So I try to get checkbox values and add these values to a hidden input field which has the proper Id to bind to my model.

@foreach (var answer in question.Answers)
{
   <input type='checkbox' id='@answer.Id' value='@(answer.AnswerText)' onchange="toggleHidden(this)"/> 
}
<input type="hidden" id='[@countHolder]' name='WrappedAnswers' value="" />

And my javascript code is:

function toggleHidden(elem) {
    var isChecked = $(elem).is(":checked");
    if (isChecked) {
        var checkString = elem.value + "|";
        var currentString = $('#[@(countHolder)]').val();
        $('#[@(countHolder)]').val(currentString + checkString);
    }
    else {
        // Remove checkString from $('#[@(countHolder)]').value
    }
}

As you guessed, the code doesn't work. I am not very good in javascript, what am I doing wrong.

Thanks.

Edit: Here is the rendered code

<!-- Answers -->
<input type='checkbox' id='158' name='WrappedAnswers' value='Answer 1' onchange="toggleHidden(this)"/> 
<input type='checkbox' id='159' name='WrappedAnswers' value='Answer 2' onchange="toggleHidden(this)"/> 
<input type='checkbox' id='160' name='WrappedAnswers' value='Answer 3' onchange="toggleHidden(this)"/> 

<input type="hidden" id='[5]' name='WrappedAnswers' value="" />

<script type="text/javascript">
function toggleHidden(elem) {
     var isChecked = $(elem).is(":checked");
     if (isChecked) {
        var checkString = elem.value + "|";                                          
        $('#[5]').val($('#[5]').val() + checkString);
     }
     else {
     }
 }
 </script>
 <!-- End Answers -->

Upvotes: 0

Views: 205

Answers (1)

Floremin
Floremin

Reputation: 4089

Instead of handling every change (check/uncheck) and having to add/remove the values into a "pipe-delimited" string (value of your hidden field), I would add an "on submit" handler for the form which would go through the checkboxes and add those that are checked.

If you enclose your checkboxes into a div container it would be easier to select them from jQuery. So, the code would be something like:

<div id="checkContainer">
    @foreach (var answer in question.Answers)
    {
        <input type="checkbox" id="@answer.Id" value="@(answer.AnswerText)" /> 
    }
</div>
<input type="hidden" id="countHolder" name="WrappedAnswers" value="" />
<script>
     $("form").submit() {
          var $checkboxes = $("#checkContainer").find("[type='checkbox']");
          $checkboxes.each(function() {
              if ($(this).is(":checked")) {                  
                  $("#countHolder").val($("#countHolder").val() + "|" + $(this)val());
              }
          });
          return true;
     }
</script>

Upvotes: 1

Related Questions