Display success message after submit form modal

Display success message after submit form modal - javascript

I have a contact form linked with form-to-email.php to send emails.
What happen is when you click submit it will redirect you to another page (new one) what I would like to have is to show/display the success message within the modal right after clicking the botton.
<div class="modal fade" id="modal-register" tabindex="-1" role="dialog" aria-labelledby="modal-register-label" 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="modal-register-label">اشتراك</h4>
</div>
<div class="modal-body">
<form method="post" name="myemailform" action="form-to-email.php">
<div class="row">
<div class="col-xs-12 input-group">
<input type="radio" name="form-busnisstype" value="company" id="company">
<label for="company">شركة</label>
<input type="radio" name="form-busnisstype" value="freelaancer" id="freelancer">
<label for="freelancer">مستقل</label>
</div>
<div class="col-xs-12 input-group">
<input type="text" name="form-name" id="name" placeholder="الاسم الكريم" required="required">
</div>
<div class="col-xs-12 input-group">
<input type="email" name="form-email" id="email" placeholder="البريد الالكتروني" required="required">
</div>
<div class="col-xs-12 input-group">
<input type="tel" pattern="^[0-9]*$" name="form-phone" id="phone" placeholder="05xxxxxxxx" required="required">
</div>
<div class="col-xs-12 input-group">
<select name="form-officetype" id="officetype" required="required">
<option value="" disabled selected hidden="" >اختر مكتبك</option>
<option value="Gold">individual</option>
<option value="Silver">room</option>
<option value="Bronze">meeting</option>
<option value="Basic">orgonization</option>
</select>
</div>
<div class="col-xs-12 input-group">
<select name="form-membership" id="membership" required="required">
<option value="" disabled selected hidden="" >اختر باقتك</option>
<option value="Gold">Gold</option>
<option value="Silver">Silver</option>
<option value="Bronze">Bronze</option>
<option value="Basic">Basic</option>
</select>
</div>
</div>
<div class="row">
<div class="col-xs-12 input-group input-group-icon">
<input placeholder="بداية الاشتراك" type="text" onfocus="(this.type='date')" id="booking" name="form-booking" required="required">
</div>
<div class="col-xs-12 input-group input-group-icon">
<select name="form-person" id="person" required="required">
<option value="" disabled selected hidden="" >كم عدد الاشخاص</option>
<option value="1">1 Person</option>
<option value="2">2 People</option><option value="3">3 People</option><option value="4">4 People</option><option value="5">5 People</option>
</select>
</div>
<textarea id="mep_msg" name="form-message" rows="" Placeholder="Comment" required="required"></textarea>
<input class="send_btn" type="submit" name='submit' value="submit">
</div>
</form>
<script language="JavaScript">
var frmvalidator = new Validator("myemailform");
frmvalidator.addValidation("name","req","Please provide your name");
frmvalidator.addValidation("email","req","Please provide your email");
frmvalidator.addValidation("tel","tel","Please enter a valid email address");
frmvalidator.addValidation("email","email","Please enter a valid email address");
</script>
</div>
</div>
</div>
</div>
<!--Success pop up Starts-->
<div class="modal fade" id="success_msg" role="dialog" tabindex="-1">
<div class="success">
<div class="modal-dialog-success">
<div class="col-xs-12 pade_none">
<button type="button" class="close" onClick="closeConfirm();" data-dismiss="modal">×</button>
<div class="col-xs-12 pade_none">
<h2>Success!</h2>
<p>Your message has been sent.</p>
</div>
<div class="col-xs-12 pad_none">
</div>
</div>
</div>
</div>
</div>
<!--Success pop up ends-->
and the form-to-email.php is the following:
<?php
/* Configuration */
$subject = 'Membership Enquiry'; // Set email subject line here
$mailto = 'email here'; // Email address to send form submission to
/* END Configuration */
$name = $_POST['form-name'];
$visitor_email = $_POST['form-email'];
$message = $_POST['form-message'];
$phone = $_POST['form-phone'];
$busnisstype = $_POST['form-busnisstype'];
$officetype = $_POST['form-officetype'];
$membership = $_POST['form-membership'];
$person = $_POST['form-person'];
$booking = $_POST['form-booking'];
// HTML for email to send submission details
$body = "
<br>
<p>The following information was submitted through the contact form on your website:</p>
<p><b>الاسم</b>: $name<br>
<b>الايميل</b>: $visitor_email<br>
<b>رقم الجوال</b>: $phone<br>
<b>نوع المشأة</b>: $busnisstype<br>
<b>المكتب المرغوب</b>: $officetype<br>
<b>العضوية</b>: $membership<br>
<b>عدد الاشخاص</b>: $person<br>
<b>التاريخ المتوقع لبدء الاشتراك</b>: $booking<br>
<p>ملاحضات اخرى: <b>$message</b></p>
";
$headers = "From: $name <$visitor_email> \r\n";
$headers .= "Reply-To: $email \r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
$message = "<html><body>$body</body></html>";
if (mail($mailto, $subject, $message, $headers)) {
header('Location: thank-you.html');
} else {
echo 'Form submission failed. Please try again...'; // failure
}
?>

