Scrol down by pressing button in CSS - javascript

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

Related

Send email from HTML page using JS

I'm trying to send a mail from a html page using the below:
<script>
function sendMail() {
var link = "mailto:email#live.co.uk &subject=" + encodeURIComponent(document.getElementById('myText').value)
+ "&body=" + encodeURIComponent(document.getElementById('myText2').value)
;
window.location.href = link;
}
</script>
<!-- Contact Form -->
<div class="col-md-6 contact">
<form role="form">
<!-- Name -->
<div class="row">
<div class="col-md-6">
<!-- E-Mail -->
<div class="form-group">
<input type="text" class="form-control" placeholder="Your name" id="myText">
</div>
</div>
<div class="col-md-6">
<!-- Phone Number -->
<div class="form-group">
<input type="email" class="form-control" placeholder="Email address">
</div>
</div>
</div>
<!-- Message Area -->
<div class="form-group">
<textarea class="form-control" placeholder="Write you message here..." style="height:232px;" id="myText2"></textarea>
</div>
<!-- Subtmit Button -->
<button type="submit" class="btn btn-send" onclick="sendMail(); return false">
Send message
</button>
</form>
</div>
When I press button to click all of the data ends up in the default mail apps "To:" Text input area. Can anyone tell me how to split out the subject and body correctly?? I'd like these to go into the subject and body sections of the email by default.
Your query string variables should start with "?", not "&".
var link = "mailto:email#live.co.uk?subject=" + encodeURIComponent(document.getElementById('myText').value)
+ "&body=" + encodeURIComponent(document.getElementById('myText2').value)
;

Manipulating the DOM of a collection of divs using Jquery

Am working on the frontend part of an application whereby I have
some form inputs (wrapped in divs). Each div has a button called
Add Beneficiary. Basically when the user clicks on the button, the div
below it should be displayed (which is hidden by default) and the
sequence continues (each button on a div clicked the div below it
displays).
On the button of each div I have writen some logic whereby on click event
a function called addBeneficiary is triggered. I parse the id of the
button clicked. Next in the function I manipulate the DOM by reaching
out to the parent div and displaying it but the logic does not
work.
~ Kindly assist?
Markup
<!--Person One-->
<div class="container mg-t-30" id="beneficiary1">
<div class="row col-11 mx-auto">
<div class="col-12">
<div class="row">
<div class="col-6">
<label> Category</label>
<input type="email" class="form-control" placeholder="Enter email">
</div>
<div class="col-6">
<label>Family Size</label>
<input type="password" class="form-control" placeholder="Password">
</div>
</div>
<div class="row">
<div class="col-12">
<button class="float-right btn btn-primary" id="btnBen1" onclick="addBeneficiary(this.id)">Add Beneficiary</button>
</div>
</div>
</div>
</div>
</div>
<!--Person Two-->
<div class="container mg-t-30" style="display:none;" id="beneficiary1">
<div class="row col-11 mx-auto">
<div class="col-12">
<div class="row">
<div class="col-6">
<label> Category</label>
<input type="email" class="form-control" placeholder="Enter email">
</div>
<div class="col-6">
<label>Family Size</label>
<input type="password" class="form-control" placeholder="Password">
</div>
</div>
<div class="row">
<div class="col-12">
<button class="float-right btn btn-primary" id="btnBen1" onclick="addBeneficiary(this.id)">Add Beneficiary</button>
</div>
</div>
</div>
</div>
</div>
Logic
function addBeneficiary(beneficiary){
let check = $('#' + beneficiary).parents('div').last().prop('id');
//console.log(check);
$("check").css("display", "block");
}
Its not working because both parents div id is "beneficiary1". And you can't use same id with multiple tag. It should be unique like beneficiary1, beneficiary2 & so on... And also little bit change into your script.
function addBeneficiary(beneficiary){
let check = $('#' + beneficiary).parents('div').next('div');
//console.log(check);
check.css("display", "block");
}
jsfiddle https://jsfiddle.net/y2mva6es/

validation form with regex while using Javascript

