We Keep Coding

Simple send form for whatsapp

I'm creating a simple form to send messages to a specific WhatsApp contact. I was trying to use a javascript, but I'm not getting it, the link is not going the way I want.
I'm using the following code:
$(function() {
$('#send-message-whatsapp').on('click', 'button', function(e) {
e.preventDefault();
const $form = $("#send-message-whatsapp");
const phone = '559999999999';
const nome = $form.children('input[name="nome"]').val();
const email = $form.children('input[name="email"]').val();
const wpp = $form.children('input[name="wpp"]').val();
const cep = $form.children('input[name="cep"]').val();
const rua = $form.children('input[name="rua"]').val();
const bairro = $form.children('input[name="bairro"]').val();
const complemento = $form.children('input[name="complemento"]').val();
const action = "https://wa.me/" + phone + "?text=" + nome + email + wpp + cep + rua + bairro + complemento;
$form.attr('action', action);
$form.attr('target', '_blank');
$form.submit();
});
});
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<form id="send-message-whatsapp">
<div class="form-label-group">
<input type="text" name="nome" class="form-control" placeholder="Seu nome" required="" autofocus="">
<label for="nome">Nome completo</label>
</div>
<div class="form-label-group">
<input type="email" name="email" class="form-control" placeholder="Seu e-mail" required="" autofocus="">
<label for="inputEmail">Seu E-mail</label>
</div>
<div class="form-label-group">
<input type="text"name="wpp" class="form-control" placeholder="Seu e-mail" required="" autofocus="">
<label for="wpp">Seu Número/WhatsApp</label>
</div>
<div class="form-label-group">
<input type="text" id="cep" name="cep" class="form-control" placeholder="Seu cep" required="" autofocus="">
<label for="cep">Seu CEP</label>
</div>
<div class="form-label-group">
<input type="text" id="rua" name="rua" class="form-control" placeholder="Sua Rua" required="" autofocus="">
<label for="rua">Nome da sua Rua</label>
</div>
<div class="form-label-group">
<input type="text" id="bairro" name="bairro" class="form-control" placeholder="Seu Bairro" required="" autofocus="">
<label for="rua">Bairro</label>
</div>
<div class="form-label-group">
<input type="text" name="complemento" class="form-control" placeholder="Complemento" required="" autofocus="">
<label for="rua">Complemento</label>
</div>
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
When I click on send the link does not go with the filled texts ..
This form will be used to capture leads in an internal campaign for my company.
Also if you have any solution in PHP I would like to know if you can help me ...
Sorry my english, i'm using translator...

From MDN:
Multiple query parameters are separated by & instead of the initial ?.
The first URL parameter is denoted by a ? at the end of the URL path. After that, additional parameters are given using &.
For example: https://www.example.com?param1=a&param2=b
As Deepak Kamat said, you may also wish to look into encoding your URL parameters.

Just use serializeArray to get an array of the fields (convert it to object), then make an array for the text and then join() it with your separator, plus dont forget encodeURIComponent else user could inject own params.
$(function() {
$('#send-message-whatsapp').on('click', 'button', function(e) {
e.preventDefault();
const $form = $("#send-message-whatsapp");
const phone = '559999999999';
// get object i.e {key: 'value'} of form
let data = {}
$form.serializeArray().forEach(v => data[v.name] = v.value)
// make the ?text= payload,
// - could use .filter() here too if you dont want empty values
const text = [
data.nome,
data.email,
data.wpp,
data.cep,
data.rua,
data.bairro,
data.complemento
].join(' - ') // change to what you want sep to be
// make the url
const action = "https://wa.me/" + phone + "?text=" + encodeURIComponent(text);
console.log(action)
/*
$form.attr('action', action);
$form.attr('target', '_blank');
$form.submit();
*/
});
});
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<form id="send-message-whatsapp">
<div class="form-label-group">
<input type="text" name="nome" class="form-control" placeholder="Seu nome" required="" autofocus="">
<label for="nome">Nome completo</label>
</div>
<div class="form-label-group">
<input type="email" name="email" class="form-control" placeholder="Seu e-mail" required="" autofocus="">
<label for="inputEmail">Seu E-mail</label>
</div>
<div class="form-label-group">
<input type="text" name="wpp" class="form-control" placeholder="Seu e-mail" required="" autofocus="">
<label for="wpp">Seu Número/WhatsApp</label>
</div>
<div class="form-label-group">
<input type="text" id="cep" name="cep" class="form-control" placeholder="Seu cep" required="" autofocus="">
<label for="cep">Seu CEP</label>
</div>
<div class="form-label-group">
<input type="text" id="rua" name="rua" class="form-control" placeholder="Sua Rua" required="" autofocus="">
<label for="rua">Nome da sua Rua</label>
</div>
<div class="form-label-group">
<input type="text" id="bairro" name="bairro" class="form-control" placeholder="Seu Bairro" required="" autofocus="">
<label for="rua">Bairro</label>
</div>
<div class="form-label-group">
<input type="text" name="complemento" class="form-control" placeholder="Complemento" required="" autofocus="">
<label for="rua">Complemento</label>
</div>
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
As data is key value you could also do the following to create a nicer message:
$(function() {
$('#send-message-whatsapp').on('click', 'button', function(e) {
...
// uppercase first letter of Key: value i.e:
/*
[
"Nome: ",
"Email: ",
"Wpp: ",
"Cep: ",
"Rua: ",
"Bairro: ",
"Complemento: "
]
*/
let text = []
$form.serializeArray().forEach(v => text.push(v.name.charAt(0).toUpperCase() + v.name.slice(1) + ': ' + v.value))
// make the url, join text with a new line
const action = "https://wa.me/" + phone + "?text=" + encodeURIComponent(text.join('\n'));
...
});
});
Then your message will look like:
Nome: Loz C
Email: internet-way#example.com
Wpp: Don't know what this is
Cep: Don't know what this is
Rua: Don't know what this is
Bairro: Full of chavs
Complemento: It's ayyok

