Develop Reference

Redirect modal form (PHP-JS-HTML5)

I try to learn frontend and backend. I create a simple login form with bootstrap modal but i have this problem. When i submit the data the modal disappear and i see the message only if i click to the button of my modal. How can i prevenent this event? Sorry for my English.
This is the code
PHP MODAL
<div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="exampleModalLabel">
<div class="modal-dialog">
<div class="modal-content" id="modalContent">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Login</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="closeForm"></button>
</div>
<div class="modal-body">
<div id="errori" >
<!-- controllo sui campi lasciati vuoi !-->
<?php
if(!empty($_SESSION['errore'])){ ?>
<div class="alert alert-danger"><?=$_SESSION['errore'] ?> </div>
<?php
$_SESSION['errore']='';
}
?>
<!-- fine controllo !-->
</div>
<form action="signup.php" method="POST" id="formLogin">
<div class="mb-3">
<label for="email" class="form-label">Indirizzo email</label>
<input type="email" class="form-control" id="email" name="email" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">Il tuo indirizzo email</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="password" name="password">
</div>
<div class="mb-3 form-check">
<input value="1" type="checkbox" class="form-check-input" id="remember" name="remember">
<label class="form-check-label" for="exampleCheck1">Ricordami</label>
</div>
<div class="mb-3">
<p> Non sei ancora Registrato? <a data-bs-toggle="modal" href="#regModal" data-bs-target="#regModal" onclick="clickreg()"> Clicca qui</a> per registrarti </p>
</div>
<button type="submit" id="regBtn" class="btn btn-primary">Invia</button>
</form>
</div>
<div class="modal-footer">
<!--
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
!-->
</div>
</div>
</div>
</div>
<?php include 'regModal.php'; ?>
<script>
function clickreg(){
$('#loginModal').modal("hide");
$('#regModal').modal("show");
}
</script>
<script>
$('#formLogin').on('submit', function() {
$('#loginModal').addClass('modal fade show').css('display','block');
});
</script>
SIGNUP.PHP. This part of code check if the data insert in the form are blanck and save all in a session variable named "error"
<?php
if(!isset($_SESSION))
{
session_start();
}
$errore= '';
if(empty($_POST['email'])){
$errore .= 'Email richiesta <br>';
}
if(empty($_POST['password'])){
$errore .= 'Password richiesta';
}
if(!empty($errore)){
$_SESSION['errore'] = $errore;
}

That's exactly how it should behave. If you don't want the page to reload, then you should consider using ajax.
In case you're not willing to use ajax you can show the modal when an error is detected after the form is submitted like so.
<?php if(!empty($_SESSION['errore'])){ ?>
<script>
$('#regModal').modal("show");
</script>
<?php } ?>

Can't Pass Values to Javascript Modal (Not Bootstrap)

I'm having issues with trying to pass a value to a non-bootstrap modal. The way my current php loop is written, I understand that I can only use my modal to edit the last row in my SQL table. However when my modal div was inside the loop, I would only able to alter the first row of the SQL table. How could I modify my scripts to accept the value from the button which loads my modal?
PHP:
<?php
while ($row=mysqli_fetch_array($select))
{
$idtemp=$row['id'];
<button id="edit_form<?php echo $idtemp;?>" data-target="#id02" data-id="<?php echo $idtemp;?>" onclick="document.getElementById('id02').style.display='block'">Edit</button>
<?php
}
?>
HTML:
<div id="id02" class="modal">
<span onclick="document.getElementById('id02').style.display='none'"
class="close" title="Close Modal">×</span>
<!-- Modal Content -->
<form class="modal-content animate" id="editForm" action="modify_records.php" method="post">
<div class="container">
<h3>Edit an Existing Project</h3>
<label for="Project_Name" class="ui-hidden-accessible">Project Name:</label>
<input type="text" name="Project_Name" id="Project_Name_Edit" placeholder="Project Name">
<br><br>
<label for="Partners" class="ui-hidden-accessible">Partners:</label>
<?php
echo $partnersmenu;
?>
<br><br>
<label for="blank" class="ui-hidden-accessible">. </label>
<br><br>
<br><br>
<input type="button" id="edit_button" class="edit_button" value="Submit" onclick="edit_row(<?php echo $idtemp;?>);">
<button type="button" onclick="document.getElementById('id02').style.display='none'" class="cancelbtn">Cancel</button>
</div>
<div class="container" style="background-color:#f1f1f1">
</div>
</form>
</div>
Javascript:
function edit_row(id){
initialize variables
send ajax data to modify_records.php
...
}

