Whenever I submit my dynamically created form, all checkboxes briefly become selected for a split second. Does anyone have an explanation for this behavior? Is it common or is there something wrong with my code? Although the form submits correctly, it might confuse users to see all checkboxes checked suddenly after clicking "vote". (Please note that there may be a small amount of C# included in this).
The form looks like this when created:
<form action="/en/OnlineServices/SomeService" method="post">
<div id="voters">
<label><input type="checkbox" class="votebox" value="Some Name">Some Name<br></label>
<label><input type="checkbox" class="votebox" value="Some Name">Some Name<br></label>
<label><input type="checkbox" class="votebox" value="Some Name">Some Name<br></label>
<label><input type="checkbox" class="votebox" value="Some Name">Some Name<br></label>
</div>
<input id="VoteSubmit" type="submit" value="Vote">
<span style="margin-left: -9999px;"><input id="Vote" name="Vote" type="text" value=""></span>
<span style="margin-left: -9999px;"><input id="Language" name="Language" type="text" value=""></span>
Here is the accompanying JavaScript:
<script>
$(document).ready(function () {
$("input#Vote").val("")
$("#voters").after("<input id='VoteSubmit' type='submit' value='Vote' />");
var language = "@(bool.Parse(res.IsFrench) ? "FR" : "EN")"; // Sets var language as user languge
$("input[type=checkbox]").click(function () {
$(this).prop("checked", true);
});
$("input[type=checkbox]").change(function () {
$("input[type=checkbox]").prop("checked", false);
var a = $(this).val();
$("input#Vote").val(a); // Inserts cows name into hidden field
$("#Language").val(language);// Inserts language into hidden field
});
});
</script>