Adding 3 inputs

Question

Adding 3 inputs

Navigation

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

1

I have an input that is mandatory with currency mask but the user can enter 2 more inputs. I am not able to do this calculation, especially when the 3 value inputs are not used.

The input values only appear if the user selects something in the select.

Here are the codes:

<div class="col-sm-4">
<div class="row control-group">
    <div class="form-group col-xs-12 controls">
        <label>Cirurgia 1<span>*</span></label>
        <select class="form-control selectpicker" id="cirurgia" required data-validation-required-message="Escolha a cirurgia." multiple title="Selecione a Cirurgia">
            <optgroup data-max-options="1">
                <option>Abdominoplastia </option>
                <option>Blefaroplastia </option>
                <option>Dermolipectomia </option>
                <option>Implante Capilar </option>
                <option>Lipoaspiração </option>
                <option>Lipoescultura </option>
                <option>Lifting </option>
                <option>Mastopexia </option>
                <option>Mamoplastia de Aumento </option>
                <option>Mamoplastia Redutora </option>
                <option>Rinoplastia </option>
                <option>Rinoseptoplastia </option>
                <option>Outros </option>
            </optgroup>
        </select>
        <p class="help-block"></p>
    </div>
</div>
<div class="row control-group valorc1">
    <div class="form-group col-xs-12 controls">
        <label id="namec1"><span>*</span></label>
        <input type="text" class="form-control valor" id="valorc1" name="data[valorc1]" required data-validation-required-message="Digite o valor." autocomplete="off">
        <p class="help-block"></p>
    </div>
</div>

This code repeats 2x by obviously changing the ids to 2 and 3.

Below the result where the calculation should appear:

<div class="col-sm-4">
<div class="row control-group">
    <div class="form-group col-xs-12 controls">
        <label>Valor Total da Cirurgia<span>*</span></label>
        <input type="text" class="form-control valor" id="valor_total" name="data[valor_cirurgia]" readonly="readonly">
        <!-- <p id="valor_total">0,00</p> -->
    </div>
</div>

Now jquery:

function calculaSoma(){
        var valor1 = $('input[name=data\[valorc1\]]');
        var valor2 = $('input[name=data\[valorc2\]]');
        var valor3 = $('input[name=data\[valorc3\]]');
        var tot = (valor + valor1 + valor2);
        var resultContainer = $('#valor_total');
        resultContainer.html(tot.formatMoney(2,',','.'));
        //alert(tot);
    }

If someone can help me?

html jquery

asked by anonymous 30.06.2017 / 20:17

4 answers

Unknown server error after updating cake vendor folder [closed] Search Value Input Jquery

score 0 · Answer 1

You are indexing the elements of their variables "values", the correct form would be:

function calculaSoma(){
        var valor1 = $('input[name=data\[valorc1\]]').val();
        var valor2 = $('input[name=data\[valorc2\]]').val();
        var valor3 = $('input[name=data\[valorc3\]]').val();
        var tot = (valor1 + valor2 + valor3);
        var resultContainer = $('#valor_total');
        resultContainer.html(tot.formatMoney(2,',','.'));
        //alert(tot);
}

score 0 · Answer 2

Would that be what you wanted to do?

