Develop Reference

contact form in html and javascript

I would like to ask you for help.
I created a contact form in HTML and JavaScript, but when I try to send the email, it just doesn't do anything, nothing happens.
See the code below:
/*----------------------------------------------------*/
/* contact form
------------------------------------------------------*/
$('form#contactForm button.submit').click(function() {
$('#image-loader').fadeIn();
var contactName = $('#contactForm #contactName').val();
var contactEmail = $('#contactForm #contactEmail').val();
var contactSubject = $('#contactForm #contactSubject').val();
var contactMessage = $('#contactForm #contactMessage').val();
var data = 'contactName=' + contactName + '&contactEmail=' + contactEmail +
'&contactSubject=' + contactSubject + '&contactMessage=' + contactMessage;
$.ajax({
type: "POST",
url: "inc/sendEmail.php",
data: data,
success: function(msg) {
// Message was sent
if (msg == 'OK') {
$('#image-loader').fadeOut();
$('#message-warning').hide();
$('#contactForm').fadeOut();
$('#message-success').fadeIn();
}
// There was an error
else {
$('#image-loader').fadeOut();
$('#message-warning').html(msg);
$('#message-warning').fadeIn();
}
}
});
return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- form -->
<form action="mailto:yuridiamond#icloud.com" method="post" enctype="multipart/form-data" id="contactForm" name="contactForm">
<fieldset>
<div>
<label for="contactName">Nome <span class="required">*</span></label>
<input type="text" value="" size="35" id="contactName" name="contactName">
</div>
<div>
<label for="contactEmail">E-mail <span class="required">*</span></label>
<input type="text" value="" size="35" id="contactEmail" name="contactEmail">
</div>
<div>
<label for="contactSubject">Assunto</label>
<input type="text" value="" size="35" id="contactSubject" name="contactSubject">
</div>
<div>
<label for="contactMessage">Mensagem <span class="required">*</span></label>
<textarea cols="50" rows="15" id="contactMessage" name="contactMessage"></textarea>
</div>
<div>
<button class="submit" action="mailto:yuridiamond#icloud.com">Enviar</button>
<span id="image-loader">
<img alt="" src="images/loader.gif">
</span>
</div> -->
</fieldset>
</form>
<!-- Form End -->
I hope you can help me.
Thank you in advance.
I apologize if it's a simple problem, but I'm still new to programming.

$(document).ready(function(){
$('.submit').click(function() {
$('#image-loader').fadeIn();
var contactName = $('#contactForm #contactName').val();
var contactEmail = $('#contactForm #contactEmail').val();
var contactSubject = $('#contactForm #contactSubject').val();
var contactMessage = $('#contactForm #contactMessage').val();
var data = 'contactName=' + contactName + '&contactEmail=' + contactEmail +
'&contactSubject=' + contactSubject + '&contactMessage=' + contactMessage;
$.ajax({
type: "POST",
url: "inc/sendEmail.php",
data: data,
success: function(msg) {
if (msg == 'OK') {
$('#image-loader').fadeOut();
$('#message-warning').hide();
$('#contactForm').fadeOut();
$('#message-success').fadeIn();
}
else {
$('#image-loader').fadeOut();
$('#message-warning').html(msg);
$('#message-warning').fadeIn();
}
}
});
return false;
});
});

I found a solution, faster, simpler and very cool.
See the code below:
<form action="https://formspree.io/f/mbjwrqov" method="POST" enctype="multipart/form-data" id="contactForm" name="contactForm">
<fieldset>
<div>
<label for="contactName">Nome <span class="required">*</span></label>
<input type="text" value="" size="35" id="contactName" name="Nome">
</div>
<div>
<label for="contactEmail">E-mail <span class="required">*</span></label>
<input type="text" value="" size="35" id="contactEmail" name="Email">
</div>
<div>
<label for="contactSubject">Assunto</label>
<input type="text" value="" size="35" id="contactSubject" name="Assunto">
</div>
<div>
<label for="contactMessage">Mensagem <span class="required">*</span></label>
<textarea cols="50" rows="15" id="contactMessage" name="Mensagem"></textarea>
</div>
<div>
<button class="submit">Enviar</button>
<span id="image-loader">
<img alt="" src="images/loader.gif">
</span>
</div>
</fieldset>
</form>
<!-- Form End -->
Formspree
http://formspree.io/
The site itself already creates HTML, and I just had to comment on the JavaScript part so as not to give problem or conflict.
Basically, the site already does the intermediary.
A note: The site I created is hosted on GitHub Pages.

jQuery to Send Email from Form?

I'm trying to have my form send me an email every time the "Submit Query" button is clicked. The form is validated and brings the user to a confirmation page after the button is clicked, but I get no email.
Form code:
$(document).ready(function() {
$('#sumbit').click(function() {
$('#contactform').attr('action',
'mailto:chinochinako#gmail.com?subject=Jeannette Chambliss Digital Portfolio' +
$('#name').val() + '&body=' + $('#email').val() + '&body=' + $('#comments').val() + '&body=');
$('#contactform').submit();
});
});
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://malsup.github.io/min/jquery.cycle2.min.js"></script>
</head>
<body>
<form onSubmit="MM_validateForm('name','','R','comments','','R');return document.MM_returnValue" id="contactform">
<label for="name">Full Name:
<input name="name" type="text" id="name" required="required"></label><br /><br />
<label for="email">Email:
<input name="email" type="email" id="email" required="required"></label><br /><br />
<label for="comments">Comments:
<textarea name="comments" id="comments" required></textarea></label><br /><br />
<input name="submit" type="submit" id="submit" formaction="confirmation.html" formmethod="POST" formtarget="_self" action="mailto:chinochinako#gmail.com">
</form>
<script src="js/form.js"></script>
</body>
</html>

<script>
$(document).ready(function() {
$("#submit").click(function() {
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
var contact = $("#contact").val();
$("#returnmessage").empty(); // To empty previous error/success message.
// Checking for blank fields.
if (name == '' || email == '' || contact == '') {
alert("Please Fill Required Fields");
} else {
// Returns successful data submission message when the entered information is stored in database.
$.post("contact_form.php", {
name1: name,
email1: email,
message1: message,
contact1: contact
}, function(data) {
$("#returnmessage").append(data); // Append returned message to message paragraph.
if (data == "Your Query has been received, We will contact you soon.") {
$("#form")[0].reset(); // To reset form fields on success.
}
});
}
});
});
</script>

$(function() {
$('#contactform').submit(function(e) {
e.preventDefault();
$(this).attr(
'action',
'mailto:rafaeljunqueira.rs#gmail.com?subject=Jeannette Chambliss Digital Portfolio');
console.log($(this)[0].action);
return true;
});
});
form ul {
padding: 0;
margin: 0;
}
form ul li {
list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" enctype="text/plain" id="contactform">
<ul>
<li>
<input type="text" placeholder="Name" id="name" />
</li>
<li>
<input type="text" placeholder="Email" id="email" />
</li>
<li>
<input type="text" placeholder="Comments" id="comments" />
</li>
</ul>
<button type="submit" id="submit">Send</button>
</form>

Welcome to Stack Overlfow.
I suspect you are missing the .preventDefault() to prevent the click event from proceeding.
$(document).ready(function() {
$('#submit').click(function(e) {
e.preventDefault();
$('#contactform').attr(
'action',
'mailto:chinochinako#gmail.com?subject=Jeannette Chambliss Digital Portfolio');
$('#contactform').submit();
});
});
Mind you, if the user bypasses clicking the button, and hits Enter, this code will not execute. You may want to consider moving your verification code into the submit event in jQuery, and move this code in there too.
I noticed a potential typo: $('#sumbit').click(function() {
Did you mean: $('#submit').click(function() {
Update
According to the HTML specifications, the action field of the form should be a correctly formed HTTP URL. So ‘mailto:’ is not valid for the action field.
Also, this will not "send" the email. It will only ask the default email program to compose a message that the user can send. If you want the data submitted to be sent via SMTP, this must be done by a server-side script (ASP/ASP.NET, PHP, ColdFusion, Perl, Python...) via a form handler.
$(function() {
$('#contactform').submit(function(e) {
e.preventDefault();
$(this).attr(
'action',
'mailto:chinochinako#gmail.com?subject=Jeannette Chambliss Digital Portfolio');
console.log($(this)[0].action);
return true;
});
});
form ul {
padding: 0;
margin: 0;
}
form ul li {
list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" enctype="text/plain" id="contactform">
<ul>
<li>
<input type="text" placeholder="Name" id="name" />
</li>
<li>
<input type="text" placeholder="Email" id="email" />
</li>
<li>
<input type="text" placeholder="Comments" id="comments" />
</li>
</ul>
<button type="submit" id="submit">Send</button>
</form>

this find label in a form does not work

I have two forms of the same class in a page. These forms are exactly the same with the same elements. On submitting one of them, I try to access the elements inside. Here is what the forms look like:
<form role="form" class="login-form" id="login-form">
{% csrf_token %}
<div class="form-group">
<div class="input-icon">
<i class="icon fa fa-user"></i>
<input type="text" class="form-control" name="email" placeholder="Username" id="email">
</div>
</div>
<div class="form-group">
<div class="input-icon">
<i class="icon fa fa-unlock-alt"></i>
<input type="password" class="form-control" placeholder="Password" name="password" id="password">
</div>
</div>
<div>
<!--input type="checkbox" id="remember" name="rememberme" value="forever" style="float: left;"-->
<label style="display: none; color: red;" id="incorrect_info">Veuillez vérifier vos informations</label>
</div>
<button class="btn btn-common log-btn">Se connecter</button>
</form>
Now the javascript where I try to access the elements:
$('.login-form').submit(function(e){
e.preventDefault();
// Get information
email = $(this).find('input[id="email"]').val();
pass = $(this).find('input[id="password"]').val();
$(this).find('label[id="incorrect_info"]').css('display','block');
});
This code works for the inputs, but not for the label, which is not found.
EDIT :
Sorry here is actually how the code looks like. The find is called in the ajax done.
$('.login-form').submit(function(e){
e.preventDefault();
// Get information
email = $(this).find('input[id="email"]').val();
pass = $(this).find('input[id="password"]').val();
$.ajax({
.......
}).done(function (data) {
if (data.success) {
window.location.href = data.url;
}
else {
$(this).find('label[id="incorrect_info"]').css('display','block');
}
});
});

I figured this out. The problem is that $(this) scope is different inside the ajax function. What I've done is to save it before getting into it, and reused it after:
$('.login-form').submit(function(e){
e.preventDefault();
// Get information
this_form = $(this);
email = $(this).find('input[id="email"]').val();
pass = $(this).find('input[id="password"]').val();
$.ajax({
......
success : function(data, status){
}
}).done(function (data) {
if (data.success) {
window.location.href = data.url;
}
else {
this_form.find('label[id="incorrect_info"]').css('display','block');
}
});
});

submit a form and prevent from refreshing it

i'm working on a email sending function on a project. here when i fill the form and after sending it the web site page getting refresh and showing white background page. i need to prevent that from the refreshing and submit the form. here i'l attach the codes and can someone tell me the answer for this question.
HTML code for form
<form class="form-vertical" onsubmit="return sendEmail();" id="tell_a_friend_form" method="post" action="index.php?route=product/product/tellaFriendEmail" enctype="multipart/form-data">
<div class="form-group ">
<label class="control-label ">Your Name <span >* </span> </label><br>
<div class="form-group-default">
<input type="text" id="senders_name" name="sender_name" value="" class="form-control input-lg required" >
</div>
</div>
<div id="notify2" class="">
<div id="notification-text2" class="xs-m-t-10 fs-12"></div>
<!--<button type="button" class ="close" id="noti-hide">×</button>-->
</div>
<div class="form-group ">
<label class="control-label ">Your Email <span >* </span> </label><br>
<div class="form-group-default">
<input type="text" id="sender_email_ID" name="sender_email" value="" class="form-control input-lg" >
</div>
</div>
<div id="notify1" class="">
<div id="notification-text1" class="xs-m-t-10 fs-12"></div>
<!--<button type="button" class ="close" id="noti-hide">×</button>-->
</div>
<div class="form-group ">
<label class="control-label">Your Friends' Email <span >* </span></label>
<p class="lineStyle">Enter one or more email addresses, separated by a comma.</p>
<div class="form-group-default">
<input type="text" value="" id="receiver_email" class="form-control required" name="receivers_email" >
</div>
</div>
<div id="notify" class="">
<div id="notification-text" class="xs-m-t-10 fs-12"></div>
<!--<button type="button" class ="close" id="noti-hide">×</button>-->
</div>
<div >
<label domainsclass="control-label ">Add a personal message below (Optional) <br></label>
<div class="form-group-default">
<textarea type="text" id="tell_a_friend_message" name="tell_a_friend_message" class="form-control" rows="10" col="100" style=" width: 330px; height: 100px;"></textarea>
</div>
</div>
<div id="notify3" class="">
<div id="notification-text3" class="xs-m-t-10 fs-12"></div>
<!--<button type="button" class ="close" id="noti-hide">×</button>-->
</div>
<input type="hidden" name="product_url" id="product_url_field" value="">
<div class="p-t-15 p-b-20 pull-right">
<button id="send_mail_button" class="btn btn-rounded btn-rounded-fl-gold text-uppercase" name="submit" onclick="return sendEmail();" >Send</button>
<button id="cancel_email_form" class="btn btn-rounded btn-rounded-gold text-uppercase btn-margin-left" data-dismiss="modal" aria-hidden="true" >Cancel</button>
</div>
javascript code:
<script>
function sendEmail() {
document.getElementById('product_url_field').value = window.location.href
var emailpattern = /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/;
var receivers_email = $("#receiver_email").val();
var sender_email = $("#sender_email_ID").val();
var sender_name = $("#senders_name").val();
var email_pathname = window.location.pathname;
var product_url = window.location.href;
if (receivers_email == '') {
$('#notify').removeClass().addClass("alert-danger");
$('#notification-text').empty().html("Invalid e-mail or fill the email address correctly");
$('#notification-text').show();
setTimeout(function() {
$('#notification-text').fadeOut('slow');
}, 10000);
return false;
}
else {
!emailpattern.test(receivers_email);
}
if(sender_name == ''){
$('#notify2').removeClass().addClass("alert-danger");
$('#notification-text2').empty().html("please fill the name");
$('#notification-text2').show();
setTimeout(function() {
$('#notification-text2').fadeOut('slow');
}, 10000);
return false;
}
if (sender_email == '') {
$('#notify1').removeClass().addClass("alert-danger");
$('#notification-text1').empty().html("Invalid e-mail or fill the email address correctly");
$('#notification-text1').show();
setTimeout(function() {
$('#notification-text1').fadeOut('slow');
}, 10000);
return false;
}
else {
!emailpattern.test(sender_email);
}
$('#notify3').removeClass().addClass("alert-success");
$('#sender_email').val('');
$('#notification-text3').empty().html("Email has sent successfully");
$('#notification-text3').show();
setTimeout(function() {
$('#notification-text3').fadeOut('slow');
}, 10000);
return true;
}
</script>
Controller php class:
public function tellaFriendEmail(){
if (isset($_POST['submit'])) {
$receiver_email = $_POST['receivers_email'];
$name = $_POST['sender_name'];
$email = $_POST['sender_email'];
$message = $_POST['tell_a_friend_message'];
$products_url = $_POST['product_url'];
$mail = new Mail();
$mail->protocol = $this->config->get('config_mail_protocol');
$mail->parameter = $this->config->get('config_mail_parameter');
$mail->smtp_hostname = $this->config->get('config_mail_smtp_hostname');
$mail->smtp_username = $this->config->get('config_mail_smtp_username');
$mail->smtp_password = html_entity_decode($this->config->get('config_mail_smtp_password'), ENT_QUOTES, 'UTF-8');
$mail->smtp_port = $this->config->get('config_mail_smtp_port');
$mail->smtp_timeout = $this->config->get('config_mail_smtp_timeout');
$mail->setTo($receiver_email);
$mail->setFrom($this->config->get('config_email'));
$mail->setSender("Waltersbay");
$mail->setSubject($name.' '.'wants you to checkout this product from waltersbay.com');
if ($message !=''){
$mail->setHtml('Hi Dear,<br/> please checkout the following product that'.' '.$name.' '.'wanted you to see.'.' '.'we hope that you will like it !!!!<br/>'.$products_url.'<br/>'.'<br/> Here is a little message from your friend:<br/>'.$message.'<br/>'.'<br/> Thank you, <br/> ');
}
else{
$mail->setHtml('Hi Dear,<br/> please checkout the following product that'.' '.$name.' '.'wanted you to see.'.' '.'we hope that you will like it !!!!<br/>'.$products_url.'<br/>'/*.'<br/> Here is a little message from your friend:<br/>'.$message.'<br/>'*/.'<br/> Thank you, <br/> ');
}
$mail->send();
}
else{
header('location : tella_friend.tpl');
}
}
}

Put a hidden input in your form. before submitting in your js, fill it with a new key according to time.
in your php file check if key is duplicate or not? or even if its filled?
Because js fill this input after clicking the submit button, every time you submit your form you have a new key! If you refresh the form, you're gonna send the previous value again.

For your problem then best practice recommended is to use jquery ajax requests.
Firstly if you pretend to use "submit" element then do following,
$(".form-vertical").submit(function(e) {
e.preventDefault();
//send ajax with your form data. Ample examples on SO already.
$.ajax(.....);
});
Other option we would recommend is to avoid using 'submit' behavior at first place for requirement you have.
1. Use button elements instead of submit element.
2. Attach click event on button. i.e. in your case 'send'.
3. On click, send ajax as described above. This will avoid doing things like onsubmit="return sendEmail();" you had to do.
4. Also following is not required as well,
$(".form-vertical").submit(function(e) {
e.preventDefault();
as it will be done as follows,
$("button#buttonId").click(function(e) {
// your ajax call.....
}

Parse.com javascript login

Hi Stackoverflow members,
I started learning javascript a couple days ago but was stumped on one of the problems i came across.
Form:
<form class="login-form" method="post" onsubmit="return tryLogin(this);">
<h3 class="form-title">Login to your account</h3>
<div class="alert alert-danger display-hide">
<button class="close" data-close="alert"></button>
<span>
Enter any username and password.
</span>
</div>
<div class="form-group">
<!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
<label class="control-label visible-ie8 visible-ie9">Username</label>
<div class="input-icon">
<i class="fa fa-user"></i>
<input class="form-control placeholder-no-fix" type="text" autocomplete="off" placeholder="Username" name="username" id="username"/>
</div>
</div>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Password</label>
<div class="input-icon">
<i class="fa fa-lock"></i>
<input class="form-control placeholder-no-fix" type="password" autocomplete="off" placeholder="Password" name="password" id="password"/>
</div>
</div>
<div class="form-actions">
<label class="checkbox">
<input type="checkbox" name="remember" value="1"/> Remember me </label>
<button type="submit" class="btn green pull-right">
Login <i class="m-icon-swapright m-icon-white"></i>
</button>
</div>
</form>
Javascript:
<script type="text/javascript">
jQuery(document).ready(function() {
App.init();
Login.init();
});
function tryLogin(form) {
var username = form.username.value;
var password = form.password.value;
console.log("Username: " + username + " Password: " + password);
Parse.User.logIn(username, password, {
success: function(user) {
window.location.href="dashboard.html";
//self.undelegateEvents();
//delete self;
alert("Sucess");
return true;
},
error: function(user, error) {
window.location.href="login.html";
alert("Error: " + error.code + " " + error.message + username + password);
return false;
}
});
}
</script>
The problem is that when I attempt to login I get a 100 XMLHttpRequest failed error. This only happens when I input data into the form and click log in. If i don't enter any data and click login, it correctly attempts to login. If i put the username + password directly into the javascript it also works - but doesn't through the form.
Console.log, logs the correct username and password being inputted, but the Parse.User.logIn(username, password) doesn't want to pass it in... but it works if I fill it in like this:
Parse.User.logIn("myemail#email.com", "mypassword", {....
Any help would be appreciated.
Cheers!
Edit: Here's the error
XMLHttpRequest failed: {"statusText":"","status":0,"response":"","responseType":"","responseXML":null,"responseText":"","upload":{"ontimeout":null,"onprogress":null,"onloadstart":null,"onloadend":null,"onload":null,"onerror":null,"onabort":null},"withCredentials":false,"readyState":4,"timeout":0,"ontimeout":null,"onprogress":null,"onloadstart":null,"onloadend":null,"onload":null,"onerror":null,"onabort":null}
Could it be a MAMP issue? PS: Creating new objects etc. works fine.

As you dont call preventDefault on the submit event, what happens is that it posts form when you click which has for effect to cancel the ajax call Parse.User is making.
Add event.preventDefault(); in your event handler and you should be fine.
<form class="login-form" method="post" onsubmit="tryLogin(this); event.preventDefault();">
Or better use jQuery to manage this event
$(".login-form").submit (function(event) {
...
event.preventDefault();
});