i'm trying to validate my bootstrap form with regex in javascript. I've started the javascript but don't know the right way to continue the validation with my regular expression. I'm trying to validate every input in my form before submitting it.
If anyone could help me with my issue it would be appreciated.
Thank you very much in advance.
In javascript no Jquery please
John Simmons
HTML (This is my html bootstrap form)
<div class="col-md-6">
<div class="well well-sm">
<form class="form-horizontal" id="form" method="post" onsubmit="return validerForm(this)">
<fieldset>
<legend class="text-center header">Contact</legend>
<div class="form-group">
<div class="col-md-10 col-md-offset-1">
<input id="lastName" name="LN" type="text" placeholder="Nom" autofocus class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-md-10 col-md-offset-1">
<input id="firstName" name="FN" type="text" placeholder="Prenom" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-md-10 col-md-offset-1">
<input id="email" name="email" type="text" placeholder="Courriel" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-md-10 col-md-offset-1">
<input id="phone" name="phone" type="text" placeholder="Téléphone" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-md-10 col-md-offset-1">
<textarea class="form-control" id="message" name="Message" placeholder="Entrez votre message. Nous allons vous répondre le plus tôt que possible." rows="7"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-12 text-center">
<button type="submit" class="btn btn-primary btn-lg">Submit</button>
<input class="btn btn-primary btn-lg" type="reset" onclick="clearForm()" value="Clear">
</div>
</div>
</fieldset>
</form>
</div>
</div>
Javascript (this is my javascript with my regexs, I was thinking about doing a function that would verify every value entered with the regex)
var nameregex = /(^[A-Z][a-z]{1,24})+$/;
var emailregex= /^([A-Za-z])([A-Za-z0-9])+\#([a-z0-9\-]{2,})\.([a-z]{2,4})$/;
function validerForm(form) {
window.onload = function(){
document.getElementById('lastName').focus();
}
var valName = Formulaire.name.value;
var valFirst = Formulaire.firstname.value;
var valEmail = Formulaire.email.value;
var nameValide = validationName(valName);
var firstValide = validationFirstName(valFirst);
var emailValide - validationEmail(valEmail);
}
function validationName(valName){
if(nameregex.test(valName) == true){
}else{
}
}
function clearForm() {
document.getElementById("form").reset();
}
You may use string.match()
i.e.: if (valEmail.match(emailregex)) { do stuff!; }

JQuery Bootstrap Modal auto calculate text field not updating

