mardi 11 octobre 2016

Show result taked with JavaScript in HTML code ( Radio & Checkbox )

I have a multiphase form (wizards form) and when you finished all steps, you see a form that give you all information if you want to modify it

So, I need to take values with JavaScript and show it in html code, I find to solution about simple variable (input text, select .. etc)

but in the checkbox, and radio button I try a lot without result,

in the radio button and chexkbox, I take the checked values with Javascript and I need the checked Automatically in the HTML code

for Example If I have 3 checkbox

1 - Test | 2 - Test2 | 3 - Test3

So, If the visitor check the second (test2) I need the show it checked automatically

my code for the checkbox

var str = [];
var checks = document.getElementsByClassName('justtest');
          for(var i=0; i<checks.length; i++){
              if(checks[i].checked){
                str.push( checks[i].value );
              } 
            }
  
  for( var x = 0; x < str.length; x++){
    alert (str[x]);
    }
  
<div class="form-group">
   <div class="col-md-3">
      <div class="checkbox">
         <label>
<input type="checkbox" value="test1" class="justtest" > Test1
         </label>
       </div>
      </div>
     </div>
    <div class="form-group">
    <div class="col-md-3">
     <div class="checkbox">
       <label>
 <input type="checkbox" value="test2" class="justtest"> test2
       </label>
      </div>
     </div>
    </div>
     <div class="form-group">
      <div class="col-md-3">
       <div class="checkbox">
         <label>
<input type="checkbox" value="test3" class="justtest"> test3
          </label>
         </div>
       </div>
      </div>

my code for the radio button

function _(x){
          return document.getElementById(x);
        }
function test (){
  test = _("test").value;
  //this is for take variable
  $("#p3test").val(test);
  }
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Test </label>
<div class="col-md-6 col-sm-6 col-xs-12">
  
<div class="btn-group" data-toggle="buttons">
  
<label class="btn btn-default btn-on btn-xs" id="label_mobile_yes">
  
<input type="radio" name="test" class="test" id="test" value="test1">Test1</label>
  
<label class="btn btn-default btn-off btn-xs" id="label_mobile_no">
<input type="radio" name="test" class="test" id="test" value="test2">Test2</label>
  
        </div>
  </div>
</div>



Aucun commentaire:

Enregistrer un commentaire