Question

I have the HTML and JQuery code as below:

<form  action="" method="post" id="myform">
  <table border="0" class="table table-striped">
    <tr>
      <td colspan="7"><div class="title">CONNAISSANCE ET EXPERIENCE (O/E/AM/Cadres)</div></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>

    <tr>
      <td>
        <ul type="circle">
          <li>1. Des techniques et pratiques du métier</li>
        </ul>
      </td>
      <td></td>
      <td><input  type="radio" class="validate[required] radio" name="number1" id="number1" value="1"></td>
      <td><input name="number1" class="validate[required] radio" type="radio" id="number1" value="2"></td>
      <td><input name="number1" class="validate[required] radio" type="radio" id="number1" value="3"></td>
      <td><input name="number1" class="validate[required] radio" type="radio" id="number1" value="4"></td>
      <td><input name="number1" class="validate[required] radio" type="radio"  id="number1" value="5"></td>
    </tr>

    <tr>
      <td>
        <ul type="circle">
          <li>2. Capacité d’apprentissage et d’adaptation</li>
        </ul>
      </td>
      <td></td>
      <td><input class="validate[required] radio" type="radio" name="number2" value="1"></td>
      <td><input class="validate[required] radio" name="number2" type="radio" value="2"></td>
      <td><input class="validate[required] radio" name="number2" type="radio" value="3"></td>
      <td><input class="validate[required] radio" name="number2" type="radio" value="4"></td>
      <td><input class="validate[required] radio" name="number2" type="radio" value="5"></td>
    </tr>
    <tr>
      <td><ul type="circle">
          <li>3. Productivité/Rendement</li>
        </ul></td>
      <td></td>
      <td><input class="validate[required] radio" type="radio" name="number3" value="1"></td>
      <td><input class="validate[required] radio" name="number3" type="radio" value="2"></td>
      <td><input class="validate[required] radio" name="number3" type="radio" value="3"></td>
      <td><input class="validate[required] radio" name="number3" type="radio" value="4"></td>
      <td><input class="validate[required] radio" name="number3" type="radio" value="5" /></td>
    </tr>
    <tr>
      <td><ul type="circle">
          <li>4. Polyvalenc</li>
        </ul></td>
      <td></td>
      <td><input class="validate[required] radio" type="radio" name="number4" value="1"></td>
      <td><input class="validate[required] radio" name="number4" type="radio" value="2"></td>
      <td><input class="validate[required] radio" name="number4" type="radio" value="3"></td>
      <td><input class="validate[required] radio" name="number4" type="radio" value="4"></td>
      <td><input class="validate[required] radio" name="number4" type="radio" value="5"></td>
    </tr>

    <tr>
      <td colspan="7">
          <script>
                 $(document).ready(function(){
                    $("#test").click(function(){
                        var number1 = $('input[name=number1]:checked', '#myform').val();
                        var number2 = $('input[name=number2]:checked', '#myform').val();
                        var number3 = $('input[name=number3]:checked', '#myform').val();
                        var number4 = $('input[name=number4]:checked', '#myform').val();
                        var t1 = parseInt(number1);
                        var t2 = parseInt(number2);
                        var t3 = parseInt(number3);
                        var t4 = parseInt(number4);
                        var total = t1+t2+t3+t4;
                        alert (total);
                });
            });
          </script>

      <button name="btn" id="test">test</button>

      </td>
    </tr>

</table>
<form>

I need:
When I click on each radio box then I click on button submit it will be sum all values of radio box and display it.

Problem
I can only alert the sum value but I can not display it as normal.Example: PHP code when I want to display value I always use echo but for the JQuery I have never known it yet.So anyone help me please.And give me some idea,should I use JQuery like this or PHP that is better than for in this case. Thanks.

Answer 1

If you want to display rezult of form at current page you can use 'append', 'appendTo', 'html', 'text'

1. http://api.jquery.com/append/
2. http://api.jquery.com/appendTo/
3. http://api.jquery.com/html/
4. http://api.jquery.com/text/ // NOTE: in this case html will be added as plane text

in order to find checked values you can use this script.

         $(document).ready(function() {
                $('#test').on('click',function(){
                    var $rez = $(".result");
                    $rez.html('')

                    $('#myform').find('input[type="radio"]').each(function(){
                        if($(this).attr('checked')=='checked')
                        {
                            $rez.append("class:"+$(this).attr('class'))
                            $rez.append("|name:"+$(this).attr('name'))
                            $rez.append("|value:"+$(this).attr('value'))

                                $rez.append("</br>")
                        }

                    });

                    return false;
             });
        });​

DEMO: jsfiddle