First off, I'm a newbie in all this so forgive me if I may have to ask a lot of questions.
I'm working on a Stripe Payment form. I basically copied and pasted the sample code, changing some entries based on how I understood it. I have several concerns/questions:
The error "The 'exp_month' parameter should be an integer (instead, is undefined). I checked my code and made sure that I followed the suggested solution to others' issue similar to this error. I believe I have everything in order but I'm still getting the issue.
Before this issue, I was able to submit transactions in testing environment but I'm not seeing them on the log section of Stripe's Dashboard. Is there anything missing on my codes?
I need help in being able to capture name, address, phone number, email address. I added entry fields on the form, but the data are not recorded. Please help me on this as well.
I'm sharing the codes I'm currently using:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Purchase 1-On-1 Private Photography Course</title>
<!-- The required Stripe lib -->
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<!-- jQuery is used only for this example; it isn't required to use Stripe -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
// This identifies your website in the createToken call below
Stripe.setPublishableKey('Stripe Test Publishable Key');
var stripeResponseHandler = function(status, response) {
var $form = $('#payment-form');
if (response.error) {
// Show the errors on the form
$form.find('.payment-errors').text(response.error.message);
$form.find('button').prop('disabled', false);
} else {
// token contains id, name, last4, and card type
var token = response.id;
// Insert the token into the form so it gets submitted to the server
$form.append($('<input type="hidden" name="stripeToken" />').val(token));
// and re-submit
$form.get(0).submit();
}
};
jQuery(function($) {
$('#payment-form').submit(function(e) {
var $form = $(this);
// Disable the submit button to prevent repeated clicks
$form.find('button').prop('disabled', true);
Stripe.card.createToken($form, stripeResponseHandler);
// Prevent the form from submitting with the default action
return false;
});
});
Stripe.card.createToken({
name: $('.customer-name').val(),
address_line1: $('.address- line1').val(),
address_line2: $('.address-line2').val(),
address_city: $('.city-address').val(),
address_state: $('.state-address').val(),
address_zip: $('.address-zip').val(),
email: $('.customer-email').val(),
phone_number: $('.phone-number').val(),
number: $('.card-number').val(),
cvc: $('.card-cvc').val(),
exp_month: $('.card-expiry-month').val(),
exp_year: $('.card-expiry-year').val()
},
stripeResponseHandler);
</script>
</head>
<body>
<h1>Purchase 1-On-1 Private Photography Course</h1>
<form action="" method="POST" id="payment-form">
<span class="payment-errors"></span>
<div class="form-row">
<label>
<span>Name</span>
<input type="text" size="30" data-stripe="name"/>
</label>
</div>
<div class="form-row">
<label>
<span>Address Line 1</span>
<input type="text" size="20" data-stripe="address_line1"/>
</label>
<label>
<span>Address Line 2</span>
<input type="text" size="20" data-stripe="address_line2"/>
</label>
</div>
<div class="form-row">
<label>
<span>City</span>
<input type="text" size="15" data-stripe="address_city"/>
</label>
<label>
<span>State</span>
<input type="text" size="2" data-stripe="address_state"/>
</label>
<label>
<span>Zip</span>
<input type="text" size="5" data-stripe="address_zip"/>
</label>
</div>
<div class="form-row">
<label>
<span>Email</span>
<input type="text" size="20" data-stripe="email"/>
</label>
</div>
<div class="form-row">
<label>
<span>Phone Number</span>
<input type="text" size="20" data-stripe="phone_number"/>
</label>
</div>
<div class="form-row">
<label>
<span>Card Number</span>
<input type="number" size="20" data-stripe="number"/>
</label>
</div>
<div class="form-row">
<label>
<span>CVC</span>
<input type="text" size="4" data-stripe="cvc"/>
</label>
</div>
<div class="form-row">
<label>
<span>Expiration (MM/YYYY)</span>
<input type="number" size="2" data-stripe="exp_month"/>
</label>
<span> / </span>
<input type="number" size="4" data-stripe="exp_year"/>
</div>
<h2>Upon submitting your payment, you will be charged AUD20.00</h2>
<button type="submit">Submit Payment</button>
</form>
</body>
</html>
It looks like you may have combined incompatible code from old tutorials and new tutorials, but it's easy enough to fix!
All the val() calls you're passing to createToken will return an undefined value. You're using class accessors (i.e. looking for a DOM element with class of address-line1), but none of your form fields have a class attribute; they're using data attributes.
You'll instead want to look the fields up via their data-stripe attribute:
Stripe.card.createToken({
name: $('input[data-stripe=name]').val(),
address_line1: $('input[data-stripe=address-line1]').val(),
// etc.
While you're making this change, also double-check that you're using the same data-stripe value in both the form and the jQuery selector—right now there are several places where the two don't match. For example, the form uses address_line1 while your jQuery looks for address-line1.
Related
I'm really terrible with forms, so any help you can provide would be great.
This form initially had a modal that came up on submission, but I had to change it to a redirect. Now it's redirect without any data being entered.
<form id="contact-form" method="post" onsubmit="return redirect()">
<div class="contact-form-loader"></div>
<fieldset>
<div class="contact-form_top-section">
<label class="name">
<input type="text" name="name" placeholder="Parent's Name:" value="" data-constraints="#Required #JustLetters">
<span class="empty-message">*This field is required.</span>
<span class="error-message">*This is not a valid name.</span>
</label>
<label class="email">
<input type="text" name="email" placeholder="Parent's E-mail:" value="" data-constraints="#Required #Email">
<span class="empty-message">*This field is required.</span>
<span class="error-message">*This is not a valid email.</span>
</label>
<label class="phone">
<input type="text" name="phone" placeholder="Parent's Cellphone:" value="" data-constraints="#JustNumbers">
<span class="empty-message">*This field is required.</span>
<span class="error-message">*This is not a valid phone.</span>
</label>
<label class="message">
<input type="text" name="message" placeholder="Tell us about your children:" value="" data-constraints="#Required">
<span class="empty-message">*This field is required.</span>
<span class="error-message">*The message is too short.</span>
</label>
</div>
<div class="contact-form_bottom-section">
Clear
<input type="submit" class="btn btn__hover bg-color-6" value="Send">
</div>
</fieldset>
The .js page has a ton of data, and I'm not exactly sure which part you need. Here's the first part.
;(function($){
$.fn.TMForm=function(opt){
return this.each(TMForm)
function TMForm(){
var form=$(this)
opt=$.extend({
okClass:'ok'
,emptyClass:'empty'
,invalidClass:'invalid'
,successClass:'success'
,responseErrorClass:'response-error'
,responseMessageClass:'response-message'
,processingClass:'processing'
,onceVerifiedClass:'once-verified'
,mailHandlerURL:'bat/MailHandler.php'
,successShowDelay:'4000'
,stripHTML:true
,recaptchaPublicKey:''
,capchaTheme:'clean'
},opt)
init()
function init(){
form
.on('submit',formSubmit)
.on('reset',formReset)
.on('focus','[data-constraints]',function(){
$(this).parents('label').removeClass(opt.emptyClass)
})
.on('blur','[data-constraints]:not(.once-verified)',function(){
$(this)
.addClass(opt.onceVerifiedClass)
.trigger('validate.form')
})
.on('keyup','[data-constraints].once-verified',function(){
$(this).trigger('validate.form')
})
.on('keydown','input',function(e){
var $this=$(this)
,next=$this.parents('label').next('label').find('input,textarea')
if(e.keyCode===13)
if(next.length)
next.focus()
else
form.submit()
})
.on('keydown','textarea',function(e){
if(e.keyCode===13&&e.ctrlKey)
$(this).parents('label').next('label').find('input,textarea').focus()
})
.on('change','input[type="file"]',function(){
$(this).parents('label').next('label').find('input,textarea').focus()
})
.attr({
method:'POST'
,action:opt.mailHandlerURL
})
Your best bet is to put the redirect function at the end of the formSubmit function which should be somewhere in your JS file. By doing what you did your form never gets to hit the 'formSubmit' function which I assume handles the data.
I'm new to Bootstrap. But I'm pretty familiar with HTML. The thing is I cannot get parameter values from JSP. The parameters are from HTML page with Bootstrap 3. Here're the code. I don't understand. If I make simple html only page, then I could get the parameters.
<form class="form-horizontal" method="POST" action="makeResv.jsp">
<div class="container">
<div class="row">
<div class="control-group col-md-5">
<label for="checkIn">date1</label>
<div id="date-container">
<div class="input-group date">
<input type="text" id="checkIn" class="form-control"><span
class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
</div>
</div>
<div class="control-group col-md-5">
<label for="checkOut">date2</label>
<div id="date-container">
<div class="input-group date">
<input type="text" id="checkOut" class="form-control"><span
class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
</div>
</div>
<div class="col-md-2">
<button type="submit" class="btn btn-success">search</button>
</div>
</div>
</div>
</form>
In a JSP page, I'm just doing the following.
String checkIn = request.getParameter("checkIn");
String checkOut = request.getParameter("checkOut");
out.println(checkIn + " " + checkOut);
What's wrong with the above HTML code with Bootstrap?? Please give me some advise. Thanks!!
BTW, I'm using datepicker JavaScript library, but I don't think that affect the results. I cannot add the library code here but it works great anyway.
https://github.com/eternicode/bootstrap-datepicker
Bootstrap is same as HTML. The problem you are having is because you do not have any name attribute defined in your input element. You define id but to access submited variables via POST (request.getParameter() function) you need to have name attribute defined:
Replace <input> lines like this:
<input type="text" name="checkIn" id="checkIn" class="form-control">
And
<input type="text" name="checkOut" id="checkOut" class="form-control"><
I am trying to develop my first component for Joomla. I have installed Joomla 3, and things are going pretty good.
I want to add a form validation (client side) on the frontend, where I have a submission form.
My code is:
<?php
// No direct access to this file
defined('_JEXEC') or die('Restricted access');
// Add form validation
JHTML::_('behavior.formvalidation');
?>
<form class="form-validate" id="myForm" method="post">
<input name="email" type="text" class="required validate-email" size="30" />
<button type="submit" class="validate">Submit form</button>
</form>
The validation works, but does not show any message error - just a field. The HTML for the error field is:
<div id="system-message-container">
<div id="system-message" class="alert alert-error">
<h4 class="alert-heading"></h4>
<div></div>
</div>
</div>
So, how do I add text to the validation? Do I need to create a language file for my component?
You need to change form submit button as input
Try this-
<?php
// No direct access to this file
defined('_JEXEC') or die('Restricted access');
// Add form validation
JHTML::_('behavior.formvalidation');
?>
<form class="form-validate" id="myForm" method="post">
<input name="email" type="text" class="required validate-email" size="30" />
<input type="submit" name="submit" value="Submit" />
</form>
Update:-
You can try this also-
<?php
// No direct access to this file
defined('_JEXEC') or die('Restricted access');
// Add form validation
JHTML::_('behavior.formvalidation');
?>
<form name="adminForm" id="myForm" method="post" onsubmit="return submitbutton();">
<input id="email" name="email" type="text" class="required validate-email" size="30" />
<button type="submit" class="validate">Submit form</button>
</form>
<script type="text/javascript">
/* Override joomla.javascript, as form-validation not work with ToolBar */
function submitbutton() {
var f = document.adminForm;
if (document.formvalidator.isValid(f)) {
document.adminForm.submit();
return true;
}
else {
var msg = new Array();
msg.push('Invalid input, please verify again!');
if($('email').hasClass('invalid')){
msg.push('<?php echo JText::_('Invalid Email')?>');
}
alert (msg.join('\n'));
return false;
}
}
</script>
This will validate form at the client side but not in server side.
For more info check this - http://docs.joomla.org/Form_validation
also make sure you have added this code in the index.php
<jdoc:include type="message" />
I've just had this very problem. The issue is that you don't have a label associated with the form field, Joomla validation code builds the error message from the label text.
If you don't want the label to appear then set it to hidden (if you're using bootstrap use the hidden class). You must add a for clause to the label. If you also give it an id which is the set to the input id + '-lbl', then it will optimise the speed of the label lookup.
<form class="form-validate" id="myForm" method="post">
<label class="hidden" for="inputid" id="inputid-lbl">Form label</label>
<input id="inputid" name="email" type="text" class="required validate-email" size="30" />
<button type="submit" class="validate">Submit form</button>
</form>
Could someone please take a look at my website's code and tell me why my contact form isnt working?
Here are the relevant portions of code:
From the contact.html file:
<h3 class="indent-bot2">Contact Form</h3>
<form action="#" id="contact-form">
<div class="success"> Contact form submitted!<br>
<strong>We will be in touch soon.</strong> </div>
<fieldset>
<label class="name">
<input type="text" value="Enter Your Name:">
<span class="error">*This is not a valid name.</span>
<span class="empty">*This field is required.</span> </label>
<label class="email">
<input type="text" value="Enter Your E-mail:">
<span class="error">*This is not a valid email address.</span>
<span class="empty">*This field is required.</span> </label>
<label class="phone">
<input type="tel" value="Enter Your Phone:">
<span class="error">*This is not a valid phone number.</span>
<span class="empty">*This field is required.</span> </label>
<label class="message">
<textarea>Enter Your Message:</textarea>
<span class="error">*The message is too short.</span>
<span class="empty">*This field is required.</span> </label>
<div class="buttons-wrapper">
<a class="button" data-type="reset">Clear</a>
<a class="button" data-type="submit">Send</a>
</div>
</fieldset>
</form>
Also from the contact.html file:
<script type="text/javascript">
$(window).load(function(){
$('.slider')._TMS({
duration:800,
easing:'easeInCirc',
preset:'zabor',
pagination:false,
slideshow:7000,
banners:'fromTop',
nextBu:'.next',
prevBu:'.prev',
waitBannerAnimation:false,
pauseOnHover:true,
beforeAnimation:function(){
$('.slider .prev')
.stop()
.animate({top:'425px'},300,'easeOutCirc')
$('.slider .next')
.stop()
.animate({top:'425px'},300,'easeOutCirc')
},
afterAnimation:function(){
$('.slider .prev')
.css({top:'425px'})
.stop()
.animate({top:'327px'},300,'easeOutCirc')
$('.slider .next')
.css({top:'425px'})
.stop()
.animate({top:'327px'},300,'easeOutCirc')
}
})
$('#contact-form').forms({
ownerEmail:'info#dohatutor.com'
})
});
</script>
I think this is the piece of code that links to a javascript file which in turn calls "mailhandler.php".
<form action="some script" METHOD="POST" ENCTYPE="multipart/form-data"></form>
action="php or asp or pl script for processing form"
You didn't specify where the form should post to - what is the name of the script that you want to post this form to?
Now it says:
form action="#"
And it should say something like:
form action="contact.php"
I've been working on a number of ways to do this and I'm now convinced there is some thing I am missing as my code works fine on JSfiddle - http://jsfiddle.net/ccsnet/dK7NX/5/
<div id="eventscontent" data-role="content">
<div id="eventlistcontrolsdiv1" align="center" >
<form id="eventlistcontrols" name="eventlistcontrols" class="eventlistcontrols" method="post" action="">
<div id="eventlistbutton" align="center">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal" >
<input id="bydistance" type="radio" name="eventsortby" checked="true" />
<label for="bydistance">By Distance</label>
<input id="bytype" type="radio" name="eventsortby" />
<label for="bytype">By Type</label>
<input id="byimpact" type="radio" name="eventsortby" />
<label for="byimpact">By Impact</label>
</fieldset>
</div>
</div>
</form>
</div>
</div>​
$(document).ready(function() {
$(function() {
$("input[name='eventsortby']").click(function() {
alert($("input[name=eventsortby]:radio:checked").attr("id"));
})
});
});
What I don't understand is why this should be the case. The only differences are that I have the javascript in a separate file to the html form but I thought I was referencing it correctly. I have tried doing...
input[name=document.eventlistcontrols.eventsortby]
... how ever this did not work either....
Can any one see what I am not doing correctly ?
Thanks
Terran