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 } ?>

PHP Code Igniter cannot show data in modal bootstrap

I'm using codeigniter franmework. I try to appear the data into a modal. but i have a problem with my datas. They don't appear in modal. I followed the tutorial on the internet but it doesn't work. Here is my button click code which purposed to show data :
<a href="javascript:;"
data-id="<?php echo $row->id ?>"
data-kode="<?php echo $row->kode ?>"
data-subkode="<?php echo $row->subkode ?>"
data-nama_kegiatan="<?php echo $row->nama_kegiatan ?>"
data-toggle="modal" data-target="#edit-data">
<button data-target="#ubah-data" data-toggle="modal" class="btn btn-info">Ubah</button>
</a>
This is my modal code
<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="edit-data" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
<h4 class="modal-title">Ubah Data</h4>
</div>
<form class="form-horizontal" action="<?php echo base_url('dashboard/rka2/ubah')?>" method="post" enctype="multipart/form-data" role="form">
<div class="modal-body">
<div class="form-group">
<label class="col-lg-2 col-sm-2 control-label">Kode</label>
<div class="col-lg-10">
<input type="hidden" id="id" name="id">
<input type="text" class="form-control" id="kode" name="kode">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 col-sm-2 control-label">Subkode</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="subkode" name="subkode">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 col-sm-2 control-label">Nama Kegiatan</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="nama_kegiatan" name="nama_kegiatan">
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-info" type="submit"> Simpan </button>
<button type="button" class="btn btn-warning" data-dismiss="modal"> Batal</button>
</div>
</form>
</div>
</div>
And this is the script for getting datas
<script>
$(document).ready(function() {
// Untuk sunting
$('#edit-data').on('show.bs.modal', function (event) {
var div = $(event.relatedTarget) // Tombol dimana modal di tampilkan
var modal = $(this)
// Isi nilai pada field
modal.find('#id').attr("value",div.data('id'));
modal.find('#kode').attr("value",div.data('kode'));
modal.find('#subkode').attr("value",div.data('subkode'));
modal.find('#nama_kegiatan').attr("value",div.data('nama_kegiatan'));
});
});
</script>

How to get data on button click in Bootstrap modal

I'm trying to get the distance from departure and destination using Google Map API. Its working nicely! But the problem is, I have departure field and Destination field. After filling those fields, if I click on "Get the Distance" button then I wanted it to show the distance value in Bootstrap modal. But, its not showing. That means, I'm not getting distance value in Modal.
Form
<form action="" method="get">
<div class="InP">
<div class="input-group IGCustom">
<span class="input-group-addon InputGroup" id="basic-addon3"><?php _e('Departure', 'moorgiz_lang'); ?></span>
<input type="text" name="departure" class="form-control ICustom" id="departure" aria-describedby="basic-addon3" placeholder="<?php _e('Ex: N Rue, Code Postale, Ville', 'moorgiz_lang');?>">
</div>
</div>
<?php if($moorgiz['customize-style']=='black') { ?>
<img style="float: left; margin-top: 5%; margin-left: 30px;" src="<?php echo get_template_directory_uri(); ?>/images/black/location.png" />
<?php } else { ?>
<img style="float: left; margin-top: 5%; margin-left: 30px;" src="<?php echo get_template_directory_uri(); ?>/images/icons/location.png" />
<?php } ?>
<div class="InP" style="margin-top:4%;">
<div class="input-group IGCustom">
<span class="input-group-addon InputGroup" id="basic-addon3"><?php _e('Destination', 'moorgiz_lang'); ?></span>
<input type="text" name="desti" class="form-control ICustom" id="destination" aria-describedby="basic-addon3" placeholder="<?php _e('Ex: N Rue, Code Postale, Ville', 'moorgiz_lang');?>">
</div>
</div>
<div class="form-group">
<label class="text-left CustomLabel-NoP" for="sel1"><?php _e('Number of Passengers', 'moorgiz_lang'); ?></label>
<select class="form-control pull-left CustomControl-NoP" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="col-sm-12">
<input type="submit" class="btn btn-info pull-right ButtonPos" data-toggle="modal" data-target="#myModal" value="CALCULATE"/>
</form>
Modal HTML
<div class="modal fade" id="myModal" 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">Modal title</h4>
</div>
<div class="modal-body">
<?php
$addressFrom = $_GET['departure'];
$addressTo = $_GET['desti'];
$distance = getDistance($addressFrom, $addressTo, "K");
echo $distance;
?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Can you guys please suggest me something?