You're redirecting to thank-you.html. Add there the code (with the success message) and if you want it to be a modal just add the modal code:
<!--Success pop up Starts-->
<div class="modal fade" id="success_msg" role="dialog" tabindex="-1">
<div class="success">
<div class="modal-dialog-success">
<div class="col-xs-12 pade_none">
<button type="button" class="close" onClick="closeConfirm();" data-dismiss="modal">×</button>
<div class="col-xs-12 pade_none">
<h2>Success!</h2>
<p>Your message has been sent.</p>
</div>
<div class="col-xs-12 pad_none">
</div>
</div>
</div>
</div>
</div>
<!--Success pop up ends-->
And launch a javascript when entering:
<body onload="myOnloadFunc();">
Your function should show modal:
function myOnloadFunc() {
$('#success_msg').modal('show');
}

You do two things either use AJAX to send request to form-to-email.php script or create hidden iframe with id="email" name="email" and use target="email" in form tag, it will open your php script in iframe and execute it but it will not redirect to that page, then you can use
document.getElementById('email').addEventListener('load', function() {
alert('Email Send Successfully');
});
instead of alert you can add toaster (green bar) to your modal.

PHP CODE
<?php session_start();
include('config/connect_database.php');
$Username = '';
if(isset($_POST['Login'])) {
$Username = mysqli_real_escape_string($conn, $_POST['Username']);
$Password = mysqli_real_escape_string($conn, $_POST['Password']);
$sql = "SELECT Username, Password, Authority FROM user WHERE Username LIKE '$Username' AND Status LIKE 'Active'";
$result = mysqli_query($conn, $sql);
if(mysqli_num_rows($result) > 0) {
$username = mysqli_fetch_assoc($result);
mysqli_free_result($result);
mysqli_close($conn);
if(($Username === $username['Username']) && (password_verify($Password, $username['Password']))) {
$_SESSION['Username'] = $_POST['Username'];
$_SESSION['Authority'] = $username['Authority'];
} else {
echo "<script>alert('Invalid Username or Password');</script>";
}
} else {
echo "<script>alert('Invalid Username or Password');</script>";
}
}
?>
HTML CODE
<!DOCTYPE html>
<html>
<head>
<title>Management System</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
<?php if(isset($_SESSION['username'])){?>$('#modalNotification').modal();<?php } ?>
$('div.modal button').click(function(){ location.href='home.php'; });
});
</script>
</head>
<body>
<nav>
<a class="navbar-brand" href="#">
<img src="Source/pms_logo_blue.png" alt="Logo" style="width:50px;">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="register.php">Register</a>
</li>
</ul>
</div>
</nav>
<div class="modal fade" id="modalNotification" tabindex="-1" role="dialog" aria-labelledby="modalNotificationTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalNotificationTitle">NOTIFICATION</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>CONTENT</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row justify-content-center py-5">
<div class="col" style="max-width: 400px;">
<h3 style="text-align: center;">Flinken Production Management System</h3>
</div>
</div>
<div class="row justify-content-center">
<div class="col" style="max-width:400px;">
<form action="<?php echo $_SERVER['PHP_SELF'] ?>" method="POST">
<div class="form-group">
<label>Enter Email</label>
<input type="email" name="Username" value="<?php echo htmlspecialchars($Username); ?>" class="form-control" required>
</div>
<div class="form-group">
<label>Enter Passsword</label>
<input type="password" name="Password" class="form-control" required>
</div>
<div class="form-group">
<button type="submit" name="Login" value="True" class="btn btn-primary btn-block">Login</button>
</div>
</form>
</div>
</div>
</div>
<footer class="section">
<div class="text py-5" style="text-align: center">Copyright </div>
</footer>
</body>
</html>