EDIT:Solution with hidden-field:
First give a class to your buttons in your loop
<?php
while ($row=mysqli_fetch_array($select))
{
$idtemp=$row['id'];
<button class="openModal" id="edit_form<?php echo $idtemp;?>" data-target="#id02" data-id="<?php echo $idtemp;?>" onclick="document.getElementById('id02').style.display='block'">Edit</button>
<?php
}
?>
Than put a hidden-field in your modal
<div id="id02" class="modal">
<span onclick="document.getElementById('id02').style.display='none'"
class="close" title="Close Modal">×</span>
<!-- Modal Content -->
<form class="modal-content animate" id="editForm" action="modify_records.php" method="post">
<div class="container">
<h3>Edit an Existing Project</h3>
<label for="Project_Name" class="ui-hidden-accessible">Project Name:</label>
<input type="text" name="Project_Name" id="Project_Name_Edit" placeholder="Project Name">
<br><br>
<label for="Partners" class="ui-hidden-accessible">Partners:</label>
<?php
echo $partnersmenu;
?>
<br><br>
<label for="blank" class="ui-hidden-accessible">. </label>
<br><br>
<br><br>
<input type="button" id="edit_button" class="edit_button" value="Submit" onclick="edit_row(<?php echo $idtemp;?>);">
<input type="hidden" id="hidden_temp_id">
<button type="button" onclick="document.getElementById('id02').style.display='none'" class="cancelbtn">Cancel</button>
</div>
<div class="container" style="background-color:#f1f1f1">
</div>
</form>
</div>
Than create in your js-file eventlistener to your buttons
var openModalButtons = document.getElementsByClassName("openModal");
for (var i = 0; i < openModalButtons.length; i++) {
openModalButtons[i].addEventListener('click', myFunction, false);
}
var myFunction = function() {
var idtemp = this.getAttribute("data-id");
document.getElementById('hidden_temp_id').value = idtemp;
};

In form1 login page input email field values how to display same email id in form2 email input field without refresh the page

In form1 login page input email field values how to display same email id in form2 email input field without refresh the page while click the forgot button please any one help me.below i attched the screenshot
script
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function () {
var currentActiveId;
if (sessionStorage.getItem("activeDiv")) {
currentActiveId = sessionStorage.getItem("activeDiv");
$('.form-div').removeClass("active");
$('#' + currentActiveId).addClass("active");
}
$('#btn-show-signup').click(function () {
$('.form-div').removeClass("active");
$('#signup-form').addClass("active");
currentActiveId = "signup-form";
sessionStorage.setItem('activeDiv', currentActiveId);
});
$('.btn-show-login').click(function () {
$('.form-div').removeClass("active");
$('#login-form').addClass("active");
currentActiveId = "login-form";
sessionStorage.setItem('activeDiv', currentActiveId);
});
$('#btn-show-forgot').click(function () {
// $('#forgot-email').attr('value', null);
$('.form-div').removeClass("active");
$('#forgot-form').addClass("active");
currentActiveId = "forgot-form";
sessionStorage.setItem('activeDiv', currentActiveId);
});
});
</script>
form1
<div class="form-main">
<form action="<?php echo base_url(); ?>Index.php/Login_cntrl/login" method="POST" >
<div class="field-wrap">
<label class="view-label">Email Address</label>
<input type="email" placeholder=" Email Address" name="email" id="email" class="input-control" value="<?php echo set_value('email'); ?>"/>
<span class="text-danger"><?php echo form_error('email'); ?></span>
</div>
<div class="field-wrap">
<input type="password" placeholder="Password" name="password" id="password" value="<?php echo set_value('password'); ?>" />
<span class="text-danger"><?php echo form_error('password'); ?></span>
<a href="javascript:void(0)" class="btn btn-link btn-nobg" id="btn-show-forgot" >Forgot ?</a>
</div>
<div class="field-wrap">
<button type="submit" class="btn btn-submit" name="ulogin" id="ulogin" >Login</button>
</div>
<div class="field-wrap">
NEW User? Sign up
</div>
</form>
</div>
form2
<div class="form-div" id="forgot-form">
<div class="form-aside">
<h4 id="form-header">Forgot password </h4>
<p class="form-text"></p>
</div>
<div class="form-main">
<form action="<?php echo base_url(); ?>Index.php/Login_cntrl/ResetPassword" method="POST">
<div class="field-wrap">
<input type="text" name="emaill" id="emaill" placeholder="Enter your Mobile/Email Address" value="<?php echo $this->session->userdata('findemaill'); ?>" autocomplete="off" id="forgot-email"/>
</div>
<div class="field-wrap">
<input type="text" name="otp" id="otp" placeholder="Enter OTP" value="<?php echo set_value('otp'); ?>"/>
<span class="text-danger"><?php echo form_error('otp'); ?></span>
</div>
<?php echo $this->session->flashdata('passwordmissmatch'); ?>
<div class="field-wrap">
<input type="text" name="newpassword" id="newpassword" placeholder="Enter new Password" value="<?php echo set_value('newpassword'); ?>"/>
<span class="text-danger"><?php echo form_error('newpassword'); ?></span>
</div>
<div class="field-wrap">
<input type="text" name="confirmpassword" id="confirmpassword" placeholder="Re-enter new Password" value="<?php echo set_value('confirmpassword'); ?>"/>
<span class="text-danger"><?php echo form_error('confirmpassword'); ?></span>
</div>
<div class="field-wrap">
<button type="submit" name="resubmit" id="resubmit" class="btn btn-submit">submit</button>
</div>
<?php echo $this->session->flashdata('success_msg'); ?>
<div class="field-wrap">
<a href="javascript:void(0)" class="btn-show-login btn btn-link btn-nobg" >Back</a>
</div>
</form>
</div>
</div>

