My Contact form submit button not working - javascript

I'm trying send email from contact form by fetching data from another page ( Home Page - Index.php). But my contact didn't perform action which redirect the another page.
When I click On submit Button It didn't work.
<form method="post" id="form" class="contact-form" action="/contact.php">
<input type="hidden" name="_method" value="search">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input class="form-control" id="name" name="name" placeholder="Name" type="text" required>
<span class="alert-error"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input class="form-control" id="email" name="email" placeholder="Email*" type="email" required>
<span class="alert-error"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input class="form-control" id="contact" name="contact" minlength="10" maxlength="10" placeholder="Contact Number*" type="text" required>
<span class="alert-error"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input class="form-control" id="contact" name="subject" placeholder="Subject*" type="text" required>
<span class="alert-error"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group comments">
<textarea class="form-control" id="comments" name="message" placeholder="Tell Us About Your Project *" required></textarea>
</div>
</div>
<div class="col-md-12">
<button type="submit" name="submit" id="submit">
Send Message <i class="fa fa-paper-plane"></i>
</button>
</div>
<!-- Alert Message -->
<!-- <div class="col-md-12">
<div id="message" class="alert-msg"></div>
</div> -->
</div>
</form>
Please help me out.

Most Probably you have error in contact.php. try to switch on error_reporting, just add these lines at the top of contact.php file:
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

Related

How to submit values of a php form and a javascript pop up?

