Assign value to hidden div

Question

Assign value to hidden div

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)
#4 by (0 votes)

0

I am a newbie and learning new things, I would like them to help me solve my problem, I am working with 3 different radiobuttons and when selecting a certain radio a hidden div appears:

the radiobuttons are called like this:

monthly_payment: if I select if a hidden div appears with an input text where I add an amount.
contributions: if I select if a hidden div appears with an input text where I add an amount.
accounting_payments: if I select if a hidden div appears with an input text where I add an amount.

and obviously I get the total of all the amounts. My problem arises in that if all the radio I put yes and add the amount that I AM and if I hide any div I RESTE the final total.

The hidden div have no problem in showing and hiding, recognize the call, what they do is add and subtract. I think it's something very silly what I can not do, I'm working with javascript and php. Help on how to do it please.

I add code of what I have

<script type="text/javascript">
$(document).ready(function (){
	$('input:radio[name=pago_mensual]').change(function (){
		if($(this).val()==1){
			$("#capa1").show();
		}else{
			$("#capa1").hide();
		}
	});
	
	$('input:radio[name=contri]').change(function (){
		if($(this).val()==1){
			$("#capa2").show();
		}else{
			$("#capa2").hide();
		}
	});
	
	$('input:radio[name=conta]').change(function (){
		if($(this).val()==1){
			$("#capa3").show();
		}else{
			$("#capa3").hide();
		}
	});
	
	function resultadoFinal(){
		tot=document.getElementById('total');
		pag1=document.getElementById('pago1');
		pag2=document.getElementById('pago2');
		pag3=document.getElementById('pago3');
	}
});
</script>

<body >

<form>
<div>
Pago Mensual
<input type="radio" name="pago_mensual"  value="1" />Si
<input type="radio" name="pago_mensual"  value="0"  />No
<div id="capa1" style="display:none;">
	Monto Aporte
    <input id="pago1" name="pago1" type="text"  value="<?php $pago1?>"/>
</div> 
</div>
<div>        
Contribuciones
<input type="radio" name="contri"  value="1" />Si
<input type="radio" name="contri"  value="0"  />No
<div id="capa2" style="display:none;">
	Monto Aporte
    <input id="pago2" name="pago2" type="text"  value="<?php $pago2?>"/>
</div> 
</div>
<div>  
Pago Contable
<input type="radio" name="conta"  value="1" />Si
<input type="radio" name="conta"  value="0"  />No
<div id="capa3" style="display:none;">
	Monto Aporte
    <input id="pago3" name="pago3" type="text"  value="<?php $pago3?>"/>
</div>  
</div>
<div> 
Total: <input id="total" name="total" type="text"  value="<?php $total?>"/>    
</div>       
</form>
</body>

javascript php css

asked by Karli 16.11.2017 в 16:52

source

4 answers

How do I manage to run my random program? I can not identify the error Clause CASE in PIVOT? SQL Server 2008 r2

score 1 · Answer 1

A possible solution is to execute a function that adds up every time you write in the inputs, and also execute that function when a div is hidden.

$('.input-suma').keyup(function(){
  sumar();
});

function sumar(){
  var suma = 0;
  $('.input-suma').each(function(){
    if( $(this).is(':visible') ){
        var val = $(this).val();
        if( !$(this).val() ) { val = 0 };
        suma = suma + parseInt( val );
    }
  });
  $('#total').val(suma); 
}

After each hide () you must call add () that only adds the inputs that are visible. In my case, the three inputs to add have added the class. Input-sum, so it does not add the input of the total.

Here is my solution to the problem: link
If I have not understood correctly.

score 0 · Answer 2

In the jquery change event you have the way to shoot a listener,

$("#tuID").on("change",function(){
   console.log(this.val);

});

Now to manipulate the value of the hidden input you also do it with jquery in the following way $("#tuInputOculto").val(); , bear in mind that if the div has some related input you change it to the internal input that can be hidden in the div; later when the function that makes the summation of values the value of the div to not have a content to add will provide the summation properly. Greetings.

score 0 · Answer 3

You will have to call a function that checks each radio button, and if its visibility style is hidden it does not add it (or subtract it), and if it is visible, then it adds it up.

For example:

function calcularValores() {
var radio1 = document.getElementById("radio_button1");
var radio2 = document.getElementById("radio_button2");
var radio3 = document.getElementById("radio_button3");

var suma_total = 0;

if (radio1.style.visibility == "visible") {
suma_total = suma_total + (lo que tenga que sumar);
}

if (radio2.style.visibility == "visible") {
suma_total = suma_total + (lo que tenga que sumar);
}

...

You could also do it more correctly by checking the value of each radio button, it will have the value of the radio that is selected. Then you do some things or others depending on their value.

And finally, you show the total value where you want it to be displayed.

score 0 · Answer 4

Starting the code that you have gone through and retouching some elements I have set up the javaScript to be "simpler" than you have (although with a selector that I do not like at all, but that will serve you) to do what you are trying .

I put data on fire in the snippet so that it looks like simple sight.

Classes have been added to the hidden div and the input that it contains to make performing an easier element search
The same class has been added for all radios buttons and so we can treat it in a single simplified js function.

The function performs two simple actions: Shows or hides the div according to the selection of the radio button and adds or subtracts the value of the input amount of the radio button selected.

EDIT

It has modified the errors that it had at the beginning, the radio buttons have also been marked by default to "No" to prevent that when selecting not the first time you subtracted the value (For not thinking about writing more).

$(document).ready(function() {
  $(".pagos").change(function() {    
    var inputMonto = $(this).parent().find(">.montoDiv").find(">.pago");
    if ($(this).val() == 1) {
      $("#total").val(parseFloat($("#total").val())+parseFloat(inputMonto.val()));
      inputMonto.parent().show();
    } else {
      inputMonto.parent().hide();
      $("#total").val(parseFloat($("#total").val())-parseFloat(inputMonto.val()));
}
  });
    $(".pago").focus(function() {
     $(this).data('val', $(this).val());
  });
  $(".pago").change(function() {      
     var hola = parseFloat($("#total").val())-parseFloat($(this).data().val);
     $("#total").val(hola);
     $("#total").val(parseFloat($("#total").val())+parseFloat($(this).val()));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div>
    Pago Mensual
    <input type="radio" name="pago_mensual" class="pagos" value="1" />Si
    <input type="radio" name="pago_mensual" class="pagos" value="0" checked />No
    <div id="capa1" class="montoDiv" style="display:none;">
      Monto Aporte
      <input id="pago1" class="pago" name="pago1" type="text" value="50.66" />
    </div>
  </div>
  <div>
    Contribuciones
    <input type="radio" name="contri" class="pagos" value="1" />Si
    <input type="radio" name="contri" class="pagos" value="0" checked />No
    <div id="capa2" class="montoDiv" style="display:none;">
      Monto Aporte
      <input id="pago2" class="pago" name="pago2" type="text" value="100" />
    </div>
  </div>
  <div>
    Pago Contable
    <input type="radio" name="conta" class="pagos" value="1" />Si
    <input type="radio" name="conta" class="pagos" value="0" checked/>No
    <div id="capa3" class="montoDiv" style="display:none;">
      Monto Aporte
      <input id="pago3" class="pago" name="pago3" type="text" value="33.05" />
    </div>
  </div>
  <div>
    Total: <input id="total" name="total" type="text" value="0.0" />
  </div>
</form>