I am making a site for my website and was wondering how to open the modal that the form is in after I submit the form. I am looking for it to open after I hit the submit button so I can see the errors that are put under the inputs or to show that it sent. I have tried to put the javascript inside the result if or else tag and it wont open the modal and just submits the form or presents the errors but you can't see them until you open the modal. So I was wondering how to open it backup after you submit it.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="FiveM roleplay server, with custom vehicles and scripts. Join today!">
<meta name="Keywords" content="aclfx, aclfxserver, fivem, fivem server, roleplay, gtav roleplay, gta v roleplay, fivem roleplay, fivem roleplay server, fort myers roleplay, fmrp, FMRP, fort myers rp">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="../fmrp_test/styles/animate.css" rel="stylesheet" type="text/css">
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/simplebar#latest/dist/simplebar.css" />
<script src="https://unpkg.com/simplebar#latest/dist/simplebar.js"></script>
<link href="https://fonts.googleapis.com/css?family=Overpass" rel="stylesheet">
<link href="../fmrp_test/styles/extra.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<title>FMRP | Applications</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="../fmrp_test/index.html">FMRP</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse ml-auto" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="https://www.fortmyersrp.net/forum/">Forums</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../fmrp_test/help.php">Help</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="../fmrp_test/applications_menu.php">Applications <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</div>
</nav>
<br><br>
<div class="container">
<p>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
<h1 class="title text-center" id="staff">Staff Member Application (Moderator):</h1>
<?php
if (isset($_POST["submit"])) {
$fullname = $_POST['fullname'];
$age = $_POST['age'];
$discord = $_POST['discord'];
$timezone = $_POST['timezone'];
$roleplaydescription = $_POST['roleplaydescription'];
$experence = $_POST['experence'];
$to = 'blakecharlie239#gmail.com';
$subject = 'Staff Form';
$body = "From: $fullname\n Age: $age\n Discord: $discord\n Timezone: $timezone\n How long have you roleplayed: $roleplaydescription\n Past staff experience: $experence";
// Check if name has been entered
if (!$_POST['fullname']) {
$errName = 'Please enter your full name.';
}
// Check if email has been entered and is valid
//Check if message has been entered
if (!$_POST['age']) {
$errage = 'Please enter your age.';
}
if (!$_POST['discord']) {
$errdiscord = 'Please enter your discord tag.';
}
if (!$_POST['timezone']) {
$errtimezone = 'Please enter your timezone.';
}
if (!$_POST['roleplaydescription']) {
$errroleplaydescription = 'Please enter if you have roleplayed before.';
}
if (!$_POST['experence']) {
$errexperence = 'Please enter your level of staff experience.';
}
// If there are no errors, send the email
if (!$errName && !$errage && !$errdiscord && !$errtimezone && !$errroleplaydescription && !$errexperence) {
if (mail ($to, $subject, $body)) {
$result='<div class="alert alert-success">Thank you for the application! Please allow 4-36 hours from the time of submission for a response. Please do not resubmit an application if we do not respond within that timeframe; we may have other priorities.</div>';
} else {
$result='<div class="alert alert-danger">We are sorry, but there was an error sending your message; please try again. If the error keeps occurring, please pm Spartan78942#0877 on discord for help resolving this.</div>';
} echo "<script>
$('.collapse').css('display', 'show !important');
</script>";
}
}
?>
<?php echo "<p class='text-danger'>$result</p>";?>
<div class="row">
<div class="col-md-12 col-lg-12"> <form action="applications_menu.php" method="post">
<div class="form-group">
<label for="exampleInputEmail1">First & last name:</label>
<input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter your first & last name here." name="fullname">
<?php echo "<p class='text-danger'>$errName</p>";?>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Age (MIN 16):</label>
<input type="number" class="form-control" id="exampleInputPassword1" placeholder="Enter your age here." name="age">
<?php echo "<p class='text-danger'>$errage</p>";?>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Discord:</label>
<input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter your discord tag here. Should look like this: [name]#[4 digits] Ex: aclfx#8109" name="discord">
<?php echo "<p class='text-danger'>$errdiscord</p>";?>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Timezone:</label>
<input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter your timezone here." name="timezone">
<?php echo "<p class='text-danger'>$errtimezone</p>";?>
</div>
<div class="form-group">
<label for="exampleInputEmail1">How long have you roleplayed?:</label>
<input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter how long have you been roleplaying." name="roleplaydescription">
<?php echo "<p class='text-danger'>$errroleplaydescription</p>";?>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Past staff experience:</label>
<input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter and describe your past staff experience." name="experence">
<?php echo "<p class='text-danger'>$errexperence</p>";?>
</div>
<br>
<div class="row"><div class="col-lg-12"><button type="submit" name="submit" value="send" class="subbut btn btn-primary mx-auto d-block" style="width: 190px !important;height: 60px !important;font-size: 25px;">Submit</button></div></div></form>
</div>
</div></div>
</div>
</div>
</div>
</body>
</html>
Just add the following code before closing your body tag
It checks if form submitted and if its submitted it adds a javascript code which triggers collapse which shows your form response or errors.
<?php if(isset($_POST['submit'])){
?>
<script type="text/javascript">
jQuery('#collapseExample').collapse({
toggle:true
})
</script>
<?php
}?>
First, your javascript is targeting multiple elements since you use collapse in the navbar too. You need to target #collapseExample instead.
Second, you have to add the show class to the element, not set its display property.
So the proper js is:
$('#collapseExample').addClass('show');
You also have the script inside the "no errors" condition, so it won't run.
And you can do this in php if you want. Move your error checking before the form and if there's any error set a variable.
<?php
if ($errName || $errage) // Boilerplate to set the error
$error = true;
?>
<div class="collapse<?= $error ? ' show' : '' ?>" id="collapseExample">
Hope this is what you are looking for, since I can find no modal in your code.
Related
Please check my code and tell me how to make it when click submits button, it goes to a dashboard page. but it does not work. Help.. I think functions not working. I can't figure out what is the problem. I already create my database and I added details in that database.
(I add database and) I will attach GitHub link too. Please check if you have time.
https://github.com/Dushan26/my_assignment.git
<?php
$host="localhost";
$user="root";
$password="";
$db="project_db";
$connect_error = 'Sorry, we\'re experiencing connection issues.';
$con=mysqli_connect($host,$user,$password);
mysqli_select_db($con, 'project_db') or die(mysqli_error($con));
if(isset($_POST['username'])){
$uname=$_POST['txtUsername'];
$password=$_POST['txtPassword'];
$sql="select * from user where email='".$uname."'AND password='".$password."' limit 1";
$result=mysql_query($sql);
if(mysql_num_rows($result)==1){
echo " You Have Successfully Logged in";
exit();
}
else{
echo " You Have Entered Incorrect Password";
exit();
}
}
?>
<html>
<head>
<title>Online class</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<style>
body{
width: 100%;
height: 400px;
background-image:url(../assets/img/online-class.png);
background-size: cover;
}</style>
</head>
<body>
<div class="container">
<div class="row"><!--row 01-->
<div class="col-sm-9 col-md-7 col-lg-5 mx-auto"><!--row 02-->
<div class="card my-5"> <!-- card-->
<div class="card-body"><!--card body-->
<h5 class="text-center my-2"><b>:::LOGIN:::</h5></b><br>
<form class="form" action="" role="form" method="POST">
<div clss="my-5" id="divEmail"><!--txtusername-->
<input type="text" id="email" name="txtUsername" class="form-control" placeholder="Enter Email">
</div><!--end oftxtusername--><br>
<div clss="my-5" id="divPassword"><!-- password-->
<input type="password" id="password" name="txtPassword" class="form-control" placeholder="Enter Password">
</div><!--end of password--><br>
<div clss="my-4"><!-- button-->
<button type="submit" id="btnSubmit" class="btn btn-danger btn-block text-uppercase col-12">Submit</button>
</div><!--end of button-->
<hr class="my-4"><h6>Enter Your Email & Password</h6>
</form><!--end of form-->
</div><!--end of card body-->
</div><!--end of card-->
</div><!--end row 02-->
</div><!--end of row 01-->
</div><!--end of container-->
I think your submit button is a type of a "submit". when it is inside a form and clicked, by default it submit the form regardless of your click function.
you can change the button type to "button" or change the click function to stop the form submit
$("form").submit(function (e) {
e.preventDefault();
// your code here
});
Good day. I am quite new to JavaScript and JQuery and I’m trying to add a form of validation to some form fields using JQuery.
I wrote a conditional statement that if the FULL NAME field is empty or less than 6, the HTML border-danger class will be added and there will be a message requesting the user to enter his/her full name. Else (if he has entered his full name or the content of the field is greater than 6), the border danger class should be removed and the status variable should be changed to true.
I tried it out on my browsers and it wasn't working.
The trick about it is that when I tried to ask the question here on StackOverflow, on the HTML/JS/CSS code snippet page, it worked. The border-danger class was added to the FULL NAME field when I clicked on the REGISTER button without typing anything in the field.
Please why is it not working on my side? (Chrome and Opera). Is there something i need to enable?
I have attached the code of the registration form (register.php) and that of the JavaScript(main.js). I have also attached a screenshot of the registration form from Chrome.
I’m sure I must have mixed something up.
Please I need help. I’ll really appreciate the help.
Thanks in anticipation
Javascript
$(document).ready(function(){
$("#registration_form").on("submit",function(){
var status = false;
var name = $("#full_name");
var email = $("#email");
var pass1 = $("#password1");
var pass2 = $("#password2");
var type = $("#usertype");
if (name.val() == "" || fullName.length < 6 ) {
name.addClass("border-danger");
$("#u_error").html("<span class='text-danger'>Please enter full name(More than 6 characters).</span>");
status = false;
}else{
name.removeClass("border-danger");
$("#u_error").html("");
status = true;
}
})
})
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Inventory Management System</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="../js/main.js"></script>
</head>
<body>
<!--Include Navbar -->
<?php include_once("./templates/header.php");?>
<div class="container" ">
<div class="card mx-auto" style="width: 30rem; ">
<div class="card-header">Register</div>
<div class="card-body">
<form id="registration_form" onsubmit="return false" autocomplete="off">
<!-- Full Name -->
<div class="form-group">
<label for="full_name">Full Name</label>
<input type="text" name="full_name" class="form-control" id="full_name" placeholder="Enter Full Name">
<small id="u_error" class="form-text text-muted">
</small>
</div>
<!-- Email -->
<div class="form-group">
<label for="email">Email address</label>
<input type="email" name="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email">
<small id="e_error" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<!--Password 1-->
<div class="form-group">
<label for="password1">Password</label>
<input type="password" name="password1" class="form-control" id="password1" placeholder="Password">
<small id="p1_error" class="form-text text-muted"></small>
</div>
<!-- Password 2 -->
<div class="form-group">
<label for="password2">Re-enter Password</label>
<input type="password" name="password2" class="form-control" id="password2" placeholder="Password">
<small id="p2_error" class="form-text text-muted"></small>
</div>
<!-- User type -->
<div class="form-group">
<label for="usertype">Usertype</label>
<select name="usertype" class="form-control" id="usertype">
<option value="">Choose User Type</option>
<option value="Admin">Admin</option>
<option value="Other">User</option>
</select>
<small id="t_error" class="form-text text-muted"></small>
</div>
<button type="submit" name="user_register" class="btn btn-primary"><span class="fa fa-user"></span> Register</button>
<span>Login</span>
</form>
</div>
<!-- Forgot Password? -->
<!--
<div class="card-footer text-muted" >
Forgot Password?
</div> -->
</div>
</div>
<body>
</html>
Few problem with your if condition and code.
You are not checking the length of anything at all
To check the length of input if its less then 6 you can do name.val().length
Also, you do not have to do like name.val() == "" this - just set!name.val() to false which means that there is no value in that input at all.
I could not find a fullName I am sure you want to use name
You can read more about jQuery - .val() here
I have made some changes in your if and now is working fine below. You can do some if else for other input as well the same to validate all the inputs before sending data to your PHP file.
You file directory must be this exact as below: Copy the HTML below and put in index.html and JS in to main.js - I have tested this my wamp64 localserver and all is working fine.
Location of main JS file: file:///C:/wamp64/www/inventory_blessed/public_html/js/main.js
Location of index.html: file:///C:/wamp64/www/inventory_blessed/public_html/index.html
Fiddle Demo: https://jsfiddle.net/usmanmunir/xob1d439/2/
Run snippet below to see it in action:
$(document).ready(function() {
$("#registration_form").on("submit", function() {
var status = false;
var name = $("#full_name");
var email = $("#email");
var pass1 = $("#password1");
var pass2 = $("#password2");
var type = $("#usertype");
if (!name.val() || name.val().length < 6) {
name.addClass("border-danger");
$("#u_error").html("<span class='text-danger'>Please enter full name(More than 6 characters).</span>");
status = false;
} else {
name.removeClass("border-danger");
$("#u_error").html("");
status = true;
}
console.log(status)
})
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Inventory Management System</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<!--Include Navbar -->
<?php include_once("./templates/header.php");?>
<div class="container">
<div class="card mx-auto" style="width: 30rem; ">
<div class="card-header">Register</div>
<div class="card-body">
<form id="registration_form" onsubmit="return false" autocomplete="off">
<!-- Full Name -->
<div class="form-group">
<label for="full_name">Full Name</label>
<input type="text" name="full_name" class="form-control" id="full_name" placeholder="Enter Full Name">
<small id="u_error" class="form-text text-muted">
</small>
</div>
<!-- Email -->
<div class="form-group">
<label for="email">Email address</label>
<input type="email" name="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email">
<small id="e_error" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<!--Password 1-->
<div class="form-group">
<label for="password1">Password</label>
<input type="password" name="password1" class="form-control" id="password1" placeholder="Password">
<small id="p1_error" class="form-text text-muted"></small>
</div>
<!-- Password 2 -->
<div class="form-group">
<label for="password2">Re-enter Password</label>
<input type="password" name="password2" class="form-control" id="password2" placeholder="Password">
<small id="p2_error" class="form-text text-muted"></small>
</div>
<!-- User type -->
<div class="form-group">
<label for="usertype">Usertype</label>
<select name="usertype" class="form-control" id="usertype">
<option value="">Choose User Type</option>
<option value="Admin">Admin</option>
<option value="Other">User</option>
</select>
<small id="t_error" class="form-text text-muted"></small>
</div>
<button type="submit" name="user_register" class="btn btn-primary"><span class="fa fa-user"></span> Register</button>
<span>Login</span>
</form>
</div>
<!-- Forgot Password? -->
<!--
<div class="card-footer text-muted" >
Forgot Password?
</div> -->
</div>
</div>
<body>
</html>
I think the problem is, you are not loading right path of the main.js file at line <script type="text/javascript" src="../js/main.js"></script>. I guess your folder stucture is something like this:
your_folder:
-----| js
----------| main.js
-----| view_folder
----------| index.html
With your current code, maybe the problem you are facing right now is you are using the virtual local likes www.localhost.com/view_folder/index.html I think
So the solutions is, you should try to change the path
from ".../js/main.js" to "/js/main.js", in order to tell the browser to call to "www.localhost.com/js/main.js",
For not facing the bug related to path, I recommend not to use ../.. or ./ on file in script tag or link tag, use /file.js or file.js instead.
../js/main is relative path, so it's will only work well when the file you are opening is also relative path (like double click on html file or directly open the file). All the file path that is included in html file should not be used like that, because the domain maybe different sometime.
To know that your js file path is right or wrong, just try to open the dom in DevTools, and right click, open the link at src="../js/main.js".
Hope it help!
You can try to do it like this
$('#full_name').on('change', function(){
if ($('#full_name').length <6){
$('#full_name').addClass('border-danger');
}
});
This question already has answers here:
jQuery AJAX submit form
(20 answers)
Closed 4 years ago.
I created a contact page.
When I click on the submit button, this form sends my form information to the server-side file (PHP), but the submit button does nothing.
I do not get an answer in the AJAX!
<script type="text/javascript">
$(document).ready(function() {
$('#submit').click(function() {
$('#submit').attr('value', 'Please wait...');
$.post("sender.php", $("#contactform").serialize(), function(response) {
$('#success').html(response);
$('#submit').attr('value', 'SEND');
});
return false;
});
});
</script>
<!doctype html>
<html>
<head>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link href="styles/contactform-style.css" rel="stylesheet" id="contact-from-style" >
<meta charset="utf-8">
<title>My Contact form</title>
</head>
<body>
<section id="contact">
<div class="container prop">
<!-- <div class="well well-sm">
<h3><strong>Contact us Pars Coders </strong></h3>
</div>-->
<div class="row" id="p">
<div class="col-md-7">
<img src="img/email-icon.png" class="img-responsive text-center" alt="Pars Codres" />
</div>
<div class="col-md-5">
<h4><strong>Tmas Ba ma </strong></h4>
<form id="#contactform">
<div class="form-group">
<input type="text" class="form-control" name="name" value="" placeholder="Name">
</div>
<div class="form-group">
<input type="email" class="form-control" name="email" value="" placeholder="E-mail">
</div>
<div class="form-group">
<textarea class="form-control" name="description" rows="3" placeholder="Description"></textarea>
</div>
<button class="btn btn-success" type="submit" name="button" id="submit">
<i class="fa fa-paper-plane-o" aria-hidden="true"></i> Send ...
</button>
<div id="success" style="color: red;">؟</div>
</form>
</div>
</div>
</div>
</section>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
</body>
</html>
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['description'];
$to = 's3dhossein#gmail.com';
$subject = 'the subject';
$message = 'FROM: '.$name.' Email: '.$email.'Message: '.$message;
$headers = 'From: s3dhossein#gmail.com' . "\r\n";
if (filter_var($email, FILTER_VALIDATE_EMAIL)) { // this line checks that we have a valid email address
mail($to, $subject, $message, $headers); //This method sends the mail.
echo "Your email was sent!"; // success message
}else{ echo "Invalid Email, please provide an correct email.";
}
?>
Where do you think the problem is?
Can an error come from AJAX?
Found problems:
1) An error is raised: Error: Bootstrap's JavaScript requires jQuery. It means that the bootstrap's js file must be loaded after the jQuery's js file. So invert their positions:
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
2) An error is raised: ReferenceError: $ is not defined for the line $(document).ready(function () {. This means that the jquery is not recognized inside your script. So bring all the js imports in the page head. The times for the js imports at the bottom of the page are long gone.
3) The form tag must be <form id="contactform">, not <form id="#contactform">.
4) If you are submitting through an ajax request, then you must use a button of type "button", not of type "submit". Then you can remove the return false; from the $('#submit').click(function (){...} function too.
Suggestions:
Define an "error" callback for the ajax request.
Define the meta tags as the first ones in the head tags.
Working code:
<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
<meta charset="UTF-8" />
<!-- The above 3 meta tags must come first in the head -->
<title>My Contact form</title>
<!-- CSS resources -->
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link href="styles/contactform-style.css" rel="stylesheet" id="contact-from-style" >
<!-- JS resources -->
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#submit').click(function () {
$('#submit').attr('value', 'Please wait...');
$.post("sender.php", $("#contactform").serialize(), function (response) {
$('#success').html(response);
$('#submit').attr('value', 'SEND');
});
});
});
</script>
</head>
<body>
<section id="contact">
<div class="container prop">
<!-- <div class="well well-sm">
<h3><strong>Contact us Pars Coders </strong></h3>
</div>-->
<div class="row" id="p">
<div class="col-md-7">
<img src="img/email-icon.png" class="img-responsive text-center" alt="Pars Codres" />
</div>
<div class="col-md-5">
<h4><strong>Tmas Ba ma </strong></h4>
<form id="contactform">
<div class="form-group">
<input type="text" class="form-control" name="name" value="" placeholder="Name">
</div>
<div class="form-group">
<input type="email" class="form-control" name="email" value="" placeholder="E-mail">
</div>
<div class="form-group">
<textarea class="form-control" name="description" rows="3" placeholder="Description"></textarea>
</div>
<button class="btn btn-success" type="button" name="button" id="submit">
<i class="fa fa-paper-plane-o" aria-hidden="true"></i> Send ...
</button>
<div id="success" style="color: red;">؟</div>
</form>
</div>
</div>
</div>
</section>
</body>
</html>
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.
I have a form which i validate via php. this is how i do it:(example is for one 1 field)
elseif (ctype_alpha($firstname) != true)
{
$err_alpha_firstname = "First Name cannot contain numbers";
}
If in case the user does use an alpha numeric firstname, i display the error as :
<p><input type="text" class="span2" maxlength = "20" name="firstname" required id="firstname" placeholder="First Name"></p>
<?php if (isset($err_alpha_firstname)) {echo $err_alpha_firstname;}?>
It all works fine. however since this validation is server side via php, inorder for the errors to show up, i have to submit the form, which then reloads( since the form submits to the page itself) and then the errors are displayed. Now I want those errors which are stored in a php variable ex:$err_alpha_firstname , to be displayed instantaneously via javascript or ajax (i dont know anything about either of the languages so pardon me please). Is there a simple script that would let me display those errors on the fly? I know php is server side and javascript is client side so there might be an issue.
html file:
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">
<title>Fantasy Football</title>
<!-- Bootstrap core CSS -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="bootstrap/css/jumbo.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="jumbotron.css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Fantasy Football</a>
</div>
<div class="navbar-collapse collapse">
<form class="navbar-form navbar-right" method="post" action="checkuser.php" name="check_form">
<div class="form-group">
<input type="text" placeholder="Username" name ="username" id="username" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" name="password" id="password" class="form-control">
</div>
<input type="hidden" name="action" value="submit" />
<button type="submit" class="btn btn-success">Sign in</button>
Forgot Password?
</form>
</div>
</div>
</div>
<div class="jumbotron">
<div class="container">
<h1>Fantasy Football</h1>
<p>Bring out the football manager in you!</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Register »
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">New User Registration</h4>
</div>
<div class="modal-body">
<form class="form-inline" method="post" action="<?php echo $_SERVER['PHP_SELF']?>" name="login_form">
<span id="formerror" class="error"></span>
<p><input type="text" class="span2" maxlength = "20" name="firstname" required id="firstname" placeholder="First Name"></p>
<?php if (isset($err_alpha_firstname)) {echo $err_alpha_firstname;}?>
<p><input type="text" class="span2" maxlength = "20" name="lastname" required id="lastame" placeholder="Last Name"></p>
<?php if (isset($err_alpha_lastname)) {echo $err_alpha_lastname;}?>
<p><input type="text" class="span2" maxlength = "20" name="username" required id="username" placeholder="Username"></p>
<?php if (isset($err_ln_username)) {echo $err_ln_username;}?>
<?php if (isset($err_empty_username)) {echo $err_empty_username;}?>
<?php if (isset($err_alnum_username)) {echo $err_alnum_username;}?>
<?php if (isset($err_unp)) {echo $err_unp;}?>
<p class="help-block" style="font-size:12px"> Username should be between 4-20 characters long.</p>
<p><input type="password" class="span2" name="password" placeholder="Password"></p>
<?php if (isset($err_unp)) {echo $err_unp;}?>
<?php if (isset($err_ln_password)) {echo $err_ln_password;}?>
<?php if (isset($err_alnum_password)) {echo $err_alnum_password;}?>
<p class="help-block" style="font-size:12px"> Password must be between 4-20 characters long. Must be alpha-numeric</p>
<p><input type="password" class="span2" name="password_conf" placeholder="Re - Enter Password"></p>
<?php if (isset($err_passwordconf)) {echo $err_passwordconf;}?>
<p><input type="email" class="span4" name="emailid" required id="emailid" placeholder="Email ID"></p>
<p><input type="text" class="span2" name="team_name" required id="team_name" placeholder="Team name"></p>
<p class="help-block" style="font-size:12px"> Select your Unique team name.</p>
<p>
<select class="secret_question">
<option>Select one of the below ....</option>
<option value ="0">The name of the city where you were born</option>
<option value ="1">The name of your first pet</option>
<option value ="2">What is your mother's maiden name</option>
</select>
</p>
<p><input type="text" class="span2" name="secret_answer" required id="secret_answer" placeholder="Secret Answer"></p>
<p><input type="hidden" value="submit" /><br />
<button type="submit" name="action" value = "submit" class="btn btn-primary">Register</button></p>
</form>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>Rules</h2>
<p>Rules of the Game </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Meet The Developers</h2>
<p>Everyones name get mentioned here </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Contact Us</h2>
<p>have an issue with the game. Click here to contact us.</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
</div>
<hr>
<footer>
<p>© B561 Project Fall 2013</p>
</footer>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<?php include('newuseradd.php');?>
</body>
</html>
You could either use straight JavaScript or AJAX to PHP.
I'm going to show you the straight JS method.
You'd do something like this for each input.
var hint = $("#fname-hint");
var fname = $("#firstname");
fname.on("change", function(){
if (!this.value.match(/\d+/g)) { // dosen't contain numbers
hint.html("");
fname.removeClass("error");
}
else {
fname.addClass("error");
hint.html("Your name can't contain numbers!");
}
});
Now when the form is submitted, make sure there are no errors:
var form = $("#form");
form.submit(function(e) {
var inputs = form.children("input");
inputs.each(function(){
var input = $(this);
if (!input.hasClass("error")) {
alert("Errors in form!");
input.select();
e.preventDefault();
break;
}
});
});
I use the jQuery $.post() function and return json from my php code:
function fail ($message){
die(json_encode(array('status'=>'fail', 'message'=>$message)));
}
function success ($message){
die(json_encode(array('status'=>'success', 'message'=>$message)));
}