Jump to content
wneo

Calculadora sem submit

Recommended Posts

Boa tarde!!!

 

Pessoal, tô montando uma calculadora com JS... mas gostaria que o cálculo ocorresse automático, sem a necessidade de clicar em um botão.

Imaginem 3 inputs. Dois inputs são para o usuário informar valores, e o terceiro mostra o resultado.Ou seja, toda vez que fizer um .blur em um campo (sair dele), o resultado aparece.

Montei um código que chega quase lá, o problema que quando saio de um e o outro não tem valor, o resultado fica NaN.

Como posso resolver isso???

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Teste pegar Valor de elementos</title>

</head>
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
 
<script>
$(function($){
 
    // No id #enviar assim que clicar executa a função

    $('.campo').blur(function(){
 
    /* veja que eu criei variáveis para guardar os itens
     * e só precisei usar a função val() para
     * retornar o valor dos campo para a várivel
     */
 
        var numero1 = $('#numero1').val();
        var numero2 = $('#numero2').val();
	var conta = parseInt(numero1)+parseInt(numero2);	
 
       $("#resultado").val(conta);
    });
});
</script>
<body>
 
    <!-- Repare que coloquei um ID para cada input -->
    <input class="campo" id="numero1" type="text" />
    <input class="campo" id="numero2" type="text" />

    <input id="resultado" type="text" value="0" placeholder="Resultado"/>

   	
 
</body>
</html>

Share this post


Link to post
Share on other sites

Consegui fazer dessa forma, aplicando os ifs:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Calculadora dinâmica</title>

<link rel="stylesheet" type="text/css" href="pega-dados.css" />

</head>
 
<body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>

<script>
$(function($){
 
    // No id #enviar assim que clicar executa a função

    $('.campo').blur(function(){
 
    /* veja que eu criei variáveis para guardar os itens
     * e só precisei usar a função val() para
     * retornar o valor dos campo para a várivel
     */

        var campo =   $('.campo');

        var numero1 = $('#numero1').val();
        var numero2 = $('#numero2').val();
	var conta = parseInt(numero1)+parseInt(numero2);	

if(numero2==""){

  $("#resultado").val(numero1);
 
}else if(numero1==""){

  $("#resultado").val(numero2);
 
}else{
       $("#resultado").val(conta);
}
    });
});
</script>

<div class="titulo">
<span>Calculadora Dinâmica</span>
</div><!-- /titulo-->
 
<form>
    <!-- Repare que coloquei um ID para cada input -->
    <input class="campo" id="numero1" type="text" />
    <input class="campo" id="numero2" type="text" />

    <input id="resultado" type="text" value="0" placeholder="Resultado" disabled/>

</form>

   	
 
</body>
</html>

Mas a calculadora está somente fazendo operação de adição...

Como eu poderia implementar as demais operações nesse segmento de código que estou fazendo...?????

Share this post


Link to post
Share on other sites

Pessoal, olhem só essa idéia:

Digamos que eu queira ter 3 checkboxes e um campo de resultado... em 2 ocorre a soma e quando clico na terceira deve ocorrer a subtração...Essa subtração que é o meu problema....Como poderia fazer isso?

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Calculadora dinâmica</title>

<link rel="stylesheet" type="text/css" href="pega-dados.css" />

</head>
 
<body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>

<div class="titulo">
<span>Calculadora Dinâmica</span>
</div><!-- /titulo-->
 
<form>
    <!-- Repare que coloquei um ID para cada input -->
     <label for="">Número1 (150)+</label>
    <input class="campo" id="numero1" type="checkbox" value="150"/>
	
     <label for="">Número2 (50)+</label>	
    <input class="campo" id="numero2" type="checkbox" value="50"/>

 <label for="">Desconto (10)-</label>	
    <input class="campo" id="numero2" type="checkbox" value="10"/>

    <label for=""></label>	
    <input id="resultado" type="text" value="0" placeholder="Informe os valores..." disabled/>

</form>

