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']; ?>";
}
}
Related
I created a modal where I can insert new client record and edit the same record. But in relation to the edit button, I wanted it to be active only when there was a new record in the database and until the end of the day it was registered.
<a type="button" name="editar" id="'.$row["IdCliente"].'" data-toggle="modal" href="#add_data_Modal" class="btn btn-primary edit_data">Update</a>
I'm trying this way:
if(isset($_POST["employee_id3"]))
{
$output = '';
$query = "SELECT * FROM centrodb.PsicUtentes LEFT OUTER JOIN centrodb.PsicUtentesConsulta ON centrodb.PsicUtentesConsulta.CodigoUtente2 = centrodb.PsicUtentes.CodigoUtente WHERE centrodb.PsicUtentes.Id = '".$_POST["employee_id3"]."' ORDER BY IdConsulta DESC ";
$result = mysqli_query($conn, $query);
$output;
while($row = mysqli_fetch_array($result))
{
$dataAtual = DATE('Y-m-d');
$disabled = "";
if(DATE($row['Data2'])!=$dataAtual){
$disabled = "disabled";
}
$output .= '
<h4 class="modal-title">Histórico de Consultas</h4>
<div>
<button type="button" class="exibir botao" href="#" aria-hidden="true">+</button>
<button type="button" href="#" class="ocultar botao" aria-hidden="true">-</button>
</div>
<div class="conteudo">
<form method="post" id="insert_form6">
<div style="float:right">
<a type="button" name="edit3" id="'.$row["Id"].','.$row["IdConsulta"].'" data-toggle="modal" href="#add_data_Modal3" class="btn btn-primary edit_data3" "$disabled">Editar</a>
</div>
<br/>
<br/>
<br/>
<fieldset class="grupo">
<table class="campo" cellspacing="10">
<tr>
<td>
<input type="Hidden" id="IdConsulta1" name="IdConsulta" class="form-control" value="'.$row["IdConsulta"].'" style="width:150px;" readonly="true" />
</td>
<td>
<label>Data Consulta</label>
<input type="text" id="Data23" name="Data2" class="form-control" value="'.$row["Data2"].'" style="width:150px;" readonly="true" />
</td>
<td>
<label>Código Utente</label>
<input type="number" id="CodigoUtente5" name="CodigoUtente" value="'.$row["CodigoUtente"].'" class="form-control" style="width:100px;" readonly="true"/>
</td>
<td>
<label>Nome Utente</label>
<input type="text" id="Nome5" name="Nome" value="'.$row["Nome"].'" class="form-control" style="width:400px;" readonly="true"/>
</td>
<td>
<label>Data Nascimento</label>
<input type="date" id="DataNasc5" name="DataNasc" value="'.$row["DataNasc"].'" class="form-control" style="width:150px;" readonly="true"/>
</td>
</tr>
</table>
</fieldset>
<fieldset class="grupo">
<table class="campo" cellspacing="10">
<tr>
<td>
<label>Data Admissao</label>
<input type="date" id="DataAdmissao5" name="DataAdmissao" value="'.$row["DataAdmissao"].'" class="form-control" style="width:150px;" readonly="true"/>
</td>
<td>
<label>Valência</label>
<input type="text" id="ValenciasDescricao5" name="ValenciasDescricao" value="'.$row["ValenciasDescricao"].'" class="form-control" style="width:200px;" readonly="true"/>
</td>
</tr>
</table>
</fieldset>
<fieldset class="grupo">
<table class="campo" cellspacing="10">
<tr>
<td>
<label>Observação</label>
</p><textarea rows="6" cols="130" readonly="true">'.$row["Descricao"].'</textarea>
</td>
</tr>
</table>
</fieldset>
<fieldset class="grupo">
<table class="campo" cellspacing="10">
<tr>
<td>
<label>O Psicologo/a</label>
<input type="text" id="Colaborador2" name="Colaborador2" class="form-control" style="width:150px;" value="'.$row["Colaborador2"].'" readonly="true"/>
</td>
</tr>
</table>
</fieldset>
</form>
</div>
';
}
$output;
echo $output;
}
<script>
$(document).ready(function(){
$(document).on('click', '.edit_data3', function(){
var employee_id3 = $(this).attr("Id");
$.ajax({
url:"./fetch2",
method:"POST",
data:{employee_id3:employee_id3},
dataType:"json",
success:function(data){
$('#IdConsulta').val(data.IdConsulta);
$('#Data22').val(data.Data2);
$('#CodigoUtente6').val(data.CodigoUtente2);
$('#Descricao1').val(data.Descricao);
$('#Colaborador2').val(data.Colaborador2);
$('#employee_id3').val(data.Id);
$('#insert3').val("Gravar");
$('#add_data_Modal3').modal('show');
}
});
});
$('#insert_form7').on("submit", function(event){
event.preventDefault();
if($('#CodigoUtente6').val() == "")
{
alert("Código Utente é necessário");
}
else if($('#Descricao1').val() == "")
{
alert("Observação é necessária");
}
else
{
$.ajax({
url:".conexao9",
method:"POST",
data:$('#insert_form7').serialize()
,
beforeSend:function(){
$('#insert3').val("Inserting");
},
success:function(data){
$('#insert_form7')[0].reset();
$('#add_data_Modal3').modal('hide');
$('#employee_table').html(data);
location.reload("add_data_Modal3");
}
});
}
});
});
</script>
I created a variable with the current date that compares with the date of the record. I created an empty disabled variable. There I put this disabled variable in the link. If the date is different than the current date you put the disabled variable filled.The problem is that the button stays in the same asset.
Firstly your code is vulnerable to sql injection attacks and you should use prepared statements.
Then you have some syntax errors on your code.
The lines $output; are useless, delete them.
Change "$disabled" to '.$disabled'.
and put ?> before your <script> tag.
I hope to explain my problem well
I want to create a form that allows you to dynamically add selections and inputs
Select retrieve a odbc array
The form is this:
<form name="add_name" id="add_name">
<div class="table-responsive">
<table class="table table-bordered" id="dynamic_field">
<tr>
<td>
<select name="name[]" id="category" class="form-control" width="300px" onchange="aggiornaHidden(this)">
<option value="">Seleziona Ordine - Articolo</option>
<?php
echo $popola
?>
</select>
<INPUT type="hidden" name="sel_value">
<INPUT type="hidden" name="sel_text">
</td>
<td>
<input type="text" name="quantita[]" placeholder="Inserisci quantita" class="form-control name_list" />
</td>
<td><button type="button" name="add" id="add" class="btn btn-success">Aggiungi Riga</button></td>
</tr>
</table>
</div>
</form>
this is PHP code:
<?php
$conto='2411000044';
$dsn = 'iSeries';
$connessione = odbc_connect("iSeries", "utente, "pwd", 2) or die ("Impossibile Connettersi " . odbc_errormsg());
if($conto==""){
echo "impossibile trovare il codice artigiano....<br>";
}
else{
$interrogazione ="SELECT A.tipo, A.numero, A.codice, A.descrizione, B.barcode FROM file1 A, file2 B WHERE (A.codice=B.codice1) AND a.fornitore='".trim($conto)."' ORDER BY A.codice, A.numero ASC";
$risultato = odbc_exec($connessione, $interrogazione);
while (odbc_fetch_row($risultato))
{
$popola .= '<option value="'.odbc_result($risultato,"tipo").'-'.odbc_result($risultato,"numero").'-'.trim(odbc_result($risultato,"codice")).'-'.trim(odbc_result($risultato,"barcode")).'">'.odbc_result($risultato,"tipo").' - '.odbc_result($risultato,"numero").' - '.odbc_result($risultato,"codice").' - '.odbc_result($risultato,"descrizione").'</option>';
}
}
?>
JAVASCRIPT CODE:
<script type="text/javascript" language="javascript" >
$(document).ready(function(){
var i=1;
$('#add').click(function(){
i++;
$('#dynamic_field').append('<tr id="row'+i+'"><td><select name="name[]" id="category" class="form-control" width="300px" onchange="aggiornaHidden(this)"><option value="">Seleziona Ordine - Articolo</option><?php echo $popola?></select><INPUT type="hidden" name="sel_value"><INPUT type="hidden" name="sel_text"></td><td><input type="text" name="quantita[]" placeholder="Inserisci quantita" class="form-control name_list" /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');
});
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
function aggiornaHidden(sel){
var f = document.add_name;
f.sel_value.value = sel.options[sel.selectedIndex].value;
f.sel_text.value = sel.options[sel.selectedIndex].text;
}
</script>
The first selection successfully adds the value to the hidden input
After clicking on "Add Row" the second select is populated but choosing a different value the value of the hidden input remains blank
Where I wrong?
thanks
Hey guys I'm currently having problems with my Modal. As I register a member, it doesn't go back to the modal after successfully registering it. I believe it has something to do with scripts. Here's the code:
Add Member
<!-- Add Member Modal -->
<div id="addMemberModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Add Member</h4>
</div>
<div class="modal-body">
<div class="col-md-6 col-sm-6 no-padng">
<div class="model-l">
<form name="registration" method="post">
<table border="0" width="500" align="center" class="demo-table">
<div class="message"><?php if(isset($message)) echo $message; ?></div>
<tr>
<td><p class="textColor">First Name:</p></td>
<td><input type="text" class="demoInputBox" name="firstName" placeholder="First Name" value="<?php if(isset($_POST['firstName'])) echo $_POST['firstName']; ?>"; required></td>
</tr>
<tr>
<td><p class="textColor">Family Name:</td>
<td><input type="text" class="demoInputBox" name="lastName" placeholder="Family Name" value="<?php if(isset($_POST['lastName'])) echo $_POST['lastName']; ?>"; required></td>
</tr>
<tr>
<td><p class="textColor">Contact</td>
<td><input type="text" class="demoInputBox" name="contact" placeholder="Contact No." value="<?php if(isset($_POST['contact'])) echo $_POST['contact']; ?>"; required></td>
</tr>
<tr>
<td><p class="textColor">Email</td>
<td><input type="text" class="demoInputBox" name="email" placeholder="Email" value="<?php if(isset($_POST['email'])) echo $_POST['email']; ?>"; required></td>
</tr>
<tr>
<td><p class="textColor">Gender</td>
<td><input type="radio" name="gender" value="M" <?php if(isset($_POST['gender']) && $_POST['gender']=="Male") { ?>checked<?php } ?>><p class="textColor"; required>Male</p>
<br><input type="radio" name="gender" value="F" <?php if(isset($_POST['gender']) && $_POST['gender']=="Female") { ?>checked<?php } ?>><p class="textColor"; required>Female
</td>
</tr>
<tr>
<td></td>
</tr>
</table>
<div>
<input type="submit" name="submit" value="Add Member" class="btnRegister">
</div>
</form>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I'm open to receiving answers and learning lessons from you guys as well because Boostrap Modal isn't being taught in our school. I'll be very happy if somebody will help me with this. Thank you so much! :)
First thing:
I really don't understand why you have used value="<?php echo $_POST['value']?>" with every input type what it does is, it fills form input with the submitted data. If you remove this value="<?php echo $_POST["firstName"] ?>" from every input type, you will only need to trigger the modal using the following code.
<script type="text/javascript">
$(document).ready(function(){
//check whether user form submitted
var test ="<?php echo $_POST["submit"] ?>";
//check if form is submmited
if(test){
$("#addMemberModal").modal("show");
}
});
</script>
If You still don't want to remove value="<?php echo $_POST['value']?>".Then try the following:
<script type="text/javascript">
$(document).ready(function(){
//check whether user form submitted
var test ="<?php echo $_POST["submit"] ?>";
// function for clearing input
$.clearInput = function (modal) {
$(modal).find('input[type=text], input[type=radio]').val("");
};
//check if form is submmited
if(test){
// //show the modal
$("#addMemberModal").modal("show");
//on modal show clear the inputs
$("#addMemberModal").on("shown.bs.modal",function(){
$.clearInput(this);
});
}
});
</script>
For any of the above case to work you also need to include Jquery in head section:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
NOTE: Above code should work as per your requirement but this is not a recommended method. If you want to add new member information again and again, you should submit the data via JQuery or Ajax post and on successful submission should reset the form, instead of reloading the entire page.
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');
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){