In wooerce i am trying to display no. of child ages filed based on child field data.By default i will make this child ages boxes hidden with css.I want to display no. of child ages box based on data given in child filed.How can i do this with jquery?any suggestion should be useful to me

1) Code for child field

<div class="yith-wcbk-form-section yith-wcbk-form-section-person-types">
<label for="yith-wcbk-booking-persons-type-390">
    Child</label>
<input id="yith-wcbk-booking-persons-type-390" name="person_types[390]" class="yith-wcbk-booking-person-types yith-wcbk-number-minifield" step="1" min="0" max="4" data-person-type-id="390" value="" type="number">
</div>

2) code for age field(1st age field)

<div class="yith-wcbk-form-section yith-wcbk-form-section-person-types">
<label for="yith-wcbk-booking-persons-type-450">
    1st age</label>
<input id="yith-wcbk-booking-persons-type-450" name="person_types[450]" class="yith-wcbk-booking-person-types yith-wcbk-number-minifield" step="1" min="0" max="12" data-person-type-id="450" value="" type="number">
</div>

3) Used this js but it didn't works

jQuery('#yith-wcbk-booking-persons-type-390').change(function(){
    if(jQuery(this).val() === '1') {
        jQuery('#yith-wcbk-booking-persons-type-450').show();
    }
    if(jQuery(this).val() === '2') {
        jQuery('#yith-wcbk-booking-persons-type-450').show();
        jQuery('#yith-wcbk-booking-persons-type-451').show();
    }
    if(jQuery(this).val() === '3') {
        jQuery('#yith-wcbk-booking-persons-type-450').show();
        jQuery('#yith-wcbk-booking-persons-type-451').show();
        jQuery('#yith-wcbk-booking-persons-type-452').show();
    }
    if(jQuery(this).val() === '4') {
        jQuery('#yith-wcbk-booking-persons-type-450').show();
        jQuery('#yith-wcbk-booking-persons-type-451').show();
        jQuery('#yith-wcbk-booking-persons-type-452').show();
        jQuery('#yith-wcbk-booking-persons-type-453').show();
    }
});

This code works fine but not works in wordpress...

In wooerce i am trying to display no. of child ages filed based on child field data.By default i will make this child ages boxes hidden with css.I want to display no. of child ages box based on data given in child filed.How can i do this with jquery?any suggestion should be useful to me

1) Code for child field

<div class="yith-wcbk-form-section yith-wcbk-form-section-person-types">
<label for="yith-wcbk-booking-persons-type-390">
    Child</label>
<input id="yith-wcbk-booking-persons-type-390" name="person_types[390]" class="yith-wcbk-booking-person-types yith-wcbk-number-minifield" step="1" min="0" max="4" data-person-type-id="390" value="" type="number">
</div>

2) code for age field(1st age field)

<div class="yith-wcbk-form-section yith-wcbk-form-section-person-types">
<label for="yith-wcbk-booking-persons-type-450">
    1st age</label>
<input id="yith-wcbk-booking-persons-type-450" name="person_types[450]" class="yith-wcbk-booking-person-types yith-wcbk-number-minifield" step="1" min="0" max="12" data-person-type-id="450" value="" type="number">
</div>

3) Used this js but it didn't works

jQuery('#yith-wcbk-booking-persons-type-390').change(function(){
    if(jQuery(this).val() === '1') {
        jQuery('#yith-wcbk-booking-persons-type-450').show();
    }
    if(jQuery(this).val() === '2') {
        jQuery('#yith-wcbk-booking-persons-type-450').show();
        jQuery('#yith-wcbk-booking-persons-type-451').show();
    }
    if(jQuery(this).val() === '3') {
        jQuery('#yith-wcbk-booking-persons-type-450').show();
        jQuery('#yith-wcbk-booking-persons-type-451').show();
        jQuery('#yith-wcbk-booking-persons-type-452').show();
    }
    if(jQuery(this).val() === '4') {
        jQuery('#yith-wcbk-booking-persons-type-450').show();
        jQuery('#yith-wcbk-booking-persons-type-451').show();
        jQuery('#yith-wcbk-booking-persons-type-452').show();
        jQuery('#yith-wcbk-booking-persons-type-453').show();
    }
});

This code works fine but not works in wordpress...

• javascript
• jquery
• css
• wordpress

7 Answers 7

<script type="text/javascript" language="javascript">
    $(function() {
        $('.small-age').val("4");
        $('.medium-age').val("12");
    });
