My contact form is not working - javascript

my contact form in my responsive website is not submitting. i have attached my contact.php but it is not working
my script is as follows
<!--Contact Us Script-->
<script type="text/javascript">
// <![CDATA[
$(function() {
$('#contactform').submit(function() {
var action = $(this).attr('action');
$.post(action, {
name: $('#name').val(),
email: $('#email').val(),
company: $('#website').val(),
subject: $('#subject').val(),
message: $('#message').val()
},
function(data) {
$('#contactform #submit').attr('disabled','');
$('.response').remove();
$('#contactform').before('<p class="response">'+data+'</p>');
$('.response').slideDown();
if(data=='Message sent!') $('#contactform').slideUp();
}
);
return false;
});
});
and my actual form is
<form action="contact.php" method="post" id="contactform">
<ol>
<li>
<label for="name">Name*</label>
<input id="name" name="name" class="text"/>
</li>
<li>
<label for="email">Email*</label>
<input id="email" name="email" class="text" />
</li>
<li>
<label for="url">Website</label>
<input id="url" name="web" class="text"/>
</li>
<li>
<label for="subject">Subject*</label>
<input id="subject" name="subject" class="text"/>
</li>
<li>
<label for="message">Message*</label>
<textarea id="message" name="message" rows="6" cols="50" ></textarea>
</li>
<li class="buttons">
<input name="imageField" type="image" class="send" id="imageField" form="contactform" src="Newsite/images/sub.png" />
<div class="clr"></div>
</li>
</ol>
</form>
I would be really grateful if someone could assist. I've been stuck for 2 days now!!!
Thanks