Fix button to stay disable until user checks a checkbox as well

<form action="add.php" method="post" onsubmit="return ValidationEvent()">
<input type="email" placeholder="Email" class="js-email" name="email" value="<?=formDisplay(getSessionValue("er_email"))?>" required>
<input type="text" placeholder="Zip Code" class="js-zip" name="zip" value="<?=formDisplay(getSessionValue("er_zip"))?>" required>
<input type="text" placeholder="First Name" class="js-name" name="firstname" value="<?=formDisplay(getSessionValue("er_first"))?>" required>
<input type="text" placeholder="Last Name" class="js-lname" name="lastname" value="<?=formDisplay(getSessionValue("er_last"))?>" required>
<input type="password" id="password" placeholder="Password" class="js-pass" name="password" required>
<input type="password" id="confirm" placeholder="Confirm Password" class="js-pass" name="confirm" required>
<span class="textLeft flex alignCenter terms">
<input type="checkbox" name="terms" value="yes" required>
<span>
<span>I agree</span>
</span>
</span>
<span class="textLeft flex alignCenter terms">
<input type="checkbox" name="term" value="yes">
<span>
<span>Keep me posted</span>
</span>
</span>
<center>
<input class="disabled white cbtn1 c1" type="submit" id="submit-btn" value="START MY ORDER" disabled>
</center>
<?php
unset($_SESSION['er_email']);
unset($_SESSION['er_zip']);
unset($_SESSION['er_first']);
unset($_SESSION['er_last']);
?>
</form>
Javascript:
(function() {
$('form > input').keyup(function() {
var empty = false;
$('form > input').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$('#submit-btn').attr('disabled', 'disabled').addClass('disabled').removeClass('orangeBtn');
} else {
$('#submit-btn').removeAttr('disabled').removeClass('disabled').addClass('orangeBtn');;
}
});
})()
As you can see from the image, the button gets enabled once you enter all the input fields, I tried with my javascript above for it to also be display until I check "I agree", even if the "keep me posted" was unchecked, but for some reason the it gets enabled before the user clicks "I agree" , how can I fix this?

if empty or checkbox not checked keep it disabled.
if (empty || !$('input[name="terms"]').is(':checked')) {
$('#submit-btn').attr('disabled', 'disabled').addClass('disabled').removeClass('orangeBtn');
} else {
$('#submit-btn').removeAttr('disabled').removeClass('disabled').addClass('orangeBtn');;
}
You are checking if inputs have values. the checkbox has a value "Yes" so it validates as true.

this is because you have skipped if checkbox is checked or not, so you have to add that check too:
var checkbox = $('form > input[type=checkbox]:checked').length;
$('form > input').each(function() {
if ($(this).val() == '' && checkbox == 0 ) {
empty = true;
}
});