I have a bootstrap html page that contains already 2 auto update text field functions for its needs. Along with that I added another fields in a modal to complete the page and requires another auto calculation to be populated on a certain text field.
Base form for first and 2nd instance of auto update
<form role="form" id="myForm" action="cashier.php?submit=yes" method="post" data-toggle="validator">
<div class="form-group">
<div class="row">
<div class="col-md-6 col-xs-6">
<div class="form-group">
<label for="exampleInputEmail1">Item</label>
<select onchange="GenPrice(this)" id="items" name="items" class="form-control" required>
<option value="" selected disabled>Select Item</option>
<?php
//some sql function for fetch
echo '<option value="'.$row['sup_eaprice'].'|'.$row['sup_name'].'" required>'.$row['sup_name'].'</option>';
}
}
?>
</select>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6 col-xs-6">
<div class="form-group">
//FIRST INSTANCE AUTO UPDATING TEXT FIELD
<label for="exampleInputEmail1">Price (ea)</label>
<input type="text" class="form-control" id="eaprice" placeholder="No Item Selected" required disabled>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-6">
<div class="form-group">
<label for="exampleInputEmail1">Quantity</label>
<input type="text" class="form-control calculate" onchange="GenTot(this)" name="quantity" id="quantity" placeholder="How many?" pattern="^[0-9]*[1-9][0-9]*$" maxlength="3" data-minlength="1" required>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6 col-xs-6">
<div class="form-group">
//2ND INSTANCE AUTO UPDATING TEXTFIELD
<label for="exampleInputEmail1">Total</label>
<input type="text" class="form-control" id="ztotal" name="ztotal" readonly>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="form-group" align="right">
<button id="submit" type="submit" class="btn btn-primary" name="addcart">Add Cart</button>
</div>
</div>
</form>
Modal window 3rd instance
<!--create confirmation modal window-->
<div class="modal fade" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<b>Final Check</b>
</div>
<div class="modal-body">
<div class="row">
<form role="form" id="purchformx" action="cashier.php?submit=yes" method="post" data-toggle="validator">
<!-- hidden for purpose of change auto calc -->
<input type="hidden" name="thetotal" class="calchange" id="thetotal" value="<?php echo $overall; ?>">
<div class="col-md-6 col-xs-6">
<div class="form-group">
<label for="exampleInputEmail1">Received</label>
<input type="text" class="form-control calchange" name="received" id="received" placeholder="How much given?" pattern="^[0-9]*[1-9][0-9]*$" maxlength="4" data-minlength="1" required>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6 col-xs-6">
<div class="form-group">
//3RD INSTANCE AUTO UPDATE NOT WORKING
<label for="exampleInputEmail1">Change</label>
<input type="text" class="form-control" id="thechange" name="thechange" readonly>
<div class="help-block with-errors"></div>
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
Submit
</div>
</div>
</div>
</div>
<!--end modal-->
JQUERIES
For first instance (working)
<script type="text/javascript">
function GenPrice(data) {
var xprice = data.value;
var zprice = xprice.split("|");
document.getElementById ("eaprice").value = zprice[0];
document.myForm.eaprice.value = zprice[0];
}
</script>
For second instance (working) based from Calculate total value inline form
<script type="text/javascript">
/* total value calculator */
$(document).ready(function () {
//Calculate both inputs value on the fly
$('.calculate').keyup(function () {
var Tot = parseFloat($('#eaprice').val()) * parseInt($('#quantity').val());
if(isNaN(Tot)) Tot = "";
$('#ztotal').val(Tot);
});
//Clear both inputs first time when user focus on each inputs and clear value 00
$('.calculate').focus(function (event) {
$(this).val("").unbind(event);
});
});
</script>
For third instance (not working) based from auto calculate total value
<script type="text/javascript">
$(document).ready(function(){
$('.calchange').change(function(){
var total = 0;
$('.calchange').each(function(){
if($(this).val() != '')
{
total = parseFloat($(this).val()) - parseFloat($('#thetotal').val());
}
});
$('#thechange').html(total);
});
})(jQuery);
</script>
I'm not sure why the 3rd instance which is inside a modal window doesn't auto update at all given ive just made a separate jquery class for it. Thanks in advance for further suggestions.
$('.calchange').change(function(){
var total = 0;
$('.calchange').each(function(){
if($(this).val() != '') {
total += parseFloat($(this).val());
}
});
var totalFinal = total - parseFloat($('#thetotal').val());
$('#thechange').val(totalFinal);
});

Passing content from <textarea> to api controller

I'm trying to pass content from a form (in a modal) to an api_controller. But I can't get the text out of my <textarea>... even with a simple alert
//Simple HTML-BOOTSTRAP form
<div class="modal-dialog modal65resp">
<div class="modal-content">
<!-- modal-header -->
<div class="modal-header">
<h4>New File</h4>
</div>
<!-- modal-body -->
<div class="modal-body">
<form id="newfileform" class="form-horizontal">
<!-- filename -->
<div class="form-group">
<label for="filename" class="col-sm-2 control-label">FileName:</label>
<div class="col-sm-10">
<input name="filename" type="text" class="form-control" id="filename" placeholder="FileName">
</div>
</div>
<!-- TxtArea -->
<div class="form-group">
<label for="txtarea1" class="col-sm-2 control-label">Text:</label>
<div class="col-sm-10">
<textarea type="text" name="txtarea1" id="txtarea1"></textarea>
</div>
</div>
<!-- apath -->
<div class="form-group">
<label for="apath" class="col-sm-2 control-label">Absolute Path:</label>
<div class="col-sm-10">
<input name="savepath" type="text" class="form-control" id="savepath" placeholder="Absolute Path" readonly>
</div>
</div>
</form>
</div>
<!-- modal-footer -->
<div class="modal-footer">
<div class="pull-left">
<div id="info"></div>
</div>
<div class="pull-right">
<a class="btn btn-default " data-dismiss="modal">Cancel</a>
<a class="btn btn-success " onclick="SaveFile()">Save File</a>
</div>
</div>
</div>
</div>
And this is the script I'm trying to get working an a textarea, with CKEditor in use.
//script
<script>
CKEDITOR.replace('txtarea1');
</script>
<script>
function SaveFile()
{
var path = $('#savepath').val()
var filename = $('#filename').val()
var content = $('#txtarea1').val()
alert(content);
}
</script>
You can access your CKEDITOR instance using CKEDITOR.instances.txtarea1 and get the HTML using getData:
CKEDITOR.instances.txtarea1.getData();

Categories