Why isn't my php contact form working when I put it in my index.php page
Hello,
I have a contact page in my landing page which uses some php to check whether what has been submitted into the contact form is what is required. If some fields have not been entered, or entered incorrectly, the php sends out an error message, prompting the user to fill the form as required.
The contact part of the landing page is located at the bottom of the page and in html has it's own section ID. The problem is, if a user presses submit after entering text in the content field (and there is missing / incorrect information), the page refreshes and then goes back to the top of the page. The user then needs to scroll down again to see the contact form (and the associated error message). I would like the page to stay at the same point after the submit screen has been pressed. Is there a way to do this?
The page is located here:
http://www.orangutanenglish.orangojapan.com/index1.php
My code is here:
many thanks for reading...
I have a contact page in my landing page which uses some php to check whether what has been submitted into the contact form is what is required. If some fields have not been entered, or entered incorrectly, the php sends out an error message, prompting the user to fill the form as required.
The contact part of the landing page is located at the bottom of the page and in html has it's own section ID. The problem is, if a user presses submit after entering text in the content field (and there is missing / incorrect information), the page refreshes and then goes back to the top of the page. The user then needs to scroll down again to see the contact form (and the associated error message). I would like the page to stay at the same point after the submit screen has been pressed. Is there a way to do this?
The page is located here:
http://www.orangutanenglish.orangojapan.com/index1.php
My code is here:
<?php
/*
This is how we can write comments in PHP. Below we have a '.' after $error as it tells the code to look out for all errors
(not just the last one) The break command has to go where it is to work.
This php script relates to what has been posted in the comments field.
This relates to the Contact Form.
*/
if ($_POST['submit'])
{
if(!$_POST['name']){
$error="<br/>Please enter your name";
}
if(!$_POST['email']){
$error.="<br/>Please enter your email";
}
if(!$_POST['message']){
$error.="<br/>Please enter a message";
}
if(!$_POST['check']){
$error.="<br />Please confirm you are human";
}
if ($error) {
$result='<div class="alert alert-danger" role="alert"><b>whoops, there is an error</b>. Please correct the following:'.$error.'</div>';
}
else{
mail("adamyounis@yahoo.com, admin@orangutanjapan.com, admin@orangutanenglish.com, orangutanenglish@yahoo.com", "Contact message", "
Name: ".$_POST['name']."
Email: ".$_POST['email']."
Message: ".$_POST['message']);
{
$_POST=array();
$result='<div class="alert alert-success" role="alert">Thankyou. OrangutanJapan will get back to you shortly</div>';
}
}
}
?>
<b></b>
<!DOCTYPE html><!-- Orangutan Japan - Orangutan English Site -->
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS __ these are needed to get the bootstrap framework to appear-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<link href='https://fonts.googleapis.com/css?family=Alegreya+Sans:400,500,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/OE_styles.css"><!-- My setup CSS -->
<link rel="stylesheet" href="font-awesome/css/font-awesome.css"><!-- Font Awesome CSS - Needs to be in the 'font awesome' folder and allows you to add font awesome classes and images -->
<link rel="stylesheet" href="css/animate.min.css"><!-- Animate CSS ---need to be in CSS folder to allow you to add animation -->
</head>
<body>
<!-- Opens Navbar -->
<nav class="navbar navbar-fixed-top">
<!-- opens up the nav class and creates a navbar with class where it is fixed to the top of the page even when scrolling -->
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navigation">
☰
</button>
<a class="=navbar-brand float-xs-right float-sm-left" href="index.php"><img src="img/Logo_50x50PNG.png" class="img-fluid"/></a> <!-- moves the logo around depending of the size of screen (small left otherwise right) -->
<div class="collapse navbar-toggleable-xs" id="navigation"> <!-- opens div class collapse navbar-toggleable-xs -->
<ul class="nav navbar-nav float-sm-right">
<li class="nav-item">
<a class="nav-link" href="index.php#social">SOCIAL</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.php#signup">SIGN UP</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.php#signup">SIGN IN</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.php#aboutoj">ABOUT OJ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.php#faq">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.php#resources">RESOURCES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.php">CONTACT</a>
</li>
</ul>
</div><!-- closes div class collapse navbar-toggleable-xs -->
</nav><!-- closes nav class -->
<!-- Closes Navbar -->
<!-- HEADER -->
<section id="header"><!-- header starts - this has all the information relating to the header-->
<div class="container"><!-- section starts -->
<div class="row"><!-- row starts -->
<div class="col-md-6 header-left"><!-- div class col-md-6 starts - THIS IS THE LEFT HALF 6/12 -->
<h1>Orangutan Japan</h1>
<br />
<font color="#FF8000"><h4>Teach English in Japan</h4></font>
<div align="justify"><h5>Private language teachers of all languages (not just English) needed to teach private language lessons in Tokyo, Osaka, Nagoya and across Japan.</h5></div>
<p class="hidden-sm-down">Are you a native speaker of any language living in Japan?
<br>
<div align="justify">Then teach private man to man language lessons to private language students here in Japan. Sign up today and let potential students contact you directly for lessons. You decide your rates and your teaching methods. Starting teaching today.</p></div>
</div> <!-- div class col-md-6 ends-->
<div class="col-md-3">
</div> <!-- div class col-md-3 ends-->
<div class="col-md-3 header-right hidden-sm-down">
<a class="btn btn-primary" href="signup_form1.php" role="button">Register</a>
<p>Already registered? Sign in <a href="signin.php"><font color="#FF8000">here </font></a>to edit your profile</p>
</div> <!-- div class col-md-3 ends-->
</div><!-- row ends-->
</div><!-- container ends-->
</section> <!-- section ends -->
<!-- HEADER ends-->
<!-- SOCIAL-->
<section id="social"> <!-- social section id starts -->
<div class="container"><!-- conatainer (social) starts -->
<div class="row"><!-- row (social) starts -->
<div class="col-md-6"><!-- will take up 6 columns or half the page in md(Medium and above)-->
<h2>Let's get social...</h2>
<hr align="left" width="50%"><!--hr is a horizontal rule(hr) it is normally centred and takes up the whole section -->
<p>Check out Orangutan's social media stuff. Even better, follow us</p>
</div>
<div class="col-md-6"><!-- will take up 6 columns or half the page in md(Medium and above)-->
<ul class="list-inline"> <!-- this class aligns the ul (unordered list) items horizontally-->
<li class="list-inline-item"><a href="https://www.youtube.com/channel/UCGtc95-QK5rIoZ16aUD_K0w" target="_blank" alt="Teach in Japan - Orangutan Japan on YouTube"><i class="fa fa-youtube" aria-hidden="true"></i></a></li>
<li class="list-inline-item"><a href="https://twitter.com/orangutanjapan" target="_blank" alt="Teach in Japan - Orangutan Japan on Twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
<li class="list-inline-item"><a href="https://www.facebook.com/OrangutanJapan2017" target="_blank" alt="Teach in Japan - Orangutan Japan on Facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li class="list-inline-item"><a href="https://plus.google.com/101194049037853618941" target="_blank" alt="Teach in Japan - Orangutan Japan on Google +"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
</ul>
</div>
</div><!-- row (social) ends -->
</div><!-- conatainer (social) ends -->
</section><!-- social section id starts -->
<!-- SOCIAL ends-->
<!--signup-->
<section id="signup"> <!-- signup section -->
<div class="container"><!-- conatainer (who we are) starts -->
<div class="row"><!-- row (who we are row) starts all content to be displayed across a single row-->
<div class="col-md-6"><!-- will take up 6 columns or half the page in md(Medium and above)-->
<h2>Sign Up</h2>
<hr align="left" width="50%"><!--hr is a horizontal rule(hr) it is normally centred and takes up the whole section -->
<p class="lead">New to Orangutan Japan</p>
<p>Add your profile and start teaching language lessons today</p>
<a class="btn btn-who" href="signup_form1.html" role="button">sign up</a><!-- we are adding a button - we are adding a new class 'btn-who or we would just get the standard bootstrap button which we don't want -->
</div>
<div class="col-md-6"><!-- will take up 6 columns or half the page in md(Medium and above)-->
<h2>Sign In</h2>
<hr align="left" width="50%"><!--hr is a horizontal rule(hr) it is normally centred and takes up the whole section -->
<p class="lead">Already registered?</p>
<p>Sign in and update or edit your teaching profile</p>
<a class="btn btn-who" href="signin.html" role="button">sign in</a><!-- we are adding a button - we are adding a new class 'btn-who or we would just get the standard bootstrap button which we don't want -->
</div>
</div><!-- row (who we are) ends -->
</div><!-- conatainer (who we are) ends -->
</section><!-- swho we are section ends -->
<!--signup ends-->
<!--aboutoj-->
<section id="aboutoj"> <!-- aboutojid starts -->
<div class="container"><!-- conatainer (work) starts -->
<div class="row"><!-- row 1 (work) starts all content to be displayed across a single row-->
<div class="col-md-12"><!-- will take up 12 columns or the full page in md(Medium and above)-->
<h2> About OJ</h2>
<hr align="left" width="30%">
</div>
</div><!-- row 1 (work) ends -->
<div class="row"><!-- row 2 (work) starts all content to be displayed across a single row-->
<!-- IMAGE 1-->
<div class="col-md-3 col-sm-6"><!-- so on medium and above its takig up 1 of four rows(12/4=3) on small it's taking up two rows (12/6=2) - extra small are automatically stacked-->
<div class="card">
<div class="work-image"> <!-- creating a class here to make the image styled differently -->
<a href="who_we_are.php"><img class="card-img-top img-fluid" src="img/whoweare.jpg" alt="Card image cap">
<div class="img-overlay">
</div></a>
</div>
<div class="card-block">
<h4 class="card-title">who we are...</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<!-- IMAGE 2-->
<div class="col-md-3 col-sm-6 wow fadeIn" data-wow-delay="0.2s"><!-- so on medium and above its takig up four row(12/3=4) on small it's taking up two rows (12/6=2) - extra small are automatically stacked-->
<div class="card">
<div class="work-image"> <!-- creating a class here to make the image styled differently -->
<a href="how_this_works.php"><img class="card-img-top img-fluid" src="img/howthisworks.jpg" alt="Card image cap">
<div class="img-overlay">
</div></a>
</div>
<div class="card-block">
<h4 class="card-title">how this works...</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<!-- IMAGE 3-->
<div class="col-md-3 col-sm-6 wow fadeIn" data-wow-delay="0.3s"><!-- so on medium and above its takig up four row(12/3=4) on small it's taking up two rows (12/6=2) - extra small are automatically stacked-->
<div class="card">
<div class="work-image"> <!-- creating a class here to make the image styled differently -->
<a href="work_with_us.php"><img class="card-img-top img-fluid" src="img/workwithus.jpg" alt="Card image cap">
<div class="img-overlay">
</div></a>
</div>
<div class="card-block">
<h4 class="card-title">work with us...</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<!-- IMAGE 4-->
<div class="col-md-3 col-sm-6 wow fadeIn" data-wow-delay="0.4s"><!-- so on medium and above its takig up four row(12/3=4) on small it's taking up two rows (12/6=2) - extra small are automatically stacked-->
<div class="card">
<div class="work-image"> <!-- creating a class here to make the image styled differently -->
<a href="our_partners.php"><img class="card-img-top img-fluid" src="img/ourpartners.jpg" alt="Card image cap">
<div class="img-overlay">
</div></a>
</div>
<div class="card-block">
<h4 class="card-title">our partners...</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div><!-- row 2(work) ends -->
</div><!-- conatainer (aboutoj) ends -->
</section><!-- aboutoj section ends -->
<!--faq-->
<section id="faq">
<div class="container text-xs-center">
<div class="row">
<div class="col-md-12">
<a href="faq.php"><h2>Frequently Asked Questions</h2></a>
<a href="faq.php"><i class="fa fa-question-circle-o fa-3x" aria-hidden="true"></i></a>
<hr width = "30%">
<p>Have a question? Here's some of the common ones...</p>
</div>
</div>
</div>
</section>
<!-- resources-->
<section id="resources"> <!-- why section id starts -->
<div class="container text-xs-center"><!-- conatainer (why) starts with all text in container being centred -->
<div class="row"><!-- row (resources - only has the text across 12 columns) starts -->
<div class="col-md-12">
<h2>Resources...</h2>
<hr width = "30%">
<p>For English Language Teachers</p>
</div>
</div>
<div class="row"><!-- row 2 (resources split 3 ways over 12 columns) starts -->
<div class="col-md-4"><!-- will take up 4 columns or a third the page in md(Medium and above)-->
<a href="toefl_resources.php"><i class="fa fa-graduation-cap fa-3x" aria-hidden="true"></i></a>
<a href="toefl_resources.php"><h3>TOEFL / TOEIC</h3></a>
<p>TOEFL and TOEIC resources for teachers</p>
<hr width="33%"><!--hr is a horizontal rule(hr) it is normally centred and takes up the whole section -->
</div>
<div class="col-md-4"><!-- will take up 4 columns or a third the page in md(Medium and above)-->
<a href="terminology_resources.php"><i class="fa fa-meh-o fa-3x" aria-hidden="true"></i></a>
<a href="terminology_resources.php"><h3>Teacher Terminology</h3></a>
<p>Know the terms you're teaching</p>
<hr width="33%"><!--hr is a horizontal rule(hr) it is normally centred and takes up the whole section -->
</div>
<div class="col-md-4"><!-- will take up 4 columns or a third the page in md(Medium and above)-->
<a href="grammar_resources.php"><i class="fa fa-book fa-3x"></i></a>
<a href="grammar_resources.php"><h3>Grammar Guide</h3></a>
<p>Brush up on the rules of the language</p>
<hr width="33%"><!--hr is a horizontal rule(hr) it is normally centred and takes up the whole section -->
</div>
</div>
</div><!-- conatainer ends -->
</section><!-- resources ends-->
<!--CONTACT-->
<section id = "contact">
<div class="container text-xs-center">
<div class="row">
<div class="col-md-6 offset-md-3 transparent-background">
<h2>Contact Us</h2>
<hr width="30%">
<p>Need to get in touch? Fill out the form below...</p>
<?php echo $result;?>
<form method="post" role="form">
<div class="form-group">
<input type="text" name="name" class="form-control" placeholder="Your name" value="<?php echo $_POST['name']; ?>">
</div>
<div class="form-group">
<input type="email" name="email" class="form-control" placeholder="Your email" value="<?php echo $_POST['email']; ?>">
</div>
<div class="form-group">
<textarea name="message" rows="5" class="form-control" placeholder="message..."><?php echo $_POST['message']; ?></textarea>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="check"> I am human
</label>
</div>
<div align="center">
<input type="submit" name="submit" class="btn btn-secondary" value="send message"/>
</div>
</form>
</div>
</div>
</div><!--end the container -->
</section>
<!--End CONTACT-->
<?php
include('footer.php');
?>
<!--End FOOTER-->
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script>
<script src="js/wow.min.js"></script> <!--this is the animate js script we need this for the wow animation -->
<script>
new WOW().init();
</script>
</body>
</html>many thanks for reading...
add a name here
and just put this after validation
it will scroll to that area after refresh when page is loaded on client browser
<a name="CF"></a>
<section id="contact">
...and just put this after validation
<script type='text/javascript'>
$(function(){
location.hash = "#CF";
});
</script>it will scroll to that area after refresh when page is loaded on client browser
or
add a name here
just use this all the time and
and echo 1 in the script above, if you want to scroll to contact form, 0 otherwise...
jQuery is used here
add a name here
<a name="CF"></a>
<section id="contact">
...just use this all the time and
<script type='text/javascript'>
var gotocf = <?php echo 0/1 ?>
$(function(){
if (gotocf==1) location.hash = "#CF";
});
</script>and echo 1 in the script above, if you want to scroll to contact form, 0 otherwise...
jQuery is used here
ASKER
Hi Hainkurt. Thanks for the response. I've tried the second option (as it seemed the simplest:) ). When you said to put the text after validation, would that be after the submit button (just before the form closes?). I have added as follows and also tried adding the second part of the code just after the form closes but neither seemed to return me to the form after refreshing / submitting.
Many thanks.
<!--CONTACT-->
<a name="CF"></a>
<section id = "contact">
<div class="container text-xs-center">
<div class="row">
<div class="col-md-6 offset-md-3 transparent-background">
<h2>Contact Us</h2>
<hr width="30%">
<p>Need to get in touch? Fill out the form below...</p>
<?php echo $result;?>
<form method="post" role="form">
<div class="form-group">
<input type="text" name="name" class="form-control" placeholder="Your name" value="<?php echo $_POST['name']; ?>">
</div>
<div class="form-group">
<input type="email" name="email" class="form-control" placeholder="Your email" value="<?php echo $_POST['email']; ?>">
</div>
<div class="form-group">
<textarea name="message" rows="5" class="form-control" placeholder="message..."><?php echo $_POST['message']; ?></textarea>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="check"> I am human
</label>
</div>
<div align="center">
<input type="submit" name="submit" class="btn btn-secondary" value="send message"/>
</div>
<script type='text/javascript'>
$(function(){
location.hash = "#CF";
});
</script>
</form>
</div>
</div>
</div><!--end the container -->
</section>
<!--End CONTACT-->Many thanks.
do you have jQuery library in your page?
include this in your page
like this
the location of that js is not important and it will run when page load is completed (since wrapped by jQuery DOM ready function)
Uncaught ReferenceError: $ is not defined
at index1.php:370include this in your page
https://code.jquery.com/jquery-3.2.1.min.jslike this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>the location of that js is not important and it will run when page load is completed (since wrapped by jQuery DOM ready function)
A potentially better approach here (and certainly a more modern one) is to submit your FORM using an AJAX request. That way the user will never leave the page so you'll never have the problem you describe.
It's very simple to do. Move all your PHP form processing into a separate file, add an ID to your form and then add the following to a <script> tag:
It's very simple to do. Move all your PHP form processing into a separate file, add an ID to your form and then add the following to a <script> tag:
$(document).ready(function() {
$('#myForm').submit(function(e) {
e.preventDefault();
$.ajax({
url : 'data.php',
data : $(this).serialize(),
method : 'post'
})
.done(function(response) {
$('#result').html(response);
});
});
});
@Chris Stanyon
the suggested solution here involves:
1. creating a new page and add your code to current page
2. copy all related code from this page and paste into new page
3. modifying current page and adding new element to show thank you message if ajax call success (actually posting form and processing data)
4. passing appropriate response from new page (like "error" -but what error?- or "success")
5. removing all server side validation from page and put equivalent jQuery/Javascript version to current page
:)
the suggested solution here involves:
1. creating a new page and add your code to current page
2. copy all related code from this page and paste into new page
3. modifying current page and adding new element to show thank you message if ajax call success (actually posting form and processing data)
4. passing appropriate response from new page (like "error" -but what error?- or "success")
5. removing all server side validation from page and put equivalent jQuery/Javascript version to current page
:)
@HainKurt - the solution I offered is aimed at the Author, not you!
But, regarding your points:
1 & 2: Simply moving your server server-side code from your HTML document to a server -side script is considered good practice and is very common (and in this case would take all of about 10 seconds!)
3: Simply adding a <div id="response"></div> is hardly a task. (your solution suggests adding <a name="CF"></a>!). The current code echoes $result, which will generate a PHP Undefined Variable error! Simply adding a place holder for the result avoids this.
4: That's what AJAX does (read up on it!)
5: That doesn't make sense. The server-side validation doesn't change - it's still in the PHP!
The current code also echoes out the $_POST variables - even when they don't exist - again causing Undefined Variable errors. My solution doesn't need that as you never leave the page.
But, regarding your points:
1 & 2: Simply moving your server server-side code from your HTML document to a server -side script is considered good practice and is very common (and in this case would take all of about 10 seconds!)
3: Simply adding a <div id="response"></div> is hardly a task. (your solution suggests adding <a name="CF"></a>!). The current code echoes $result, which will generate a PHP Undefined Variable error! Simply adding a place holder for the result avoids this.
4: That's what AJAX does (read up on it!)
5: That doesn't make sense. The server-side validation doesn't change - it's still in the PHP!
The current code also echoes out the $_POST variables - even when they don't exist - again causing Undefined Variable errors. My solution doesn't need that as you never leave the page.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks all for the feedback.
@Hainkurt - I had at the very bottom of my page a slightly older version 3.0.0 (at line 436). I updated to 3.2.1 but I still seem to have the same issue of it not returning to the top of the screen after refreshing.
I tried moving the script to within the contact section ID but still seem to have the same issue.
I then tried the third suggestion using -
This 'sort of' worked (and the other may have done the same) in that if I refresh the screen by Ctrl F5 or pressing reload via my mouse, the page returns back to the point where it was last refreshed (which is good). However, when I press the submit button, it then reloads and returns to the top of the screen.
My form is as follows:
Is it an issue with my form potentially?
Chris, Tudor Danes - thanks both. I may come back to your solutions if I don't have any success.
Thanks all.
@Hainkurt - I had at the very bottom of my page a slightly older version 3.0.0 (at line 436). I updated to 3.2.1 but I still seem to have the same issue of it not returning to the top of the screen after refreshing.
I tried moving the script to within the contact section ID but still seem to have the same issue.
I then tried the third suggestion using -
<script type='text/javascript'>
var gotocf = <?php echo 0 ?>
$(function(){
if (gotocf==1) location.hash = "#CF";
});
</script> This 'sort of' worked (and the other may have done the same) in that if I refresh the screen by Ctrl F5 or pressing reload via my mouse, the page returns back to the point where it was last refreshed (which is good). However, when I press the submit button, it then reloads and returns to the top of the screen.
My form is as follows:
<form method="post" role="form">
<div class="form-group">
<input type="text" name="name" class="form-control" placeholder="Your name" value="<?php echo $_POST['name']; ?>">
</div>
<div class="form-group">
<input type="email" name="email" class="form-control" placeholder="Your email" value="<?php echo $_POST['email']; ?>">
</div>
<div class="form-group">
<textarea name="message" rows="5" class="form-control" placeholder="message..."><?php echo $_POST['message']; ?></textarea>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="check"> I am human
</label>
</div>
<div align="center">
<input type="submit" name="submit" class="btn btn-secondary" value="send message"/>
</div>
</form>Is it an issue with my form potentially?
Chris, Tudor Danes - thanks both. I may come back to your solutions if I don't have any success.
Thanks all.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
One other thing to note - looking at your page it seems the integrity hash for jQuery is wrong, so it's not being loaded. It should be the following:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" crossorigin="anonymous"></script>ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks Chris, HainKurt. I'm still struggling to get this to work (I'm not a developer - just learning front end bootstrap and stuff as I go along - I'll maybe learn some ajax stuff in the future...), so I've cheated a bit and just linked 'contact us' text to a single page which replicates the contact section at the bottom of the landing page. That way, when it refreshes and goes back to the top, it's still at the right place.
Best regards,
Adam
Best regards,
Adam
ASKER
Thanks all. Much appreciated.
I dont see any code on page related to solution above... before and after post... no code is rendered, so nothing will happen...
just see
just see
<!--CONTACT-->
<a name="CF"></a>
if it does not work, here is very simple solution :)
just add action="#CF" to your form
give it a try... no other code is required!
just add action="#CF" to your form
<form action="#CF" method="post" role="form">give it a try... no other code is required!
Open in new window
then post to here
Open in new window