Don't refresh page after submit - javascript

I have a site http://gamepoll.net and I want that when I click Create Poll, the page doesn't refresh. This is the HTML code:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>League of Legends Straw Poll</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1 class="text-center">Game Straw Poll</h1>
</div>
</div>
<br>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="panel panel-default">
<div class="panel-body">
<form name="submitForm" id="submitForm" action="" method="post">
<div class="row">
<div class="col-md-12">
<select class="form-control" id="theme" name="game" onchange="ChangeBackground();">
<option selected disabled>Select your Game...</option>
<option value="League_of_Legends">League of Legends</option>
<option value="Heartstone">Hearthstone</option>
</select>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12">
<div class="input-group">
<input type="text" class="form-control" name="question" id="question" placeholder="Start typing your question...">
<span class="input-group-addon">
<i class="glyphicon glyphicon-question-sign"></i>
</span>
</div>
</div>
</div>
<br>
<div class="row">
<div class="form-group form-group-options col-md-12 col-sm-12 col-xs-12">
<div class="input-group input-group-option col-md-12 col-sm-12 col-xs-12">
<input type="text" name="option[]" id="option" class="form-control" placeholder="Options...">
<span class="input-group-addon input-group-addon-remove">
<span class="glyphicon glyphicon-remove"></span>
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="checkbox">
<label>
<input type="checkbox" id="choice" name="choice" value="Yes">Allow multiple choice
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button type="submit|button" class="btn btn-primary btn-lg pull-left" name="submit_button" id="submit_button" onclick="SubmitForm();" data-toggle="modal" data-target="#myModal">Create Poll</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Poll created</h4>
</div>
<div class="modal-body">
<p>Share it: http://gamepoll.net/<?php echo $rand_value; ?></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button>
<button type="button" class="btn btn-primary">Invia</button>
</div>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type='text/javascript' src='js/addfield.js'></script>
<script type='text/javascript' src='js/changebackground.js'></script>
<script type='text/javascript' src='norefresh.js'></script>
</body>
</html>
JS Code
function SubmitForm(e) {
e.preventDefault();
var game = $("#game").val();
var question = $("#question").val();
var option = $("#option").val();
$.post("submit.php", { game: game, question: question, option: option },
}
submit.php Code
<?php
//Include configuration file
include('includes/config.php');
//Define variables
$question=$_POST['question'];
$game=$_POST['game'];
$option=$_POST['option'];
$choice=$_POST['choice'];
//Generate random number
$rand_value=rand();
//Create temporary folder
mkdir($rand_value);
//Copy page of Ask Poll
copy('page.php', $rand_value . '/page.php');
rename($rand_value . '/page.php', $rand_value . '/index.php');
//Add data into database
mysql_connect($db_host, $db_username, $db_password) or die ("Errore di connessione!");
mysql_select_db($db_name) or die ("Impossibile selezionare database!");
$sql1="CREATE TABLE `" . $rand_value . "` (Question VARCHAR(200), Options VARCHAR(200), Choice INT(11))";
mysql_query($sql1) or die ("Impossibile eseguire la query!");
//Count number of Options available
$count=count($option);
for ($i=0; $i<($count-1); $i++)
{
${$sql . $i}="INSERT INTO `" . $rand_value . "` (Question, Options, Choice) VALUES ('$question', '$option[$i]', '$choice')";
mysql_query(${$sql . $i});
}
?>
All works perfectly but the only problem is that when i click Create Poll button, the browser redirect me to submit.php blank page
UPDATE
This code doesn't work
function SubmitForm(e) {
e.preventDefault();
var game = $("#game").val();
var question = $("#question").val();
var option = $("#option").val();
$.post("submit.php", { game: game, question: question, option: option }
return false;
}
Can you write me an AJAX function as the last comment says?


place return false; at the end of your SubmitForm function and loose the comma at the end of the last sentence
function SubmitForm(e) {
e.preventDefault();
var game = $("#game").val();
var question = $("#question").val();
var option = $("#option").val();
$.post("submit.php", { game: game, question: question, option: option }
return false;
}


Either place return false; at the end of the function SubmitForm or change onclick="SubmitForm();" to onclick="SubmitForm(); return false;"


You can just add onsubmit="return false;" to your form:
<form onsubmit="return false;">
*****
****
</form>


use Ajax function if you want that the page doesn't refresh on click the "Create Poll" button.
It loads the part of the page without refresh the whole page.

Related

Form submit onClick function not creating options in select menu

function getOption(){
var select = document.getElementById("dynamic-select");
if(select.options.length > 0) {
var option = select.options[select.selectedIndex];
alert("Text: " + option.text + "\nValue: " + option.value);
} else {
window.alert("Select box is empty");
}
}
function addOption(){
var select = document.getElementById("dynamic-select");
select.options[select.options.length] = new Option('New Element', '0', false, false);
}
<!DOCTYPE html>
<html>
<head>
<title>Place Autocomplete Address Form</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.pac-container {
z-index: 10000 !important;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Shipping Method</h2>
<form>
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="optradio" checked>Deliver To *</label>
</div>
</div>
<div class="form-group">
<select id="dynamic-select">
<option value="None">Select Shipping</option>
</select>
</div>
<div class="form-group">
<a data-toggle="modal" data-target="#myModal">Add Delivery Address</a>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><span><i class="fa fa-map-marker" aria-hidden="true"></i></span>Add your Delivery Details</h4>
</div>
<div class="modal-body">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Address</h3>
</div>
<div class="panel-body">
<input id="autocomplete" placeholder="Enter your address"
onFocus="geolocate()" type="text" class="form-control">
<br>
<div id="address">
<div class="row">
<div class="col-md-6">
<label class="control-label">Street address</label>
<input class="form-control" id="street_number">
</div>
<div class="col-md-6">
<label class="control-label">Route</label>
<input class="form-control" id="route">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label">City</label>
<input class="form-control field" id="locality">
</div>
<div class="col-md-6">
<label class="control-label">State</label>
<input class="form-control" id="administrative_area_level_1">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label">Zip code</label>
<input class="form-control" id="postal_code">
</div>
<div class="col-md-6">
<label class="control-label">Country</label>
<input class="form-control" id="country">
</div>
</div>
</div>
<button type="submit" onclick="addOption()">Add NEW</button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
I'm new to Javascript and in this example, basically I have created a Shipping Method Page. In the "ADD Delivery Address" link, on clicking there is a address form which needs to be filled out and after pressing the ADD NEW button, all the address form data should appear in the select menu option like in the picture below. But I'm unable to do so. Can someone please enlighten me on his. It would be a immense help to me.I have tried numerous times, it works with a single field data, but with multiple fields it fails. Thank you

first you created model popup add new button add submit so it submit form.
i have used for adding option into select something like.
var select = document.getElementById("dynamic-select");
var option = document.createElement("option");
option.text = "your text";
option.value = "your value"
function getOption(){
var select = document.getElementById("dynamic-select");
if(select.options.length > 0) {
var option = select.options[select.selectedIndex];
alert("Text: " + option.text + "\nValue: " + option.value);
} else {
window.alert("Select box is empty");
}
}
function addOption(){
var select = document.getElementById("dynamic-select");
var option = document.createElement("option");
var data = getFormData();
var text = data.address + data.street + " " + data.route + " " +data.city + " " +data.postcode
option.text = text;
option.value = "address"
select.add(option);
$('#myModal').modal('hide');
}
function getFormData(){
debugger;
var obj = new Object();
obj.address = document.getElementById("autocomplete").value;
obj.street = document.getElementById("street_number").value;
obj.route = document.getElementById("route").value;
obj.city = document.getElementById("locality").value;
obj.state = document.getElementById("administrative_area_level_1").value;
obj.postcode = document.getElementById("postal_code").value;
return obj;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Place Autocomplete Address Form</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.pac-container {
z-index: 10000 !important;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Shipping Method</h2>
<form>
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="optradio" checked>Deliver To *</label>
</div>
</div>
<div class="form-group">
<select id="dynamic-select">
<option value="None">Select Shipping</option>
</select>
</div>
<div class="form-group">
<a data-toggle="modal" data-target="#myModal">Add Delivery Address</a>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><span><i class="fa fa-map-marker" aria-hidden="true"></i></span>Add your Delivery Details</h4>
</div>
<div class="modal-body">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Address</h3>
</div>
<div class="panel-body">
<input id="autocomplete" placeholder="Enter your address"
onFocus="" type="text" class="form-control">
<br>
<div id="address">
<div class="row">
<div class="col-md-6">
<label class="control-label">Street address</label>
<input class="form-control" id="street_number">
</div>
<div class="col-md-6">
<label class="control-label">Route</label>
<input class="form-control" id="route">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label">City</label>
<input class="form-control field" id="locality">
</div>
<div class="col-md-6">
<label class="control-label">State</label>
<input class="form-control" id="administrative_area_level_1">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label">Zip code</label>
<input class="form-control" id="postal_code">
</div>
<div class="col-md-6">
<label class="control-label">Country</label>
<input class="form-control" id="country">
</div>
</div>
</div>
<button type="button" onclick="addOption()">Add NEW</button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>

First thing, your are using button type="submit" it is going to post back, Just use <button onclick="addOption()">Add NEW</button>
Secondly the <form> either you remove model from <form> tag or use return false in addOption() function
Third use jquery map() function to collect all fields value in side addOption()
Check this code :
function getOption() {
var select = document.getElementById("dynamic-select");
if (select.options.length > 0) {
var option = select.options[select.selectedIndex];
alert("Text: " + option.text + "\nValue: " + option.value);
} else {
window.alert("Select box is empty");
}
}
function addOption() {
var select = document.getElementById("dynamic-select");
var newListItem = $("#myModal input").map(function () { return $(this).val(); }).get();
select.options[select.options.length] = new Option(newListItem, '0', false, false);
$('#myModal').modal('toggle');
return false;
}
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Shipping Method</h2>
<form>
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="optradio" checked>Deliver To *
</label>
</div>
</div>
<div class="form-group">
<select id="dynamic-select">
<option value="None">Select Shipping</option>
</select>
</div>
<div class="form-group">
<a data-toggle="modal" data-target="#myModal">Add Delivery Address</a>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><span><i class="fa fa-map-marker" aria-hidden="true"></i></span>Add your Delivery Details</h4>
</div>
<div class="modal-body">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Address</h3>
</div>
<div class="panel-body">
<input id="autocomplete" placeholder="Enter your address" type="text" class="form-control">
<br>
<div id="address">
<div class="row">
<div class="col-md-6">
<label class="control-label">Street address</label>
<input class="form-control" id="street_number">
</div>
<div class="col-md-6">
<label class="control-label">Route</label>
<input class="form-control" id="route">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label">City</label>
<input class="form-control field" id="locality">
</div>
<div class="col-md-6">
<label class="control-label">State</label>
<input class="form-control" id="administrative_area_level_1">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label">Zip code</label>
<input class="form-control" id="postal_code">
</div>
<div class="col-md-6">
<label class="control-label">Country</label>
<input class="form-control" id="country">
</div>
</div>
</div>
<button type="button" onclick="addOption()">Add NEW</button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
Here is the new entered address in select :

onClick function not creating option in select menu

function getOption(){
var select = document.getElementById("dynamic-select");
if(select.options.length > 0) {
var option = select.options[select.selectedIndex];
alert("Text: " + option.text + "\nValue: " + option.value);
} else {
window.alert("Select box is empty");
}
}
function addOption(){
var select = document.getElementById("dynamic-select");
select.options[select.options.length] = new Option('New Element', '0', false, false);
}
<!DOCTYPE html>
<html>
<head>
<title>Place Autocomplete Address Form</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.pac-container {
z-index: 10000 !important;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Shipping Method</h2>
<form>
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="optradio" checked>Deliver To *</label>
</div>
</div>
<div class="form-group">
<select id="dynamic-select">
<option value="None">Select Shipping</option>
</select>
</div>
<div class="form-group">
<a data-toggle="modal" data-target="#myModal">Add Delivery Address</a>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><span><i class="fa fa-map-marker" aria-hidden="true"></i></span>Add your Delivery Details</h4>
</div>
<div class="modal-body">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Address</h3>
</div>
<div class="panel-body">
<input id="autocomplete" placeholder="Enter your address"
onFocus="geolocate()" type="text" class="form-control">
<br>
<div id="address">
<div class="row">
<div class="col-md-6">
<label class="control-label">Street address</label>
<input class="form-control" id="street_number">
</div>
<div class="col-md-6">
<label class="control-label">Route</label>
<input class="form-control" id="route">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label">City</label>
<input class="form-control field" id="locality">
</div>
<div class="col-md-6">
<label class="control-label">State</label>
<input class="form-control" id="administrative_area_level_1">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label">Zip code</label>
<input class="form-control" id="postal_code">
</div>
<div class="col-md-6">
<label class="control-label">Country</label>
<input class="form-control" id="country">
</div>
</div>
</div>
<button type="submit" onclick="addOption()">Add NEW</button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
I'm new to Javascript and in this example, basically I have created a Shipping Method Page. In the "ADD Delivery Address" link, on clicking there is a address form which needs to be filled out and after pressing the ADD NEW button, all the address form data should appear in the select menu option like in the picture below. But I'm unable to do so. Can someone please enlighten me on his. It would be a immense help to me. Thank you

This is line bug, id newopt don't exist in html.
var newopt = $('#newopt').val();

Display success message after submit form modal

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>

Send data from AJAX function to PHP file

I have an AJAX function that take data form a submit form and should pass varaibles to process.php
index.html is the main page
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>League of Legends Straw Poll</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1 class="text-center">Game Straw Poll</h1>
</div>
</div>
<br>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="panel panel-default">
<div class="panel-body">
<!-- FORM -->
<form name="form" id="form" method="post">
<div class="row">
<div class="col-md-12">
<!-- GAME -->
<select class="form-control" id="game-group" name="game" onchange="ChangeBackground();">
<option selected disabled>Select your Game...</option>
<option value="League_of_Legends">League of Legends</option>
<option value="Heartstone">Hearthstone</option>
</select>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12">
<!-- QUESTION -->
<div class="input-group" id="question-group">
<input type="text" class="form-control" name="question" id="question" placeholder="Start typing your question...">
<span class="input-group-addon">
<i class="glyphicon glyphicon-question-sign"></i>
</span>
</div>
</div>
</div>
<br>
<div class="row">
<!-- OPTIONS -->
<div class="form-group form-group-options col-md-12 col-sm-12 col-xs-12">
<div class="input-group input-group-option col-md-12 col-sm-12 col-xs-12" id="options-group">
<input type="text" name="option[]" id="option" class="form-control" placeholder="Options...">
<span class="input-group-addon input-group-addon-remove">
<span class="glyphicon glyphicon-remove"></span>
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<!-- CHOICE -->
<div class="checkbox" id="choice-group">
<label>
<input type="checkbox" id="choice" name="choice" value="Yes">Allow multiple choice
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button type="button" class="btn btn-primary btn-lg pull-left" name="submit_button" id="submit_button" data-toggle="modal" data-target="#myModal">Create Poll</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Poll created</h4>
</div>
<div class="modal-body">
<p>Share it: http://gamepoll.net/<?php echo $rand_value; ?></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button>
<button type="button" class="btn btn-primary">Invia</button>
</div>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type='text/javascript' src='js/addfield.js'></script>
<script type='text/javascript' src='js/changebackground.js'></script>
<script type='text/javascript' src='magic.js'></script>
</body>
</html>
This is magic.js file
$(document).ready(function()
{
$("#submit_button").click(function()
{
var game = $("#game-group:selected").val();
var question = $("#question").val();
var option = $("#option[]").val();
var choice = $("#choice").val();
if (game == '' || question == '' || option == '' || choice == '')
{
alert("Insertion Failed Some Fields are Blank....!!");
}
else
{
// Returns successful data submission message when the entered information is stored in database.
$.post("process.php", {
game1: game,
question1: question,
option1: option,
choice1: choice
},
function(data)
{
alert(data);
$('#form')[0].reset(); // To reset form fields
});
}
});
});
And this is process.php file
<?php
//Include configuration file
include('includes/config.php');
//Define variables
$game2=$_POST['game'];
$question2=$_POST['question'];
$option2=$_POST['option'];
$choice2=$_POST['choice'];
//Generate random number
$rand_value=rand();
//Create temporary folder
mkdir($rand_value);
//Copy page of Ask Poll
copy('page.php', $rand_value . '/page.php');
rename($rand_value . '/page.php', $rand_value . '/index.php');
//Add data into database
mysql_connect($db_host, $db_username, $db_password) or die ("Errore di connessione!");
mysql_select_db($db_name) or die ("Impossibile selezionare database!");
$sql1="CREATE TABLE `" . $rand_value . "` (Question VARCHAR(200), Options VARCHAR(200), Choice INT(11))";
mysql_query($sql1) or die ("Impossibile eseguire la query!");
//Count number of Options available
$count=count($option);
for ($i=0; $i<($count-1); $i++)
{
${$sql . $i}="INSERT INTO `" . $rand_value . "` (Question, Options, Choice) VALUES ('$question2', '$option2[$i]', '$choice2')";
mysql_query(${$sql . $i});
}
?>
The problem is that the AJAX function doesn't pass data to process.php in fact i don't see any folder into my server or data saved into the database

change
var option = $("#option[]").val();
to
var option = $("#option").val();
you have assign [] operater in id selecter

Your javascript property names dont match your php array keys:
{
game1: game,
question1: question,
option1: option,
choice1: choice
}
$game2=$_POST['game'];
$question2=$_POST['question'];
$option2=$_POST['option'];
$choice2=$_POST['choice'];
change one or the other, eg:
{
game: game,
question: question,
option: option,
choice: choice
}

The only issue I see is when calling the POST vars in your php you need to use the key names from your object. Not the variable names.
//Define variables
$game2=$_POST['game1'];
$question2=$_POST['question1'];
$option2=$_POST['option1'];
$choice2=$_POST['choice1'];
Hope this helps!

How to keep the email and password if the browser is refreshed in my keep logged in function?

I want to do is to keep the email and password in the modal dialog login page if I click the checkbox button and if I refresh the same page and click the modal dialog again the email and password should be still there.
My problem is if I sign in in my login modal dialoge box and checked the keep me logged checkbox and click the button and refreshed the page again the email and password I've typed are gone it wasn't there anymore.
Does anyone here know how to keep what I typed in the email and password in my modal dialog box if I checked the checkbox keep me logged in button?
Whole html code:
<?php
session_start();
$unm=isset($_SESSION['email'])?$_SESSION['email']:'default_username';
$pwd=isset($_SESSION['password'])?$_SESSION['password']:'default_password';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap/css/bootstrap.css" />
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="bootstrap/js/jquery-1.11.0.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript"> <!--submit form script-->
$(document).ready(function(){
$('#sumbit').on('click', function(){
window.location.replace("profile.php");
$('.modal').modal('hide');
});
$('[name="chkbox"]').on('click', function(){
$.post( "savestate.php", { email: $('[name="email"]').val(), email: $('[name="password"]').val() }).done(function( data ) {
alert( "Data Loaded: " + data );
});
});
});
</script>
</head>
<body>
<a data-toggle="modal" href="#myModal"><span class="glyphicon glyphicon-user"></span> Login</a>
<div class="container">
<div class="row">
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h5 class="modal-title">PLEASE ENTER YOUR EMAIL ADDRESS AND PASSWORD TO LOG IN.</h5>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-md-9">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
<input type="text" name="email" value="<?php echo $unm; ?>" class="form-control" placeholder="Enter Email Address..." />
</div>
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password</label>
<div class="col-md-9">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
<input type="password" name="password" value="<?php echo $pwd; ?>"" class="form-control" placeholder="Enter Password..." />
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="checkbox" name="chkbox" value="staylogged" class="checkbox-inline" />
<label> Keep me logged in</label> <b>|</b>
Forgot your password?
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" id="submit" name="login" class="btn btn-primary" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-user"></span> Login</button>
<button type="button" id="show_signup_md" class="btn btn-info" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-list-alt"></span> Register</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
savestate.php
<?php
session_start();
$_SESSION['email']=$_POST['email'];
$_SESSION['password']=$_POST['password'];
$unm=isset($_SESSION['email'])?$_SESSION['email']:'default_username';
$pwd=isset($_SESSION['password'])?$_SESSION['password']:'default_password';
?>

You set variables in server side when user clicks check button.Probably by using AJAX.
And then use them in your page when you display the page.
Here is jquery:
$(document).ready(function(){
$('#sumbit').on('click', function(){
window.location.replace("profile.php");
$('.modal').modal('hide');
});
$('[name="chkbox"]').on('click', function(){
if(!$(this).attr('checked'))return;
$.post( "/savestate.php", { email: $('[name="email"]').val(), password: $('[name="password"]').val() }).done(function( data ) {
// alert( "Data Loaded: " + data );
});
});
});
Here is savestate.php
session_start();
$_SESSION['email']=$_POST['email'];
$_SESSION['password']=$_POST['password'];
You can reuse in your php page as
$unm=isset($_SESSION['email'])?$_SESSION['email']:'default_username';
$pwd=isset($_SESSION['password'])?$_SESSION['password']:'default_password';

Why don't use instead jQuery's plugin for cookies?
http://plugins.jquery.com/cookie/
In general terms, it is a really bad practice to store the password in the cookie but if you wan't to do it, I'm no one to tell you not to do it.
Another better solution will be store the information in the session of PHP. Here is a good tutorial of this. Although a still better solution will be store the session in database, so your app is stateless.
Using jQuery's plugin will be as easy as:
jQuery(function () {
$("#email").val($.cookie("unm"));
$("#password").val($.cookie("pwd"));
});
In this way, if there is something in the cookie, the value will be that, otherwise, will be blank. Or you can do
$("#email").val($.cookie("unm") || "Default value for usermane");
To set a default value if the return of that cookie is null (or empty).

You can also use local storage (http://www.w3schools.com/html/html5_webstorage.asp) but I recommend using a server side option.

Categories

Resources