Related

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

how to preview input form of a modal in another modal before submit in php

I have 2 modal the first modal is to display the input form, and the second modal is to preview data that has been entered on the first modal before submission.
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<form action="" method="POST" name="form3">
<div class="modal-header">
<h5 class="modal-title text-left" id="exampleModalLongTitle">Start Swap</h5>
</div>
<div class="modal-body">
<div class="widget" id="swap">
<div class="col-md-12 mt-20 mb-20">
<div class="row">
<div class="col-md-5">
<h5><i class="fa fa-arrow-up fa-lg" aria-hidden="true" style="color: #8dc6fb"></i> SEND</h5>
<select class="selectpicker show-menu-arrow show-tick form-control" id="currency_send"
name="currency_send" title="select" required onchange="past(this)">
<!--<option value="">--- select ---</option>-->
<option value="1" selected="selected" data-content="<img src='../img/xe_icon/BTC.png' width='30' height='30' class='imgrs'><span> Bitcoin</span>">Bitcoin</option>
<option value="4" data-content="<img src='../img/xe_icon/ETH.png' width='30' height='30' class='imgrs'><span> Ethereum</span>">Ethereum</option>
<option value="2" data-content="<img src='../img/xe_icon/PM.png' width='30' height='30' class='imgrs'><span> Perfect Money USD</span>">Perfect Money USD</option>
</select>
<br><br>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-dollar"></i></span>
<!--<input type="number" name="se_amt" placeholder="Amount in USD" class="form-control" id="b1" value="" onKeyUp="(this.value - (this.value/100)*2)" required> -->
<input type="number" step="0.01" pattern="[0-9]+([\.,][0-9]+)?" title="Only numbers are allowed" name="se_amt" placeholder="Amount in USD" class="form-control" id="b1" value="" onKeyUp="mySend()" required>
</div>
</div>
<p id="send_crypto"></p>
</div>
<div class="col-md-2 text-center" style="margin: auto; text-align: center;"><i class="fa fa-exchange fa-2x"></i></div>
<div class="col-md-5">
<br class="visible-xs">
<h5>RECEIVE <i class="fa fa-arrow-down fa-lg" aria-hidden="true" style="color: #5cb85c"></i></h5>
<select class="selectpicker show-menu-arrow show-tick form-control" id="currency_receive"
name="currency_receive" title="select" required onchange="copyed(this)">
<!--<option value="">--- select ---</option>-->
<option value="1" data-content="<img src='../img/xe_icon/BTC.png' width='30' height='30' class='imgrs'><span> Bitcoin</span>">Bitcoin</option>
<option value="4" selected="selected" data-content="<img src='../img/xe_icon/ETH.png' width='30' height='30' class='imgrs'><span> Ethereum</span>">Ethereum</option>
<option value="5" data-content="<img src='../img/xe_icon/XRP.png' width='30' height='30' class='imgrs'><span> Ripple XRP </span>">Ripple XRP</option>
<option value="6" data-content="<img src='../img/xe_icon/TRON.png' width='30' height='30' class='imgrs'><span> Tron TRX</span>">Tron</option>
<option value="2" data-content="<img src='../img/xe_icon/PM.png' width='30' height='30' class='imgrs'><span> Perfect Money USD</span>">Perfect Money USD</option>
</select>
<br><br>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-dollar"></i></span>
<input type="number" step="0.01" pattern="[0-9]+([\.,][0-9]+)?" title="Only numbers are allowed" name="re_amt" placeholder="Amount in USD" class="form-control" id="c1" value="" onKeyUp="myRecieve()" required>
</div>
</div>
<p id="recieve_crypto"></p>
<script>
function copyed(b){
var bx = b.options[b.selectedIndex].value;
if(bx==1){
document.getElementById("crypto_address").innerHTML = "BTC Address";
}
if(bx==2){
document.getElementById("crypto_address").innerHTML = "PM Account No.";
}
if(bx==4){
document.getElementById("crypto_address").innerHTML = "ETH Address";
}
if(bx==5){
document.getElementById("crypto_address").innerHTML = "XRP Address";
}
if(bx==6){
document.getElementById("crypto_address").innerHTML = "TRX Address";
}
//return bx;
}
function mySend() {
var x = document.getElementById("b1").value;
document.getElementById("c1").value = (x - (x/100)*2).toFixed(2);
}
function myRecieve() {
var y = document.getElementById("c1").value;
document.getElementById("b1").value = Math.round(+((y/100)*2) + +y).toFixed(2);
}
</script>
</div>
<div class="col-md-12">
<div class="form-group">
<div class="input-group">
<span class=" input-group-addon"><i class="fa fa-folder"></i>
<span id="crypto_address">ETH Address</span> </span>
<input type="text" name="cryp_address" id="cryp_address" minlength="8" onkeyup="checkLen(this.value)" class="form-control" placeholder="Enter address to recievve coin" required>
</div>
</div>
<div id="counterDisplay" class="text-danger pull-right" style="font-size: 12px"></div>
<script type="text/javascript">
function checkLen(val){
if(val.length<9){
document.getElementById('counterDisplay').innerHTML = 'Invalid Entery!';
}
if(val.length>8){
document.getElementById('counterDisplay').innerHTML = ' ';
}
}
</script>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" id="exbutton" class="btn btn-primary" name="preview_order" data-dismiss="modal" data-target="#prvwModal" data-toggle="modal"><i class="fa fa-refresh" id="resh" aria-hidden="true"></i> Preview Order</button>
</div>
</form>
</div>
</div>
</div>
When you click on preview it displays the next modal
<!-- preview Modal -->
<div class="modal fade" id="prvwModal" tabindex="-1" role="dialog" aria-labelledby="prvwModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="prvwModalLabel">Preview Oder</h4>
</div>
<div class="modal-body">
<div class="col-md-12 text-center">
<h3><?php
if(($_SESSION['currency_receive'])==1){
echo $_SESSION['re_amt']." BTC";
}elseif(($_SESSION['currency_receive'])==2){
echo $_SESSION['re_amt']." PM";
}elseif(($_SESSION['currency_receive'])==4){
echo $_SESSION['re_amt']." ETH";
}elseif(($_SESSION['currency_receive'])==5){
echo $_SESSION['re_amt']." XRP";
}elseif(($_SESSION['currency_receive'])==6){
echo $_SESSION['re_amt']." TRX";
}else{
echo "Invalid Selection";
}
?>
</h3>
</div>
<?php echo $_SESSION['currency_receive'].'<br>'; ?>
<?php echo $_SESSION['currency_send']." Send<br>"; ?>
<?php// echo $_SESSION['re_amt']; ?>
<?php echo $_SESSION['se_amt']; ?>
<?php //echo $_SESSION['cryp_address']; ?>
</div>
<div class="modal-footer"></div>
</div>
</div>
</div>
Here is the PHP code I used is storing those data in sessions but if I try to carry out another transaction it still displaying the previously saved session data
<?php
//Swap Action
if(isset($_POST['preview_order'])){
$currency_send = $_POST['currency_send'];
$se_amt = $_POST['se_amt'];
$currency_receive = $_POST['currency_receive'];
$re_amt = $_POST['re_amt'];
$cryp_address = $_POST['cryp_address'];
if($currency_send != "" && $currency_receive !="" && $se_amt!="" && $re_amt!="" && $cryp_address!=""){
//condition is met open the preview modal
$_SESSION['currency_send'] = $currency_send;
$_SESSION['currency_receive'] = $currency_receive;
$_SESSION['se_amt'] = $se_amt;
$_SESSION['re_amt'] = $re_amt;
$_SESSION['cryp_address'] = $cryp_address;
//echo "<script>$('#thankyouModal').modal('show')</script>";
//Code Review
//Call ANOTHER MODAL TO PREVIEW ORDER BEFORE SUBMISSION
}
}
?>
I just want the input data on the first modal to dynamically display on the preview order modal box anytime the preview order button is clicked. thank you for your contribution.