<script>
function sumChecked() {
var result = $("input:checked");
var total = 0;
for (var i=0;i<result.length;i++)
{
total = total+parseFloat(result[i].value);
}
$("#resultado").val(total.toFixed(2));
}

sumChecked();
$(":checkbox").click(sumChecked);
</script>

   	
 
</body>
</html>

Share this post


Link to post
Share on other sites

A ideia é trabalhar somente com três valores para uma coisa especifica? Ou é mais geral, pq se for só essas 3 checkboxs fica muito limitado. Responde que talvez eu possa te ajudar!

  • +1 1

Share this post


Link to post
Share on other sites

Ah, e na subtração, que pelo que eu entendi é -10 no valor total. Você esqueceu de colocar o value do desconto(última checkbox):

<input class="campo" id="numero2" type="checkbox" value="50"/>

Deve alterar o valor para -10.

  • +1 1

Share this post


Link to post
Share on other sites

A ideia é trabalhar somente com três valores para uma coisa especifica? Ou é mais geral, pq se for só essas 3 checkboxs fica muito limitado. Responde que talvez eu possa te ajudar!

Essa aplicação pode evoluir, tendo a possibilidade de realizar as quatro operações matemáticas. Seria essa minha proxima questão. Mas para compreendermos gradativamente, vamos fazer inicialmente, com os 3 valores fixos.

 

(corrigi o input de desconto, para o value="10").

Share this post


Link to post
Share on other sites

Acho que seria legal assim: Dois inputs pedindo os números e no meio um select do sinal(operação), e aplicar o evento onkeyup para mostrar na hora. O que acha?

Share this post


Link to post
Share on other sites

Cara, nesse tempo eu já fiz uma, veja:

<!DOCTYPE html>
<html>
<head>
<title>Calculadora dinamica</title>
<meta charset="UTF-8">
<script>
function muda(){
	n1 = parseFloat(document.cal.n1.value);
	n2 = parseFloat(document.cal.n2.value);
	opr = document.cal.opr.value;
	var r;
	switch(opr){
		case "+":
		r = n1 + n2;
		break;
		case "-":
		r = n1 - n2;
		break;
		case "x":
		r = n1 * n2;
		break;
		case "/":
		r = n1/n2;
		break;
		default:
		r = "Erro";
		break;
	}
	document.cal.resultado.value = r;
}
</script>
</head>
<body>
<form name="cal" >
<input type="number" name="n1" onkeyup="muda();">
	<select name="opr" onchange="muda();">
		<option value="+">+</option>
		<option value="-">-</option>
		<option value="x">x</option>
		<option value="/">/</option>
	</select>
<input type="number" name="n2" onkeyup="muda();"> = 
<input type="number" name="resultado">
</form> 
</body>
</html>

Bem simples! Eu já tinha feito uma calculadora, mas com os botões, normal!

Share this post


Link to post
Share on other sites

Cara, nesse tempo eu já fiz uma, veja:

<!DOCTYPE html>
<html>
<head>
<title>Calculadora dinamica</title>
<meta charset="UTF-8">
<script>
function muda(){
	n1 = parseFloat(document.cal.n1.value);
	n2 = parseFloat(document.cal.n2.value);
	opr = document.cal.opr.value;
	var r;
	switch(opr){
		case "+":
		r = n1 + n2;
		break;
		case "-":
		r = n1 - n2;
		break;
		case "x":
		r = n1 * n2;
		break;
		case "/":
		r = n1/n2;
		break;
		default:
		r = "Erro";
		break;
	}
	document.cal.resultado.value = r;
}
</script>
</head>
<body>
<form name="cal" >
<input type="number" name="n1" onkeyup="muda();">
	<select name="opr" onchange="muda();">
		<option value="+">+</option>
		<option value="-">-</option>
		<option value="x">x</option>
		<option value="/">/</option>
	</select>
<input type="number" name="n2" onkeyup="muda();"> = 
<input type="number" name="resultado">
</form> 
</body>
</html>

Bem simples! Eu já tinha feito uma calculadora, mas com os botões, normal!

Ficou bom, mas não funciona quando muda os números pelo input number. Mas já dá uma noção boa.

E se for com os valores fixos como falei inicialmente?

Share this post


Link to post
Share on other sites

só acrescenter onchange="muda();" nos dois inputs.

se são só tres valores não há necessidade de fazer uma calculadora.

 

<!DOCTYPE html>
<html>
<head>
<title>Calculadora dinamica</title>
<meta charset="UTF-8">
<script>
function muda(){
	n1 = parseFloat(document.cal.n1.value);
	n2 = parseFloat(document.cal.n2.value);
	opr = document.cal.opr.value;
	var r;
	switch(opr){
		case "+":
		r = n1 + n2;
		break;
		case "-":
		r = n1 - n2;
		break;
		case "x":
		r = n1 * n2;
		break;
		case "/":
		r = n1/n2;
		break;
		default:
		r = "Erro";
		break;
	}
	document.cal.resultado.value = r;
}
</script>
</head>
<body>
<form name="cal" >
<input type="number" name="n1" onkeyup="muda();" onchange="muda();">
	<select name="opr" onchange="muda();">
		<option value="+">+</option>
		<option value="-">-</option>
		<option value="x">x</option>
		<option value="/">/</option>
	</select>
<input type="number" name="n2" onkeyup="muda();" onchange="muda();"> = 
<input type="number" name="resultado">
</form> 
</body>
</html>
  • +1 1

Share this post


Link to post
Share on other sites
Em 17/07/2015 at 21:31, Insanity disse:

Cara, nesse tempo eu já fiz uma, veja:


<!DOCTYPE html>
<html>
<head>
<title>Calculadora dinamica</title>
<meta charset="UTF-8">
<script>
function muda(){
	n1 = parseFloat(document.cal.n1.value);
	n2 = parseFloat(document.cal.n2.value);
	opr = document.cal.opr.value;
	var r;
	switch(opr){
		case "+":
		r = n1 + n2;
		break;
		case "-":
		r = n1 - n2;
		break;
		case "x":
		r = n1 * n2;
		break;
		case "/":
		r = n1/n2;
		break;
		default:
		r = "Erro";
		break;
	}
	document.cal.resultado.value = r;
}
</script>
</head>
<body>
<form name="cal" >
<input type="number" name="n1" onkeyup="muda();">
	<select name="opr" onchange="muda();">
		<option value="+">+</option>
		<option value="-">-</option>
		<option value="x">x</option>
		<option value="/">/</option>
	</select>
<input type="number" name="n2" onkeyup="muda();"> = 
<input type="number" name="resultado">
</form> 
</body>
</html>

Bem simples! Eu já tinha feito uma calculadora, mas com os botões, normal!