on form1 html
function onClickHandler(){
location.href = 'form2.html?username=' + document.getElementById('TextBoxName').value;
}
on form2 html
function parseQueryString()
{
var queryDict = {}
location.search.substr(1).split("&").forEach(function(item) {
queryDict[item.split("=")[0]] = item.split("=")[1]
});
return queryDict;
}
function onLoadHandler(){
document.getElementById('TextBoxName').value = parseQueryString().name;
}

populate field with data from DB in Modal Bootstrap 3 using Codeigniter and jquery

im using bootstrap 3 framework and codeigniter 3, i want to edit a row from table but i want to display row in thier field in modal
Code Html of table
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Nom et prénom</th>
<th>Age</th>
<th>Sexe</th>
<th>Assurance</th>
<th>Téléphone</th>
<th>E-mail</th>
<th></th>
</tr>
</thead>
<tbody>
<?php
foreach ($query->result() as $row)
{
?>
<tr>
<td><?php echo $row->no_dossier_pt; ?></td>
<td><?php echo $row->nom_pt .' '. $row->prenom_pt ?></td>
<?php
$date = new DateTime($row->datenaissance_pt);
$now = new DateTime();
$interval = $now->diff($date);
?>
<td><?php echo $interval->y .' ans'; ?></td>
<td><?php echo $row->sexe_pt; ?></td>
<td><?php echo $row->assurance_pt; ?></td>
<td><?php echo $row->telephone_pt; ?></td>
<td><?php echo $row->email_pt; ?></td>
<td>
<a type="button" href="<?php echo base_url() ?>patient/patient_delete/<?php echo $row->id; ?>" class="btn btn-danger">Supprimer</a>
<a type="button" data-toggle="modal" href="#editpatient" data-id="<?php echo $row->id; ?>" class="btn btn-warning" >Editer</a>
<?php $this->load->view('template/patient_update'); ?>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</div>
</div>
</div>
<?php
$this->load->view('template/footer');
?>
but i can't understand how can i pass 'id' of this row to the controller and return the specific data row from controller to thier field in Modal form,
this is code of button
<a type="button" data-toggle="modal" href="#editpatient" data-id="<?php echo $row->id; ?>" class="btn btn-warning" >Editer</a>
and my Modal form Code
<!-- Modal -->
<div class="modal fade" id="editpatient" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel"> Information patient 2</h4>
</div>
<!-- formulaire -->
<?php echo form_open('patient/patient_update'); // action to the controller?>
<div class="modal-body">
<!-- hidden input montinned with class sr-only -->
<label class="sr-only" =""></label>
<input type="text" name="no_dossier_pt" class="sr-only" >
<div class="form-group">
<input type="text" class="form-control" id="nom_pt" name="nom_pt" id="nom_pt" placeholder="Nom ...">
</div>
<div class="form-group">
<input type="text" class="form-control" id="prenom_pt" name="prenom_pt" id="prenom_pt" placeholder="Prénom ....">
</div>
<div class="form-group">
<label for="exampleInputFile">Sexe : </label>
<input type="radio" name="sexe_pt" id="radio-choice-1" value="homme" checked="checked" />
<label for="radio-choice-1"> Homme </label>
<input type="radio" name="sexe_pt" id="radio-choice-2" value="femme" />
<label for="femme"> Femme </label>
<input type="radio" name="sexe_pt" id="radio-choice-3" value="enfant" />
<label for="enfant">Enfant</label>
</div>
<div class="form-group ">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar">
</i>
</div>
<input class="form-control" id="date" name="date" placeholder="Date de naissance" type="text"/>
</div>
</div>
<div class="form-group">
<label for="exampleInputFile">Assurance : </label>
<input type="radio" name="assurance_pt" id="radio-choice-1" value="oui" checked="checked" />
<label for="radio-choice-1"> Oui </label>
<input type="radio" name="assurance_pt" id="radio-choice-2" value="non" />
<label for="femme"> Non </label>
</div>
<div class="form-group">
<input type="text" class="form-control" name ="telephone_pt" placeholder="Téléphone ...">
</div>
<div class="form-group">
<input type="text" class="form-control" name ="email_pt" placeholder="Email ...">
</div>
<div class="form-group">
<textarea class="form-control" cols="40" name="note_pt" rows="3" placeholder="Note sur ce patient ..."></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
<button type="submit" class="btn btn-primary">Enregistrer</button>
</div>
<?php echo form_close(); ?>
</div>
</div>
</div>
<!-- Modal -->
Controller Methode to display
public function patient_selectbyid()
{
$data = array();
$id = $this->input->post('pt_id');
$this->load->model('patient_model');
$data = $this->studentModel->getStudent($id);
echo $data;
}
Code jquery
$(document).ready(function() {
var id_edit = $(this).data('id');
var base_url = <? php echo base_url('patient/patient_selectbyid'); ?> ;
$('.editStudent').click(function() {
$.ajax({
url: base_url,
type: 'POST',
data: {
'pt_id': id_edit
},
dataType: 'JSON';
success: function(result) {
$('.modal-body #nom_pt').val(result[0].nom_pt);
$('.modal-body #prenom_pt').val(result[0].prenom_pt);
}
});
});
});
I hope someone can help me coding this, thanks you

thanks brother for your recommandations , i had resolve the problem by using event listner as you say, i just sent data DB using data attribute in the button like this:
<button type="button" class="btn btn-warning" data-toggle="modal" data-target="#editPatient" data-id="<?php echo $row->id ?>" data-nom="<?php echo $row->nom_pt ?>" data-prenom="<?php echo $row->prenom_pt ?>" data-nod="<?php echo $row->no_dossier_pt ?>" data-sexe="<?php echo $row->sexe_pt; ?>" data-dn="<?php echo $row->datenaissance_pt; ?>" data-assur="<?php echo $row->assurance_pt; ?>" data-tele="<?php echo $row->telephone_pt; ?>" data-email="<?php echo $row->email_pt; ?>" data-note="<?php echo $row->note_pt; ?>" >
Modifier
the modal like this
<!-- Modal -->
<div class="modal fade" id="editPatient" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel"> Information patient </h4>
</div>
<div class="modal-body">
<!-- formulaire -->
<?php echo form_open('patient/patient_update'); ?>
<label class="sr-only" =""></label>
<input type="text" name="id" class="sr-only" id="id_hidd" >
<div class="form-group">
<input type="text" class="form-control" id="nom_pt" name="nom_pt" placeholder="Nom ...">
</div>
<div class="form-group">
<input type="text" class="form-control" id="prenom_pt" name="prenom_pt" placeholder="Prénom ....">
</div>
<div class="form-group">
<label for="exampleInputFile">Sexe : </label>
<input type="radio" name="sexe" id="homme" value="homme" checked="checked" />
<label for="homme"> Homme </label>
<input type="radio" name="sexe" id="femme" value="femme" />
<label for="femme"> Femme </label>
<input type="radio" name="sexe" id="enfant" value="enfant" />
<label for="enfant">Enfant</label>
</div>
<div class="form-group ">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar">
</i>
</div>
<input class="form-control" id="date" name="date" placeholder="Date de naissance" type="text"/>
</div>
</div>
<div class="form-group">
<label for="exampleInputFile">Assurance : </label>
<input type="radio" name="assurance" id="assur" value="oui" checked="checked" />
<label for="radio-choice-1"> Oui </label>
<input type="radio" name="assurance" id="nonassur" value="non" />
<label for="femme"> Non </label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="telephone_pt" name ="telephone_pt" placeholder="Téléphone ...">
</div>
<div class="form-group">
<input type="text" class="form-control" id ="email_pt" name ="email_pt" placeholder="Email ...">
</div>
<div class="form-group">
<textarea class="form-control" cols="40" id="note_pt" name="note_pt" rows="3" placeholder="Note sur ce patient ..."></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
<button type="submit" class="btn btn-primary">Enregistrer</button>
</div>
<?php echo form_close(); ?>
</div>
</div>
</div>
script that recive data and displayed on Modal form like this:
<script type="text/javascript">
$('#editPatient').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var id = button.data('id')
var prenom = button.data('prenom')
var nom = button.data('nom')
var nod = button.data('nod')
var sexe = button.data('sexe')
var dn = button.data('dn')
var tele = button.data('tele')
var email = button.data('email')
var note = button.data('note')
if (sexe == 'femme'){
var id_sexe = "femme"
document.getElementById(id_sexe).setAttribute("checked", "checked")
}
if (sexe == 'homme'){
var id_sexe = "homme"
document.getElementById(id_sexe).checked = true
}
if (sexe == 'enfant'){
var id_sexe = "enfant"
document.getElementById(id_sexe).checked = true
}
if (assur == 'oui'){
var id_assur = "assur"
document.getElementById(id_assur).checked = true
}
if (assur == 'non'){
var id_assur = "nonassur"
document.getElementById(id_assur).checked = true
}
var modal = $(this)
modal.find('.modal-title').text('Modifier patient ('+nod+')')
modal.find('.modal-body #id_hidd').val(id)
modal.find('.modal-body #nom_pt').val(nom)
modal.find('.modal-body #prenom_pt').val(prenom)
modal.find('.modal-body #date').val(dn)
modal.find('.modal-body #telephone_pt').val(tele)
modal.find('.modal-body #email_pt').val(email)
modal.find('.modal-body #note_pt').val(note)
})
</script>
thanks for your help if you have any other suggestion or question i'll be gratfull

