inaz inaz - 2 years ago 77
jQuery Question

How to Show Final Result separately in a Main Textbox Value

I have a booking flight form. that takes the count of travellers . I created 3 textboxes to take travellers counts. it works good but the problem is i want to show each count of each category of travel in the textbox separately. for example when the user add a adult the adult count add to the textbox or when the child added the user can see the result in one text box. but my code reuturns total value. how can i change my code ?
here is my snippet :



$(function() {
$(".button-click a").on("click", function() {
var $button = $(this);
var oldValue = $button.closest("ul").prev().val();

if ($button.text() == "+") {
var newVal = parseInt(oldValue) +1;

} else {
// Don't allow decrementing below zero
if (oldValue > 0) {
var newVal = parseInt(oldValue - 1);
} else {
newVal = 0;
}
}
$button.closest("ul").prev().val(newVal);

//Calculate total travellers from all traveller textbox.
var total_value = 0;
//Loop through all the traveller textboxes
$(".cat_textbox").each(function(){
//Make addition of travellers from all the three textboxes
total_value += parseInt($(this).val());
});
//Assign the total traveller number to main textbox
$(".main").val(total_value);
})
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label>
Count all1 Traveller(s)
<input type="text" name="no_travellers" class="main" value="1 adult + 2 child + 1 infant" placeholder="" />
</label>
<br/><br/>
<label>
Adults
<input type="text" class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" />
<ul class="button-group button-click">
<li><a href="#" class="small button secondary"><i class="fa fa-plus"><span class="hide">+</span></i></a></li>
<li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a></li>
</ul>
</label>

<label>
Children
<input type="text" class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" />
<ul class="button-group button-click">
<li><a href="#" class="small button secondary"><i class="fa fa-plus"><span class="hide">+</span></i></a></li>
<li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a></li>
</ul>
</label>


<label>
Infants
<input type="text" class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" />
<ul class="button-group button-click">
<li><a href="#" class="small button secondary"><i class="fa fa-plus"><span class="hide">+</span></i></a></li>
<li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a></li>
</ul>
</label>




Answer Source

Is this what you are looking for? I shortened the code a bit. I wrapped the label texts in a span to properly select them.

EDIT: So the string in your total input field is dynamic because it uses the string in your label tags.

EDIT2: Added default value.

Here is a working fiddle:

$(function() {
  $(".button-click a").on("click", function() {
    var button = $(this);
    var oldVal = parseInt(button.closest("ul").prev().val());
    var newVal = (button.text() == "+") ? oldVal+1: (oldVal > 0) ? oldVal-1 : 0;
    var total_value = "";
    
    button.closest("ul").prev().val(newVal);

    $(".cat_textbox").each(function(){
      var cat = $(this).prev('span').text();
      total_value += cat + ": " + $(this).val() + ", "; 
    });
    
    total_value = total_value.substring(0, total_value.length - 2);
    $(".main").val(total_value);
  })
});
.main{
  width:200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label>
Count all1 Traveller(s)
<input type="text" name="no_travellers" class="main" value="Adults: 1" placeholder="" />
</label>
<br/><br/>
<label>
<span>Adults</span>
<input type="text" class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="1" />
 <ul class="button-group button-click">
  <li><a href="#" class="small button secondary"><i class="fa fa-plus"><span class="hide">+</span></i></a></li>
  <li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a></li>
  </ul>
  </label>
  
  <label>
  <span>Children</span>
  <input type="text" class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" />
   <ul class="button-group button-click">
  <li><a href="#" class="small button secondary"><i class="fa fa-plus"><span class="hide">+</span></i></a></li>
  <li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a></li>
  </ul>
  </label>
  
  
    <label>
   <span>Infants</span>
    <input type="text" class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" />
   <ul class="button-group button-click">
  <li><a href="#" class="small button secondary"><i class="fa fa-plus"><span class="hide">+</span></i></a></li>
  <li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a></li>
  </ul>
  </label>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download