I've added the snippet inside the tag:
<script src='https://www.google.com/recaptcha/api.js?render=EXAMPLE123456789-_987654321'></script>
After that, I added this javascript callback inside each form on the site: (grecaptcha above the submit button).
<form accept-charset="UTF-8" target="_blank" action="https://website.infusionsoft.com/app/form/process/1234567890" class="infusion-form" id="inf_form_1234567890" method="POST">
<input name="inf_form_xid" type="hidden" value="1234567890" />
<input name="inf_form_name" type="hidden" value="First Last.com&#a;Web Form submitted&#a;HOME PAGE&#a;First / Last" />
<input name="infusionsoft_version" type="hidden" value="1.00.00.1" />
<div>
<div>
<p class ="white">Register Now</p>
</div>
</div>
<div>
<div> </div>
</div>
<div class="user-fields">
<div class="infusion-field">
<label for="inf_field_FirstName_home">First Name *</label>
<input class="infusion-field-input" id="inf_field_FirstName" name="inf_field_FirstName" placeholder="First Name *" type="text" required />
</div>
<div class="infusion-field">
<label for="inf_field_Email_home">Email *</label>
<input class="infusion-field-input" id="inf_field_Email" name="inf_field_Email" placeholder="Email *" type="text" required />
</div>
</div>
<div>
<div> </div>
</div>
<script>
grecaptcha.ready(function() {
grecaptcha.execute('EXAMPLE123456789-_987654321', {action: 'homepage'})
.then(function(token) {
// Verify the token on the server.
});
});
</script>
<div class="infusion-submit">
<button class="infusion-btn" type="submit">Submit!</button>
</div>
</form>
<script type="text/javascript" src="https://website.infusionsoft.com/app/webTracking/getTrackingCode"></script>
<script type="text/javascript" src="https://website.infusionsoft.com/app/timezone/timezoneInputJs?xid=12345678900987654321"></script>
Is this the correct way?
Related
I'm trying to post a pseudo with ajax like in the title , i think actually with my code i send no informations to my php file.
so this is the code :
$('#send').click(function(){
var pseudo = $('#psd').val();
});
function recuppoint() {
$.post('point.php',{pseudo: pseudo} ,function(data) {
console.log('['+data + ']');
$('.infos2').html(data);
});
}
setInterval(recuppoint, 1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" id="logForm" action="">
<div class="field">
<label class="field-label" for="mailconnect">Votre mail</label>
<input class="field-input"type="email" name="mailconnect" id="email" />
</div>
<div class="field" id="psd">
<label class="field-label" for="client">pseudo client</label>
<input class="field-input" type="text" name="pseudo" id="pseudo" />
</div>
<div class="field">
<label class="field-label" for="mdpconnect">mdp</label>
<input class="field-input" type="password" name="mdpconnect" id="password" />
</div>
<button id="send" class="send"name="formsubscribe">begin</button>
</form>
<div>
<div id="infos" class="infos" align="center"> </div>
<div id="infos2" class="infos2" align="center"> </div>
</div>
So guys how can i solve the problem with the var pseudo ?
thank you
Your div element with id "psd", doesnt have value. If you want to send html use .html(); If you want to get only input values so try some like this:
var x = $('input[name=nameOfInput]').val();
Then you should send it with ajax.
your ajax call should be like this .
you can not access the input field with its parent id as you did $('#psd').val();
but you can access it value with its id itself like this
<input class="field-input" type="text" name="pseudo" id="pseudo" />
$('#send').on('click', function(){
var pseudo = $('#pseudo').val();
$.ajax({
url:'point.php',
type:'POST',
data:{ ele: pseudo},
success:function(data){
$('.infos2').html(data);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" id="logForm" action="">
<div class="field">
<label class="field-label" for="mailconnect">Votre mail</label>
<input class="field-input"type="email" name="mailconnect" id="email" />
</div>
<div class="field" id="psd">
<label class="field-label" for="client">pseudo client</label>
<input class="field-input" type="text" name="pseudo" id="pseudo" />
</div>
<div class="field">
<label class="field-label" for="mdpconnect">mdp</label>
<input class="field-input" type="password" name="mdpconnect" id="password" />
</div>
<button id="send" class="send"name="formsubscribe">begin</button>
</form>
<div>
<div id="infos" class="infos" align="center"> </div>
<div id="infos2" class="infos2" align="center"> </div>
</div>
Below code give me the error:
facebook.htmlName=&LastName=&Email=&Password=&enterEmail=&country_name=&code=&mobile=&btn2=faceboo…:203 The specified value "+,91" is not a valid number. The value must match to the following regular expression: -?(\d+|\d+.\d+|.\d+)([eE][-+]?\d+)?
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>user registration form validation using javascript with example</title>
<script type="text/javascript">
function selectvalue(x){
var country_dropdown=document.getElementById("country");
var country_Mcode=document.getElementById("country_mcode");
if(document.getElementById("country").value=="1")
{
document.getElementById("country_mcode").value="+91"
}
if(document.getElementById("country").value=="2")
{
document.getElementById("country_mcode").value="+1"
}
if(document.getElementById("country").value=="3")
{
document.getElementById("country_mcode").value="+880"
}
if(document.getElementById("country").value=="4")
{
document.getElementById("country_mcode").value="+81"
}
if(document.getElementById("country").value=="5")
{
document.getElementById("country_mcode").value="+86"
}
}
</script>
</head>
<body>
<div id="emptyDiv">
</div>
<div id="description"></div>
<!--container start-->
<div id="container">
<div id="container_body">
<div>
<h2 class="form_title">User Registration Form Demo</h2>
<p class="head_para">Form Validated Using Javascript</p>
</div>
<!--Form start-->
<div id="form_name">
<div class="firstnameorlastname">
<form name="form" >
<div id="errorBox"></div>
<input type="text" name="Name" value="" placeholder="First Name" class="input_name" >
<input type="text" name="LastName" value="" placeholder="Last Name" class="input_name" >
</div>
<div id="email_form">
<input type="text" name="Email" value="" placeholder="Your Email" class="input_email">
</div>
<div id="password_form">
<input type="password" name="Password" value="" placeholder="New Password" class="input_password">
</div>
<div id="Re_email_form">
<input type="text" name="enterEmail" value="" placeholder="Re-enter Email" class="input_Re_email">
</div>
<!--birthday details start-->
<div>
<h3 class="country">Country</h3>
</div>
<div>
<select name="country_name" id="country" onchange="selectvalue()">
<option value="" selected >Country</option>
<option value="1">india</option>
<option value="2">america</option>
<option value="3">Bangladesh</option>
<option value="4">japan</option>
<option value="5">china</option>
</select>
</div>
<div>
<h3 class="country">Mobile No</h3>
</div>
<div>
<input type="number" name="code" value="" class="input_name" id="country_mcode" >
</div>
<div>
<input type="number" name="mobile" value="" placeholder="Mobile No" class="input_name" >
</div>
<!--birthday details ends-->
<div>
<p id="sign_user" onClick="Submit()">Registration</p>
</div>
<div>
<input type="submit" name="btn2" value="facebook registration"/>
</div>
<div>
<p id="google_user" onClick="Submit()">Google Registration</p>
</div>
</form>
</div>
<!--form ends-->
</div>
</div>
<!--container ends-->
</body>
</html>
That happens because your input field is type=number and a + (plus) can not be added this way.
That is actually a little odd, because you can type in +10 for example. But then it is interpreted as a positive 10 and the + is removed and not stored in the value attribute. You can either change the type or remove the plus from the number making it a valid number and not a string.
This should be verifiable if you type +10 in your field and then use the console and type in document.getElementById('country_mcode')[0].value.
The returned value should be 10 not +10.
Edit:
You could remove the type enforcement and add a pattern="\+\d{1,5}" or something similar to allow for your specific use case if the input field can be set by user.
I am having trouble getting the input to subscribe on submit and having it post to a Mailchimp subscription list.
I am using Jquery and Ajax as you can see in the code. I know my api endpoint is good because I tested it on Postman and was able to add a subscriber. However when I run my code locally it does not work.
I also tried to use the embedded code that mailchimp provides and when I would test, it would say that it is sending me an email to confirm addition to the subscribe list. But I never get an email to confirm and it never added to my subscription list. The code doesnt have https: in the links but I did have it in when I tested and did not work.
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="//bigbreakbjj.us14.list-manage.com/subscribe/post?u=06d10966e94997bd9b2564cb2&id=2eb203c03a" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Subscribe to our mailing list</h2>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group">
<label for="mce-FNAME">First Name </label>
<input type="text" value="" name="FNAME" class="" id="mce-FNAME">
</div>
<div class="mc-field-group">
<label for="mce-LNAME">Last Name </label>
<input type="text" value="" name="LNAME" class="" id="mce-LNAME">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_06d10966e94997bd9b2564cb2_2eb203c03a" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->
$("#new-person-form").on("submit", function(event) {
event.preventDefault();
$.ajax({
type: "POST",
url: "https://bigbreakbjj.us14.list-manage.com/subscribe/post?u=06d10966e94997bd9b2564cb2&id=2eb203c03a",
dataType: "jsonp",
data: {
"EMAIL": $("#email").val()
},
success: function(data) {
console.log(data);
alert("Subscribed!");
},
error: function() {
alert("Cannot subscribe");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-3">
<h4><strong>Sign Up Today</strong></h4>
<form id="new-person-form" action="https://bigbreakbjj.us14.list-manage.com/subscribe/post?u=06d10966e94997bd9b2564cb2&id=2eb203c03a">
<h6>First Name</h6>
<div>
<input type="text" id="first-name" />
</div>
<h6>Last Name</h6>
<div>
<input type="text" id="last-name" />
</div>
<h6>Phone Number</h6>
<div>
<input type="text" id="phoneNumber" />
</div>
<h6>Email</h6>
<div>
<input type="email" id="email" />
</div>
<div>
<button type="submit">Submit Form</button>
</div>
</form>
</div>
I have two includes in the HTML view listed below. I wait for the view to load before manipulating some elements but it fails because the includes have not yet finished loading. I check the existence of the elements using the console while debugging. In my controller:
wtApp.controller('createAccountController', function ($scope) {
resetNavbar();
$("a[href$='create-account']").css({ color: navbarSelectedColor });
$scope.$on('$viewContentLoaded', function () {
getCountries();
setupAccountsForm();
var form = $("#form-accounts");
if (form.length) {
form.get(0).reset();
}
});
});
<!DOCTYPE html>
<html>
<head>
<title>Writer's Tryst</title>
<link href='css/accounts.css' rel='stylesheet' type='text/css' />
</head>
<body data-ng-app="">
<div>
<form id="form-accounts" class="form-horizontal well center-form-small">
<h1>Create Account</h1>
<div class="capatcha">
<div id="recaptcha-elements" style="display: inline-block" data-sitekey=""></div>
</div>
<div id="oauth-login" class="form-group row text-center">
<p>
<button id="facebook-login" class="btn btn-custom-primary" formnovalidate>Login with Facebook</button>
<button id="google-login" class="btn btn-custom-primary" formnovalidate>Login with Google</button><br/>
</p>
<p class="text-center">
<button class="btn btn-custom-success" formnovalidate>- OR ENTER -</button>
</p>
</div>
<div id="passwords">
<div class="form-group row">
<label for="pwd" class="col-sm-2 form-control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" required id="pwd" name="pwd" placeholder="Password - 6 characters minimum (will be encrypted)" />
<button id="show-pwd" class="btn btn-custom-primary" formnovalidate tabindex="-1">show</button>
</div>
</div>
<div class="form-group row">
<label for="confirm-pwd" class="col-sm-2 form-control-label">Confirm Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" required id="confirm-pwd" placeholder="Confirm password" />
<button id="show-confirm-pwd" class="btn btn-custom-primary" tabindex="-1">show</button>
</div>
</div>
</div>
<div data-ng-include="'pages/snippets/work-type.html'"></div>
<div data-ng-include="'pages/snippets/account-info.html'"></div>
<button type="submit" id="submit" class="btn btn-custom-warrning btn-block">Send Verification Email</button>
<input type="hidden" id="subject" name="subject" />
<input type="hidden" id="msg" name="msg" />
<input type="hidden" id="userid" name="userid"/>
</form>
<form id="form-verify" class="form-horizontal well center-form-small">
<div id="verify">
<div class="form-group">
<input id="ver-email-msg" name="ver-email-msg" readonly="true" />
</div>
<div class="form-group center-div">
<label for="ver-code">Verification Code</label>
<input id="ver-code" name="ver-code" required autofocus="true" placeholder="Paste verification code" />
</div>
<div class="form-group">
<input id="code" name="code" type="hidden" />
<button id="but-register" name="but-register" class="btn btn-custom-success btn-block">Create Account</button>
</div>
</div>
<input id="account-id" name="account-id" type="hidden" />
</form>
</div>
<script src="js/recaptcha.js"></script>
<script src="js/accounts.js"></script>
</body>
</html>
Try using,
$rootScope.$on('$includeContentLoaded',function(event,url){
if (url == 'YourDesiredPath') {
// do something
}
});
From angular docs:
Emitted every time the ngInclude content is requested.
I have problem when using my ajax form inside the lightbox div .
the form worked outside the lightbox .
after submit the form , I cannot recieve the variable from the form , I see it empty .
I am using lightbox from here:
http://www.aerowebstudio.net/codecanyon/jquery.lightbox/
the html example "
<html>
<head>
<script type="text/javascript">
function send_ajax_data() {
var reg_user = document.getElementById('reg_user').value;
reg_user2 = document.getElementById('reg_user2').value;
reg_pass = document.getElementById('reg_pass').value;
reg_pass2 = document.getElementById('reg_pass2').value;
reg_email = document.getElementById('reg_email').value;
alert(reg_user);
}
</script>
<script type="text/javascript">
$(document).ready(function(){
$('div.lightbox').lightbox();
});
</script>
</head>
<body>
<div id="signup" style="width:756px; margin-right:auto;margin-left:auto;">
<div class="light-box">
<div class="center">
<div class="welcome">
<h1>Hello</h1>
</div>
<div id="reg_stats"></div>
<div class="login-form">
<div class="form-container">
<label class="label">xxx</label>
<input id="reg_user" type="text" />
<label class="label">xxx</label>
<input id="reg_user2" type="text" />
<label class="label">xxx</label>
<input id="reg_email" type="text" />
<label class="label">xxx</label>
<input id="reg_pass" type="text" />
<label class="label">xxx</label>
<input id="reg_pass2" type="text" />
<input type="submit" onclick="send_ajax_data();" class="login-btn" value="Done" />
</div>
</div>
</div>
</div>
</div>
new user
</body>
</html>
Try adding in a form tag?
Without a form wrapping the inputs, there is nothing to submit.