CODEWITHSUNDEEP
phpjquery
Sealongmaly
Sealongmaly

Reputation: 51

Display radio box value using JQuery

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.

Upvotes: 0

Views: 145

Answers (5)

Anton Baksheiev
Anton Baksheiev

Reputation: 2251

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

Upvotes: 1

Jobin
Jobin

Reputation: 8282

Instead of alert() you can use a hidden field and push the value to that then on click of button you will get that in php page.

put this in your html section inside form 

<input type="hidden" name="hid_total" id="hid_total" />

then instead of alert() use the below code.

jQuery("hid_total").val(total);

If you need to display the value in html you can choose text type instead of hidden

Upvotes: 0

Abid Hussain
Abid Hussain

Reputation: 7762

Add below line after or befor alert in jQuery.

$('#mytotal').html(total);

And Add below line befor test button.

<div id="mytotal"></div>

then try it and let me know if not working.

Upvotes: 0

kongaraju
kongaraju

Reputation: 9596

it works for you... 

 $("<div/>").html(total).appendTo('body');

Upvotes: 0

Yogesh Suthar
Yogesh Suthar

Reputation: 30488

use like this for displaying data

$('#id_to_display').html(total);

this will help you out...

Upvotes: 0

Related Questions