Selecionar e adicionar campo

SeveroSoft · Outubro 21, 2016

perfeito o exemplo, porem como disse sou iniciante e gostaria de pedir um exemplo um pouco maior ou especificado hehe, para q eu possa mesmo entender como usar tudo isso :(

SeveroSoft · Outubro 22, 2016

Pode repetir o vallue, sim. Só o id que não pode se repetir

O que eu quis dizer foi algo assim:
$prices = array(
    'broto' => 9.90,
    'media' => 19.90,
    'grande' => 29.90,
);
Considerando que $tamanho recebe o tamanho da pizza selecionada pelo usuário, bastaria fazer o seguinte pra saber o preço:
echo $prices[$tamanho];

Gostaria de saber se alguem tem como me falar sobre como somar campos em tempo real... tipo mostrar um pouco mais sobre isso, ou fazer um modelo para que eu possa ir testando e modificando ao meu gosto.

Preciso somar campos selecionados (combobox), campo de texto com valor já determinado mas em texto. exemplo: (bairro Centro, dar a ele um valor de 5,00).

se possivel azer apenas um modelo desse que eu pedi para ir adicionando os outros campos e entendendo melhor a função pq tudo que estudei até agora n me ajudou muito.

Me ajudem por favor.

Beraldo · Outubro 22, 2016

Veja exemplos de "calculadora". É exatamente o mesmo princípio. Existem tutoriais e códigos prontos tanto em PHP como em Javascript

SeveroSoft · Outubro 22, 2016

eu verifiquei vários tutoriais, procurei varias calculadoras, mas não estou conseguindo adicionar o valor a cada campo, pois cada campo tem q ter um value diferente para abrir outros campos no javascript entende?

Então se tivesse como me mostrar um exemplo de tudo isso com
A, B, C eu poderia entender melhor toda essa função. :(

<html>
<head>
    <script type="text/javascript">
        function somarValores(){
        var s1 = document.getElementById("s1").value;
        var s2 = document.getElementById("s2").value;
        var s5 = document.getElementById("s5").value;
        var s3 = parseInt(s1) + parseInt(s2) + parseInt(s5);
        alert(s3);
    }
    </script>
</head>
<body>
    <fieldset>
        <legend>Cálculo do salário</legend>
        <label>Valor 1:</label>
        <input id="s1" type="text"/>
        <label>Valor 2: </label>
		<select id="s2">
			<option value="0">Selecione</option>
			<option value="broto2">Broto</option>
			<option value="pequena2">Pequena</option>
			<option value="media2">Média</option>
			<option value="grande2">Grande</option>
			<option value="gigante2">Gigante</option>
		</select>
		<select id="s5">
			<option value="01">Selecione</option>
			<option value="broto3">Broto</option>
			<option value="pequena3">Pequena</option>
			<option value="media3">Média</option>
			<option value="grande3">Grande</option>
			<option value="gigante3">Gigante</option>
		</select>
        <button id="somar" onclick="somarValores()">Somar</button>
		

    </fieldset>
 
</body>
</html>

Como fazer o javascript adicionar um valor aos campos selecionados(gigante2, gigante3, broto2, broto3)

$prices = array(
    'broto' => 9.90,
    'media' => 19.90,
    'grande' => 29.90,
);

Não sei como usar isso :(

Beraldo · Outubro 22, 2016

Insisto: os campos value não precisam ser diferentes. Se os <select>s têm IDs diferentes, você pode acessar o value selecionado de todos eles, mesmo que tenham todos o mesmo valor

Dê um passo de cada vez. Quer somar os values, então coloque números nesses values, não strings. Depois pense em como juntar isso com a sugestão que dei sobre array.

E cuidado: você está usando Javascript, mas o array está em PHP. Use uma linguagem ou outra. É possível integrar as duas via Ajax, mas se você é iniciante, comece devagar.

SeveroSoft · Outubro 22, 2016

Eu uso uma função em javascript vou enviar abaixo um exemplo...

<div id="hiddenDiv" style="visibility:hidden;">
<select id="tamanho_1" onchange="optionCheck1()">
<option value="0">Selecione</option>
<option value="broto">Broto</option>
<option value="pequena">Pequena</option>
<option value="media">Média</option>
<option value="grande">Grande</option>
<option value="gigante">Gigante</option>
</select>
</div>

<div id="hiddenDiv2" style="visibility:hidden;">
Selecione o tamanho da pizza 2: 
<select id="tamanho_2" onchange="optionCheck2()">
<option value="02">Selecione</option>
<option value="broto2">Broto</option>
<option value="pequena2">Pequena</option>
<option value="media2">Média</option>
<option value="grande2">Grande</option>
<option value="gigante2">Gigante</option>
</select>
</div>

<div id="broto" style="display:none;">
1 campo sabor
</div>
<div id="pequena" style="display:none;">
2 campos sabor
</div>
<div id="media" style="display:none;">
3 campo sabor
</div>
<div id="grande" style="display:none;">
4 campos sabores
</div>
<div id="gigante" style="display:none;">
4 campos sabores
</div>

<div id="broto2" style="display:none;">
1 campo sabor
</div>
<div id="pequena2" style="display:none;">
2 campos sabor
</div>
<div id="media2" style="display:none;">
3 campo sabor
</div>
<div id="grande2" style="display:none;">
4 campos sabores
</div>
<div id="gigante2" style="display:none;">
4 campos sabores
</div>


<script>
function optionCheck(){
        var option = document.getElementById("options").value;
        if(option == "1 pizza"){
            document.getElementById("container").style.display ="block";
            document.getElementById("hiddenDiv2").style.visibility ="hidden";
            document.getElementById("hiddenDiv3").style.visibility ="hidden";
            document.getElementById("hiddenDiv4").style.visibility ="hidden";
            document.getElementById("hiddenDiv").style.visibility ="visible";
            document.getElementById("container").style.visibility ="visible";
            document.getElementById("container2").style.visibility ="visible";
            document.getElementById("hiddenDiv5").style.visibility ="hidden";
        }
        if(option == "2 pizzas"){
            document.getElementById("container").style.display ="block";
            document.getElementById("hiddenDiv3").style.visibility ="hidden";
            document.getElementById("hiddenDiv4").style.visibility ="hidden";
            document.getElementById("hiddenDiv").style.visibility ="visible";
            document.getElementById("hiddenDiv2").style.visibility ="visible";
            document.getElementById("container").style.visibility ="visible";
            document.getElementById("container2").style.visibility ="visible";
            document.getElementById("hiddenDiv5").style.visibility ="hidden";
        }
        if(option == "3 pizzas"){
            document.getElementById("container").style.display ="block";
            document.getElementById("hiddenDiv4").style.visibility ="hidden";
            document.getElementById("hiddenDiv2").style.visibility ="visible";
            document.getElementById("hiddenDiv").style.visibility ="visible";
            document.getElementById("hiddenDiv3").style.visibility ="visible";
            document.getElementById("container").style.visibility ="visible";
            document.getElementById("container2").style.visibility ="visible";
            document.getElementById("hiddenDiv5").style.visibility ="hidden";
        }
        if(option == "4 pizzas"){
            document.getElementById("container").style.display ="block";
            document.getElementById("hiddenDiv3").style.visibility ="visible";
            document.getElementById("hiddenDiv2").style.visibility ="visible";
            document.getElementById("hiddenDiv").style.visibility ="visible";
            document.getElementById("hiddenDiv4").style.visibility ="visible";
            document.getElementById("container").style.visibility ="visible";
            document.getElementById("container2").style.visibility ="visible";
            document.getElementById("hiddenDiv5").style.visibility ="hidden";
        }
        if(option == "0"){
            document.getElementById("container").style.display ="none";
            document.getElementById("hiddenDiv3").style.visibility ="hidden";
            document.getElementById("hiddenDiv2").style.visibility ="hidden";
            document.getElementById("hiddenDiv").style.visibility ="hidden";
            document.getElementById("container").style.visibility ="hidden";
            document.getElementById("container2").style.visibility ="hidden";
            document.getElementById("hiddenDiv4").style.visibility ="hidden";
            document.getElementById("hiddenDiv5").style.visibility ="visible";
        }
    }

 function optionCheck1(){
        var option = document.getElementById("tamanho_1").value;
        if(option == "broto"){
            document.getElementById("field").style.display ="block";
            document.getElementById("grande").style.visibility ="hidden";
            document.getElementById("grande").style.display ="none";
            document.getElementById("media").style.visibility ="hidden";
            document.getElementById("media").style.display ="none";
            document.getElementById("pequena").style.visibility ="hidden";
            document.getElementById("pequena").style.display ="none";
            document.getElementById("broto").style.display ="block";
            document.getElementById("broto").style.visibility ="visible";
            document.getElementById("gigante").style.display ="none";
            document.getElementById("gigante").style.visibility ="hidden";
        }
        if(option == "pequena"){
            document.getElementById("broto").style.visibility ="hidden";
            document.getElementById("field").style.display ="block";
            document.getElementById("broto").style.display ="none";
            document.getElementById("pequena").style.visibility ="visible";
            document.getElementById("pequena").style.display ="block";
            document.getElementById("media").style.visibility ="hidden";
            document.getElementById("media").style.display ="none";
            document.getElementById("grande").style.display ="none";
            document.getElementById("grande").style.visibility ="hidden";
            document.getElementById("gigante").style.visibility ="hidden";
            document.getElementById("gigante").style.display ="none";
        }
        if(option == "media"){
            document.getElementById("field").style.display ="block";
            document.getElementById("broto").style.visibility ="hidden";
            document.getElementById("broto").style.display ="none";
            document.getElementById("pequena").style.visibility ="hidden";
            document.getElementById("pequena").style.display ="none";
            document.getElementById("media").style.visibility ="visible";
            document.getElementById("media").style.display ="block";
            document.getElementById("grande").style.display ="none";
            document.getElementById("grande").style.visibility ="hidden";
            document.getElementById("gigante").style.visibility ="hidden";
            document.getElementById("gigante").style.display ="none";
        }
        if(option == "grande"){
            document.getElementById("field").style.display ="block";
            document.getElementById("broto").style.visibility ="hidden";
            document.getElementById("broto").style.display ="none";
            document.getElementById("pequena").style.visibility ="hidden";
            document.getElementById("pequena").style.display ="none";
            document.getElementById("media").style.visibility ="hidden";
            document.getElementById("media").style.display ="none";
            document.getElementById("grande").style.display ="block";
            document.getElementById("grande").style.visibility ="visible";
            document.getElementById("gigante").style.visibility ="hidden";
            document.getElementById("gigante").style.display ="none";
        }
        if(option == "gigante"){
            document.getElementById("field").style.display ="block";
            document.getElementById("gigante").style.display ="block";
            document.getElementById("broto").style.visibility ="hidden";
            document.getElementById("broto").style.display ="none";
            document.getElementById("pequena").style.visibility ="hidden";
            document.getElementById("pequena").style.display ="none";
            document.getElementById("media").style.visibility ="hidden";
            document.getElementById("media").style.display ="none";
            document.getElementById("grande").style.visibility ="hidden";
            document.getElementById("grande").style.display ="none";
            document.getElementById("gigante").style.visibility ="visible";
        }
        if(option == "0"){
            document.getElementById("field").style.display ="none";
            document.getElementById("grande").style.visibility ="hidden";
            document.getElementById("grande").style.display ="none";
            document.getElementById("media").style.visibility ="hidden";
            document.getElementById("media").style.display ="none";
            document.getElementById("pequena").style.visibility ="hidden";
            document.getElementById("pequena").style.display ="none";
            document.getElementById("broto").style.visibility ="hidden";
            document.getElementById("broto").style.display ="none";
            document.getElementById("gigante").style.visibility ="hidden";
            document.getElementById("gigante").style.display ="none";
        }
}

    function optionCheck2(){
        var option = document.getElementById("tamanho_2").value;
        if(option == "broto2"){
            document.getElementById("field2").style.display ="block";
            document.getElementById("pequena2").style.visibility ="hidden";
            document.getElementById("pequena2").style.display ="none";
            document.getElementById("broto2").style.visibility ="visible";
            document.getElementById("broto2").style.display ="block";
            document.getElementById("media2").style.visibility ="hidden";
            document.getElementById("media2").style.display ="none";
            document.getElementById("grande2").style.display ="none";
            document.getElementById("grande2").style.visibility ="hidden";
            document.getElementById("gigante2").style.visibility ="hidden";
            document.getElementById("gigante2").style.display ="none";
        }
        if(option == "pequena2"){
            document.getElementById("field2").style.display ="block";
            document.getElementById("pequena2").style.visibility ="visible";
            document.getElementById("pequena2").style.display ="block";
            document.getElementById("broto2").style.visibility ="hidden";
            document.getElementById("broto2").style.display ="none";
            document.getElementById("media2").style.visibility ="hidden";
            document.getElementById("media2").style.display ="none";
            document.getElementById("grande2").style.display ="none";
            document.getElementById("grande2").style.visibility ="hidden";
            document.getElementById("gigante2").style.visibility ="hidden";
            document.getElementById("gigante2").style.display ="none";
        }
        if(option == "media2"){
            document.getElementById("field2").style.display ="block";
            document.getElementById("broto2").style.visibility ="hidden";
            document.getElementById("broto2").style.display ="none";
            document.getElementById("pequena2").style.visibility ="hidden";
            document.getElementById("pequena2").style.display ="none";
            document.getElementById("media2").style.visibility ="visible";
            document.getElementById("media2").style.display ="block";
            document.getElementById("grande2").style.display ="none";
            document.getElementById("grande2").style.visibility ="hidden";
            document.getElementById("gigante2").style.visibility ="hidden";
            document.getElementById("gigante2").style.display ="none";
        }
        if(option == "grande2"){
            document.getElementById("field2").style.display ="block";
            document.getElementById("broto2").style.visibility ="hidden";
            document.getElementById("broto2").style.display ="none";
            document.getElementById("pequena2").style.visibility ="hidden";
            document.getElementById("pequena2").style.display ="none";
            document.getElementById("media2").style.visibility ="hidden";
            document.getElementById("media2").style.display ="none";
            document.getElementById("grande2").style.display ="block";
            document.getElementById("grande2").style.visibility ="visible";
            document.getElementById("gigante2").style.visibility ="hidden";
            document.getElementById("gigante2").style.display ="none";
        }
        if(option == "gigante2"){
            document.getElementById("field2").style.display ="block";
            document.getElementById("gigante2").style.display ="block";
            document.getElementById("broto2").style.visibility ="hidden";
            document.getElementById("broto2").style.display ="none";
            document.getElementById("pequena2").style.visibility ="hidden";
            document.getElementById("pequena2").style.display ="none";
            document.getElementById("media2").style.visibility ="hidden";
            document.getElementById("media2").style.display ="none";
            document.getElementById("grande2").style.visibility ="hidden";
            document.getElementById("grande2").style.display ="none";
            document.getElementById("gigante2").style.visibility ="visible";
        }
        if(option == "02"){
            document.getElementById("field2").style.display ="none";
            document.getElementById("grande2").style.visibility ="hidden";
            document.getElementById("grande2").style.display ="none";
            document.getElementById("media2").style.visibility ="hidden";
            document.getElementById("media2").style.display ="none";
            document.getElementById("pequena2").style.visibility ="hidden";
            document.getElementById("pequena2").style.display ="none";
            document.getElementById("broto2").style.visibility ="hidden";
            document.getElementById("broto2").style.display ="none";
            document.getElementById("gigante2").style.visibility ="hidden";
            document.getElementById("gigante2").style.display ="none";
        }
}
</script>

Segue mais ou menos oq fiz para adicionar campos dinâmicos... meio trabalhoso mas foi assim que consegui fazer.

Por isso eu uso os values diferentes, entende?
porem se souber de alguma maneira mais fácil de fazer por favor me informe também.

Sobre os campos eu queria uma ajuda de criar uma tabela com todos os valores, e um sistema para somar os campos de todas as tabelas que forem selecionados.

exemplo:

<select id="1">
se for selecionado broto = 28,00
se selecionado pequena = 33,00
se selecionado gigante = 55,00
</select>
<select id="2">
se for selecionado broto2 = 28,00
se selecionado pequena2 = 33,00
</select>

tomara que possa me ajudar pois não estou conseguindo hahaha

Beraldo · Outubro 26, 2016

Vou postar um simples exemplo pra mostrar o que eu estava dizendo sobre o value com valores iguais

Usei jQuery pra facilitar. Mas tudo pode ser feito com JS puro, se quiser.

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <select name="pizzas">
   <option value="9.99">Pequena</option>
   <option value="19.99">Média</option>
   <option value="29.99">Grande</option>
  </select>
  <select name="pizzas">
   <option value="9.99">Pequena</option>
   <option value="19.99">Média</option>
   <option value="29.99">Grande</option>
  </select>
  <select name="pizzas">
   <option value="9.99">Pequena</option>
   <option value="19.99">Média</option>
   <option value="29.99">Grande</option>
  </select>
  <br><br>
  <input type="button" id="btn-calcular" value="Calcular">
 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script>
  $('#btn-calcular').click(function()
  {
   var pizzas = $('select[name="pizzas"]');
   var total = 0;
   $(pizzas).each(function()
   {
    total += parseFloat($(this).val());
   });
   alert(total);
  });
  </script>
</body>
</html>

Basta buscar os <select>'s, fazer um loop para pegar o value de cada um deles e somar esse número à variável total.

Entrar

Arquivado

Selecionar e adicionar campo

Recommended Posts

SeveroSoft 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

SeveroSoft 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Beraldo 864

Compartilhar este post

Link para o post

Compartilhar em outros sites

SeveroSoft 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Beraldo 864

Compartilhar este post

Link para o post

Compartilhar em outros sites

SeveroSoft 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Beraldo 864

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante