I have this code for a Jquery function for one plugin...
http://solteda.com/wprabiensa/wp-content/plugins/Amortiza/amortizascript.js
I want the result to be thousands separator
This is the HTML content
<div align="center">
<div class="AMortCal">
<label>Importe del préstamo($)</label>
<input type="text" name="prestamo" id="prestamo" placeholder="Digite la cantidad" />
<p> </p>
<label>Plazo de la hipoteca(Anual)</label>
<input type="text" name="anos" id="anos" placeholder="Cantidad de años" />
<p> </p>
<label>Tasa De Interés (%) Anual</label>
<input type="text" name="interes" id="interes" placeholder="Digite tasa de interés" />
<p> </p>
<input type="button" name="calcularprestamos" id="calcularprestamos" class="boton" value="Calcular" />
<input type="button" name="resetear" id="resetear" value="Resetear" class="boton"/>
<br class="clear"/>
<p> </p>
<div class="resultado" id="resultado">Cuotas a pagar</div>
</div>
</div>
Related
<div class="checkbox_design">
<div class="checkbox_container">
<label for="acord_regulament">
Am luat la cunoștință
<a href="https://www.bereciucas.ro/static/pdf/regulament_premii.pdf" target="_blank">
Regulamentul Oficial al Campaniei
</a>
.
</label>
<input type="checkbox" name="acord_regulament" value="1" id="acord_regulament" class="validate[required] req_checkbox" tabindex="6">
</div>
I need the checkbox to be checked via JavaScript.
I just began learning javascript so this is new for me. When that checkbox is checked it looks like this:
<div class="checkbox_design">
<div class="checkbox_container">
<label for="acord_regulament" class="checked">
Am luat la cunoștință
<a href="https://www.bereciucas.ro/static/pdf/regulament_premii.pdf" target="_blank">
Regulamentul Oficial al Campaniei
</a>
.
</label>
<input type="checkbox" name="acord_regulament" value="1" id="acord_regulament" class="validate[required] req_checkbox noinputError" tabindex="6">
</div>
It seems as though the second HTML snippet doesn't actually add the checked attribute. Maybe this will point you in the right direction:
document.getElementById('acord_regulament').classList.add('noinputError');
document.querySelector('label[for="acord_regulament"]').classList.add('checked');
document.getElementById('acord_regulament').checked = true; // this attribute actually marks the checkbox as checked
document.getElementById('output').innerText = document.getElementsByClassName('checkbox_design')[0].outerHTML; // this line just displays the output
#output {
white-space: pre;
}
<div class="checkbox_design">
<div class="checkbox_container">
<label for="acord_regulament">
Am luat la cunoștință
<a href="https://www.bereciucas.ro/static/pdf/regulament_premii.pdf" target="_blank">
Regulamentul Oficial al Campaniei
</a>
.
</label>
<input type="checkbox" name="acord_regulament" value="1" id="acord_regulament" class="validate[required] req_checkbox" tabindex="6">
</div>
</div>
<div id="output"></div>
I need to hide a div for aditional coments if the input file is empty.
I don't mind if it's done with Jquery or plain Javascript.
I've used JQuery, I know that it's been called correctly because my alert pops up, but my function does not hide the div with ID: #instrucciones-adicionales and all its contents.
HTML:
<script>
alert( "Animation complete." );
$(function () {
$("input:file").change(function () {
var fileName = $(this).val();
if (filename != "") {
$("#instrucciones-adicionales").hide();
} //show the button
});
});
</script>
<form method="post" enctype="multipart/form-data">
<input type="hidden" name="csrfmiddlewaretoken" value="Ka5bun8eHCmm5pReR7M9JCOxP8YxVq1sBfi79yqnXFEFWEksDE8WSDfgiYxf2KDb">
<div class="form-group">
<div id="div_id_imagenes" class="form-group">
<label for="id_imagenes" class="col-form-label requiredField">
Imagenes<span class="asteriskField">*</span>
</label>
<div class="">
<input type="file" name="imagenes" class="clearablefileinput" required id="id_imagenes">
</div>
</div>
<div id="instrucciones-adicionales">
<p class="bold-font"> Instrucciones adicionales (opcional):</p>
<div id="div_id_instrucciones" class="form-group">
<label for="id_instrucciones" class="col-form-label requiredField">
Instrucciones<span class="asteriskField">*</span>
</label>
<div class="">
<textarea name="instrucciones" cols="40" rows="10" class="textarea form-control" required id="id_instrucciones">
</textarea>
</div>
</div>
</div>
</div>
</br>
</br>
<p>O, sáltate este paso y envía tu arte por correo electrónico</p>
<button type="submit" class="btn btn-naranja text-white btn-block">Continuar
</button>
You had a typo (variables are case sensitive - fileName !== filename).
I added the show part:
alert( "Animation complete." );
$(function () {
$("input:file").change(function () {
var fileName = $(this).val();
if (fileName != "") {
$("#instrucciones-adicionales").hide();
} else {
$("#instrucciones-adicionales").show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main role="main">
<form method="post" enctype="multipart/form-data">
<input type="hidden" name="csrfmiddlewaretoken" value="Ka5bun8eHCmm5pReR7M9JCOxP8YxVq1sBfi79yqnXFEFWEksDE8WSDfgiYxf2KDb">
<div class="form-group">
<div id="div_id_imagenes" class="form-group">
<label for="id_imagenes" class="col-form-label requiredField">
Imagenes<span class="asteriskField">*</span>
</label>
<div class="">
<input type="file" name="imagenes" class="clearablefileinput" required id="id_imagenes">
</div>
</div>
<div id="instrucciones-adicionales" style="display: none">
<p class="bold-font"> Instrucciones adicionales (opcional):</p>
<div id="div_id_instrucciones" class="form-group">
<label for="id_instrucciones" class="col-form-label requiredField">
Instrucciones<span class="asteriskField">*</span>
</label>
<div class="">
<textarea name="instrucciones" cols="40" rows="10" class="textarea form-control" required id="id_instrucciones">
</textarea>
</div>
</div>
</div>
</div>
</br>
</br>
<p>O, sáltate este paso y envía tu arte por correo electrónico</p>
<button type="submit" class="btn btn-naranja text-white btn-block">Continuar
</button>
</form>
</main>
I have a problem and I do not know where I can solve everything I did because the error is in this $.ajax,
because I have used this code several times before already looked and I have already reviewed and I did not get results and I went down to post here for you to help me
Thank you
$(document).ready(function () {
$("#doarBronze").click(function()
{
$("#formVIP_Modal").modal("show");
$.ajax({
type: 'GET',
url: "bronze_doar_modal.php",
dataType: 'json',
data: {},
success: function(data)
{
if(data.hasError == false)
{
$("#abrir_vips_box").html(data.html);
$("#proxima_ir_cadastro_bronze").click(function()
{
$("#abrir_vips_box").html(data.boxBronze_cadastro);
$("#TitleVips").html("Cadastro para o PainelVIP");
});
}
else{
alert("ERRO!\n"+data.msgErro);
}
},
error: function(){
alert("Ocorreu Um Erro Contate um Admistrador");
}
});
});
});
<?php
require "insane.php";
$insane = new insane();
$html = '
<div id="infoBronze">
<center><b>Termos do Servidor </b><br></center>
Vantagens Extras <br>
<small>* Eventos Exclusivos Para Vip </small><br>
<small>* Suporte Exclusivo </small><br>
<small>* Sala no TS³</small><br><br>
Informacoes <br>
<small>* Reembolso de VIP Somente Quando Servidor Fechar/Falir. </small><br>
<small>* VIP Podem Ser Pausado Apenas 1 Vez </small><br>
<small>* Maximo 2 Vip Por Conta </small><br>
<small>* VIP Valera por 31 Dias </small><br>
<small>* Nao Vendemos Kits Diferentes dos Abaixo </small><br><br>
Apos Wipe <br>
<small>* Kits VIP"s Serao Liberado as 00:00 </small> <br><br>
Ativar Vip <br>
<small>* Apos o Pagamento Aprovado Basta Entrar no Jogo e Digitar<br> /ativarvip (CODIGO DE TRANSACAO) ex <b>9C834542-8123-4419-9A75-BAD63B495EF1</b> </small><br>
<small>* Em Menos de 12 horas Sua Conta sera ativa no (Painel VIP) </small><br>
<hr>
<input type="button" value="Proximo" class="btn btn-primary btn-block" id="proxima_ir_cadastro_bronze">
</div>';
$cadbronze = '
<div class="row">
<div class="col-md-4 order-md-2 mb-4">
<h4 class="d-flex justify-content-between align-items-center mb-3">
<span class="text-muted">Carrinho</span>
<span class="badge badge-secondary badge-pill">1</span>
</h4>
<ul class="list-group mb-3">
<li class="list-group-item d-flex justify-content-between lh-condensed">
<div>
<h6 class="my-0">1x VIP Bronze</h6>
<small class="text-muted">InsaneRust 4x</small>
</div>
<span class="text-muted">R$15,00</span>
</li>
<li class="list-group-item d-flex justify-content-between">
<span>Total (BRL)</span>
<strong>R$15,00</strong>
</li>
</ul>
<form class="card p-2">
<div class="input-group">
<input type="text" class="form-control" placeholder="Codigo de Promocao">
<div class="input-group-append">
<button type="submit" class="btn btn-success">Usar</button>
</div>
</div>
</form>
</div>
<div class="col-md-8 order-md-1">
<h4 class="mb-3">Dados Para o Painel VIP</h4>
<form class="needs-validation" method="POST" action="modal/p_c_bronze.php" enctype="multipart/form-data">
<div class="row">
<div class="col-md-6 mb-3">
<label>Seu Nome</label>
<input type="text" class="form-control" name="vip_nome" placeholder="Digite seu Nome" required>
<div class="invalid-feedback"> Verifique Seu Nome </div>
</div>
<div class="col-md-6 mb-3">
<label>Seu Nick</label>
<input type="text" class="form-control" name="vip_nick" placeholder="Digite Seu Nick do Servidor" required>
<div class="invalid-feedback"> Verifique Seu Nick </div>
</div>
</div>
<div class="mb-3">
<label>Seu Email</label>
<div class="input-group">
<input type="email" class="form-control" name="vip_email" placeholder="Digite Seu E-mail" required>
<div class="invalid-feedback" style="width: 100%;"> Confira Seu Email. </div>
</div>
</div>
<div class="mb-3">
<label>Senha</label>
<input type="password" class="form-control" name="vip_senha" placeholder="Escolha uma Senha para o (PainelVIP)" required>
<div class="invalid-feedback"> Confira sua Senha </div>
</div>
<div class="mb-3">
<label>Sua Steam</label>
<input type="text" class="form-control" name="vip_steam" placeholder="Insira a Url da Sua Steam" required>
<div class="invalid-feedback"> Confira sua Steam </div>
</div>
<hr class="mb-4">
<div class="alert alert-info">
<strong>Informação</strong> <br>Esse cadastro é apenas para acesso na (AREAVIP) e Para Nos Entrar em Contato Sobre Alguma Coisa efetuada/alterada fora isso nao entraremos em contato.
</div>
<hr class="mb-4">
<h4 class="mb-3">Forma de Pagamento</h4>
<div class="d-block my-3">
<div class="custom-control custom-radio">
<input id="checkBox" type="checkbox" checked required>
<label class="custom-control-label" for="credit">PAGSEGURO</label>
</div>
<div class="custom-control custom-radio">
<input id="checkBox" type="checkbox">
<label class="custom-control-label" for="debit">PAYPAL</label>
</div>
</div>
<hr class="mb-4">
<input type="submit" value="Finalizar" class="btn btn-success btn-block">
</div>
</div>
</form>
</div>
</div>';
$insane->setSaida("corpo_inicio", $html);
$insane->setSaida("boxBronze_cadastro", $cadbronze);
$insane->fim();
?>
Im trying to unhide div id=Q3 with my first 2 radio inputs (id= Q1 & id = Q2)
if (Q1 = Ja and Q2 = Ja) show Q3.
Can somebody please help me!
See my html code below (sorry for the bad coding im a totally noob!).
HTML
<body>
<header>
<h2>Helpdesk</h2>
<div>Wat is u probleem?</div>
</header>
<form>
<h4>Kunt computer normaal aanzetten?<span class = "req" id= "req_Q1">*</span></h4>
<input type="radio" name="A1" id="A1" value ="Ja" /> : Ja<br />
<input type="radio" name="A1" id="A2" value ="Nee" /> : Nee<br />
<p class= "instruct" id="instruct_Q1">
<small>Controleer eerst de kabels!</small>
</p>
<h4 id= "Q2">Geeft de monitor normaal beeld?<span class = "req" id= "req_Q2">*</span> </h4>
<input type="radio" name="A2" id="A3" /> : Ja<br />
<input type="radio" name="A2" id="A4"/> : Nee<br />
<p class= "instruct" id="instruct_Q2">
<small>Controleer eerst de kabels!</small>
</p>
</div>
<div id= "Q3" style="display: none;">
<label for ="Q3.1" ><h4>Start windows normaal op?</h4></label>
<select name="Q3.1">
<option value="A3.1" >Ja, geen probleem</option>
<option value="A3.2" >Ja, maar met foutmelding</option>
<option value="A3.3" >Nee, zwart scherm</option>
<option value="A3.4" >Nee, blauw scherm</option>
</select>
</div>
<div style="display: none;">
<h4>Kunt u inloggen?</h4>
<input type="radio" name="Q4" />Ja, geen probleem<br />
<input type="radio" name="Q4" /> Nee, ik krijg een foutmelding<br />
</div>
<div style="display: none;">
<h4>Ik krijg de volgende foutmelding <span class = "req" id= "req_Q5">*</span></h4>
<input type="radio" name="Q5" />Kan u niet aanmelden bij het domein. Controleer of uw gebruikersnaam en/of toegangscode correct zijn.<br />
<input type="radio" name="Q5" />Kan u niet aanmelden omdat het domein niet beschikbaar is. <br />
<input type="radio" name="Q5" />Uw account is geblokkeerd. Neem contact op met de beheerder. <br />
</div>
Javascript
$("input[name=A1]").click(function()
{
if(this.id =="A1"){
$("#Q3").show('slow');
}
else {
$("#Q3").hide('slow');
}
});
You can use a ternary instead of an if statement to make a little more elegant
/* get the status of the answers */
var status = $("#A1").is(':checked') && $("#A3").is(':checked');
/* let the status decide which $ method to use */
$("#Q3")[status ? 'fadeIn' : 'fadeOut'](500);
$("#helpdesk :input").change(function() {
var status = $("#A1").is(':checked') && $("#A3").is(':checked');
$("#Q3")[status ? 'fadeIn' : 'fadeOut'](500);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<h2>Helpdesk</h2>
<div>Wat is u probleem?</div>
</header>
<form id="helpdesk">
<h4>Kunt computer normaal aanzetten?<span class="req" id="req_Q1">*</span></h4>
<input type="radio" name="A1" id="A1" value="Ja" /> : Ja<br />
<input type="radio" name="A1" id="A2" value="Nee" /> : Nee<br />
<p class="instruct" id="instruct_Q1">
<small>Controleer eerst de kabels!</small>
</p>
<h4 id="Q2">Geeft de monitor normaal beeld?<span class="req" id="req_Q2">*</span> </h4>
<input type="radio" name="A2" id="A3" /> : Ja<br />
<input type="radio" name="A2" id="A4" /> : Nee<br />
<p class="instruct" id="instruct_Q2">
<small>Controleer eerst de kabels!</small>
</p>
<div id="Q3" style="display: none;">
<label for="Q3.1"><h4>Start windows normaal op?</h4></label>
<select name="Q3.1">
<option value="A3.1" >Ja, geen probleem</option>
<option value="A3.2" >Ja, maar met foutmelding</option>
<option value="A3.3" >Nee, zwart scherm</option>
<option value="A3.4" >Nee, blauw scherm</option>
</select>
</div>
<div style="display: none;">
<h4>Kunt u inloggen?</h4>
<input type="radio" name="Q4" />Ja, geen probleem<br />
<input type="radio" name="Q4" /> Nee, ik krijg een foutmelding<br />
</div>
<div style="display: none;">
<h4>Ik krijg de volgende foutmelding <span class="req" id="req_Q5">*</span></h4>
<input type="radio" name="Q5" />Kan u niet aanmelden bij het domein. Controleer of uw gebruikersnaam en/of toegangscode correct zijn.<br />
<input type="radio" name="Q5" />Kan u niet aanmelden omdat het domein niet beschikbaar is. <br />
<input type="radio" name="Q5" />Uw account is geblokkeerd. Neem contact op met de beheerder. <br />
</div>
Look at this fiddle, and let me know, if it is the desired result :-) https://jsfiddle.net/7LL98L24/
$("#helpdesk :input").change(function() {
if($("#A1").is(':checked') && $("#A3").is(':checked')) {
$("#Q3").fadeIn(500);
} else {
$("#Q3").fadeOut(500);
}
});
Please notice, that I added an ID to your form Element to use the .change Method of jQuery
First of all to hide / unhide elements you should use the CSS.
There was question about it on StackOverflow: JavaScript: How to Hide / Unhide <div>
However to my current knowledge to make IF statment - like you mentioned:
if(Q1 == Ja && Q2 == Ja){ show Q3 }
You need to use JavaScript.
EDIT: Hide/unhide div with button?
I think there can be answer for your question: hide / unhide using JQuery - I found it preety quickly when asked google.
I have made this code and script for my blog - it's for the contact page, and I have one problem. I would like to send the email provided to the popup windows, so that the user doesn't have to re-enter it. But can't seem to get it to work. I've added an event to the submit-button, because the code is just intended for a contact form, (it's a blogger code, and I don't have access to the script.)
HTML:
<form name="contact-form">Hvad skal jeg kalde dig?
<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Skriv dit navn her ..." size="40" style="margin-top: 10px;" type="text" value="" />
<br />
<br />Hvordan svarer jeg dig? <span id="required">*</span>
<br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Indtast din email her ..." size="40" style="margin-top: 10px;" type="text" value="" />
<br />
<br />Hvad vil du gerne fortælle mig?<span id="required">*</span>
<br />
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Skriv din besked til mig her ..." rows="8" style="margin-top: 10px;"></textarea>
<br />
<br />
<input type="checkbox" id="nyhedsbrev">Tilmeld dig mit nyhedsbrev</p>
<input name='uri' type='hidden' value='ThingsThatMadeMe' />
<input name='loc' type='hidden' value='en_US' />
<input class="contact-form-button contact-form-button-submit2" id="ContactForm1_contact-form-submit" size="40" type="button" value="Send din besked" onclick="myFunction()">
<br />
<br />
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></div>
</form>
Script:
<script>
document.getElementById("ContactForm1_contact-form-submit").addEventListener("click", myFunction);
function myFunction() {
if (document.getElementById('nyhedsbrev').checked) window.open("https://feedburner.google.com/fb/a/mailverify?uri=ThingsThatMadeMe", "popupwindow", "toolbar=yes, scrollbars=yes,width=550, height=520 method=post action=https://feedburner.google.com/fb/a/mailverify?");
}
</script>
This code in general is working fine. It's just this one thing, that's bugging me.
Move your JS code before closing BODY tag i.e. before </body> or after your FORM code.
You can check working demo here: http://jsfiddle.net/7j8s0wen/2/