This is simple example of how to enable and disable a button.
This might help you implement your logic.
$("#testCheckBox").click(function(){
if(this.checked) {
$("#testBtn").removeAttr("disabled");
} else {
$("#testBtn").prop("disabled", true);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="checkbox" id="testCheckBox">
<button id="testBtn" disabled="true">Click It</button>

Email validation for specific domain not working

I have the following form
register.php
<form class="form" action="home.php" method ="POST" enctype="application/x-www-form-urlencoded">
<input type="email" name="email" placeholder="Email Address" id="email"/>
home.php
<script = "text.javasccript>
$('button').on('click', function(){
str = $('input').val();
str = str.split('#').slice(1);
var allowedDomains = [ 'correct.com' ];
if ($.inArray(str[0], allowedDomains) !== -1) {
alert(str + ' is allowed');
}else{
alert('not allowed');
}
});
</script>
I know this question has been asked before but there are no actual answers for it. Where do I integrate the following function to work with the registration form
THIS IS NEW, EDITED CODE BUT DOESNT WORK CAN ANYONE HELP?
My only output message is the one saying that the domain is not allowed even when I type the 'allowed' domain in. Here is my code:
register.php
<fieldset style = "border-radius:30px;">
<legend>Your Personal Details:</legend>
<form class="form" action="staffhome.php" method ="POST" enctype="application/x-www-form-urlencoded">
<br> <input type="text" name="forename" placeholder ="Forename" id="forename"style = "display:inline; float:left;margin-left:5%;"/>
<input type="text" name="surname" placeholder="Surname" id="surname"style = "display:inline; float:left;margin-left:5%;"/>
<input type="email" name="email" placeholder="Email Address" id="email"style = "display:inline; float:left;margin-left:5%;"/><br /><br><br><br>
<script type = "text/javascript">
$('form').on('submit', function(e){
str = $('input').val();
str = str.split('#').slice(1);
var allowedDomains = [ 'wearecallidus.com' ];
if ($.inArray(str[0], allowedDomains) !== -1) {
alert(str + ' is allowed');
}else{
alert('not allowed');
e.preventDefault();
}
});
</script>
<input type="text" name="phone" placeholder="Phone Number" id="phone"style = "display:inline;margin-right:2.5%"/>
<input type="text" name="ext" placeholder="Extension Number" id="ext"style = "display:inline;margin-left:2.5%;"/><br>
</br>
<hr style="border-top: dotted 1px;" />
<br> <input type="text" name="securityq" placeholder="Security Question" id="securityq" size ="32" maxlength ="60" style = "display:inline;"/>
<input type="text" name="securitya" placeholder="Security Answer" id="securitya" size="32"style = "display:inline;"/><br />
<br><input type="password" name="password" id="password" value="" size="32" placeholder="Type A Password" minlength="6"/><br><br>
<input type="password" name="password-check" id="password-check" value="" size="32" placeholder ="Re-Type Your Password" minlength="6"/><br>
</br>
<input id="button" type="submit" value="Register" disabled="disabled" name="submit">
</fieldset>
I get the same output message every time no matter what the input, can anyone tell me why?

I would do this if I were to have the js in the same page instead of externalising it:
<!DOCTYPE html>
<html>
<head>
<title>Form example</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
var allowedDomains = [ 'correct.com' ];
$('#myForm').on('submit', function(e) { // when the form is submitted
var str = $('#email').val(),
domain = str.split('#')[1]; // split on # and take the second part
if ($.inArray(domain, allowedDomains) == -1) {
alert(domain+' not allowed');
e.preventDefault(); // stop form submission
}
});
});
</script>
</head>
<body>
<div id="content">
<form id="myForm" class="form" action="home.php" method ="POST" enctype="application/x-www-form-urlencoded">
<input type="email" name="email" placeholder="Email Address" id="email"/>
<input type="submit" />
</form>
</div>
</body>
</html>
Example
$(function() {
var allowedDomains = ['correct.com'];
$('#myForm').on('submit', function(e) {
var str = $('#email').val(),
domain = str.split('#')[1];
if (!domain) domain="An empty domain"
$("#emailmsg").html("").hide()
if ($.inArray(domain, allowedDomains) == -1) {
$("#emailmsg").html(domain + ' not allowed').show();
e.preventDefault(); // stop form submission
}
});
});
#emailmsg { display:none; color:red }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="content">
<form id="myForm" class="form" action="home.php" method="POST" enctype="application/x-www-form-urlencoded">
<input type="email" name="email" placeholder="Email Address" id="email" /> <span id="emailmsg"></span><br/>
<input type="submit" />
</form>
</div>
Using your form after removing the disabled from the submit and added ID="myForm" and a span:
var allowedDomains = ['correct.com'];
function checkEmail(emailId) {
var $email=$("#"+emailId);
var str = $email.val(),domain = str.split('#')[1];
if (!domain) domain = "Empty domain";
if ($.inArray(domain, allowedDomains) == -1) {
$email.attr("placeholder", domain + ' not allowed').addClass("redborder");
}
else {
$email.attr("placeholder", "Email address").removeClass("redborder");
}
}
$(function() {
$('#myForm').on('submit', function(e) {
if (!checkEmail("email")) e.preventDefault(); // stop form submission
});
$("#email").on("keyup, blur",function() { checkEmail("email"); } );
});
.redborder {
border: 1px solid red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<fieldset style="border-radius:30px;">
<legend>Your Personal Details:</legend>
<form id="myForm" class="form" action="staffhome.php" method="POST" enctype="application/x-www-form-urlencoded">
<br>
<input type="text" name="forename" placeholder="Forename" id="forename" style="display:inline; float:left;margin-left:5%;" />
<input type="text" name="surname" placeholder="Surname" id="surname" style="display:inline; float:left;margin-left:5%;" />
<input type="email" name="email" placeholder="Email Address" id="email" style="display:inline; float:left;margin-left:5%;" />
<br>
<br>
<br>
<br>
<input type="text" name="phone" placeholder="Phone Number" id="phone" style="display:inline;margin-right:2.5%" />
<input type="text" name="ext" placeholder="Extension Number" id="ext" style="display:inline;margin-left:2.5%;" />
<br>
</br>
<hr style="border-top: dotted 1px;" />
<br>
<input type="text" name="securityq" placeholder="Security Question" id="securityq" size="32" maxlength="60" style="display:inline;" />
<input type="text" name="securitya" placeholder="Security Answer" id="securitya" size="32" style="display:inline;" />
<br />
<br>
<input type="password" name="password" id="password" value="" size="32" placeholder="Type A Password" minlength="6" />
<br>
<br>
<input type="password" name="password-check" id="password-check" value="" size="32" placeholder="Re-Type Your Password" minlength="6" />
<br>
</br>
<input id="button" type="submit" value="Register" name="mySubmit">
</fieldset>

If you're validating with javascript, I suggest having the script in the same page as the form. Also, since its javascript, why not do it dynamically instead of having to wait for the user to submit?
$('form').on('submit', function(e){
str = $('input').val();
str = str.split('#').slice(1);
var allowedDomains = [ 'correct.com' ];
if ($.inArray(str[0], allowedDomains) !== -1) {
alert(str + ' is allowed');
}else{
alert('not allowed');
e.preventDefault();
}
});
Working fiddle:
https://jsfiddle.net/j84mqq6k/1/

Try with this using jQuery.
var email = $("#email").val();
var atpos = email.indexOf("#");
var dotpos = email.lastIndexOf(".");
if (email === null || email === "") {
alert('Please enter email address.!');
$('#email').focus();
} else if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= email.length) {
alert('Please enter valid email address.!');
$('#email').focus();
}

Prepending only if the div isn't showing?

Basically, I want to prepend a div only if the div I'm prepending isn't already showing.
$(".loginForm").submit(function() {
var username = $("input.username").val();
var password = $("input.password").val();
var errorvisible = $("body").has(".alert.error");
if (!username || !password && errorvisible == false) {
$('body').prepend("<div class=\"error alert\">One or more field(s), have been left empty</div>");
setTimeout(function() {
$('.error.alert').fadeOut('1000', function() {
$('.error.alert').remove();
});
}, 6000);
event.preventDefault();
}
});
At the moment, I'm trying to make it so the jquery will only do the if empty if statement if the error isn't currently visible however it's not working...
<div class="pageCont">
<div class="title">
<h1>LetsChat</h1>
<h4>The new way of interaction.</h4>
</div>
<div class="login box">
<form method="POST" action="#" class="loginForm">
<input type="text" class="loginInput username" placeholder="Aquinas Email or Number" /><br>
<input type="password" class="loginInput password" placeholder="Password" /><br>
<div class="checkBox">
<input type="checkbox" id="checkBoxLink">
<label for="checkBoxLink">Remember Me</label>
Forgotten your password?
</div>
<input type="submit" value="Submit" class="login btn green" />
<input type="reset" value="Clear Fields" class="reset btn green" />
</form>
</div>
<div class="signup box">
<form method="POST" action="#" class="signupForm">
<input type="text" class="signupInput" placeholder="First Name" /><br>
<input type="text" class="signupInput" placeholder="Last Name" /><br>
<input type="text" class="signupInput" placeholder="Aquinas Email" /><br>
<input type="password" class="signupInput" placeholder="Password" /><br>
<input type="submit" class="purple btn signup" value="Sign Up Today!">
</form>
</div>
</div>

The below should work if I'm understanding your question correctly?
$(".loginForm").submit(function() {
var username = $("input.username").val();
var password = $("input.password").val();
var errorvisible = $("body").has(".alert.error").length;
if (!username || !password)
{
if(errorvisible == 0)
$('body').prepend("<div class=\"error alert\">One or more field(s), have been left empty</div>");
setTimeout(function() {
$('.error.alert').fadeOut('1000', function() {
$('.error.alert').remove();
});
}, 6000);
event.preventDefault();
}
});

I have used this type of code many times:
if(!$('#myFancyDiv').is(':visible')) {
//prepend or do whatever you want here
}
BTW just for clarity, this code checks if 'myFancyDiv' is not visible.

You can check whether the .error.alert elements exists, if so don't do anything else create a new one
$(".loginForm").submit(function() {
var username = $("input.username").val();
var password = $("input.password").val();
var errorvisible = $("body").has(".alert.error");
if (!username || !password && errorvisible == false) {
if (!$('.error.alert').length) {
$('body').prepend("<div class=\"error alert\">One or more field(s), have been left empty</div>");
setTimeout(function() {
$('.error.alert').fadeOut('1000', function() {
$(this).remove();
});
}, 6000);
}
event.preventDefault();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" action="#" class="loginForm">
<input type="text" class="loginInput username" placeholder="Aquinas Email or Number" />
<br>
<input type="password" class="loginInput password" placeholder="Password" />
<br>
<div class="checkBox">
<input type="checkbox" id="checkBoxLink">
<label for="checkBoxLink">Remember Me</label>
Forgotten your password?
</div>
<input type="submit" value="Submit" class="login btn green" />
<input type="reset" value="Clear Fields" class="reset btn green" />
</form>

How to hide/show a text-box base on other text-box in Laravel 4?

Goal
show email confirm when a user start editing the email section.
hide the email confirm text-box if the user doesn't touch it.
Don't do anything if the user only edit the username part.
Edit Form
username* __________________________
email* __________________________
email confirm* _____________________
HTML/BLADE
<div class="form-group">
<label class="col-sm-3 control-label required ">Username </label>
<div class="col-sm-9 form-group float-label-control ">
{{ Form::text('username', isset($user->username) ? $user->username : '' , array('id'=>'form-field-icon-2')); }}
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label required ">Email </label>
<div class="col-sm-9 form-group float-label-control ">
{{ Form::text('email', isset($user->email ) ? $user->email : '' , array('id'=>'form-field-icon-2')); }}
</div>
</div>

HTML
<label> Username </label><br>
<input type="text" name="username"><br>
<label> Email </label><br>
<input type="text" name="email" id="email"><br>
<label id="l-email-conf" > Email Confirm </label><br>
<input type="text" name="email_confirm" disabled="disabled" id="email-conf">
JS
$('#l-email-conf').hide();
$('#email-conf').hide();
$('#email').on('input', function (event) {
var text = $(this).val();
if (text === '') { // If email is empty
$('#email-conf').prop('disabled', true);
} else {
$('#email-conf').prop('disabled', false);
$('#email-conf').show();
$('#l-email-conf').show();
}
});
JSFiddle

Inline javascript could be an elegant solution if you don't want to write a function.
onkeyup and onkeydown events will do the job and you don't need jQuery
<form>
<p>
<label for="email">Email</label>
<input type="text" name="email" id="email" onkeyup="this.parentNode.nextElementSibling.style.display = 'block';" onkeydown="this.parentNode.nextElementSibling.style.display = 'none';"/>
</p>
<p id="confirm-email">
<label for="confirm">Confirm email</label>
<input type="text" name="confirm" id="confirm"/>
</p>
</form>
CSS:
#confirm-email {
display: none;
}
Example: jsFiddle

Say this is your HTML -
<input type="text" name="username">
<input type="text" name="email" id="email">
<input type="text" name="email_confirm" disabled="disabled" id="email-conf">
<script>
// Use jQuery event handlers
$('#email').on('input', function (event) {
var text = $(this).val();
if (text === '') { // If email is empty
$('#email-conf').prop('disabled', true);
} else {
$('#email-conf').prop('disabled', false);
}
});
</script>
jsFiddle
P.S. - U can toggle hide/show instead of disabling also.