We Keep Coding

Scrol down by pressing button in CSS

I have this html code:
<div class="get-start-area">
<input type="email" class="form-control email" placeholder="name#company.com">
<input type="submit" class="submit" value="Get Started">
</div>
and this js code:
(function() {
'use strict';
var btnScrollDown = document.querySelector('.submit');
function scrollDown() {
var windowCoords = document.documentElement.clientHeight;
(function scroll() {
if (window.pageYOffset < windowCoords) {
window.scrollBy(0, 10);
setTimeout(scroll, 10);
}
if (window.pageYOffset > windowCoords) {
window.scrollTo(0, windowCoords);
}
})();
}
btnScrollDown.addEventListener('click', scrollDown);
})();
After pressing Get Started I need to see contact area, but scroll goes just one second and I can see just nearest block of information. So, how can I change the values in the script to increase time of scroll in page?
And this is html of contact section:
<section class="footer-contact-area section_padding_100 clearfix" id="contact">
<div class="container">
<div class="row">
<div class="col-md-6">
<!-- Heading Text -->
<div class="section-heading">
<h2>Subscribe!</h2>
<div class="line-shape"></div>
</div>
<div class="footer-text">
<p>We`ll send you weekly news to make your app more convinient. Stay tune.</p>
</div>
</div>
<div class="col-md-6">
<!-- Form Start-->
<div class="contact_from">
<form action="#" method="post">
<!-- Message Input Area Start -->
<div class="contact_input_area">
<div class="row">
<!-- Single Input Area Start -->
<div class="col-md-12">
<div class="form-group">
<input type="text" class="form-control" name="name" id="name" placeholder="Your Name" required>
</div>
</div>
<!-- Single Input Area Start -->
<div class="col-md-12">
<div class="form-group">
<input type="email" class="form-control" name="email" id="email" placeholder="Your E-mail" required>
</div>
</div>
<!-- Single Input Area Start -->
<!--
<div class="col-12">
<div class="form-group">
<textarea name="message" class="form-control" id="message" cols="30" rows="4" placeholder="Your Message *" required></textarea>
</div>
</div>
-->
<!-- Single Input Area Start -->
<div class="col-12">
<button type="submit" class="btn submit-btn">Send Now</button>
</div>
</div>
</div>
<!-- Message Input Area End -->
</form>
</div>
</div>
</div>
</div>
</section>
So I can't understand why script doesn't work correctly.

Change this line of JS:
window.scrollBy(0, 10);
to this:
window.scrollBy(0, 1);
Edit:
Or any number lower than 10 for that matter

i want to display two popups, one for error message and other for success message

I'm new to modals, i want to submit a form and then show success popup if user form is validated else want to show error popup. Also my it should execute php file for sending the email to user in background.
So, far i'm successful in executing the php file in background and show the model when user clicks on submit button.
But i want the popup to show when the form is validated. Also i want to use type="submit" instead of type="button" for form submit.
Here's my code :
<!-- javascript code to execute php file -->
<script type="text/javascript">
function executePhp() {
$.post("sendmail.php");
return false;
}
</script>
<!-- javascript code ends -->
<form class="well" action="" method="">
<div class="form-group col-md-6">
<label for="inputPassword4">Full Name</label>
<input type="text" name="name" class="form-control" id="inputPassword4" placeholder="Enter Full Name">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Phone Number</label>
<input type="number" name="mobile" class="form-control" id="inputEmail4" placeholder="Enter Mobile Number">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Email</label>
<input type="email" name="email" class="form-control" id="inputPassword4" placeholder="Enter Your Email">
</div>
</div>
<button type="button" class="btn btn-primary" onclick="executePhp()" style="margin-left: 3%;"
data-toggle="modal" data-target="#myModal">Check</button>
</form>
<!-- Code for popup -->
<!-- Modal -->
<div class="modal fade mymodal" id="myModal" role="dialog">
<div class="modal-dialog mydialog">
<!-- Modal content-->
<div class="modal-content mycontent">
<div class="modal-header myheader">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">Message</h3>
</div>
<div class="modal-body mybody">
<br>
<br>
<h3>Thanks for choosing</h3>
<h4>
Your details will arive by email.
Sit back, we'll get back to you soon.
</h4>
<br>
<br>
</div>
<div class="modal-footer myfooter">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Code for popup end-->
Thank you.

You can use Jquery to achieve this.
In you php you can have two variables before the validation like:
$popup_message = "";
$popup_message_color = "";
Now if the form is validated you can display the modal like this:
$popup_message = "login successfully.";
$popup_message_color = "success";
//Open Modal
echo "<script type='text/javascript'>
$(document).ready(function(){
$('#myModal').modal('show');
});
</script>";
In the modal body you can display the message and color.
<div class="modal-body">
<p class="text-<?php echo $popup_message_color; ?>"><?php echo $popup_message; ?></p>
</div>
The same would be done for if validation fails, just change your message and color to $popup_message_color = "danger";
Note If you are validation to another page then the modal should be in that page and you change the close buttons to a link to go back.
Also php script should come after you loaded the jquery.

Call Javascript function after submit a form and refresh page

I have an onepage website with a form that submits user data by mail using PHP. When the user click on Submit, I need to open an overlay that contains a success message. The problem is that, when the form is submitted and the page refreshed, my overlay automatically desappear and the user does not have the necessary time to close it by himself. Could you help me with this topic?
Thank you!
Here is my form:
<form id="contact-us" method="post" action="#" >
<div class="col-xs-6 wow animated slideInLeft" data-wow-delay=".5s">
<!-- Name -->
<input type="text" name="name" id="name" required class="form" placeholder="Nombre" />
<!-- Email -->
<input type="email" name="mail" id="mail" required class="form" placeholder="E-mail" />
<!-- Subject -->
<input type="text" name="subject" id="subject" required class="form" placeholder="Asunto" />
</div><!-- End Left Inputs -->
<!-- Right Inputs -->
<div class="col-xs-6 wow animated slideInRight" data-wow-delay=".5s">
<!-- Message -->
<textarea name="message" id="message" class="form textarea" required placeholder="Mensaje"></textarea>
</div><!-- End Right Inputs -->
<!-- Bottom Submit -->
<div class="relative fullwidth col-xs-12">
<!-- Send Button -->
<button type="submit" id="submit" name="submit" class="form-btn semibold" onclick="openNav14()">Enviar</button>
</div><!-- End Bottom Submit -->
<!-- Clear -->
<div class="clear"></div>
</form>
Here are my functions:
function openNav14() {
document.getElementById("myNav14").style.width = "100%";
}
/* Close when someone clicks on the "x" symbol inside the overlay */
function closeNav14() {
document.getElementById("myNav14").style.width = "0%";
}

Need Password and username validation for login page

I am having a login page where the i have entered script to check the empty username and password, now want to change the class of password input to "has- error" and also do the same for username if the data entered by he user is wrong, ie if the username entered by the user does not exist in my database then the username field must show error and if the password is wrong the password field must show error. I am new to php and bootstrap which i have used for my page
javascript code is
<!-- Bootstrap Core JavaScript -->
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="../bower_components/metisMenu/dist/metisMenu.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="../dist/js/sb-admin-2.js"></script>
<script src="../dist/js/formValidation.min.js"></script>
<script src="../dist/js/formValidation.js"></script>
<script type="text/javascript">
function validateText(id)
{
if($("#"+id).val()==null || $("#"+id).val()=="")
{
var div = $("#"+id).closest("div");
div.addClass("has-error");
return false;
}
else
{
var div = $("#"+id).closest("div");
div.removeClass("has-error");
return true;
}
}
$(document).ready(function()
{
$("#custbtn").click(function()
{
if(!validateText("cusername"))
{
return false;
}
if(!validateText("cpassword"))
{
return false;
}
$("form#loginfom").submit();
});
});
</script>
the page code is:
<div class="row">
<div class=" col-lg-offset-3 col-lg-3">
<div class=" login-panel panel panel-default">
<div class="panel-heading">
<h3 class="panel-title text-center">Customer Login</h3>
</div>
<div class=" panel-body">
<form role="form" id="loginfom" action="../Connections/Logincust.php" method="post">
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="Username" id="cusername" name="cusername" type="username" autofocus>
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" id="cpassword" name="cpassword" type="password" value="" autofocus>
</div>
<div class="checkbox">
<label>
<input name="remember" type="checkbox" value="Remember Me">Remember Me
</label>
</div>
<!-- Change this to a button or input when using this as a form -->
<button type="button" id="custbtn" class="btn btn-primary btn-lg btn-block"> Login </button>
</fieldset>
</form>
</div>
</div>
</div>
</div>
the code for logincust.php

After form submit redirect back to page and show a modal

I'll try to explain this as best as possible.
I have a form that on submit actions on email.php:
<form data-toggle="validator" role="form" method="POST" action="email.php">
<div class="row">
<!-- Full Name -->
<div class="form-group col-lg-4">
<label for="inputName" class="control-label">Name</label>
<input type="text" class="form-control" name="inputName" id="inputName" required>
</div>
<!-- email -->
<div class="form-group col-lg-4">
<label for="inputEmail" class="control-label">Email</label>
<input type="email" class="form-control" name="inputEmail" id="inputEmail" data-error="Incorrect Email Format" required>
</div>
<!-- phone number -->
<div class="form-group col-lg-4">
<label for="inputTel" class="control-label">Phone Number</label>
<input type="text" pattern="(?:\(\d{3}\)|\d{3})[- ]?\d{3}[- ]?\d{4}" name="inputTel" id="inputTel" data-minlength="10" maxlength="15" class="form-control" placeholder="123-456-7890" data-error="(123)-456-7890 | 1234567890 | 123-456-7890">
</div>
<!-- message -->
<div class="form-group col-lg-12">
<label for="content" class="control-label">Message</label>
<textarea name="content" id="content" class="form-control" rows="6" data-minlength="5" data-error="Message Must be longer"></textarea>
</div>
<!-- button -->
<div class="form-group col-lg-12">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
After the form is successfully processed in email.php, I want it to go back to the page the form is located on and show the "thank you" modal I created
currently I have in email.php (after validation):
echo "<script>
$(window).load(function(){
$('#myModal').modal('show');
});
window.location.href="Websitename";
</script>";
This does not work. What happens is the page just gets redirected but does not display the modal.
Can anyone please provide me any assistance?

I think the problem is in
window.location.href="Websitename";
When browser see this line , she will automatically locate the browser which means new request immediately made.
Let me explain :
Your form send request to email.php -----> sends response as a javascript --> javascript request to "website name".
In order to correct this issue , you should put window.location.href inside timeout function and that timeout triggered after window.load .
Please check :
echo "<script>
function deferredFunction(){
window.location.href="Websitename";
}
$(window).load(function(){
$('#myModal').modal('show');
setTimeout(deferredFunction,5000);
});
</script>";
Hope Helps!!