I have created a PHP page which have some form information and at the end of the form i have a submit button. I know how to take all the user inputs from the form using the PHP post method. My problem is the following, how can i create a mini pop up form which will pop up after the user clicks the submit button. The pop up form will ask from the user if the submission of the information is urgent or not, the user will just choose between urgent or not urgent and click a button in the mini pop up form("proceed") that will close the pop up and send all information of the user inputs along with the pop up in a different PHP page. Can someone please guide with this problem?
The source code of my form at the moment is the following
<?php include "includes/tasksheader.php"; ?>
<link href="https://fonts.googleapis.com/css?family=Oleo+Script:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Teko:400,700" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="main1">
<div class="contact-section">
<div class="container">
<form>
<div class="col-md-6 form-line">
<div class="form-group">
<label for="exampleInputUsername">Social Ensuarance Number</label>
<input type="text" class="form-control" id="" placeholder="Ensuarance Number">
</div>
<div class="form-group">
<label for="exampleInputEmail">Land Regisrty Department</label>
<input type="email" class="form-control" id="exampleInputEmail" placeholder="Land Registry">
</div>
<div class="form-group">
<label for="telephone">Income Tax Office</label>
<input type="tel" class="form-control" id="telephone" placeholder="Tax Office">
</div>
<div class="form-group">
<label for="telephone">Court</label>
<input type="tel" class="form-control" id="telephone" placeholder="Court">
</div>
<div class="form-group">
<label for="telephone">Limassol District Administration</label>
<input type="tel" class="form-control" id="telephone" placeholder="District Administration">
</div>
<div class="form-group">
<label for="telephone">Municipality</label>
<input type="tel" class="form-control" id="telephone" placeholder="Municipality">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="exampleInputUsername">VAT Department</label>
<input type="text" class="form-control" id="" placeholder="VAT">
</div>
<div class="form-group">
<label for="exampleInputEmail">RCB Bank</label>
<input type="email" class="form-control" id="exampleInputEmail" placeholder="RCB Bank">
</div>
<div class="form-group">
<label for="telephone">Hellenic Bank</label>
<input type="tel" class="form-control" id="telephone" placeholder="Hellenic Bank">
</div>
<div class="form-group">
<label for="telephone">Bank of Cyprus</label>
<input type="tel" class="form-control" id="telephone" placeholder="Bank of Cyprus">
</div>
<div class="form-group">
<label for="telephone">CDB Bank</label>
<input type="tel" class="form-control" id="telephone" placeholder="CDB Bank">
</div>
<div class="form-group">
<label for="telephone">Other</label>
<input type="tel" class="form-control" id="telephone" placeholder="Other">
</div>
</div>
<div class="form-group">
<label for ="description"> Message</label>
<textarea class="form-control" id="description" placeholder="Enter Your Message"></textarea>
<div>
<button type="button" class="btn btn-default submit"><i class="fa fa-paper-plane" aria-hidden="true"></i> Send Message</button>
</div>
</div>
</form>
</div>
</div>
</div>
Thanks in regards
I'm guessing you'll need to do the following:
first create the popup form(having two buttons...) then you'll need to write the following in your javascript file:
$('form').on("submit", function(e){
e.preventDefault();
$('popup').fadeIn();
...
}
or
$('button').on("click", function(e){
e.preventDefault();
$('popup').fadeIn();
...
}
then in your popup you'll again need to preventDefault and do whatever is on your intention.
I hope it helps:)
You could change the button to a submit button and set an onsubmit for the form:
<button type="submit">
<form method="post" onsubmit="openPopup();return false">
And then use javascript to open the popup with all the data you need.
I hope this helps.

I am not Getting Any Errors but When i am trying to click on Form my form Type Mouse does not appear

My form is Getting no Errors on Chrome Developers Error code but i am not getting and Text field or anything in my forms it is a very easy task but it had become a headache for me i will be very Helpfull if you help me with this
<section class="reservation">
<img class="img-responsive section-icon hidden-sm hidden-xs" src="{{ asset('frontend/images/icons/reserve_color.png') }}">
<div class="wrapper">
<div class="container-fluid">
<div class=" section-content">
<div class="row">
<div class="col-md-5 col-sm-6">
<form class="reservation-form" method="post" action="{{ route('resrvation.reserve') }}">
{{ csrf_field() }}
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<input type="text" class="form-control reserve-form empty iconified" name="name" id="name"
placeholder="  Name">
</div>
<div class="form-group">
<input type="email" name="email" class="form-control reserve-form empty iconified" id="email" placeholder="  e-mail">
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group">
<input type="tel" class="form-control reserve-form empty iconified" name="phone" id="phone" placeholder="  Phone">
</div>
<div class="form-group">
<input type="text" class="form-control reserve-form empty iconified" name="dateandtime" id="datetimepicker1" placeholder=" Time">
</div>
</div>
<div class="col-md-12 col-sm-12">
<textarea type="text" name="message" class="form-control reserve-form empty iconified" id="message" rows="3" placeholder="  We're listening"></textarea>
</div>
<div class="col-md-12 col-sm-12">
<button type="submit" id="submit" name="submit" class="btn btn-reservation">
<span><i class="fa fa-check-circle-o"></i></span>
Make a reservation
</button>
</div>
</div>
</form>
</div>
Just added BS cdn and copied your code. Everything looks fine and i see all the fields, did you include CDN as required??
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section class="reservation">
<img class="img-responsive section-icon hidden-sm hidden-xs" src="{{ asset('frontend/images/icons/reserve_color.png') }}">
<div class="wrapper">
<div class="container-fluid">
<div class=" section-content">
<div class="row">
<div class="col-md-5 col-sm-6">
<form class="reservation-form" method="post" action="{{ route('resrvation.reserve') }}">
{{ csrf_field() }}
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<input type="text" class="form-control reserve-form empty iconified" name="name" id="name" placeholder="  Name">
</div>
<div class="form-group">
<input type="email" name="email" class="form-control reserve-form empty iconified" id="email" placeholder="  e-mail">
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group">
<input type="tel" class="form-control reserve-form empty iconified" name="phone" id="phone" placeholder="  Phone">
</div>
<div class="form-group">
<input type="text" class="form-control reserve-form empty iconified" name="dateandtime" id="datetimepicker1" placeholder=" Time">
</div>
</div>
<div class="col-md-12 col-sm-12">
<textarea type="text" name="message" class="form-control reserve-form empty iconified" id="message" rows="3" placeholder="  We're listening"></textarea>
</div>
<div class="col-md-12 col-sm-12">
<button type="submit" id="submit" name="submit" class="btn btn-reservation">
<span><i class="fa fa-check-circle-o"></i></span>
Make a reservation
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>

Display a part of the page by the hash in the url using jQuery

Well, this project came to my mind cause of this problem:
When I hit the register button, the PHP script is gonna process it and it displays error but the page is gonna be at the login form.
The interface:
The idea now:
If the url has some parameter in it, process it into the jQuery, and display the requested page from the url.
Example: someurl.com/#login - then display the Login Page
someurl.com/#register - then display the Register Page
Tried solution (jQuery):
$(function() {
// get the `hash` from the url
var url = window.location.hash;
// display the page
$(url).show();
}
My codes right now:
The script:
$(function() {
var url = window.location.hash;
$(url).show();
$('#login-form-link').click(function(e) {
$("#login-form").delay(100).fadeIn(100);
$("#register-form").fadeOut(100);
$('#register-form-link').removeClass('active');
$(this).addClass('active');
e.preventDefault();
$(document).prop('title', 'Login | Prospekt');
});
$('#register-form-link').click(function(e) {
$("#register-form").delay(100).fadeIn(100);
$("#login-form").fadeOut(100);
$('#login-form-link').removeClass('active');
$(this).addClass('active');
e.preventDefault();
$(document).prop('title', 'Register | Prospekt');
});
});
The forms:
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="panel panel-login">
<div class="panel-heading">
<div class="row">
<div class="col-xs-6">
Login
</div>
<div class="col-xs-6">
Register
</div>
</div>
<hr>
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
<form id="login-form" action="http://phpoll.com/login/process" method="post" role="form" style="display: block;">
<div class="form-group">
<input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Username" value="">
</div>
<div class="form-group">
<input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Password">
</div>
<div class="form-group text-center">
<input type="checkbox" tabindex="3" class="" name="remember" id="remember">
<label for="remember"> Remember Me</label>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<input type="submit" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-login" value="Log In">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-lg-12">
<div class="text-center">
Forgot Password?
</div>
</div>
</div>
</div>
</form>
<form id="register-form" action="http://phpoll.com/register/process" method="post" role="form" style="display: none;">
<div class="form-group">
<input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Username" value="">
</div>
<div class="form-group">
<input type="email" name="email" id="email" tabindex="1" class="form-control" placeholder="Email Address" value="">
</div>
<div class="form-group">
<input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Password">
</div>
<div class="form-group">
<input type="password" name="confirm-password" id="confirm-password" tabindex="2" class="form-control" placeholder="Confirm Password">
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<input type="submit" name="register-submit" id="register-submit" tabindex="4" class="form-control btn btn-register" value="Register Now">
</div>
</div>
</div>
</form>
</div>
</div>
<!--
<hr>
<div class="alert alert-warning alert-dismissible">
×
Username is required! <br>
Password is required!
</div>
-->
</div>
</div>
</div>
</div>
</div>
After you get your hash from the url, call the click() event corresponding to that hash after declaring the click handlers.
$(function() {
$('#login-form-link').click(function(e) {
$("#login-form").delay(100).fadeIn(100);
$("#register-form").fadeOut(100);
$('#register-form-link').removeClass('active');
$(this).addClass('active');
e.preventDefault();
$(document).prop('title', 'Login | Prospekt');
});
$('#register-form-link').click(function(e) {
$("#register-form").delay(100).fadeIn(100);
$("#login-form").fadeOut(100);
$('#login-form-link').removeClass('active');
$(this).addClass('active');
e.preventDefault();
$(document).prop('title', 'Register | Prospekt');
});
var url = window.location.hash;
$(url + '-form-link').click();
});

Returning POST message is not appearing where it should

I followed this great tutorial on how to build a contact form. Everything works great except the success/error messages, instead of appearing above the fields like they should they appears in a 'separate page' i.e mysite.com/contacts.php
I copy paste the contact.php and just updated $from & $to values and removed the last name and phone fields from the fields array, tocontact.jsi didn't made any changes. the file that is a bit different is the index.php here is the code index.php:
<!-- contact -->
<div class="contact wowload fadeIn">
<div class="container">
<h2 class="text-center">Contact us</h2>
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<form id="contact-form" method="post" action="contact.php" role="form">
<div class="messages"></div>
<div class="form-group">
<input id="name" name="name" type="text" class="form-control" placeholder="name" required="required" data-error="enter your name">
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<input id="email" name="email" type="email" class="form-control" placeholder="email*" required="required">
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<textarea id="message" name="message" class="form-control" placeholder="message" rows="5" required="required"></textarea>
<div class="help-block with-errors"></div>
</div>
<div>
<p class="text-muted"><strong>*</strong> These fields are required.</p>
</div>
<button type="submit" class="btn btn-success"><i class="fa fa-send-o"></i> Submit</button>
</form>
</div>
</div>
</div>
</div>
<!-- contact -->
Why the message not appear where it should, Thanks.

stop refresh when form is submitted if any error and refresh if no error

I have 2 forms log in and sign up written on same index.php and they toggle according to the users need.The log in form appears when you open index.php while the sign up form is hidden and appears only when you click on signup here link.
Now my issue is that while signing up if there is any error(validation,database error) then the page refreshes when submit button is clicked obviously and returns to my login form which appears when you open/refresh index.php.Again I have to click on signup here link to solve the errors.
I just want to stay on signup form when errors appear that means I dont want the page to be refreshed when clicked on submit but want the errors to appear and solve them then and there.
$.ajax({
type: "POST",
url: "phpindex.php",
data: $("#signUpForm").serialize(),
success:function(data)
{
if ("#error".val(data))
{
e.preventDefault();
}
}
});
});
My validation and database code is written in phpindex.php
***************signup form************************
<form method="post" id="signUpForm">
<div class="container" id="signupContainer">
<h1>Sign Up</h1>
<div id="error"><?php if ($error!="") {
echo '<div class="alert alert-danger" role="alert">'.$error.'</div>';
} ?></div>
<div class="form-group row">
<label class="col-sm-2 form-control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="name" placeholder="Your name">
<span class="fa fa-user"></span>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 form-control-label">Address1</label>
<div class="col-sm-10">
<input type="text" id="address1" class="form-control" name="address1" placeholder="Home address">
<span class="fa fa-map-marker"></span>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 form-control-label">Address2</label>
<div class="col-sm-10">
<input type="text" id="address2" class="form-control" name="address2" placeholder="City,Pincode....">
<span class="fa fa-map-marker"></span>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 form-control-label">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="email" placeholder="Email Address">
<span class="fa fa-envelope"></span>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 form-control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" name="password" placeholder="Password">
<span class="fa fa-key"></span>
</div>
</div>
<div class="form-group row">
<div class="col-sm-offset-5 col-sm-10">
<input type="submit" id = "submit1"class="btn btn-success btn-lg" value="Sign In" name="submit">
</div>
</div>
<p><a class="toggleForms">Back to Log in</a></p>
</div>
</form>
***************login form*****************
<form method="post" id="logInForm">
<div class="container" id="logInContainer">
<h1>Log In</h1>
<div id="success"><?php if ($success!="") {
echo '<div class="alert alert-success" role="alert">'.$success.'</div>';
} ?></div>
<div class="form-group row">
<label class="col-sm-3 form-control-label">Emai</label>
<div class="col-sm-8">
<input type="email" class="form-control" placeholder="Email" name="email">
<span class="fa fa-envelope"></span>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 form-control-label">Password</label>
<div class="col-sm-8">
<input type="password" class="form-control" placeholder="Password" name="password">
<span class="fa fa-key"></span>
</div>
</div>
<div class="form-group row">
<div class="col-sm-offset-4 col-sm-10">
<input type="hidden" name="signUp" value="0">
<input type="submit" id = "submit2" class="btn btn-success btn-lg" value="Log In" name="submit">
</div>
</div>
<p><a class="toggleForms">Sign Up Here</a></p>
</div>
</form>
Firstly, there are numerous errors in the code you have submitted. I believe they are mainly due to clumsy copy and pasting, but there is one that I think you just have in your code, and it is the missing jQuery reference for "#error".
"#error".val(data)
I think you wanted to write something like this
$("#error").val(data)
This error would stop "preventDefault" from happening.
Secondly, I wonder where is your submit handler for those forms and how it looks like. If you have none, then there is you answer. You just do not catch the submit event.
Lastly, I would consider calling, instead of preventDefault:
return false
Please see this thread as for the reasons why
event.preventDefault() vs. return false

Categories