Populate modal with a mysql query reult data

i have an html page that shows data populated from mysql database.
I give to user choice to edit records. I would like to use a modal form that, when pressed edit, it open up and display data result from mysql db and realated to a certain "id".
Can you help me to achieve this?
Reading on web i've understood that i have to use jquery, but i cannot find a way.
For now i tried as following:
<form method="post">
<div class="modal fade" id="edit_grp" tabindex="-1" role="dialog" aria-labelledby="edit_grpLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="edit_grpLabel">Modifica Interno</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Sequenza Chiamata</label>
<input type="text" class="form-control" name="edit_grp_pos" id="edit_grp_pos" value="<?php echo $row[0]['grp_pos']; ?>">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Nome</label>
<input type="email" class="form-control" name="edit_grp_name" id="edit_grp_name" value="<?php echo $row[0]['grp_name']; ?>">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Interno</label>
<input type="tel" class="form-control" name="edit_grp_phone" id="edit_grp_phone" value="<?php echo $row[0]['grp_phone']; ?>">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" name="submit" value="submit" id="submit_edit_grp" class="btn btn-primary" onClick="closeAll()">Modifica</button>
</div>
</div>
</div>
</div>
</form>
EDIT 1:
I'am having some tests.
For now 've changed code like this:
`
<form method="post">
<div class="modal fade" id="edit_grp" tabindex="-1" role="dialog" aria-labelledby="edit_grpLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="edit_grpLabel">Modifica Interno</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="phone_details">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" name="submit" value="submit" id="submit_edit_grp" class="btn btn-primary" onClick="closeAll()">Modifica</button>
</div>
</div>
</div>
</div>
</form>
`
`
$(document).on('click', '.view_phone_data', function(){
var data_id = $(this).attr("id");
$.ajax({
url:"select.php",
method:"POST",
data:{data_id:data_id},
success:function(data){
$('#phone_details').html(data);
$('#edit_grp').modal('show');
}
});
});
`
and select.php
`
<?php
if(isset($_POST["data_id"]))
{
$output = '';
$connect = mysqli_connect("localhost","administrator","psw","db");
$query = "SELECT * FROM gruppioxe WHERE id = '".$_POST["data_id"]."'";
$result = mysqli_query($connect, $query);
$output .= '
<div class="table-responsive">
<table class="table table-bordered">';
while($row = mysqli_fetch_array($result))
{
$output .= '
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Ordine Chiamata</label>
<input type="tel" class="form-control" id="'.$row["grp_pos"].'" name="'.$row["grp_pos"].'">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Nome</label>
<input type="text" class="form-control" id="'.$row["grp_name"].'" name="'.$row["grp_name"].'">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Interno</label>
<input type="tel" class="form-control" id="'.$row["grp_phone"].'" name="'.$row["grp_phone"].'">
</div>
</form>
';
}
echo $output;
}
?>
`
But still no result..