You can try it... Attach the function, to the event "click" from the img...
Sorry, (i can't speak(wirte or listen) english so much) but I hope it will help.
$("#imageField").click(
function(){
$('#contactform').submit(function(){
var action = $(this).attr('action');
$.post(action, {
name: $('#name').val(),
email: $('#email').val(),
company: $('#website').val(),
subject: $('#subject').val(),
message: $('#message').val()
},
function(data){
$('#contactform #submit').attr('disabled','');
$('.response').remove();
$('#contactform').before('<p class="response">'+data+'</p>');
$('.response').slideDown();
if(data=='Message sent!') $('#contactform').slideUp();
}
);
return false;
});

Related

How to Console log the Entire HTML Form?

I'm trying to console log the entire form but the JavaScript Code is getting too long. Can anyone please help me how to follow DRY(Do not repeat Yourself), coz I have repeated a lot of code in my script tag
<form class="form" action="register.jsp" method="post">
<ul class="fieldlist">
<li>
<label for="simple-input"> UserName < /label> < input id="simple-input1" name="userid" type="text" class="k-textbox" style="width: 100%;" />
</li>
<li>
<label for="simple-input">Password</label>
<input id="simple-input2" name="pwd" type="password" class="k-textbox" style="width: 100%;" />
</li>
<li>
<input onclick="myFunction()" id="button" type="submit">
</li> </ul>
</form>
This is my Script tag. I want to follow DRY rules. I have tried saving the values to each separate variables.
<script>
var nameInput = document.getElementById('simple-input1');
document.querySelector('form.form').addEventListener('submit', function(e) {
//prevent the normal submission of the form
e.preventDefault();
console.log("Username: " + nameInput.value);
});
var nameInput1 = document.getElementById('simple-input2');
document.querySelector('form.form').addEventListener('submit', function (e) {
//prevent the normal submission of the form
e.preventDefault();
console.log("Password: " + nameInput1.value);
});
</script>
You can get the form elements using document.querySelector('form.form').elements
document.querySelector('form.form').addEventListener('submit', function(e) {
e.preventDefault();
let x = document.querySelector('form.form').elements;
console.log("Username: ", x['userid'].value);
console.log("Password: ", x['pwd'].value);
});
<form class="form" action="register.jsp" method="post">
<ul class="fieldlist">
<li>
<label for="simple-input"> UserName</label>
<input id="simple-input1" name="userid" type="text" class="k-textbox" style="width: 100%;">
</li>
<li>
<label for="simple-input">Password</label>
<input id="simple-input2" name="pwd" type="password" class="k-textbox" style="width: 100%;">
</li>
<li>
<input id="button" type="submit">
</li>
</ul>
</form>
You could use FormData and pass the form element as a parameter. Then use FormData.entries() to get an iterator of all values
document.querySelector('form.form').addEventListener('submit', function(e) {
e.preventDefault();
const formData = new FormData(this);
const entires = formData.entries();
for (var input of entires) {
console.log(input[0] + ': ' + input[1]);
}
});
<form class="form" action="register.jsp" method="post">
<ul class="fieldlist">
<li>
<label for="simple-input"> UserName </label> <input id="simple-input1" name="userid" type="text" class="k-textbox" style="width: 100%;" />
</li>
<li>
<label for="simple-input">Password</label>
<input id="simple-input2" name="pwd" type="password" class="k-textbox" style="width: 100%;" />
</li>
<li>
<input id="button" type="submit">
</li>
</ul>
</form>
Both your listeners are listening for the same thing - a submit. Make your code much simpler by merging them into a simplified listener, using template literals and newlines for the console.log():
document.querySelector("form.form").submit = function(e) {
e.preventDefault();
console.log(`Username: ${nameInput.value}\nPassword: ${nameInput1.value}`);
}

javascript keeps refreshing the screen

I'm using this to validate my form so that any field left empty a message will appear. I'm getting the message to appear but it restarts the page right after.
html code:
<head>
<title> Flower Spotter</title>
<link rel="stylesheet" type="text/css" href="..//css/flower.css"/>
<script type= "text/javascript" src="..//js/flower.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<img src="..//img/orchid.jpg" alt="bann"/><br/>
<h1 class="style1 style2">Flower Spotter </h1>
</div>
<div id="menu">
<ul>
<li>Home</li>
<li>Gallery</li>
<li>Register</li>
<li>Contact Us</li>
</ul>
</div>
<div id="formControl">
<form id="form" action="" method="post" onsubmit="validateForm();">
<fieldset>
<legend>Personal Information</legend>
<label> First Name: </label> <br/>
<input type="text" id="fname" name="fname"/> <br/>
<span id="f_error"></span><br/><br/>
<label>Last Name </label><br/>
<input type="text" name="lname" id="lname"/><br/><br/>
<span id="l_error"></span><br/><br/>
<label> Sex: </label><br/>
Male <input type="radio" id="msex" name="sex" value="Male"/>
Female <input type="radio" id="fsex" name="sex" value="female"/> <br/> <br/> <br/>
<label> Address: </label><br/>
<textarea id="address" name="address" rows="0" cols="0"></textarea>
<br/> <br/>
<span id="ad_error"></span><br/><br/>
<label>Email Address</label><br/>
<input type="text" id="email" name="email"/><br/><br/>
<span id="em_error"></span><br/><br/>
<label> Password: </label><br/>
<input type="password" id="pword" name="pword"/> <br/> <br/>
<span id="p_error"></span><br/><br/>
<label>Confirm Password: </label><br/>
<input type="password" id="cword" name="cword"/> <br/> <br/>
<span id="c_error"></span><br/><br/>
<input type="submit" value="Submit"/>
<input type="reset" value="Reset"/>
</fieldset>
</form>
</div>
<div id="footer">
<ul>
<li>Home</li>
<li>Gallery</li>
<li>Register</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</body>
Javascript code:
function validateForm()
{
//delacring variables
var firstName, lastName, address, email, pword, cword;
check=false;
error=false;
firstName=document.getElementById("fname").value;
lastName=document.getElementById("lname").value;
address=document.getElementById("address").value;
email=document.getElementById("email").value;
pword=document.getElementById("pword").value;
cword=document.getElementById("cword").value;
//checking to see if anything was entered
if(firstName=="" || firstName==null)
{
//sending an error message to the user if the cell is empty
document.getElementById("f_error").innerHTML="You must enter your first name";
error=true;
return false;
}
else
document.getElementById("f_error").innerHTML="";
if(lastName=="" || lastName==null)
{
//sending an error message to the user if the cell is empty
document.getElementById("l_error").innerHTML="You must enter your last name";
error=true;
return false;
}
else
document.getElementById("l_error").innerHTML="";
if(address=="" || address==null)
{
document.getElementById("ad_error").innerHTML="You must enter your Address";
error=true;
return false;
}
else
document.getElementById("ad_error").innerHTML="";
if(email=="" || email==null)
{
document.getElementById("em_error").innerHTML="You must enter your Email Address";
error=true;
return false;
}
else
document.getElementById("em_error").innerHTML="";
if(pword=="" || pword==null)
{
document.getElementById("p_error").innerHTML="You must enter a password";
error=true;
return false;
}
else
document.getElementById("l_error").innerHTML="";
if(cword=="" || cword==null)
{
document.getElementById("c_error").innerHTML="Please confirm your password";
error=true;
return false;
}
else
document.getElementById("c_error").innerHTML="";
return true;
}
can someone please help me find the error.
Your form is getting submitted, even when your function returns false.
Change:
onsubmit="validateForm();"
to:
onsubmit="return validateForm();"
This should fix it.

jQuery .validate() and form onsubmit [duplicate]

This question already has an answer here:
Interaction between JQuery validation and form submit handler: Broken, or am I doing something wrong?
(1 answer)
Closed 8 years ago.
So I've got a form with onsubmit="SubmitForm()" and also a $().validate(). The problem is that when submit is clicked, the .validate() works, but SubmitForm() also runs. I'm a little confused, could someone help me out?
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#eclub').validate({ // initialize the plugin
rules: {
FirstName: {
required: true,
minlength: 2,
},
LastName: {
required: true,
minlength: 2
},
'Email Address': {
required: true,
email: true
},
Zip: {
required: true,
minlength: 2
},
DOB_Month: {
required: true,
minlength: 2,
},
DOB_Day: {
required: true,
minlength: 1
},
over18: {
required: true
}
}
});
});
function autoDMA() {
var zip_code = $('#zip_code').val();
$.ajax({
url: 'get_zipCode.php',
type: 'POST',
data: {zip_code:zip_code},
success:function(data){$('#dma_code').val(data);}
});
}
function SubmitForm()
{
if($("#emailDeals").is(':checked')){
document.forms['eclub'].action='http://cl.exct.net/subscribe.aspx';
document.forms['eclub'].target='_blank';
document.forms['eclub'].submit();
}
if($("#mobileDeals").is(':checked')){
document.forms['eclub'].action='/assets/waterfall/waterfall_rest.php';
document.forms['eclub'].submit();
}
return true;
}
</script>
<div id="" style="width:60%;">
<br/>
<!-- <form action="http://cl.exct.net/subscribe.aspx" id="eclub" method="post" onsubmit="return validateForm(this)" style="width:100%;"> -->
<form method="post" id="eclub" onsubmit="SubmitForm()">
<input name="thx" value="http://papamurphys.com/Deals/ThankYou" type="hidden">
<input name="dma" value="" type="hidden" id='dma-set' />
<input name="dma2" value="" type="hidden" />
<input name="MID" value="29115" type="hidden" />
<input name="lid" value="846154" type="hidden" />
<input name="lid" value="17516793" type="hidden" />
<input name="SubAction" value="sub_add_update" type="hidden" />
<input type="hidden" name="status" value="normal" />
<input name="Birthdate" value="" type="hidden" id="bday"/>
<div class="clearfix">
<label for="name"><span class="bold">First Name</span></label><br />
<input class="required" name="FirstName" type="text" placeholder="" />
</div>
<div class="clearfix">
<label for="name"><span class="bold">Last Name</span></label><br />
<input class="required" name="LastName" type="text" placeholder="" />
</div>
<div class="clearfix">
<label for="email"><span class="bold">Email</span></label><br />
<input class="required" name="Email Address" type="text" placeholder="" />
</div>
<div class="clearfix">
<label for="email"><span class="bold">Mobile Number</span></label><br />
<input class="required" name="MobileNumber" type="text" placeholder="" />
</div>
<div class="clearfix">
<span class="bold">Zip/Postal Code</span><br />
<input class="required zip" id="zip_code" name="PostalCode" type="text" onkeyup="autoDMA()" placeholder="" maxlength="5" size="5" />
</div>
<div class="clearfix">
<input class="zip" id="dma_code" name="DMACode" type="text" placeholder="" maxlength="5" size="5" style="display:none;" />
</div>
<div class="clearfix">
<span class="bold">Birthday</span><br />
<input class="month user required" name="DOB_Month" type="text" placeholder="MM" maxlength="2" style="width:48px;" />
<input class="day user required" name="DOB_Day" type="text" placeholder="DD" maxlength="2" style="width:48px;" />
</div>
<div class="clearfix">
<input class="age user" class="required" name="emailDeals" id="emailDeals" type="checkbox"/> Sign me up for email deals
</div>
<div class="clearfix">
<input class="age user" class="required" name="mobileDeals" id="mobileDeals" type="checkbox"/> Sign me up for mobile deals
</div>
<div class="clearfix">
<input class="age user" class="required" name="over18" id="over18" type="checkbox"/> I'm over 18
</div>
<input class="join-btn" type="submit" style="float:right;line-height:14px;cursor: pointer" onclick="pageTracker._trackPageview('Forms', 'Submit', 'eClubSignUp')" value="SUBMIT" />
<!--<input type="button" class="join-btn" value="" onclick="validateForm()" />-->
</form>
</div>
Why don't you use submitHandler callback in validate()?
$(".selector").validate({
submitHandler: function(form) {
$(form).ajaxSubmit();
}
});
Anything you want to do when the form is valid, and you click the button, would be done inside the plugin's submitHandler option. (Not via an external function triggered by an inline handler)
$('#eclub').validate({
// rules and other options,
submitHandler: function (form) {
if ($("#emailDeals").is(':checked')) {
document.forms['eclub'].action = 'http://cl.exct.net/subscribe.aspx';
document.forms['eclub'].target = '_blank';
form.submit(); // submit the form // this is the default
}
if ($("#mobileDeals").is(':checked')) {
document.forms['eclub'].action = '/assets/waterfall/waterfall_rest.php';
form.submit(); // submit the form // this is the default
}
}
});
Working DEMO: http://jsfiddle.net/vbs32y9u/
As #Mike says Why you use SubmitForm()?
Anyway you can try this:
function SubmitForm()
{
if ($("#eclub").valid())
{
if($("#emailDeals").is(':checked')){
document.forms['eclub'].action='http://cl.exct.net/subscribe.aspx';
document.forms['eclub'].target='_blank';
document.forms['eclub'].submit();
}
if($("#mobileDeals").is(':checked')){
document.forms['eclub'].action='/assets/waterfall/waterfall_rest.php';
document.forms['eclub'].submit();
}
return true;
}
else
{
return false;
}
}