Boa tarde! Estou começando Javascript e gostaria se saber como faço para criar um campo onde aparecesse o nome do operador que estou selecionando, tipo, se eu escolhesse o "+" no campo abaixo aparecesse "Adição".

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Rodrigo5468
      Olá, tudo bem? Espero que sim.
       
      Eu seguir esse tutorial e essa atualização para conseguir o código final. Mas o meu site fica totalmente, não exibe absolutamente nada. Eu venho aqui recorrer a vocês, pois lá não irei ter nenhum tipo de suporte. Por favor, quem for me auxiliar com esse pequeno problema, leia o tópico do tutorial. Mas o Fruition é um script para personalizar o domínio utilizando o Notion.
      /* CONFIGURATION STARTS HERE */ /* Step 1: enter your domain name like fruitionsite.com */ const MY_DOMAIN = 'DOMINIO'; /* * Step 2: enter your URL slug to page ID mapping * The key on the left is the slug (without the slash) * The value on the right is the Notion page ID */ const SLUG_TO_PAGE = { '': 'CODIGO_DA_PÁGINA_PÚBLICA_DO_NOTION' }; /* Step 3: enter your page title and description for SEO purposes */ const PAGE_TITLE = ''; const PAGE_DESCRIPTION = ''; /* Step 4: enter a Google Font name, you can choose from https://fonts.google.com */ const GOOGLE_FONT = ''; /* Step 5: enter any custom scripts you'd like */ const CUSTOM_SCRIPT = ``; /* CONFIGURATION ENDS HERE */ const PAGE_TO_SLUG = {}; const slugs = []; const pages = []; Object.keys(SLUG_TO_PAGE).forEach(slug => { const page = SLUG_TO_PAGE[slug]; slugs.push(slug); pages.push(page); PAGE_TO_SLUG[page] = slug; }); addEventListener("fetch", event => { event.respondWith(fetchAndApply(event.request)); }); function generateSitemap() { let sitemap = '<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">'; slugs.forEach( (slug) => (sitemap += "<url><loc>https://" + MY_DOMAIN + "/" + slug + "</loc></url>") ); sitemap += "</urlset>"; return sitemap; } const corsHeaders = { "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Methods": "GET, HEAD, POST, PUT, OPTIONS", "Access-Control-Allow-Headers": "Content-Type" }; function handleOptions(request) { if ( request.headers.get("Origin") !== null && request.headers.get("Access-Control-Request-Method") !== null && request.headers.get("Access-Control-Request-Headers") !== null ) { // Handle CORS pre-flight request. return new Response(null, { headers: corsHeaders }); } else { // Handle standard OPTIONS request. return new Response(null, { headers: { Allow: "GET, HEAD, POST, PUT, OPTIONS" } }); } } async function fetchAndApply(request) { if (request.method === "OPTIONS") { return handleOptions(request); } let url = new URL(request.url); url.hostname = 'www.notion.so'; if (url.pathname === "/robots.txt") { return new Response("Sitemap: https://" + MY_DOMAIN + "/sitemap.xml"); } if (url.pathname === "/sitemap.xml") { let response = new Response(generateSitemap()); response.headers.set("content-type", "application/xml"); return response; } let response; if (url.pathname.startsWith("/app") && url.pathname.endsWith("js")) { response = await fetch(url.toString()); let body = await response.text(); response = new Response( body .replace(/www.notion.so/g, MY_DOMAIN) .replace(/notion.so/g, MY_DOMAIN), response ); response.headers.set("Content-Type", "application/x-javascript"); return response; } else if (url.pathname.startsWith("/api")) { // Forward API response = await fetch(url.toString(), { body: request.body, headers: { "content-type": "application/json;charset=UTF-8", "user-agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36" }, method: "POST" }); response = new Response(response.body, response); response.headers.set("Access-Control-Allow-Origin", "*"); return response; } else if (slugs.indexOf(url.pathname.slice(1)) > -1) { const pageId = SLUG_TO_PAGE[url.pathname.slice(1)]; return Response.redirect("https://" + MY_DOMAIN + "/" + pageId, 301); } else { response = await fetch(url.toString(), { body: request.body, headers: request.headers, method: request.method }); response = new Response(response.body, response); response.headers.delete("Content-Security-Policy"); response.headers.delete("X-Content-Security-Policy"); } return appendJavascript(response, SLUG_TO_PAGE); } class MetaRewriter { element(element) { if (PAGE_TITLE !== "") { if ( element.getAttribute("property") === "og:title" || element.getAttribute("name") === "twitter:title" ) { element.setAttribute("content", PAGE_TITLE); } if (element.tagName === "title") { element.setInnerContent(PAGE_TITLE); } } if (PAGE_DESCRIPTION !== "") { if ( element.getAttribute("name") === "description" || element.getAttribute("property") === "og:description" || element.getAttribute("name") === "twitter:description" ) { element.setAttribute("content", PAGE_DESCRIPTION); } } if ( element.getAttribute("property") === "og:url" || element.getAttribute("name") === "twitter:url" ) { element.setAttribute("content", MY_DOMAIN); } if (element.getAttribute("name") === "apple-itunes-app") { element.remove(); } } } class HeadRewriter { element(element) { if (GOOGLE_FONT !== "") { element.append( `<link href='https://fonts.googleapis.com/css?family=${GOOGLE_FONT.replace(' ', '+')}:Regular,Bold,Italic&display=swap' rel='stylesheet'> <style>* { font-family: "${GOOGLE_FONT}" !important; }</style>`, { html: true } ); } element.append( `<style> div.notion-topbar > div > div:nth-child(3) { display: none !important; } div.notion-topbar > div > div:nth-child(4) { display: none !important; } div.notion-topbar > div > div:nth-child(5) { display: none !important; } div.notion-topbar > div > div:nth-child(6) { display: none !important; } div.notion-topbar-mobile > div:nth-child(3) { display: none !important; } div.notion-topbar-mobile > div:nth-child(4) { display: none !important; } div.notion-topbar > div > div:nth-child(1n).toggle-mode { display: block !important; } div.notion-topbar-mobile > div:nth-child(1n).toggle-mode { display: block !important; } </style>`, { html: true } ); } } class BodyRewriter { constructor(SLUG_TO_PAGE) { this.SLUG_TO_PAGE = SLUG_TO_PAGE; } element(element) { element.append( `<script> const SLUG_TO_PAGE = ${JSON.stringify(this.SLUG_TO_PAGE)}; const PAGE_TO_SLUG = {}; const slugs = []; const pages = []; const el = document.createElement('div'); let redirected = false; Object.keys(SLUG_TO_PAGE).forEach(slug => { const page = SLUG_TO_PAGE[slug]; slugs.push(slug); pages.push(page); PAGE_TO_SLUG[page] = slug; }); function getPage() { return location.pathname.slice(-32); } function getSlug() { return location.pathname.slice(1); } function updateSlug() { const slug = PAGE_TO_SLUG[getPage()]; if (slug != null) { history.replaceState(history.state, '', '/' + slug); } } function onDark() { el.innerHTML = '<div title="Change to Light Mode" style="margin-left: auto; margin-right: 14px; min-width: 0px;"><div role="button" tabindex="0" style="user-select: none; transition: background 120ms ease-in 0s; cursor: pointer; border-radius: 44px;"><div style="display: flex; flex-shrink: 0; height: 14px; width: 26px; border-radius: 44px; padding: 2px; box-sizing: content-box; background: rgb(46, 170, 220); transition: background 200ms ease 0s, box-shadow 200ms ease 0s;"><div style="width: 14px; height: 14px; border-radius: 44px; background: white; transition: transform 200ms ease-out 0s, background 200ms ease-out 0s; transform: translateX(12px) translateY(0px);"></div></div></div></div>'; document.body.classList.add('dark'); __console.environment.ThemeStore.setState({ mode: 'dark' }); }; function onLight() { el.innerHTML = '<div title="Change to Dark Mode" style="margin-left: auto; margin-right: 14px; min-width: 0px;"><div role="button" tabindex="0" style="user-select: none; transition: background 120ms ease-in 0s; cursor: pointer; border-radius: 44px;"><div style="display: flex; flex-shrink: 0; height: 14px; width: 26px; border-radius: 44px; padding: 2px; box-sizing: content-box; background: rgba(135, 131, 120, 0.3); transition: background 200ms ease 0s, box-shadow 200ms ease 0s;"><div style="width: 14px; height: 14px; border-radius: 44px; background: white; transition: transform 200ms ease-out 0s, background 200ms ease-out 0s; transform: translateX(0px) translateY(0px);"></div></div></div></div>'; document.body.classList.remove('dark'); __console.environment.ThemeStore.setState({ mode: 'light' }); } function toggle() { if (document.body.classList.contains('dark')) { onLight(); } else { onDark(); } } function addDarkModeButton(device) { const nav = device === 'web' ? document.querySelector('.notion-topbar').firstChild : document.querySelector('.notion-topbar-mobile'); el.className = 'toggle-mode'; el.addEventListener('click', toggle); nav.appendChild(el); onLight(); } const observer = new MutationObserver(function() { if (redirected) return; const nav = document.querySelector('.notion-topbar'); const mobileNav = document.querySelector('.notion-topbar-mobile'); if (nav && nav.firstChild && nav.firstChild.firstChild || mobileNav && mobileNav.firstChild) { redirected = true; updateSlug(); addDarkModeButton(nav ? 'web' : 'mobile'); const onpopstate = window.onpopstate; window.onpopstate = function() { if (slugs.includes(getSlug())) { const page = SLUG_TO_PAGE[getSlug()]; if (page) { history.replaceState(history.state, 'bypass', '/' + page); } } onpopstate.apply(this, [].slice.call(arguments)); updateSlug(); }; } }); observer.observe(document.querySelector('#notion-app'), { childList: true, subtree: true, }); const replaceState = window.history.replaceState; window.history.replaceState = function(state) { if (arguments[1] !== 'bypass' && slugs.includes(getSlug())) return; return replaceState.apply(window.history, arguments); }; const pushState = window.history.pushState; window.history.pushState = function(state) { const dest = new URL(location.protocol + location.host + arguments[2]); const id = dest.pathname.slice(-32); if (pages.includes(id)) { arguments[2] = '/' + PAGE_TO_SLUG[id]; } return pushState.apply(window.history, arguments); }; const open = window.XMLHttpRequest.prototype.open; window.XMLHttpRequest.prototype.open = function() { arguments[1] = arguments[1].replace('${MY_DOMAIN}', 'www.notion.so'); return open.apply(this, [].slice.call(arguments)); }; </script>${CUSTOM_SCRIPT}`, { html: true } ); } } async function appendJavascript(res, SLUG_TO_PAGE) { return new HTMLRewriter() .on("title", new MetaRewriter()) .on("meta", new MetaRewriter()) .on("head", new HeadRewriter()) .on("body", new BodyRewriter(SLUG_TO_PAGE)) .transform(res); }  
      Tem alguma coisa de errado?
    • By Carlos Longo
      Srs Bom dia,
       
      fiz inumeras tentativas para mostrar a imagem com link em:
       <script type="text/javascript"> var imagens =  new Array( '1.jpg', '2.jpg', '3.jpg','4.jpg', '5.jpg', '6.jpg'); var num_img = 6; var img_atual =0; function ChangeImg() { if (img_atual < (num_img - 1) ) { img_atual = img_atual + 1; } else { img_atual = 0; } document["img_apoio"].src = "http://www.ficasimples.com.br/calcfal/prop/" + imagens[img_atual]; var x = setTimeout ("ChangeImg()", 2000); }   </script>  
      ela posteriormente é chamada assim:
      queria que ao clicar na figura fosse chamado o link da figura especifica conforme valor da variavel  imagens[img_atual]/////
      <img name="img_apoio" src="http://www.ficasimples.com.br/calcfal/prop/1.jpg" alt="" border="0"width="190px" height="210px" align="center">  
       
      poderiam me ajudar??
       
      grato
       
      Carlos
    • By RickSilva
      Bom, preciso criar uma funçao que faz uma variavel string ter um valor durante um periodo de 5 segundos e depois outro valor durante os proximos 5 segundos, fazendo isso a todo momento. Por exemplo: Uma variavel cor que tenha como valor "preto" durante 5 segundos e depois receba o valor "branco".  
    • By lezão
      Boa tarde, pessoal!
      Td bem com vcs?
       
      Estou a procura de um JS que me de retorno dos dados selecionados na pagina anterior.
      Eu escolho as minhas opções e qnd eu clicar em confirmar pedido chama outra pagina com os dados q eu selecionei mais os valor total
       
      Veja o código q estou utilizando:
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Documento sem título</title> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> <style type="text/css"> #iconApiWhatsapp{ position: fixed; display: flex; right: 0px; bottom: 0px; z-index: 99999; right: 0px; position: fixed; width: 100%; bottom: 0px; background: rgba(0,0,0,0.8); height: 57px; text-align: center; } #iconApiWhatsapp img{ display: flex; align-items: center; justify-content: center; font-size: 24px; width: 150px; height: 57px; opacity: 0.5; filter: alpha(opacity=50); /* For IE8 and earlier */ -webkit-transition: opacity 0.5s; /* For Safari 3.1 to 6.0 */ transition: opacity 0.5s; } #iconApiWhatsapp img:hover{ opacity: 1; filter: alpha(opacity=100); /* For IE8 and earlier */ } </style> </head> <body> <table width="100%" border="0" cellspacing="5" cellpadding="0"> <tr> <td width="92%" align="left"><b>PORTUGUESA</b><br/> Molho de tomate, mussarela, calabresa ralada, catupiry, alho tostado, cebola, azeitonas e oregano.<br/><hr /></td> <td width="8%" align="center" valign="top"><b>28,00</b><br/> <input type="checkbox" name="sabor" id="evento_value2" value="28.00"> <input type="hidden" name="vl_sabor" value="28.00"> </td> </tr> <tr> <td align="left"><b>A MODA DA CASA</b><br/> Molho de tomate, mussarela, calabresa ralada, catupiry, alho tostado, cebola, azeitonas e oregano.<br/><hr /></td> <td align="center" valign="top"><b>28,00</b><br/> <input type="checkbox" name="sabor" id="evento_value2" value="28.00"> <input type="hidden" name="vl_sabor" value="28.00"></td> </tr> </table> <br/><br/><br/> <div id="iconApiWhatsapp" class="preco"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="15%" align="lef" onclick="location.href='finalizar_pedido.html'" style="cursor:pointer;"> <font size="5" color="yellow" face="aril tahoma verdana"> Confirmar Pedido</td> <td width="70%" align="center"> <font size="4" color="white" face="arial"><b><span id="resultado"></span></b> <!--Resultado da soma dos checkbox--> <!--Resultado Pegando a Variavel - Resultado checkbox --> </font> </td> <td width="15%" align="right"><a href="javascript:window.history.go(-1)"><<Voltar</a></td> </tr> </table> </div> <script type="text/javascript"> var total = 0; //Chama a função com click em qualquer checkbox $(":checkbox").click(function () { //Atribui o valor do input p/ variável 'valor' var valor = parseInt($(this).val()); //Se o checkbox for marcado ele soma se não subtrai if ($(this).is(":checked")) { total += valor; } else { total -= valor; } //Atribui o valor ao input $("#evento_value").val(total); $("#resultado").text(formatPrice(total)); }); function formatPrice(value, currency = true) { var valor = parseFloat(value); let valorFormatado = null; if(currency) { //Valor com cifrão valorFormatado = valor.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' }); } else { //Valor sem cifrão valorFormatado = valor.toLocaleString('pt-BR', { minimumFractionDigits: 2}); } return valorFormatado; } </script> </body> </html>  
       
       
    • By fideles
      Mais uma vez venho aqui pedir ajuda a vocês.
       
      Tenho um formulario que criei aqui na empresa algo bem simples, somente para sair das planilhas de excel, que seria cadastro de funcionarios.
       
      Tem os campos, matricula, nome completo, unidade de trabalho, endereço e telefone de emergencia.
       
      A parte do formulario funciona, a gravação no BD tbm, listar as informações também, ai me perguntaram se era possível um auto preenchimento dos campos colocando somente a matricula do funcionario e respondi que eu não sei porque realmente não sei.
       
      A ajuda que eu preciso de vocês seria, é possível fazer isso ? Colocar a matricula e vir do banco e preencher os outros inputs? Se sim, é possível me derem um exemplo de como funciona e eu estudar o codigo e colocar nos outros inputs.
       
      Obrigado antecipadamente. 
       
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.