We Keep Coding

How to reload / refresh Stripe Checkout button?

I'm submitting my Stripe Checkout form via AJAX (catching the form submit event) because I have a complex multi-pane HTML form and want to display payment errors from Stripe without having to reload the page and regenerate the form or making the user re-enter a load of info.
This all works fine, except once the Stripe Checkout button is used once it's disabled. After I display the error message on the booking form page, I need the user to be able to click the Stripe button again and try different payment info.
How do I reactivate the Stripe button? Do I need to remove the whole Stripe button script from the DOM (I'm using jQuery) and re-insert it (or similar code) fresh?
My standard Checkout button code:
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="my_stripe_key"
data-image="mylogo.png"
data-name="My Booking Form"
data-zip-code="true"
data-locale="auto"
data-email=""
data-description="Payment for this booking"
data-currency="gbp"
data-amount=""
data-label="Pay and book!">
</script>
and if relevant, my AJAX form submit code:
$('#booking-form').get(0).submit = function() {
var formdata = $(this).serialize();
$.ajax({
headers: {
'X-CSRF-TOKEN': $('#booking-form > input[name="_token"]').val()
},
type: 'POST',
url: 'book',
dataType: 'json',
data: formdata,
success: function(data) {
if (data.response == 'ok') // Payment went through OK
{
// Redirect to booking confirmation page:
window.location.replace(data.url);
} else // Payment failed, alert user to try again
{
$('#erroralert').text('Sorry, payment failed, please try again').removeClass('nodisplay');
}
},
error: function(data) // Server error
{
console.log('Error:', data.responseText);
}
});
// Prevent form submit.
return false;
}

You have an attribute disabled="true" which is set to the submit button element after the form is submitted. You just need to remove this attribute : $('button[type="submit"]').get(0).removeAttr("disabled");.
Example that works :
http://jsfiddle.net/5xq8Lhda
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="booking" action="your-server-side-code" method="POST">
<script src="https://checkout.stripe.com/checkout.js" class="stripe-button" data-key="pk_test_TYooMQauvdEDq54NiTphI7jx" data-amount="999" data-name="Stripe.com" data-description="Widget" data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
data-locale="auto" data-zip-code="true">
</script>
</form>
<script>
$('#booking').get(0).submit = function() {
$('button[type="submit"]').get(0).removeAttr("disabled");
return false;
}
</script>
To use your example, you should do something like that :
$('#booking-form').get(0).submit = function() {
var formdata = $(this).serialize();
$.ajax({
headers: {
'X-CSRF-TOKEN': $('#booking-form > input[name="_token"]').val()
},
type: 'POST',
url: 'book',
dataType: 'json',
data: formdata,
success: function(data) {
if (data.response == 'ok') // Payment went through OK
{
// Redirect to booking confirmation page:
window.location.replace(data.url);
} else // Payment failed, alert user to try again
{
$('#erroralert').text('Sorry, payment failed, please try again').removeClass('nodisplay');
$('button[type="submit"]').get(0).removeAttr("disabled");
}
},
error: function(data) // Server error
{
console.log('Error:', data.responseText);
}
});
// Prevent form submit.
return false;
}

If you intend to submit your form by AJAX, or just generally want more control over the checkout experience, I'd recommend using the Custom Checkout integration here.
Simple Checkout was designed around a very straight-forward use case: fill out the form, complete a simple form submit. You can do things like attempt to grab the submit button and remove the disabled attribute, though Stripe could always change things up, it may not act as you intend.
The Custom integration provides a perfect place for your ajax submit or additional js code, in the token callback,
token: function(token) {
// your form submission or next steps here
}

on form submit using ajax and getting value from php function

I have a form calling submitting as follow
<form action="" method="post" id="member_form" onsubmit="return json_add('member','<?php echo ($admin->getnew_id()); ?>','0','slider_form');">
The problem I have is to get the $new_id before submitting the form from another function class.
this is not working
It keep running the funtion getnew_id() and generate the ID before it is saved
I need the process as follow.
Form Open
User complete form
onsubmit it need to do follow.
a. get new id = $new_d
b. then do
return json_add('member','','0','slider_form');">
I tried the following but dont work
$("form").submit(function(){
$.ajax({
url:"lastid.php",
type:'POST',
success:function(response) {
var $new_id = $.trim(response);
return json_add('member-add',$new_id,'0','slider_form');
alert("Submitted");
}
});

The problem seems to be in the third step.
What you should do is prevent the form from submitting and handle it in ajax.
you need onsubmit="return false" to prevent the form from submitting
Next, handle the submission in ajax
$("form#member_form").submit(function(){
$.ajax({
url: "lastid.php",
type: "POST",
data: { // this is where your form's datas are
"json": json_add('member-add',$new_id,'0','slider_form'),
"key": $("form#member_form").serialize()
},
success: function(response) {
var $new_id = $.trim(response);
alert("Submitted");
// alerting here makes more sense
}
// return json_add('member-add',$new_id,'0','slider_form');
// returning here do nothing!
});
You can read more about using ajax in jQuery here

Jquery: Submit a form without refreshing

Im trying to submit a form like this way:
<form id="myForm" action="http://example.com/somefile" method="POST">
...
...
...
<input type="submit" id="sendForm" value="send">
</form>
the action link its a webservice developed by another developer, so, when i submit the form, the webservice replies me with an URL (http://www.example.com/thanks), what i wanna do is to avoid this webservice reply, and in place, change the url of the redirect, is this possible?
Ive tried too do it with:
<script>
$("#sendForm").click(function () {
if (form_check_validation()) {
$("#myForm").submit();
window.location.replace("http://stackoverflow.com");
} else {
return false;
// event.preventDefault();
}
});
</script>
But its not working.
Thanks
NOTE: The webservice is in another server, so im having issues with cross-domain origin.

https://api.jquery.com/event.preventdefault/ Google is your friend, bud...........

Assuming this service allows cross origin and you don't want / need to move to a different page, why not use ajax?
You can simply create and ajax call using $.ajax.
see http://api.jquery.com/jquery.ajax/
Example:
$.ajax({
url : "POST_URL",
type: "POST",
data : formData,
success: function(data, textStatus, jqXHR)
{
// Handle server response
},
error: function (jqXHR, textStatus, errorThrown)
{
// Handle error
}
});

You can do it with Ajax. I also recommend that you bind a submit event listener to the form so that the submission works correctly also when pressing Enter.
$("#myForm").submit(function (event) {
if (form_check_validation()) {
form_submit(this);
} else {
// ...
}
event.preventDefault();
});
function form_submit (form) {
$.ajax({
url: form.action,
type: form.method,
data: $(form).serialize()
});
}

Forms with Ajax send with multi-parameter and A href

within the form element I send data with a href. Using the JavaScript (as defined below), it works perfectly.
I want to send the forms now with Ajax, unfortunately it does not work. Do you have a solution for me. jQuery is included on the page.
Thank You!
function sendData(sFm, sID, sFn, sCl) {
var form = document.getElementById(sFm);
form.sid.value = sID;
form.fnc.value = sFn;
form.cl.value = sCl;
form.submit();
}
Send Data
My new Code:
function sendData(sFm, sID, sFn, sCl) {
var form = $("#"+sFm);
form.submit( function() {
var sid = $('input[name="sid"]').val(sID);
var fnc = $('input[name="fnc"]').val(sFn);
var cl = $('input[name="cl"]').val(sCl);
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: {sid: sid, fnc: fnc, cl: cl}
}).done(function( e ) {
});
});
form.submit();
}

$("form").submit(function() { // for all forms, if you want specially one then use id or class selector
var url = $(this).attr('action'); // the script where you handle the form input.
var method = $(this).attr('method');
$.ajax({
type: method,
url: url,
data: $(this).serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // handle response here
}
});
return false; // avoid to execute the actual submit of the form.
});
:) , Thanks
Just because we don't want to submit all form by ajax so we can set a data-attribute to form tag to indicate, will it should be submit by ajax or normally ,, so ,,
$("form").submit(function() { ...
if($(this).attr('data-ajax') != "true") return true; // default hanlder
...
so If form is written like this :-
<form action="/dosomething" method="post" data-ajax="true"> </form> // will be sumit by ajax
<form action="/dosomething" method="post" data-ajax="false"> </form>
// will be sumit by default method

What does this Javascript Sign up Code do?

It is related to an ajax/jquery 1.3.2 based sign up form. I want to learn how to make this and use jquery in general by understanding the code/syntax line by line.
Can someone explain what this code is trying to accomplish and how it does so line by line?
<script type="text/javascript">
$(document).ready(function(){
// Email Signup
$("form#sub_name").submit(function() {
var dataStr = $("#UserEmail").val();
$.ajax({
type: "POST",
url: "signup.php",
data : {UserEmail: dataStr},
success: function(del){
$("#signup-success").html(del);
$("#signup-success").fadeIn();
$('#signup-success').fadeOut(10000);
}
});
return false;
});
});
Thanks!

Code explained in the comments.
<script type="text/javascript">
$(document).ready(function(){ // run this code on page load
// Email Signup
$("form#sub_name").submit(function() { // activate on form submit for sign in
// the id of the form is sub_name
var dataStr = $("#UserEmail").val(); // get the email address from an
// input field with ID UserEmail
$.ajax({ // use and ajax call to signup.php
// using POST method
type: "POST",
url: "signup.php",
data : {UserEmail: dataStr}, // The parameter UserEmail is passed.
success: function(del){ // this part displays the success
$("#signup-success").html(del); // probably a div with id signup-success
$("#signup-success").fadeIn(); // is faded in and
$('#signup-success').fadeOut(10000); // removed after 10 seconds
}
});
return false;
});
});