Hide Submit button after send form with load method

I create a form and send request to other page with :
$(document).ready(function() {
$("#send").click(function() {
var text = $("#text").val();
var email = $("#email").val();
$("#exp").load("sendmail.php",{text:text,email:email});
});
});
and my form code :
<ul>
<li><input type="text" name="name" id="text" /></li>
<li><input type="text" name="email" id="email"/></li>
<button class="button" id="send" >send email</button>
<div id="exp" style="color:green;"></div>
</ul>
how i can hide submit button after send mail ?
jQuery:
$(document).ready(function() {
$("#send").click(function() {
var text = $("#text").val();
var email = $("#email").val();
$.post("sendmail.php",{text:text,email:email}, function(){
$('.form').hide();
});
});
});
Html:
<ul class="form">
<li><input type="text" name="name" id="text" /></li>
<li><input type="text" name="email" id="email"/></li>
<button class="button" id="send" >send email</button>
<div id="exp" style="color:green;"></div>
</ul>

jQuery form validation validate() the submitting does not work after the validation [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Form validation in javascripit does not work propably
I used the validate() to validate the form.
Here is the html:
<form id="form3" name="form3" method="post" action="changepassExcution.php">
<ul> <li id="foli1" class="notranslate">
<label class="desc" id="title1" for="oldpass">
old password:
</label>
<div>
<input id="oldpass" name="oldpass" type="password" class="field text medium required" maxlength="255" tabindex="1"/> </div></li>
<li id="foli2" class="notranslat">
<label class="desc" id="title2" for="newpass">
new password:
</label>
<div>
<input id="newpass" name="newpass" type="password" class="field text medium required" maxlength="255" tabindex="2" />
</div></li>
<li id="foli3" class="notranslate">
<label class="desc" id="title3" for="retypenewpass">
repeat new password:</label>
<div><input id="retypenewpass" name="retypenewpass" type="password" class="field text medium required" maxlength="255" tabindex="3" /></div></li>
<li class="buttons "><div>
<input id="saveForm" name="saveForm" class="button" type="submit" value="change password"/></div></li>
</ul>
</form>
And here is the javascript:
<script>
$(document).ready(function(){
$("#form3").validate();
});
</script>
The problem is: when I submit the form correctly (valid), it will be submitted, but when the form is invalid, then I correct it the submit doesn't work.
UPDATE : the function is now working Horraaay :) with the following code :
<script>
$(document).ready(function(){
$("#form3").validate();
});
</script>
The only problem was the input form name .. I used 'submit' as a name of the input form however before was on diffrient name..
try:
<script>
$(document).ready(function(){
$("#form3").validate();
});
</script>
edit
try:
<script>
$(document).ready(function(){
$("#form3").submit(function(){
$(this).validate();
});
});
</script>
Is it possible that it works, but there are no rules for validation - so it always passes?
How about setting some rules like this:
<script>
$(document).ready(function(){
$("#form3").validate({
rules: {
oldpass: { required: true },
newpass: { required: true },
}
});
});
Read more in jQuery documentation

Categories