</script> 
<div class="yith-wcbk-form-section yith-wcbk-form-section-person-types">
<label for="yith-wcbk-booking-persons-type-450">
    1st age</label>
<input id="yith-wcbk-booking-persons-type-450" name="person_types[450]" class="yith-wcbk-booking-person-types yith-wcbk-number-minifield" step="1" min="0" max="12" data-person-type-id="450" value="" type="number">
</div>
<div class="medium-age yith-wcbk-form-section yith-wcbk-form-section-person-types">
<label for="yith-wcbk-booking-persons-type-390">
    Child</label>
<input id="yith-wcbk-booking-persons-type-390" name="person_types[390]" class="small-age yith-wcbk-booking-person-types yith-wcbk-number-minifield" step="1" min="0" max="4" data-person-type-id="390" value="" type="number">
</div>

Hello Again here's the correct code it works fine here's the link https://jsfiddle/Liamm12/vya8vtt1/2/

HTML

Should the main input

value="0"

like this

<input id="yith-wcbk-booking-persons-type-389" name="person_types[389]" class="yith-wcbk-booking-person-types yith-wcbk-number-minifield" step="1" min="1" max="4" data-person-type-id="389" value="0" type="number">

CSS

#yith-wcbk-booking-persons-type-450{
    display: none;
    }
#yith-wcbk-booking-persons-type-451{
    display: none;
    }
#yith-wcbk-booking-persons-type-452{
    display: none;
    }
#yith-wcbk-booking-persons-type-453{
    display: none;
    }

JQuery

$(function() {

$('#yith-wcbk-booking-persons-type-389').change(function() {

var input = $('#yith-wcbk-booking-persons-type-389').val();

        if (input == "1") {
                    $('#yith-wcbk-booking-persons-type-450').show();
        $('#yith-wcbk-booking-persons-type-451').hide();
        $('#yith-wcbk-booking-persons-type-452').hide();
        $('#yith-wcbk-booking-persons-type-453').hide();
    }else if (input == "2"){
        $('#yith-wcbk-booking-persons-type-450').show();
        $('#yith-wcbk-booking-persons-type-451').show();
        $('#yith-wcbk-booking-persons-type-452').hide();
        $('#yith-wcbk-booking-persons-type-453').hide();
    }else if (input == "3"){
        $('#yith-wcbk-booking-persons-type-450').show();
        $('#yith-wcbk-booking-persons-type-451').show();
        $('#yith-wcbk-booking-persons-type-452').show();
        $('#yith-wcbk-booking-persons-type-453').hide();
    }else if (input == "4"){
        $('#yith-wcbk-booking-persons-type-450').show();
        $('#yith-wcbk-booking-persons-type-451').show();
        $('#yith-wcbk-booking-persons-type-452').show();
        $('#yith-wcbk-booking-persons-type-453').show();
    }

});
});

Pure js approach

document.getElementById("create").onclick = createBoxes;

function createBoxes() {
  let childNums = document.getElementById("childNum").value;
  console.log("childNums",childNums)
  for(i=1; i<=childNums ; i++) {
     let inputEl = document.createElement("input");
     inputEl.setAttribute('type', 'number');
     inputEl.setAttribute('placeholder', 'Set Age for Child'+i);
     inputEl.setAttribute('id', 'child'+i);
     let label = document.createElement("label");
     let labelTxt = document.createTextNode("Age of child"+i);
     label.setAttribute("for","child"+i);
     label.appendChild(labelTxt);
     document.getElementById('boxes').appendChild(inputEl)
     inputEl.parentNode.insertBefore(label, inputEl.nextSibling);
     let linebreak = document.createElement("br");
     inputEl.parentNode.insertBefore(linebreak, label.nextSibling);
  }
}

<input type="number" id="childNum" placeholder = "enter number of childs" />
<button id="create"> Create age boxes</button>
<div id="boxes">
</div>

The first way :--

$('#industry').on('change',function(){
  var selection = $(this).val(); 
  console.log("Detected change..." + selection);
  $("#SaaSMeetings").toggle($(this).val()=="age");
});

<script src="https://ajax.googleapis./ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<label for="">child</label>
     <select id="industry">
        <option value="Telesales">Select</option>
        <option value="age">1</option>
    </select>
<!-- Show Metric Input based on Industry Selection -->
<input id="SaaSMeetings" name="person_types[450]" class="yith-wcbk-booking-person-types yith-wcbk-number-minifield" step="1" min="0" max="12" data-person-type-id="450" value="" type="number" style="display:none">

