i need some help with .toogle function: my proble is that i need that this function do the same thing by click on two different button;
this is my html code:
<div id="popup_prova">
<div id="contentElencoProva">
<span>Elenco Prove:</span>
<form action="responseregistrodocente" method="post">
<ul id="elencoProve">
<li><input type="radio" name="provaSelected" value="3" checked> <span>Id prova: 3 tipo [scritto/orale]: O conoscenza: Esame</span></li>
<li><input type="radio" name="provaSelected" value="4"> <span>Id prova: 4 tipo [scritto/orale]: O conoscenza: Esame</span></li>
</ul><p class="submitProve"><button type="button" name="creaProva">Crea Prova</button><button type="button" name="modificaProva">Mostra/Nascondi Dettagli Prova</button> <button type="button" name="eliminaProva">Elimina Prova</button>
</p><p class="infoVoto"><span id="info_Voto"></span>
<span><input type="text" name="voto"></span></p>
<p class="submitVoto"><input type="submit" name="modificaVoto" value="Modifica Voto"> <input type="submit" name="eliminaVoto" value="Elimina Voto"></p> </form>
</div>
<div id="gestioneProva">
<span id="titleProva"></span>
<form id="f_creaProva" action="">
<table>
<tr>
<td>Scegli il tipo di prova:
<select name="s_creaProva">
<option label="Scritto" value="S"></option>
<option label="Orale" selected value="O"></option>
</select>
</td>
</tr>
<tr>
<td>Scrivi i requisiti degli studenti [max 80 caratteri]<span id="counter1"></span></td>
</tr>
<tr>
<td colspan="2"><textarea id="requisiti" rows="4" cols="35"></textarea></td>
</tr>
<tr>
<td>Scrivi le abilità degli studenti [max 80 caratteri]<span id="counter2"></span></td>
</tr>
<tr>
<td colspan="2" ><textarea id="abilita" rows="4" cols="35"></textarea></td>
</tr>
<tr>
<td><input type="submit" value="Invia"><input type="reset" name="resettaProva" value="Cancella"></td>
</tr>
</table>
</form>
</div>
</div>
</div>
</div>
and this is my javascript code:
<script type="text/javascript">
$(document).ready(function() {
//CREA PROVA VISUALIZZA IL CAMPO PER CREARE UNA NUOVA PROVA CHE ESISTE SEMPRE
$("button[name='creaProva']").on("click",function(event){
$("input[name='resettaProva']").trigger('click');
$("#titleProva").html("Creazione di una nuova Prova");
$("#gestioneProva").slideToggle();
event.stopPropagation();
});
//MODIFICA e NASCONDI LE INFORMAZIONI DI UNA PROVA
//.on scatena l'evento ogni qual volta esiste il pulsante in maniera dinamica anche se il pulsante non esiste ancora
$("button[name='modificaProva']").on("click",function(){
$("#titleProva").html("Prova attualmente selezionata: <input type=\"text\" name=\"idProva\" value=\""+$("input[name='provaSelected']:checked").val()+"\"readonly>");
$("#gestioneProva").slideToggle();
event.stopPropagation();
});
$("input[name='provaSelected']").on("change",function(){
$("#gestioneProva").hide();
event.stopPropagation();
});
});
</script>
now when i click on button "creaProva" .slidetoggle() works fine and show me the "div gestioneProva" but it doesn't work when i click on button modificaProva.
in my css i have also the display none only on div gestioneProva
Thx a lot for help!!!
You are missing the event argument in this line :
$("button[name='modificaProva']").on("click",function(){
change it to :
$("button[name='modificaProva']").on("click",function(event){
Related
I´m trying to make this code work but I don´t know how to do it... When I click on Outro the upper div closes, and when I click Outra in the down one the upper close.
I don´t know what I´m doing wrong because the function has different values and if it´s only one it works.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="checkbox-inline" for="checkboxes-4">
<input type="checkbox" name="checkboxes" id="checkboxes-4" value="5">
Outro
</label>
<input type="text" maxlength="9" class="input-field4" id="input" name="teste">
</td>
</tr>
<script>
$(document).ready(function() {
$('#input').hide();
$(document).on('change', 'input[type="checkbox"]', function(e) {
console.log(e)
if (e.target.id == "checkboxes-4" && e.target.checked) {
$('#input').show();
} else {
$('#input').hide();
}
});
});
</script>
<tr>
<th>Doenças</th>
<label class="checkbox-inline" for="checkboxes-7">
<input type="checkbox" name="checkboxes" id="checkboxes-7" value="8">
Outra
</label>
<input type="text" maxlength="9" class="input-field4" id="input1" name="teste1">
</td>
</tr>
<tr>
<th>Contacto em caso de emergência</td>
<td><input type="text" name="contacto_emergencia" value="<?php echo $contacto_emergencia;?>" /></td>
</tr>
</table>
<br>
<p align=right>
<button type="submit" value="Alterar">Alterar</button>
<button type="cancel" onclick="window.location='http://donutsrool.pt/ficha_aluno.php';return false;">Cancelar</button>
</p>
</form>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('#input1').hide();
$(document).on('change', 'input[type="checkbox"]', function(e) {
console.log(e)
if (e.target.id == "checkboxes-7" && e.target.checked) {
$('#input1').show();
} else {
$('#input1').hide();
}
});
});
</script>
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.
So I have a forms on a html page which retrieve data from a mysql table. The user can modify these data, or delete the entire row. I have a html button with functionality of deleting the entire row, and with that button I have a javascript function that displays a confirm pop up box confirming if the user wants to delete it. If they click yes then it is sent to another php page where the deletion is performed. The problem is when I click on the confirm box nothing happens, it just stays on the same page. Here is my html and javascript code:
<form class="form-inline" method=GET action="envoieModifierAlbumAdmin.php">
<table class="table table-striped">
<tr>
<td><button type="button" class="btn btn-danger" onclick="verif()">Supprimer Cet Album</button>
</td><td></td><td></td>
</tr>
<tr>
<td><label for="exampleInputName2">id: </label>
<input readonly type="text" class="form-control" value="<?php echo "$donnees[id]"?>" id="exampleInputName2" name="id">
</td><td></td><td></td>
</tr>
<tr>
<td><label for="exampleInputName2">Nom d'album: </label>
<input type="text" class="form-control" id="exampleInputName2" name="titre" value="<?php echo "$donnees[titre]"?>"></td>
<td></td><td></td>
</tr>
</table>
</form>
<script>
function verif(){
var x;
if(confirm("Vous êtes sûr que vous voulez supprimer ce compte?") == true){
document.location="supprimerAlbumAdmin.php?id=$_GET['id']";
}
else
}
</script>
The only problem is with the button, the other parts of the table above are just to show an example of what the user is modifying. Thanks in advance!
your value should be like this
value="<?php echo $_GET['id'] ?>"
not like this
value="<?php echo "$donnees[id]"?>"
and change button type into submit
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
function verif(){
alert("hi");
var x;
if(confirm("Vous êtes sûr que vous voulez supprimer ce compte?") == true){
//window.location.replace("https://google.com");
//exit();
return true;
}
else
{
return false;
}
}
</script>
<form class="form-inline" method="GET" action="envoieModifierAlbumAdmin.php">
<table class="table table-striped">
<tr>
<td><label for="exampleInputName2">id: </label>
<input readonly type="text" class="form-control" value="" id="exampleInputName2" name="id">
</td><td></td><td></td>
</tr>
<tr>
<td><label for="exampleInputName2">Nom d'album: </label>
<input type="text" class="form-control" id="exampleInputName2" name="titre" value=""></td>
<td></td><td></td>
</tr>
<tr>
<td><button type="submit" class="btn btn-danger" onclick="verif()">Supprimer Cet Album</button>
</td><td></td><td></td>
</tr>
</table>
</form>
Try
function verif(){
var x;
if(confirm("Vous êtes sûr que vous voulez supprimer ce compte?") == true){
window.location.href="supprimerAlbumAdmin.php?id=<?php echo $_GET['id']; ?>";
}
else
}
Try following:
function verif(){
var x;
if(confirm("Vous êtes sûr que vous voulez supprimer ce compte?")){
window.location.href="supprimerAlbumAdmin.php?id=<?php echo $_GET['id']; ?>";
}
}
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>
I have a dynamic adding row button. I can add more Ids and more clients but when I click on the plus it adds them in the top of my page and not after my row. How do I do that? Here is my code :
<b>Dimanche</b> </br><?php echo $date1 ?>
</td>
<!-- numéro de projet du dimanche -->
<td>
<span id="numpro" >
<form method="post" action="" onsubmit="return false;">
<input type="text" id="name" name="add_name"onkeypress="return handleEnter(event, this, 'task');"/></br>
<?php
if($result!=false && mysqli_num_rows($result)>0)
{
while($product = mysqli_fetch_array($result)): ?>
<p id="oldRow<?=$product['id']?>">
<input type="text" name="name<?=$product['id']?>" value="<?=$product['name']?>" /></p>
<?php endwhile; } ?>
</span>
<input onclick="addRow(this.form);" type="button" value="+" />
</td>
</form>
<html>
<div >
<form method="post" >
<div id="itemRows">
<?php
if($result!=false && mysqli_num_rows($result)>0)
{
while($product = mysqli_fetch_array($result)): ?>
<p id="oldRow<?=$product['id']?>">
<input type="text" name="name<?=$product['id']?>" value="<?=$product['name']?>" /></p>
<?php endwhile; } ?>
</div>
<p><input type="submit" name="ok" value="Ajouter à la B.D"></p>
</form>
</div>
<script type="text/javascript">
var rowNum = 0;
function addRow(frm) {
rowNum ++;
var row = '<p id="rowNum'+rowNum+'"> <input type="text" name="name[]" value="'+frm.add_name.value+'"> <input type="text" name="client1[]" size="12" class = "client1" id ="client1" disabled value="'+frm.client1.value+'"><input type="button" value="-" onclick="removeRow('+rowNum+');"></p>';
jQuery('#itemRows').append(row);
frm.add_client1.value = '';
frm.add_name.value = '';
}
function removeRow(rnum) {
jQuery('#rowNum'+rnum).remove();
}
</script>
</span>
</td>
</td>
<!-- client du dimanche -->
<td>
<span id="proclient">
<input type="text" name="client1" size="12" class = "client1" id ="client1" disabled />
</span>
</td>
<!-- description du projet de dimanche -->
<td>
<span id="prodesc">
<input type="text" name="desc1" size="30" id ="desc1" class "desc" disabled />
</span>
</td>
<!-- ddescription de la tache du dimanche -->
<td>
<span id="protache">
<textarea rows="1" cols="20" name="taskDesc1" id ="task1" class "task"> </textarea>
</span>
</td>
<!-- lieu pour dimanche -->
<td>
<span id="prolieu">
<input type="text" name="prolieu1" size="10" id ="lieu1" class "lieu">
</span>
</td>
<!-- tache -->
<td>
<span id="tache">
<!-- <input type="text" name="tache" size="30" id="tache"class= "tache" /> -->
<!-- début section cobobox tache avec tool tip -->
<label title="Select your state"> <select title="Select your state" id="state" name="state">
<?php
$stmt->execute();
while($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
echo ' <option title="';
echo $row['tacName'];
echo '">';
echo $row['tacId'];
echo '</option>'."\n";
$task = array();
//echo '<option value="'.$row['tacName'].'">'.$row['tacId'].'</option>'."\n";
}
?>
</select>
</label>
<!-- Fin section cobobox tache avec tool tip -->
</span>
</td>
<!-- calculter le temps pour le diamnche -->
<td>
<span id="calculTemps">
<input type="number" name="tempsd" size="30" id="temps1"class= "temps" min= "0" max="24" value="0" />
</span>
</td>
EDIT Here a demo of my problem
EDIT Here a demo of my goal I want
Try to use JQuery functions insertAfter and appendTo together with selectors :last or :first.
Common examples: jQuery('<p>').html('Some content').insertAfter('#id_here:last'); jQuery('<p>').html('Some content').appendTo('#itemRows');