CODEWITHSUNDEEP
javascriptjquery
Learning
Learning

Reputation: 20001

Assign Value if checked checkedbox to input fields which is next to it

I need to assign value if checked checkbox to text input which is next to it. For example if i check cb1 then value=1 1 should be assigned to txtcb1. I need to do this only for checked checkbox only 

<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
    <input type="checkbox" name="cb1" value="1">  <input class="red" id="txtcb1" type="text" name="fname">
    Name One | Amount <input type="text" name="Amount1" class="auto-sum"> <br>
    <input type="checkbox" name="cb2" value="2"> <input class="red" id="txtcb2" type="text" name="fname"> Name Two | Amount <input type="text" name="Amount2" class="auto-sum"> <br>
    <input type="checkbox" name="cb3" value="3"> <input class="red" id="txtcb3" type="text" name="fname"> Name Three | Amount <input type="text" name="Amount3" class="auto-sum"><br>
    <input type="checkbox" name="cb4" value="4"> <input class="red" id="txtcb4" type="text" name="fname"> Name Four| Amount <input type="text" name="Amount4" class="auto-sum"> <br>
    <br>
    TOTAL  <label id="amountTotal">0 <label>
     AED <br>
    <input type="submit" value="Submit" onsubmit="return validateForm(this)">
</form>

http://codepen.io/anon/pen/MJWbNR?editors=1111

Upvotes: 0

Views: 80

Answers (4)

Ionut Necula
Ionut Necula

Reputation: 11472

You can use next() to select the input next to the checkbox like this:

$(this).next('input[type="text"]').val(id);

Working snippet below:

function validateForm(myButton) {

  return true;
}

$(document).ready(function() {

  //iterate through each textboxes and add keyup
  //handler to trigger sum event
  $(".auto-sum").each(function() {
    $(this).attr('disabled', true);
    $(this).keyup(function() {
      calculateSum();
    });
  });

  $('input[type=checkbox]').on('change', function() {
    var id = $(this).val();
    var active = $(this).prop('checked');
    if(active){
      $(this).next('input[type="text"]').val(id);
    }else{
      $(this).next('input[type="text"]').val(0);
    }
    $('.auto-sum[name=Amount' + id + ']').attr('disabled', !active);
    calculateSum();
  });

});


function calculateSum() {

  var sum = 0;
  //iterate through each textboxes and add the values
  $(".auto-sum").each(function() {
    if ($(this).prop('disabled')) return;
    //add only if the value is number
    if (!isNaN(this.value) && this.value.length != 0) {
      sum += parseFloat(this.value);
    }

  });
  //.toFixed() method will roundoff the final sum to 2 decimal places
  $("#amountTotal").html(sum.toFixed(2));
}
.red {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
  <input type="checkbox" name="cb1" value="1">
  <input class="red" id="txtcb1" type="text" name="fname">Name One | Amount
  <input type="text" name="Amount1" class="auto-sum">
  <br>
  <input type="checkbox" name="cb2" value="2">
  <input class="red" id="txtcb2" type="text" name="fname">Name Two | Amount
  <input type="text" name="Amount2" class="auto-sum">
  <br>
  <input type="checkbox" name="cb3" value="3">
  <input class="red" id="txtcb3" type="text" name="fname">Name Three | Amount
  <input type="text" name="Amount3" class="auto-sum">
  <br>
  <input type="checkbox" name="cb4" value="4">
  <input class="red" id="txtcb4" type="text" name="fname">Name Four| Amount
  <input type="text" name="Amount4" class="auto-sum">
  <br>
  <br>TOTAL
  <label id="amountTotal">0
    <label>
      AED
      <br>
      <input type="submit" value="Submit" onsubmit="return validateForm(this)">

</form>

Upvotes: 1

Supradeep
Supradeep

Reputation: 3266

In your checkbox on change event callback, set the id value like below : 

 $('input[type=checkbox]').on('change', function() {
  $(this).next('[type="text"]').val($(this).val());
});

Updated Pen

Upvotes: 1

Suchit kumar
Suchit kumar

Reputation: 11859

Try using next().

function validateForm(myButton){

	  return true;
	}

	$(document).ready(function () {

	     //iterate through each textboxes and add keyup
	     //handler to trigger sum event
	     $(".auto-sum").each(function () {
	         $(this).attr('disabled', true);
	         $(this).keyup(function () {
	             calculateSum();
	         });
	     });
	  
	  $('input[type=checkbox]').on('change', function() {
	      var id = $(this).val();
	      var active = this.checked ? this.value : 0;
	      var test=$(this).next();
	      $(test).val(active);
	      $('.auto-sum[name=Amount' + id + ']').attr('disabled', !active);
	      calculateSum();
	  });

	 });

	function calculateSum() {

	     var sum = 0;
	     //iterate through each textboxes and add the values
	     $(".auto-sum").each(function () {
	         if ($(this).prop('disabled')) return;
	         //add only if the value is number
	         if (!isNaN(this.value) && this.value.length != 0) {
	             sum += parseFloat(this.value);
	         }

	     });
	     //.toFixed() method will roundoff the final sum to 2 decimal places
	     $("#amountTotal").html(sum.toFixed(2));
	 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
<input type="checkbox" name="cb1" value="1">  <input class="red" id="txtcb1" type="text" name="fname">
Name One | Amount <input type="text" name="Amount1" class="auto-sum"> <br>
<input type="checkbox" name="cb2" value="2"> <input class="red" id="txtcb2" type="text" name="fname"> Name Two | Amount <input type="text" name="Amount2" class="auto-sum"> <br>
<input type="checkbox" name="cb3" value="3"> <input class="red" id="txtcb3" type="text" name="fname"> Name Three | Amount <input type="text" name="Amount3" class="auto-sum"><br>
<input type="checkbox" name="cb4" value="4"> <input class="red" id="txtcb4" type="text" name="fname"> Name Four| Amount <input type="text" name="Amount4" class="auto-sum"> <br>
 <br>
TOTAL  <label id="amountTotal">0 <label>
 AED <br>
 <input type="submit" value="Submit" onsubmit="return validateForm(this)">
  
  </form>

Upvotes: 1

Viktor Kukurba
Viktor Kukurba

Reputation: 1370

You can use method next inside change handler:

$(this).next('[type="text"]').val($(this).val());

Upvotes: 1

Related Questions