What you need is modal event and ajax method
Couple of changes required in form
change method from get to post or no need at all
assign id='myForm' to form
change type="submit" to type="button"
The form will be
<form action="" method="POST" id="myForm">
<div class="InP">
<div class="input-group IGCustom">
<span class="input-group-addon InputGroup" id="basic-addon3"><?php _e('Departure', 'moorgiz_lang'); ?></span>
<input type="text" name="departure" class="form-control ICustom" id="departure" aria-describedby="basic-addon3" placeholder="<?php _e('Ex: N Rue, Code Postale, Ville', 'moorgiz_lang');?>">
</div>
</div>
<?php if($moorgiz['customize-style']=='black') { ?>
<img style="float: left; margin-top: 5%; margin-left: 30px;" src="<?php echo get_template_directory_uri(); ?>/images/black/location.png" />
<?php } else { ?>
<img style="float: left; margin-top: 5%; margin-left: 30px;" src="<?php echo get_template_directory_uri(); ?>/images/icons/location.png" />
<?php } ?>
<div class="InP" style="margin-top:4%;">
<div class="input-group IGCustom">
<span class="input-group-addon InputGroup" id="basic-addon3"><?php _e('Destination', 'moorgiz_lang'); ?></span>
<input type="text" name="desti" class="form-control ICustom" id="destination" aria-describedby="basic-addon3" placeholder="<?php _e('Ex: N Rue, Code Postale, Ville', 'moorgiz_lang');?>">
</div>
</div>
<div class="form-group">
<label class="text-left CustomLabel-NoP" for="sel1"><?php _e('Number of Passengers', 'moorgiz_lang'); ?></label>
<select class="form-control pull-left CustomControl-NoP" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="col-sm-12">
<input type="button" class="btn btn-info pull-right ButtonPos" data-toggle="modal" data-target="#myModal" value="CALCULATE"/>
</form>
Modal HTML (added <div class="getdistance"></div> to display the data via ajax method)
<div class="modal fade" id="myModal" 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">Modal title</h4>
</div>
<div class="modal-body">
<div class="getdistance"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Modal event listener with Ajax method
$(document).ready(function(){
$('#myModal').on('show.bs.modal', function () {
var form = $('#myForm'); //Get Form
$.ajax( {
type: "POST",
url: caculatedistance.php, //Create this file to handle the form post data
data: form.serialize(), //Post the form
success: function(response) {
$('.getdistance').html(response); //show the distance in modal
}
});
});
});
last create caculatedistance.php where you handle the form posted values, calculate the distance and echo the output to display in modal
<?php
//include getDistance() function
if(isset($_POST['departure'])) {
$addressFrom = $_POST['departure'];
$addressTo = $_POST['desti'];
$distance = getDistance($addressFrom, $addressTo, "K");
echo $distance; //this value will show in modal
}
?>

Bootstrap form with modal, validator and email

