vendredi 17 mars 2017

JS: Add +1 to variable when check 1 of checkboxes in a group (show tooltip)

I have a form with radiobuttons, checkboxes and textfields. For example, Group 1 includes radiobuttons.

<ul class="radios">
    <li><input id="const-style" class="radio-form"  type="radio" name="material" value="w1" /><span>test</span></li>
    <li><input id="const-style" class="radio-form"  type="radio" name="material" value="w2" /><span>test2</span></li>
    <li><input id="const-style" class="radio-form"  type="radio" name="material" value="w3" /><span>test3</span></li>  
    ...      
</ul>

Group 2 includes checkboxes.

<ul class="checks">                                               
    <li><input id="const-style1" class="checkbox-form"  type="checkbox" name="style[]" value="ch1" />ch1</li>
    <li><input id="const-style2" class="checkbox-form"  type="checkbox" name="style[]" value="ch2" />ch2</li>
    <li><input id="const-style3" class="checkbox-form"  type="checkbox" name="style[]" value="ch3" />ch3</li>   
    ...    
</ul>

Group 3 with textfields (Name, Surname, Email).

<ul class="form-info">  
    <li><input id="name" class="text inline" type="Name" name="name" size="25" placeholder="Name" maxlength="30" autocomplete="off"/></li>
    <li><input id="SurName" class="text inline" type="SurName" name="surname" size="25" placeholder="Surname" maxlength="30" autocomplete="off"/></li>
    <li><input id="email" class="text inline" type="Email" name="email" size="25" placeholder="Email" maxlength="30" autocomplete="off"/></li>
</ul> 

When a user click at least 1 checkbox or radiobutton or feel a textfield, a script adds +1 to variable (1 point maximum on a hole group) and after that it should show a tooltip with this counter (anywhere). If he/she uncheck his/her choice (and a group with checkboxes or textfields or radiobuttons become unchecked) it should subtruct 1 point.

How to do that with JS or Jquery?




Aucun commentaire:

Enregistrer un commentaire