$(document).ready(function() {
  jQuery('#valorc1, #valorc2, #valorc3').keyup(function(){   
   var total = 0; 
   var total = parseFloat($('#valorc1').val(), 0);
   $('#valor_total').val(total);
   var valor2 = parseFloat($('#valorc2').val(), 0);
   if (valor2 == 0){
       $('#valor_total').val(total);
   }
   else {
       total += valor2;
       $('#valor_total').val(total);
   }
   var valor3 = parseFloat($('#valorc3').val(), 0);
   if (valor3 == 0){
       $('#valor_total').val(total);
   }
   else{
       total += valor3;
       $('#valor_total').val(total);
   }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><label>Cirurgia1<span>*</span></label><selectclass="form-control selectpicker" id="cirurgia" required data-validation-required-message="Escolha a cirurgia." multiple title="Selecione a Cirurgia">
            <optgroup data-max-options="1">
                <option>Abdominoplastia </option>
                <option>Blefaroplastia </option>
                <option>Dermolipectomia </option>
                <option>Implante Capilar </option>
                <option>Lipoaspiração </option>
                <option>Lipoescultura </option>
                <option>Lifting </option>
                <option>Mastopexia </option>
                <option>Mamoplastia de Aumento </option>
                <option>Mamoplastia Redutora </option>
                <option>Rinoplastia </option>
                <option>Rinoseptoplastia </option>
                <option>Outros </option>
            </optgroup>
        </select>
        <p class="help-block"></p>

<input type="text" class="form-control valor" id="valorc1" name="data[valorc1]" required data-validation-required-message="Digite o valor." autocomplete="off">


<input type="text" class="form-control valor" id="valorc2" name="data[valorc1]" required data-validation-required-message="Digite o valor." autocomplete="off" value="0">

<input type="text" class="form-control valor" id="valorc3" name="data[valorc1]" value="0" required data-validation-required-message="Digite o valor." autocomplete="off">

<div class="col-sm-4">
<div class="row control-group">
    <div class="form-group col-xs-12 controls">
        <label>Valor Total da Cirurgia<span>*</span></label>
        <input type="text" class="form-control valor" id="valor_total" name="data[valor_cirurgia]" readonly="readonly">
        <!-- <p id="valor_total">0,00</p> -->
    </div>
</div>

score 0 · Answer 3

Only convert to numbers.

var valor1 = parseFloat($('input[name=data\[valorc1\]]'));
var valor2 = parseFloat($('input[name=data\[valorc2\]]'));
var valor3 = parseFloat($('input[name=data\[valorc3\]]'));

You can use parseInt () Also.

score 0 · Answer 4

This script by clicking on an option on the select menu shows an input to insert a value, a Mais campos clickable text which makes it possible to add up to 2 more fields. If you want to add a larger number of fields, just set the variable MaxInputs to a number of allowed inputs.

//script que mostra form quando um option for selecionado
    function showForm(that) {
        if (that.value != "") {
            document.getElementById("meuForm").style.display = "block";
        } else {
            document.getElementById("meuForm").style.display = "none";
        }
    }
    
	//script soma valor dos inputs e mostra resultado na tag span de id="Result"
	$(window).load(function(){

		var $form = $('#meuForm'),
		    $sumDisplay = $('#valor_total');  
	
		$form.on('keyup', '.valor', function ()
	
		{
		    var $summands = $form.find('.valor');
		    var sum = 0;
		    $summands.each(function ()
		    {
		        var value = Number($(this).val());
		        if (!isNaN(value)) sum += value;
		    });
		
		    $sumDisplay.val(sum);
		    
		    document.getElementById('Result').innerHTML = ": R$" +(sum)+",00"; 
		    
		});
	
	//script adiciona input
	$(document).ready(function() {
	var MaxInputs       = 2; //número máximo de inputs
	var InputsWrapper   = $("#InputsIncomeWrapper");
	var AddButton       = $("#AddMoreIncomeBox");
	var x = InputsWrapper.length; 
	var FieldCount=1;
		$(AddButton).click(function (e)
		{
		        if(x <= MaxInputs)
		        {
		            FieldCount++;
		            $(InputsWrapper).append('\
		            <div>\
		            <input type="text" class="form-control valor" id="valorc_'+ FieldCount +'"\
		            name="data[valorc1]" required data-validation-required-message="Digite o valor." autocomplete="off"\ />\
		            <a href="#" class="removeclass">Remover</a></div>');
		            x++;
		        }
		return false;
		});
		
	//script retira input e deduz valor correspondente do total
	$("body").on("click", ".removeclass", function (e) {
	        if (x > 1) {
	            $(this).parent('div').remove();
	            x--;
	        }
	        $('.valor').trigger('keyup');
	        return false;
	    })
	});
	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="col-sm-4">
<div class="row control-group">
<div class="form-group col-xs-12 controls">
    <label>Cirurgia 1<span>*</span></label>
    <select onchange="showForm(this);" class="form-control selectpicker" id="cirurgia" required data-validation-required-message="Escolha a cirurgia." multiple title="Selecione a Cirurgia">
        <optgroup data-max-options="1">
            <option>Abdominoplastia </option>
            <option>Blefaroplastia </option>
            <option>Dermolipectomia </option>
            <option>Implante Capilar </option>
            <option>Lipoaspiração </option>
            <option>Lipoescultura </option>
            <option>Lifting </option>
            <option>Mastopexia </option>
            <option>Mamoplastia de Aumento </option>
            <option>Mamoplastia Redutora </option>
            <option>Rinoplastia </option>
            <option>Rinoseptoplastia </option>
            <option>Outros </option>
        </optgroup>
    </select>
    <p class="help-block"></p>
</div>
</div>

<div id="meuForm" style="display: none;">
<input type="text" class="form-control valor" id="valorc" name="data[valorc1]" required data-validation-required-message="Digite o valor." autocomplete="off">
<div id="InputsIncomeWrapper"> </div>
<div class="col-sm-4">
	<div class="row control-group">
		<div class="form-group col-xs-12 controls">
			<input type="text" class="form-control valor2" id="valor_total" name="data[valor_cirurgia]" style="display: none;">
			<a href="#" id="AddMoreIncomeBox">Mais campos</a><br>
			<label>Valor Total da Cirurgia<span id="Result">*</span></label>
		</div>
	</div>
</div>
</div>