I'm trying to make an html page with bootstrap and bootstrap validator.
What i want to do :
When the user click on the button, a modal appear with a form.
After validation, form sent an email with the fields value.
When the mail was correctly sent, an other modal appear with some informations
My problem :
my script with bootstrap validator doesn't work. When a field is in error, the form is sent every time the error appear.
If i complete all the fields, the page reboot and nothing work.
please, can you help me to find my mistake ?
my html :
<html lang="fr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<style type="text/css">
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrapValidator.js"></script>
<script language="JavaScript">
<!--vérif formulaire-->
function verif() {
$('#contact')
.bootstrapValidator({
live: 'disabled',
message: 'Cette valeur est invalide',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
e1: {
validators: {
notEmpty: {
message: 'Votre nom est obligatoire'
}
}
},
e2: {
validators: {
notEmpty: {
message: 'Votre prenom est obligatoire'
}
}
},
e3: {
validators: {
notEmpty: {
message: 'Votre adresse mail est obligatoire'
},
/*emailAddress: {
message: 'Le format de votre adresse mail n est pas valide'
}*/
}
},
e4: {
validators: {
notEmpty: {
message: 'Votre numero de telephone est obligatoire'
}
}
},
/*homePhone: {
validators: {
digits: {
message: 'The home phone number is not valid'
}
}
},*/
}
})
.on('error.form.bv', function(e) {
console.log('error.form.bv');
var $form = $(e.target);
console.log($form.data('bootstrapValidator').getInvalidFields());
})
.on('success.form.bv', function(e) {
console.log('success.form.bv');
envoimail();
})
}
function envoimail() {
alert("lancement mail ok");
$.ajax({
type: "POST",
url: "process.php",
data: $('form.contact').serialize(),
success: function(msg){
$("#thanks").html(msg);
alert("thanks ok");
$("#myModal").modal('hide');
alert("hide ok");
$("#synthese").modal('show');
alert("show ok");
},
error: function(){
alert("Echec de l envoi du formulaire");
},
});
};
</script>
</head>
<body>
<div>
<button type="button" class="btn btn-primary btn-lg center-block" data-toggle="modal" data-target="#myModal">
Lancer le calcul
</button>
</div>
<div id="thanks">
<p>test</p>
</div>
<br>
<!-- Modal 1 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" 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">Quelques informations sur vous :</h4>
</div>
<div class="modal-body">
<form id="contact" class="form-horizontal contact" name="contact">
<div class="form-group">
<label class="col-lg-4 control-label">Nom</label>
<div class="col-lg-6">
<input class="form-control" id="e1" name="e1" type="text" style="text-align:left" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4 control-label">Prénom</label>
<div class="col-lg-6">
<input class="form-control" id="e2" name="e2" type="text" style="text-align:left" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4 control-label">Fonction</label>
<div class="col-lg-6">
<input class="form-control" id="e5" name="e5" type="text" style="text-align:left"/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4 control-label">Email</label>
<div class="col-lg-6">
<input class="form-control" id="e3" name="e3" type="text" style="text-align:left" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4 control-label">Téléphone</label>
<div class="col-lg-6">
<input class="form-control" id="e4" name="e4" type="text" style="text-align:left" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4 control-label">Message</label>
<div class="col-lg-6">
<input class="form-control" id="e6" name="e6" type="text" style="text-align:left" />
</div>
</div>
<div class="form-group">
<div class="col-lg-12">
<button type="submit" id="resultat" class="btn btn-primary btn-lg center-block" onclick="verif()" >Afficher le résultat</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Modal 2 -->
<div class="modal fade" id="synthese" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"">
<div class="modal-dialog modal-lg" 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">Synthèse :</h4>
</div>
<div class="modal-body">
<div class="modal-body">
<button type="button" class="btn right" data-dismiss="modal" style="float:right;">Relancer</button>
</div>
<br>
</div>
</div>
</div>
</div>
<script src="js/bootstrap.min.js"></script>
</body>
My process.php :
<?php
$myemail = 'mail#domaine.fr';
if (isset($_POST['e1'])) {
$e1nom = strip_tags($_POST['e1']);
$e2prenom = strip_tags($_POST['e2']);
$e3mail = strip_tags($_POST['e3']);
$e4tel = strip_tags($_POST['e4']);
$e5fonction = strip_tags($_POST['e5']);
$e6message = strip_tags($_POST['e6']);
echo "<span class=\"alert alert-success\" >Your message has been received. Thanks! Here is what you submitted:</span><br><br>";
echo "<stong>Nom : </strong> ".$e1nom."<br>";
echo "<stong>Prenom: </strong> ".$e2prenom."<br>";
echo "<stong>Mail : </strong> ".$e3mail."<br>";
echo "<stong>Tel : </strong> ".$e4tel."<br>";
echo "<stong>Fonction : </strong> ".$e5fonction."<br>";
echo "<stong>Message : </strong> ".$message."<br>";
$to = $myemail;
$email_subject = "Lancement du simulateur de prix PPE";
$email_body = "Lancement d une nouvelle simulation. \n\n".
" Detail de la simulation :\n\n".
" Nom : $e1nom \n".
" Prenom : $e2prenom \n".
" Mail : $e3mail \n".
" Tel : $e4tel \n".
" Fonction : $e5fonction \n".
" Message :\n $e6message";
$headers = "From: mail#domaine.fr\n";
$headers .= "Reply-To: $email";
mail($to,$email_subject,$email_body,$headers);
}?>

