Extra form data when form is submitting

Question

Some checkboxs(It is already checked by Jquery. But I do uncheck them.) is posted to sever in form submission. But I havn't check it. Please see below.

Here is javascirpt.

$('.checkbox').change(function(){
     alert('hi');
});

$('.checkbox[data-img=a]').click();
$('.checkbox[data-img=b]').click();

Here is HTML.

<input type='checkbox' class='checkbox' data-img='a' value='a' name='name' />a
<input type='checkbox' class='checkbox' data-img='b' value='b' name='name' />b
<input type='checkbox' class='checkbox' data-img='c' value='c' name='name' />c
<input type='checkbox' class='checkbox' data-img='d' value='d' name='name' />d

I call cick event from jquery. So, a and b is alerady checked. Before form submission, I do uncheck a and b and check c and d. But when form is submitting, I have got a, b, c and d. Actually, I should get only c and d.

I use ASP. When I catch them on server, the following result is appeared.

name = Request.Form("name") ' name = "a, b, c, d"

When I remove this "$('.checkbox[data-img=a]').click();", it is working well.

name = Request.Form("name") ' name = "c, d"

I don't know why is it? Somebody please explain about this. Thanks.

Answer 1

Your name attribute should be like name[]. This is how it should be

<input type='checkbox' class='checkbox' data-img='a' value='a' name='name[]' />a
<input type='checkbox' class='checkbox' data-img='b' value='b' name='name[]' />b
<input type='checkbox' class='checkbox' data-img='c' value='c' name='name[]' />c
<input type='checkbox' class='checkbox' data-img='d' value='d' name='name[]' />d

When you submit the form, you will get the checkbox results as name array and you can process it in the backend.

EDIT:

Dont use click() function,use the below lines to make "a" & "b" values already checked

$('.checkbox[data-img=a]').prop('checked',true);
$('.checkbox[data-img=b]').prop('checked',true);