Change text field of form based on number of check boxes checked

Question

Full disclosure: I'm a java/jquery newbie, but this seems like a problem with an easy solution. I've looked around and couldn't find an analogous situation, but if there's already a post about this let me know.

I have created a form with a checklist of products and a discount code box. How I'd like things to work when you click submit:

1. If you click any 3 or less, you get no discount
2. If you click any 4, applies "Discount 1"
3. If you click any 5, applies "Discount 2"
4. If you click any 6, applies "Discount 3"

I've gotten it to work with an alert box, but it seems like I need a different bit of code to change the value of the text box to the discount?

Thanks for your help!

Here's the stripped down code I have so far:

function check(){
count = 0;
for(x=0; x<document.signup.getElementsByClassName("styled").length; x++){
    if(document.signup.getElementsByClassName("styled")[x].checked==true){
    count++
    }
}

if(count<3){
    alert("No Discount");
}
else if(count==3){
    alert("Discount1");
}
else if(count==4){
    alert("Discount2");
}
else if(count==5){
    alert("Discount3");
}
else if(count==6){
    alert("Discount4");
}
}

<form name="signup" id="form1" method="post" action="">
<input type="checkbox" id="product1"  name="product_id[]" value="1" class="styled">
<input type="checkbox" id="product2"  name="product_id[] "value="3" class="styled">
<input type="checkbox" id="product3"  name="product_id[]" value="2" class="styled">
<input type="checkbox" id="product4"  name="product_id[]" value="4" class="styled">
<input type="checkbox" id="product5"  name="product_id[]" value="44" class="styled">
<input type="checkbox" id="product6"  name="product_id[]" value="45" class="styled">        
<input type="text" name="coupon" id="f_coupon" value="" size="15" />
<input type="button" name="Button" value="Click Me" onclick="check()" />

-j.

Answer 1

Store the inputs in a variable, ie. var inputs = $('input[type="checkbox"]); then you can check the number of checked inputs by inputs.filter(':checked').length and do stuff based on that

for instance

var inputs = $('input[type="checkbox"]');
var textField = $('input#f_coupon');

$('form').submit(function(){
  var count = inputs.filter(':checked').length;
  if (count > 3) {
    // do stuff
    // ie.
    textField.val(count); 
  }
}); 

Answer 2

jQuery( '#form1' ).submit( function(){
    jQuery( '#f_coupon' ).val( 'Discount ' + jQuery( '.styled:checked' ).length );
} );

Btw, Java is not JavaScript , every <form> needs a </form> and input-tags can't do anything with content data, so you should close them like <input />!