When it comes to forms through javascript you should always validate serverside as well anyway (since you can't trust anything the visitor sends you), that aside, there's nothing to stop the form submitting when the submit button is used.
So either change the form buttons type to 'button' instead of 'submit' or in the start of your validation add something to stop the form from running it's default action. Something along the lines of -
function verif(){$('#contact').preventDefault();$('#contact')....
Or even better, use both. That way the form won't be submitted until the checks have been run against the form no matter how.

Comment this line : live: 'disabled',
Suggestion :
1.) // Validate the form manually
$('#resultat').click(function() {
$('#contact').bootstrapValidator('validate');
});
2.) write your code in document.ready function.
Modified :
.on('error.field.bv', function(e, data) {
//console.log('error.field.bv -->', data.element);
})
.on('success.field.bv', function(e, data) {
//console.log('success.field.bv -->', data.element);
// envoimail();
})
.on('success.form.bv', function(e) {
// Prevent form submission
e.preventDefault();
// Get the form instance
var $form = $(e.target);
// Get the BootstrapValidator instance
var bv = $form.data('bootstrapValidator');
// Use Ajax to submit form data
$.post('process.php', $form.serialize(), function(result) {
console.log(result);
}, 'json');
});

Change the button type from "submit" to "button", then in the javascript you can add this if condition
if($('#contact').validate().form()){
envoimail();
});

bootstrapValidator ajax request, prevent closing bootstrap modal after submitting

hi im using bootstrapValidator to validate my form and i have no idea where to add ajax request after validating form. and also want to prevent closing bootstrap modal after submitting the form. i referred similar questions and still couldn't make it work.
here is my bootstrap modal
<a href="#"class="btn btn-lg btn-black ico-windows" data-backdrop="static" data-keyboard="false" data-toggle="modal" data-target="#AddAlbum" > Create New Album </a>
<!-- Modal -->
<div class="modal fade" id="AddAlbum" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Create New Album</h4>
</div>
<div class="modal-body">
<div id="formregister">
<form action="" class="form-horizontal" role="form" id="newAlbum" >
<p class="qc-errmsg" style="display: none;"> </p>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Album Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputEmail3" name="albumName" placeholder="Album Name">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label" >Description</label>
<div class="col-sm-10">
<textarea class="form-control" rows="3" name="description"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" onclick="send()" value="cart" class="btn btn-primary">Save Changes</button>
</div>
</div>
</form>
</div> <!-- form register -->
<div id="successfulpost" style="font: bold 12px Verdana, Arial, Helvetica, sans-serif; color: #ff0000; display: none;">
<p class="jst-txt"><span>Thank you,</span> for showing your Interest !!</p>
<p class="jst-txt">Our property advisor shall get in touch with you very shortly..</p>
</div>
</div> <!-- model body-->
</div>
</div>
</div>
here is my javascript
$(document).ready(function () {
//validations
$('#newAlbum').bootstrapValidator({
// To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
albumName: {
message: 'The Album Name is not valid',
validators: {
notEmpty: {
message: 'The Album Name is required and cannot be empty'
},
stringLength: {
min: 6,
max: 30,
message: 'The Album Name must be more than 6 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z0-9]+$/,
message: 'The Album Name can only consist of alphabetical and number'
}
},
//form.submit();
}
}
},
submitHandler: function(form) {
$(form).ajaxSubmit({
url: "add_album.php",
type: "POST",
success: function () {
alert('done');
$('#newAlbum').hide();
$('#successfulpost').show();
}
});
});
i made a jsbin for this
http://jsbin.com/xatog/8/edit?html,js,output

You are using version 0.5.3. They have removed the submithandler option and added an event success.form.bv.
$(form)
.bootstrapValidator(options)
.on('success.form.bv', function(e) {
// Prevent form submission
e.preventDefault();
var $form = $(e.target),
validator = $form.data('bootstrapValidator'),
submitButton = validator.getSubmitButton();
// Do whatever you want here ...
});
source here
Fiddle here