editing multiple users using modal form (javascript, html)

Hi guys the issue I have is within my users admin page, I have displayed all the admin users within a table each assigned a delete and edit button.
When I click on edit the given users details appear in a modal form. Within the edit details there is a password and confirm password box, when I click on the edit details for the first user, the validation for confirm password appears as "passwords don't match" however when I click on the second user the confirm password does not validate.
Below is the source code I am having issues with any help will be much appreciated:
<a rel="tooltip" title="Edit" id="e<?php echo $id; ?>" href="#edit<?php echo $id; ?>" data-toggle="modal" class="btn btn-success"></i>Edit</a>
<div id="edit<?php echo $id;?>" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-body">
<div class="alert alert-info"><strong>Edit User</strong></div>
<form class="form-horizontal" method="post">
<div class="control-group">
<label class="control-label" for="inputEmail">Firstname</label>
<div class="controls">
<input type="text" id="inputEmail" name="firstname" value="<?php echo $row['firstname']; ?>" required>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputEmail">Lastname</label>
<div class="controls">
<input type="text" id="inputEmail" name="lastname" value="<?php echo $row['lastname']; ?>" required>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputEmail">Mobile Number</label>
<div class="controls">
<input type="text" id="inputEmail" name="mobilenumber" value="<?php echo $row['mobilenumber']; ?>" required>
</div>
</div>
<input type="hidden" id="inputEmail" name="id" value="<?php echo $row['admin_id']; ?>" required>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input type="text" name="password" id="password" required>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Confirm Password</label>
<div class="controls">
<input type="text" name="confirmpassword" id="confirmpassword" required>
</div>
</div>
<div class="control-group">
<div class="controls">
<button name="edit" type="submit" class="btn btn-success"> Update</button>
</div>
</div>
<script type="text/javascript">
window.onload = function () {
document.getElementById("password").onchange = validatePassword;
document.getElementById("confirmpassword").onchange = validatePassword;
}
function validatePassword(){
var confirmpassword=document.getElementById("confirmpassword").value;
var password=document.getElementById("password").value;
if(password!=confirmpassword)
document.getElementById("confirmpassword").setCustomValidity("Passwords Don't Match");
else
document.getElementById("confirmpassword").setCustomValidity('');
//empty string means no validation error
}
</script>
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true"> Close</button>
</div>
</div>
<?php
if (isset($_POST['edit'])){
$admin_id=$_POST['id'];
$firstname=$_POST['firstname'];
$lastname=$_POST['lastname'];
$mobilenumber=$_POST['mobilenumber'];
$password= sha1 ($_POST['password']);
mysql_query("update admin set firstname = '$firstname', lastname = '$lastname', mobilenumber = '$mobilenumber', password = '$password' where admin_id='$admin_id'")or die(mysql_error()); ?>
<script>
window.location="adminusers.php";
</script>
<?php
}
}
?>
Validation issue
Validation issue 2