I have used this concept to here check javascript if its making any solutions for you.

<script type="text/javascript">
   $('#attribute_369').change(function(){
       if($(this).val() == '435'){
          $('.productView-options .form-field:nth-child(2)').hide(); 
          $('.productView-options .form-field:nth-child(3)').show();
       }else if($(this).val() == '436'){
             $('.productView-options .form-field:nth-child(3)').hide();
             $('.productView-options .form-field:nth-child(2)').show();
       }else if($(this).val() == '434'){
             $('.productView-options .form-field:nth-child(3)').hide();
             $('.productView-options .form-field:nth-child(2)').hide();
       }

   });
</script>

<style>


.productView-options .form-field:nth-child(2) {
    display: none;
}

 .productView-options .form-field:nth-child(3) {
    display: none;
}   
</style>

Can you try this jQuery snippet I think this will work:

Not: First of all no need to use jQuery all time you can just define it as a variable.

var $ = jQuery

$('#yith-wcbk-booking-persons-type-390').change(function(){

    var tVal = parseInt($(this).val());
    if(tVal == '1') {
        $('#yith-wcbk-booking-persons-type-450').show();
        $('#yith-wcbk-booking-persons-type-451').hide();
        $('#yith-wcbk-booking-persons-type-452').hide();
        $('#yith-wcbk-booking-persons-type-453').hide();
    }else if(tVal == '2') {
        $('#yith-wcbk-booking-persons-type-450').show();
        $('#yith-wcbk-booking-persons-type-451').show();
        $('#yith-wcbk-booking-persons-type-452').hide();
        $('#yith-wcbk-booking-persons-type-453').hide();
    }else if(tVal == '3') {
        $('#yith-wcbk-booking-persons-type-450').show();
        $('#yith-wcbk-booking-persons-type-451').show();
        $('#yith-wcbk-booking-persons-type-452').show();
        $('#yith-wcbk-booking-persons-type-453').hide();
    }else if(tVal == '4') {
        $('#yith-wcbk-booking-persons-type-450').show();
        $('#yith-wcbk-booking-persons-type-451').show();
        $('#yith-wcbk-booking-persons-type-452').show();
        $('#yith-wcbk-booking-persons-type-453').show();
    }
});

Hope this was helpful.

I prefer you to create a new class named "active" and put the display block; like this code

.active{
            display: block;
        }
#yith-wcbk-booking-persons-type-450{
    display: none;
    }
#yith-wcbk-booking-persons-type-451{
    display: none;
    }
#yith-wcbk-booking-persons-type-452{
    display: none;
    }
#yith-wcbk-booking-persons-type-453{
    display: none;
    }

Then inisted of show() in JQuery use addClass('active')

The code will be like this

jQuery('#yith-wcbk-booking-persons-type-390').change(function(){
    if(jQuery(this).val() === '1') {
        jQuery('#yith-wcbk-booking-persons-type-450').addClass('active');
    }
    if(jQuery(this).val() === '2') {
        jQuery('#yith-wcbk-booking-persons-type-450').addClass('active');
        jQuery('#yith-wcbk-booking-persons-type-451').addClass('active');
    }
    if(jQuery(this).val() === '3') {
        jQuery('#yith-wcbk-booking-persons-type-450').addClass('active');
        jQuery('#yith-wcbk-booking-persons-type-451').addClass('active');
        jQuery('#yith-wcbk-booking-persons-type-452').addClass('active');
    }
    if(jQuery(this).val() === '4') {
        jQuery('#yith-wcbk-booking-persons-type-450').addClass('active');
        jQuery('#yith-wcbk-booking-persons-type-451').addClass('active');
        jQuery('#yith-wcbk-booking-persons-type-452').addClass('active');
        jQuery('#yith-wcbk-booking-persons-type-453').addClass('active');
    }
});

Hello @Abhee this is my very simple and easiest solution using jquery. Please check it out.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Testin script</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis./ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <div>
    <label>
        Child</label>
    <input value="1" type="number" onchange="update_child(this);">
  </div>

  <div id="childs">
    <label>1 child</label>
    <input value="" type="number">
  </div>

  <script type="text/javascript">
    function update_child(me){
      var num_child = $(me)[0].value;
      var child = "";
      for(var i=0;i<num_child;i++){
        child += '<label>'+(i+1)+' child</label><input value="" type="number"><br>';
      }
      $("#childs")[0].innerHTML = child;
    }
  </script>
</body>
</html>

Hope it helps you. Happy coding :D