Ytukyg

function increasePrice(checkbox) {

  var increase = parseInt(checkbox.value);

  var price_inputs = document.getElementsByClassName("price-input");

  var price_span = document.getElementsByClassName("price");

  for (var i = 0; i < price_inputs.length; i++) {

    var price = price_inputs.item(i);

    var newValue = parseInt(price.value);

    if (checkbox.checked) {

      var newValue = newValue + increase;

    } else {

      var newValue = newValue - increase;

    }

    price_span.item(i).innerHTML = newValue;

    price.value = newValue;

  }

};

<h1>Holiday Tour</h1>

<form role="form" action="" method="post" class="f1">

  <label><input onclick="increasePrice(this)" type="checkbox" value="500" > Chennai Trip (Rs.500/-)</label>

  <label><input class="price-input" type="radio"  name="optradio" value="4700">  

															1 PERSON - <b>Cost Rs.<span class="price">4700</span>/- </b>

															</label>

</form>

<p>how to display above checked amount to the below field</p>

<p><label><input type="radio" name="optradio">  

															Full Payment    <b>Cost Rs  /-</b>

															</label></p>

<p><label><input type="radio" name="optradio">  

															Advance Payment    <b>Cost Rs  /-</b>

															</label></p>

<p>Tour Package : </p>

i am not able to display the checked radio button value to the full amount field. i have 10 tour package and trip details when some one click the particular trip corresponding trip amount and the tour name will display

To solve this problem, I created a new Javascript function to update the full price radio button and label. You can use a similar method for the advance payment. I would actually just call the update advance payment method every time updateFullPayment is called so that they stay in sync that way.

 function updateFullPayment(radio) {

   var value = parseInt(radio.value)

   var full_payment = document.getElementById("full-price");

   var full_payment_radio = document.getElementById("full-price-radio");

   full_payment.innerHTML = value;

   full_payment_radio.value = value;

 };

I also updated your Javascript function to call mine and pass in the currently selected price so that the full price is always updated.

 function increasePrice(checkbox) {

   var increase = parseInt(checkbox.value);

   var price_inputs = document.getElementsByClassName("price-input");

   var price_span = document.getElementsByClassName("price");

   for (var i = 0; i < price_inputs.length; i++) {

     var price = price_inputs.item(i);

     var newValue = parseInt(price.value);

     if (price_inputs.item(i).checked) {

       var selectedPrice = price_inputs.item(i);

     }

     if (checkbox.checked) {

       var newValue = newValue + increase;

     } else {

       var newValue = newValue - increase;

     }

     price_span.item(i).innerHTML = newValue;

     price.value = newValue;

 }



   updateFullPayment(selectedPrice);

 };

HTML now looks like this. Clicking on a price radio button will call the update function I created.

<h1>Holiday Tour</h1>

<form role="form" action="" method="post" class="f1">

<label><input onclick="increasePrice(this)" type="checkbox" value="500" > Chennai Trip (Rs.500/-)</label>

<label><input onclick="updateFullPayment(this)" class="price-input" type="radio"  name="optradio" value="4700">

                                                          1 PERSON - <b>Cost Rs.<span class="price">4700</span>/- </b>

                                                          </label>

</form>

<p>how to display above checked amount to the below field</p>

<p><label><input type="radio" name="optradio" id="full-price-radio">

                                                          Full Payment    <b>Cost Rs<span id="full-price"></span>/-</b>

                                                          </label></p>

<p><label><input type="radio" name="optradio">

                                                          Advance Payment    <b>Cost Rs  /-</b>

                                                          </label></p>

<p>Tour Package : </p>