How can I get values from checkbox and count clicked items with javascript

Question

I need to get values for each checkbox and break movement to another page if the user doesn't check any box.

there is an error but I cant recognize it

$('#Submit').click( function() {

        if($('#Search').val() == "")
        {alert('please enter your domain without Extuntison');return false;}

        results.style.display = 'none';
        $('#results').html('');
        loading.style.display = 'inline';

        $.post('../domain_checker/process.php?domain=' + escape($('#Search').val()),{
        }, function(response){


            results.style.display = 'block';
            $('#results').html(unescape(response)); 
            loading.style.display = 'none';

            //$('#results').animate({height : '450px' }, 2000);

            results.style.height = '400px';
        });

        return false;
    });


       $(function(){
          $('#order_Now').click(function(){
             var count = $("[type='checkbox']:checked").length;
             var val = [];
             for(i=0;i<count;i++){
                $(':checkbox:checked').each(function(i){
                   val[i] = $(this).val();
                });
             }      
          });
       });

and this html page when load ajax

 <form action="ordedomain.php" name="formdomain" method="post" id="formdomain"  onclick="check_domain_checkBox()">

     <div id="results" style="width:450px;" align="left">



     </div> 
     </form>

and this code reloade by ajax in page php

       <form action="ordedomain.php" name="formdomain" method="post" id="formdomain"  onclick="check_domain_checkBox()">

<input type="checkbox" value="a" id="arrDomain" name="arrDomain">a
<input type="checkbox" value="b" id="arrDomain" name="arrDomain">b
<input type="checkbox" value="c" id="arrDomain" name="arrDomain">c

        </form>

Answer 1

That's simple:

var vals = [];
$(":checkbox").each(function() {
    if (this.checked)
       vals.push(this.value);
});
var count = vals.length;

I'm not sure what the for-loop is doing in your code as you already have the each().

Now you can easily get the count in your submit handler, if it equals 0 prevent the submit.

Also, you shouldn't use submit buttons if you want checkboxes; and you can't use an id multiple times (it needs to be unique), use the name attribute instead:

<form action="ordedomain.php" name="formdomain" method="post" id="formdomain">
  <label><input type="checkbox" name="domain" value="1"> Order now 1</label>
  <label><input type="checkbox" name="domain" value="2"> Order now 2</label>
  <label><input type="checkbox" name="domain" value="3"> Order now 3</label>
  <label><input type="checkbox" name="domain" value="4"> Order now 5</label>
  <input type="text" id="search" name="search">
  <div id="results" style="display:none;"></div>
  <img id="loading" src="…" style="display:none;"></div>
</form>

// onDOMready
var form = $("#formdomain"),
    search = form.find("#search"),
    checkboxes = form.find(":checkbox"),
    results = form.find("#results"),
    loading = form.find("#loading");
form.submit(function(evt) {
    var sval = search.val(),
        checked = checkboxes.filter(":checked"),
        dvals = [];
    if (!sval) {
        alert("Please enter domain (without extension)");
    } else if (!checked.length) {
        alert("Please tick at least one domain extension");
    } else {
        checked.each(function() {
            dvals.push(this.value);
        });
        $.post('../domain_checker/process.php', {
            domain: sval,
            extensions: dvals
        }, function(resonse) {
            loading.hide();
            results.html(response).show();
        });
        loading.show();
        results.hide();
    }
    evt.preventDefault();
});