Solved!!!
i've changed select.php as following:
`
$output .= '
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Ordine Chiamata</label>
<input type="tel" class="form-control" id="grp_pos" name="grp_pos" value="'.$row["grp_pos"].'">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Nome</label>
<input type="text" class="form-control" id="grp_name" name="grp_name" value="'.$row["grp_name"].'">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Interno</label>
<input type="tel" class="form-control" id="grp_phone name="grp_phone" value="'.$row["grp_phone"].'">
</div>
</form>
';
}
echo $output;
`

cannot insert data from Database to Modal PHP

I tried to make a Details-Modal, which gets information from the database "products" when the user clicks on the Details-button. However, there are problems with the code, which I couldn't figure out.
when I run on a localhost server, I get this:
Notice: Undefined index: id in
D:\xampp\htdocs\web01\includes\details.php on line 3
Index
<?php
include 'includes/connect_database.php';
$sql ="SELECT * FROM products WHERE category=1";
$category2 = $db->query($sql);
?>
<?php while ($sanpham =mysqli_fetch_assoc($category2)):?>
<div class="col-md-4 col-sm-6 col-xs-12 single_featured_area">
<div class="single_featured wow fadeIn" data-wow-duration=".5s">
<?php echo "<img src='../images/menu/".$product['image']."'>";?>
<div class="featured_overlay">
<div class="overlay_content">
<h3 style="color: white;"> <?= $product['name'];?></h3>
**<button type="button" class="btn-lg" data-toggle="modal" onclick="detailsmodal(<?= $product['id'];?>)">Bestellen</button>**
</div>
</div>
</div>
</div>
<?php endwhile; ?>
<?php
include 'includes/details.php';
include 'includes/footer.php'; ?>
and footer.php :
<?php
define('BASEURL','/web02/');
?>
<script>
function detailsmodal(id){
var data = {"id":id};
jQuery.ajax({
url: <?=BASEURL;?>+'menu/includes/details.php',
method: "post",
data : data,
success : function(data){
jQuery('body').append(data);
jQuery('#detail-pd').modal('toggle');
},
error : function(){
alert("CAnnot connect");
}
});
}
</script>
and details.php :
<?php
include 'connect_database.php';
**$id = $_POST['id'];
$id = (int)$id;**
$sql = "SELECT * FROM products WHERE id='$id'";
$result = $db->query($sql);
$detailsmd = mysqli_fetch_assoc($result);
?>
<?php ob_start(); ?>
<div class="modal fade sushi01" id="detail-pd" tabindex="-1" role="dialog" aria-labelledby="detail-pd" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" onclick="closeModal()" aria-label="close">
<span aria-hidden="true" >×</span>
</button>
<h4 class="modal-title text-center"><?= $detailsmd['name'];?></h4>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<div class="center-block">
<img src="<?= $detailsmd['image'];?>" alt="<?= $detailsmd['name'];?>" class="imgbestellen img-responsive">
</div>
</div>
<div class="col-sm-6">
<h4>Description</h4>
<p><?= $detailsmd['text'];?></p>
<hr>
<p>Price: <?= $detailsmd['preis'];?></p>
<form action="add-cart.php" method="post">
<div class="form-group">
<label for="quantity">Quantity :</label>
<input type="text" class="form-control" id="quantity" name="quantity">
</div>
<div class="form-group">
<label for="size"></label>
<select name="size" id="size" class="form-control">
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
</select>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-warning" type="submit"><span class="glyphicon glyphicon-shopping-cart"></span> Bestellen</button>
<button class="btn btn-dedault" onclick="closeModal()">Cancle</button>
</div>
</div>
</div>
</div>
<script>
function closeModal(){
jQuery('#detail-pd').modal('hide');
setTimeout(function(){
jQuery('#detail-pd').remove();
},500);
}
</script>
<?php echo ob_get_clean(); ?>

