I am trying to use reCaptcha for the first time and this is the code I wrote so far but it doesn't seem to work.
This is my html form:
<form method="post" action=''>
<cfoutput>
<input type="hidden" name="isPost" value="1" />
First Name: <input type="text" name="firstname" placeholder="First name" required><br />
Last Name: <input type="text" name="lastname" placeholder="Last name" required><br />
Email: <input type="email" name="email" placeholder="example#email.com" required><br />
Zip Code: <input id="zip" type="text" pattern="[0-9]{5}" name="zipcodex" placeholder="ex. 01234" required /><br />
Home Phone: <input type="tel" pattern='[0-9]{10}' name="homephone" placeholder="ex. 3335551234" required><br />
Cell Phone: <input type="tel" pattern='[0-9]{10}' name="cellphone" value="#cellphone#" placeholder="ex. 9990001234"><br />
My Interest
<select class="interestOption" name="Formprocedure" id="procedure" required >
<option selected="selected" disabled="disabled" value="">My Interest</option>
<cfloop query="procedurefinder"><option <cfif procedureid eq Formprocedure>selected="selected" </cfif>title="#procedurename#" value="#procedureid#">#left(procedurename,20)#</option>
</cfloop>
</select><br />
<textarea name="comments" cols="50" rows="5" placeholder="Please enter any additional comments"></textarea><br />
<script type="text/javascript"
src="http://www.google.com/recaptcha/api/challenge?k=6LdUMuISAAAAA********mMK5cbR1pm1AG4WV">
</script>
<noscript>
<iframe src="http://www.google.com/recaptcha/api/noscript?k=6LdUMuISAAAAAMi**************mMK5cbR1pm1AG4WV"
height="50" width="400" frameborder="0"></iframe><br>
<textarea name="recaptcha_challenge_field" rows="3" cols="0">
</textarea>
<input type="hidden" name="recaptcha_response_field"
value="manual_challenge">
</noscript>
<br />
<button id="submit" onclick="SubmitForm();">Submit</button>
</cfoutput>
</form>
This is my JS code:
<script type="text/javascript">
function SubmitForm(){
var xmlHttp = new XMLHttpRequest();
xmlHttp.open("POST",'http://www.google.com/recaptcha/api/verify',true);
xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
params ="'6LdUMuISAAAAAMi4iDZ1sIuEmMK5cbR1pm1AG4WV','www.newimagespecialists.com','"+Recaptcha.get_response()+"','"+Recaptcha.get_challenge+"'";
xmlHttp.send(params);
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4){
if(xmlHttp.status == 200){
form.submit();
}else{
return false;
}
}
}
}
</script>
This is the response I am getting from firebug:
Parameters application/x-www-form-urlencoded
'6LdUMuISAA1sIuE... =typeof RecaptchaState?null:RecaptchaState.challenge}'
Source
'6LdUMAA*******IuEmMAG4WV','www.example.com','fitsesq Accord','function (){return"undefined"==typeof RecaptchaState?null:RecaptchaState.challenge}'
My issue is that I don't really understand where I have a mistake in the code and also why my form continues to submit? Any one can give any pointer as to where I am making a mistake?
To prevent your form from submitting, you have to do this:
<form method="post" action='' onsubmit="return false">
In your code, you write something like:
Recaptcha.get_response()+"','"+Recaptcha.get_challenge
check that Recaptcha.get_challenge should be replaced with Recaptcha.get_challenge() and the ajax api is loaded.
<script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
And check that you create the recaptcha properly using Recaptcha.create
Related
I am currently working on a 'contact form', I have been working on this for quite a while but, I just can't figure out how to make JavaScript email the form to my email adress.
This is my code :
<form id="myform" action="mailto:contact#anika.nl">
<label for="FirstName">Name:</label>
<input id="FirstName" name="FirstName" type="text" />
<label for="EMail">Email:</label>
<input id="EMail" name="EMail" type="text" />
<label for="Message">Message:</label>
<textarea id="Message" cols="20" name="Address" rows="5"></textarea>
<input name="submit" type="submit" value="Submit" />
</form>
<script type="text/javascript">// <![CDATA[
var frmvalidator = new Validator("myform");
frmvalidator.addValidation("FirstName","req","Please enter your First Name");
frmvalidator.addValidation("FirstName","maxlen=20", "Max length for FirstName is 20");
frmvalidator.addValidation("Email","maxlen=50");
frmvalidator.addValidation("Email","req");
frmvalidator.addValidation("Email","email");
// ]]></script>
Does someone see what I'm doing wrong/what's missing?
before you blame me, yes I was looking for something similar for about a hour, but sadly I couldn't find my error, atleast the Questions I was looking for in stackoverflow didn't gave me a correct answere, as I have almost exactly the same thing (not Copy and Paste).
However could someone explain me, why my code (javascript) isn't working?
I am playing around with it for some hours now but I can't find it.
<html>
<head>
<title>Anmeldung/Login</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script>
function abc(){
var a = document.getElementById('pw').value;
var b = document.getElementById('repw').value;
if(a==b){
alert(yes)
}
}
</script>
</head>
<body>
<div id="banner">
<p>NAME/ÜBERSCHRIFT</p>
</div>
<form id="loginpanel">
<fieldset>
<legend>LOGIN</legend>
<p class="textinput">Benutzername: <input name="id" type="text" size="30" maxlength="30"></p>
<p class="textinput">Passwort: <input name="pw" type="password" size="30" maxlength="15"></p>
<input class="button" type="button" name="login" value="Anmelden"/>
</fieldset>
</form>
<p id="option"> ...oder Registrieren!</p>
<form id="registerpanel">
<fieldset>
<legend>REGISTER</legend>
<p class="textinput">Benutzername: <input name="id" type="text" size="30" maxlength="30"></p>
<p class="textinput">eMail: <input name="email" type="text" size="30" maxlength="30"></p>
<p class="textinput">Passwort: <input name="pw" type="password" size="30" maxlength="30"></p>
<p class="textinput">Passwort wiederholen: <input name="repw" type="password" size="30" maxlength="30"></p>
<input class="button" type="button" onclick="abc()" name="register" value="Registrieren"/>
</fieldset>
</form>
</body>
I would be happy if someone can give me an answere!
Thank you for taking your time :)!
You must have inputs with id attribute with values pw+repw. Having only a name attribute will not work
example: <input name="repw" id="repw" type="password" size="30" maxlength="30">
Corrected version (only relevant parts):
<script>
window.abc = function(){
var a = document.getElementById('pw').value;
var b = document.getElementById('repw').value;
if(a==b){
alert("yes")
}
}
</script>
...
<form id="registerpanel">
<fieldset>
<legend>REGISTER</legend>
<p class="textinput">Benutzername: <input name="id" type="text" size="30" maxlength="30"></p>
<p class="textinput">eMail: <input name="email" type="text" size="30" maxlength="30"></p>
<p class="textinput">Passwort: <input name="pw" id="register-pw" type="password" size="30" maxlength="30"></p>
<p class="textinput">Passwort wiederholen: <input name="repw" id="register-repw" type="password" size="30" maxlength="30"></p>
<input class="button" type="button" onclick="abc()" name="register" value="Registrieren"/>
</fieldset>
</form>
Note the added IDs. I didn't do pw and repw because having plain pw in login made more sense to me (11684) (don't forget to add that in the login form). Because I'd do register-pw I went for consistency and did register-repw. But it doesn't matter what these IDs are as long as they are unique.
And I changed the typo alert(yes) into alert("yes") because obviously the first throws a reference error.
A working JSFiddle: http://jsfiddle.net/7NZUc/
I have a simple form to take user input. User must fill very fields in that form. If they don't, javascript gives the alert message but it's not working. I am not getting alert message if I submit the form empty. Here's my form.html:
</style>
<script type="text/javascript">
function Validate(){
if(document.simple_form.session.value == "" ||
document.simple_form.hostname.value == "" ||
document.simple_form.username.value == ""
document.simple_form.password.value == "")
{
alert("Please fill out all fields before clicking Load!");
return false;
}
}
</script>
</head>
<body>
<form action="." method="post" onsubmit="return Validate();" name="simple_form">
{% csrf_token %}
<fieldset>
<legend>Session</legend>
<label for="input-one" class="float"><strong>Session Name:</strong></label><br />
<input class="inp-text" name="session" id="sess" type="text" size="30" /><br />
<label for="input-two" class="float"><strong>RemoteHost:</strong></label><br />
<input class="inp-text" name="hostname" id="host" type="text" size="30" onblur="if(this.value=='') { this.value='ngs.pradhi.com:/upload' }" onfocus="if(this.value=='ngs.pradhi.com:/upload') { this.value='' }" value="ngs.pradhi.com:/upload" />
<label for="input-three" class="float"><strong>Username:</strong></label><br />
<input class="inp-text" name="username" id="user" type="text" size="30" />
<label for="input-four" class="float"><strong>Password:</strong></label><br />
<input class="inp-text" name="password" id="pass" type="password" size="30" />
</fieldset>
<p><input class="submit-button" type="submit" value="Load" /></p>
<p><input class="save-button" type="reset" name="cancel" value="Cancel" /></p>
</form>
Is there something I am missing?
You're missing a final || in your Validate() function.
I've got a working jsfiddle here (I added a couple of </br>'s too).
i have 2 raw aweber html code, they are in separate accounts. now i want to have 1 sign up form for this two raw codes. Means when someone sign up on my form, the email should the be saved on my two list. but i got problem on how to integrate this two codes. When i remove 1 form it work for only 1 list but when i integrate the two it doesn't save any email on the two list.
heres my code ,sorry for my poor coding im new to javascript im trying hard to solved this problem hope someone can help me.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<!--1st-->
<script language="javascript">
function copy_fields(){
<!--document.getElementById('name1').value = document.getElementById('name').value;
document.getElementById('from1').value = document.getElementById('email').value;
}
function validate(){
var filter = /^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if((document.submail.email.value=='')||(document.submail.email.value=='Email Address'))
{alert('Please Enter Email Address'); return false;}
if (!filter.test(document.submail.email.value))
{alert('Please Enter A Valid Email'); return false;}
document.getElementById('sub9').className='gray_out';
document.getElementById('sub9').disabled='true';
copy_fields();
document.form2.submit();
setTimeout('document.submail.submit()',3000);
}
</script>
<style type="text/css">
.gray_out {
filter:alpha(opacity=40);
-moz-opacity:.40;
opacity:.40;
}
</style>
<!--END 1st-->
<!--2nd-->
<script language="javascript">
function copy_fields1(){
<!--document.getElementById('name1').value = document.getElementById('name').value;
document.getElementById('from1').value = document.getElementById('email').value;
}
function validate1(){
var filter = /^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if((document.submail.email.value=='')||(document.submail.email.value=='Email Address'))
{alert('Please Enter Email Address'); return false;}
if (!filter.test(document.submail.email.value))
{alert('Please Enter A Valid Email'); return false;}
document.getElementById('sub9').className='gray_out';
document.getElementById('sub9').disabled='true';
copy_fields1();
document.form1.submit();
setTimeout('document.submail.submit()',3000);
}
</script>
<style type="text/css">
.gray_out {
filter:alpha(opacity=40);
-moz-opacity:.40;
opacity:.40;
}
</style>
<!--END 2nd-->
</head>
<body>
<form name="submail" method="post" action="http://empowerauthoritypro.com/commission-loophole-ninja" >
<input type="hidden" name="go" value="now" />
<!-- First Name:<br />
<input id="name" type="text" name="name" value="First Name" onclick="if(this.value=='First Name') this.value=''" class="text-field" /><br />-->
Email:<br />
<input id="email" type="text" name="email" value="Email Address" onclick="if(this.value=='Email Address') this.value=''" class="text-field" />
<!--Optin Now-->
<input type="button" id="sub9" value="Submit" onClick='window.open(validate1())' />
</form>
<!--1st has email requirement only-->
<form name="form2" method="post" action="http://www.aweber.com/scripts/addlead.pl" target="iframe" style="display:none">
<input type="hidden" name="meta_web_form_id" value="1817364894" />
<input type="hidden" name="meta_split_id" value="" />
<input type="hidden" name="listname" value="dummylistshaq" />
<input type="hidden" name="redirect" value="http://www.aweber.com/thankyou.htm?m=default" /><input type="hidden" name="meta_adtracking" value="ninjatest" />
<input type="hidden" name="meta_message" value="1" />
<input type="hidden" name="meta_required" value="email" />
<input type="hidden" name="meta_tooltip" value="" />
<div style="display:none">
<img src="http://forms.aweber.com/form/displays.htm?id=jByM7MxsLBycLA==" alt="" width="1" height="1" />
</div>
<input type="text" name="email" id="from1" value="" size="20">
</form>
<iframe name="iframe" style="display:none"></iframe>
<!--END 1st-->
<!--2nd has name and email requirement but i have compromise the name to be hide-->
<form name="form1" method="post" action="http://www.aweber.com/scripts/addlead.pl" target="iframe" style="display:none">
<input type="hidden" name="meta_web_form_id" value="1376972149" />
<input type="hidden" name="meta_split_id" value="" />
<input type="hidden" name="listname" value="optinninja1" />
<input type="hidden" name="redirect" value="http://www.aweber.com/thankyou.htm?m=default" /><input type="hidden" name="meta_adtracking" value="ninjaoptin" /><input type="hidden" name="meta_message" value="1" />
<input type="hidden" name="meta_required" value="name,email" />
<input type="hidden" name="meta_tooltip" value="" />
<div style="display:none">
<img src="http://forms.aweber.com/form/displays.htm?id=jMzsbJzsTIwsnA==" alt="" width="1" height="1" />
</div>
<input type="hidden" name="name" id="name1" value="" size="20">
<input type="text" name="email" id="from1" value="" size="20">
</form>
<iframe name="iframe" style="display:none"></iframe>
<!--END 2nd-->
</body>
</html>
A better (and AWeber-supported) way to integrate multiple services with your AWeber list is to use the AWeber API.
Another possibility might be to set up a PHP page on your own site, set it as your AWeber Form's "Thank You Page", and code your PHP to take advantage of the Pass Subscriber Data feature:
https://help.aweber.com/entries/21775518-how-do-i-pass-form-data-to-my-thank-you-pages
I'm a bit confused regarding your desired workflow. You mention submitting to two AWeber lists, yet there is a third form in your code as well that posts to a third party.
I highly recommend getting in touch with AWeber Customer Solutions who will be able to address your needs more comprehensively. Just email help#aweber.com or visit https://www.aweber.com/contact-us.htm and a team member will take an in-depth look.
I have a form that pops up when the user clicks a link and then sends an email to the address of their choice. The form looks great, but the email isn't getting sent...
<div id="tellfriend" class="contact_form">
<a class="close" href="#close" >Close</a>
<form id='tellafriend_form' method="post" action="http://naturesfootprintinc.com/sendmail.php">
<label for="name">Your Name: </label>
<input class="std_input" type="text" id="name" name="name" size="40" maxlength="35" value="" />
<label for="to">Friend's email: </label>
<input class="std_input" type="text" id="to" name="to" size="40" maxlength="35" />
<label for="subject">Subject: </label>
<input class="std_input" type="text" id="subject" name="subject" size="40" value="Check this out!!" />
<label for="message">Message: </label>
<textarea id="message" name="message" readonly="readonly" rows="18" cols="40">Custom message</textarea>
<input type="submit" name="submit" class="form_but" value="Submit"/>
</form>
</div><!-- #tellfriend -->
Scripts used:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script>
$(function() {
$('#tellfriend').hide();
$('#sendMessage').click(function(e) {
$("#tellfriend").fadeToggle('fast');
});
});
</script>
Sendmail.php:
<body>
<div id="thankyou">
<h1><strong>Thanks for sharing!</strong></h1>
<p>Back to homepage</p>
</div>
</body>
Yeah, I'm a novice here. Thanks for your help and patience.
You need some server side code to send the mail. Just having a form doesn't do anything for you
So to send it on that click:
$('#sendMessage').click(function(e) {
var $form = $('#tellafriend_form');
$.post($form.get(0).action, $form.serialize(), function(data){
//something on success
})
$("#tellfriend").fadeToggle('fast');
});