Show Bootstrap's Alert on successful Submit

I'm trying to work on bootstrap's alert. Particulary this:
<div class="alert alert-success" role="alert">...</div>
I wanted it to pop-up on the modal after I successfully hit the submit button. How do I do that?
Here are my codes:
<!--____________________________ADD AGENT________________________-->
<div class="modal fade" id="addAgent" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<form role="form" action="php/addAgent.php" method="POST">
<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">Add Agent</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label for="fullname">Full Name</label>
<div class="row">
<div class="col-sm-4">
<input type="text" class="form-control" placeholder="First Name" name="fname">
</div>
<div class="col-sm-4">
<input type="text" class="form-control" placeholder="Middle Name" name="mname">
</div>
<div class="col-sm-4">
<input type="text" class="form-control" placeholder="Last Name" name="lname">
</div>
</div>
</div><!--___________FORM GROUP_____________-->
<div class="form-group">
<div class="row">
<div class="col-sm-4">
<label for="sel1">Type:</label>
<select class="form-control" name="agentType" id="sel1">
<option value="1">Broker</option>
<option value="2">Agent</option>
<option value="3">Sub-Agent</option>
</select>
</div>
<div class="col-sm-4">
<label for="sel1">Project:</label>
<select class="form-control" id="sel1">
<option>Mezza</option>
<option>Tivoli Gardens</option>
<option>Verawoods Residences</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6">
<label for="email">Email Address</label>
<input type="email" class="form-control" name="email" id="email">
</div>
<div class="col-sm-4">
<label for="contact">Contact Number</label>
<input type="text" class="form-control" name="contact" id="contact">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-12">
<label for="homeAdd">Home Address</label>
<input type="text" class="form-control" name="homeAdd" id="homeAdd">
</div>
</div>
</div>
</form>
</div>
</div> </div>
<div class="modal-footer">
<input type="submit" class="btn btn-primary" value="submit"/>
<button type="button" class="btn btn-default" data-dismiss="modal"> Close</button>
</div>
</div>
</div>
</div><!--______________________ADD AGENTS MODAL_______________________-->
<!-- Button trigger modal -->
Here's my PHP:
<?php
$user="root"; $pass=""; $db="realesate";
$db = new mysqli('localhost', $user, $pass, $db);
//check connection
if ( $db->connect_error) {
die('Connect Error: ' . $db->connect_errno . ': ' . $db->connect_error );
}
//insert data
$sql = "insert into agent (AgentFName , AgentMName , AgentLName , AgentContact , AgentEmail, AgentAddress , agentType)
values (
'{$db->real_escape_string($_POST['fname'])}' ,
'{$db->real_escape_string($_POST['mname'])}' ,
'{$db->real_escape_string($_POST['lname'])}' ,
'{$db->real_escape_string($_POST['contact'])}' ,
'{$db->real_escape_string($_POST['email'])}' ,
'{$db->real_escape_string($_POST['homeAdd'])}' ,
'{$db->real_escape_string($_POST['agentType'])}')";
$insert = $db->query($sql);
if ($insert) {
echo"";
}
//close connection
$db->close();
?>
How do I do that after I successfully added the values on my database?

If you're not using AJAX to call addAgent.php and your PHP and HTML are in one file, then one way would be to set a variable in your PHP like so:
if ($insert) {
$alert_success = '<div class="alert alert-success" role="alert">...</div>';
}
Then anywhere in your HTML you can add a line that echos that variable.
<?php
echo $alert_success;
?>

You could use a submit handler for your form:
// Add an ID to your form
$( "#formID" ).submit(function( event ) {
// Stop form from submitting normally
event.preventDefault();
// Get some values from elements on the page:
var $form = $( this ),
term = $form.find( "input[name='s']" ).val(),
url = $form.attr( "action" );
// Send the data using post
var posting = $.post( url, { s: term } );
// Put the results in a div
posting.done(function( data ) {
$(".modal-body, #orModalBodyID"). append('<div class="alert alert-success" role="alert">Post Success</div>')
});
});
You can find more information on jQuery's post() method # their API documentation website

Develop Reference

JavaScript is the programming language of the Web.

Display success message after submit form modal - javascript

Related

Redirect modal form (PHP-JS-HTML5)

how to preview input form of a modal in another modal before submit in php

Populate modal with a mysql query reult data

cannot insert data from Database to Modal PHP

Show Bootstrap's Alert on successful Submit

Categories

Resources