We Keep Coding

Squarespace Donation Submit Redirect with Javascript?

I have two separate donation forms that need to redirect to their own custom 'Thank You' pages once submitted. Squarespace does not give you the option to do this and instead defaults to a preset, generated page. I believe what I am looking for--and I could be wrong--is some custom Javascript that can handle the request.
Below is the HTML for the first form:
https://secure.squarespace.com/commerce/donate?donatePageId=56a99e1557eb8df616ef2dad
<div class="left-column-wrapper">
<div id="form-wrapper”>
<div id="yui_3_17_2_1_1480624209818_107" class="yui3-widget sqs-widget sqs-checkout-form”>
<div id="yui_3_17_2_1_1480624209818_109" class="sqs-checkout-form-content”>
<form action="/commerce/submit-donation?crumb=BF2bsTsJ-mjNZmFjMjkxZDUyMDVlNmMxYjZmYjM4NjFiNWQ4MjU0" method="POST”>
<input type="hidden" name="customFormSubmission”>
<div id="yui_3_17_2_1_1480624209818_163" class="yui3-widget sqs-widget sqs-checkout-form-section card sqs-checkout-form-address sqs-checkout-form-payment editing sqs-checkout-form-payment-focused”>
<div id="yui_3_17_2_1_1480624209818_165" class="sqs-checkout-form-payment-content”>
<div class="title">
<fieldset id="yui_3_17_2_1_1480624209818_836">
<div class="subtitle">Billing Address</div>
<!-- bill to shipping -->
<!-- Billing Information —>
<div id="billing-address">
<div id=“credit-card”>…</div>
<div class="subtitle">Secure Payment</div>
<!--
Credit Card Fields
NOTA BENE: These INPUTs are left without 'name' because we ABSOLUTELY must NOT
transmit these values to our own servers.
-->
<div id="credit-card”>…</div>
<!-- Secure payment conditions -->
<div id="comfort”>…</div>
<!-- Place Order -->
<div id="place-order">
<div id="place-order-button" class="button continue-button" value="Place Order">SECURE DONATION</div>
<div class="wait-in-queue-message" style="display: none”>…</div>
<!-- hidden field to convey the Stripe Token so we may submit the charge -->
<input name="stripeToken" type="hidden">
<!-- optional hidden fields -->
<input name="donationAmountCents" type="hidden">
<input name="donatePageId" type="hidden">
<input name="email" type="hidden">
<input name="phone" type="hidden">
<input name="joinMailingList" type="hidden">
</div>
</fieldset>
</div>
</div>
</form>
</div>
</div>
</div>
Below is the beginning of the HTML for the second form (just to show a comparison for the differences):
https://secure.squarespace.com/commerce/donate?donatePageId=583c8b80d2b8571174b04cc8
<div class="left-column-wrapper">
<div id="form-wrapper”>
<div id="yui_3_17_2_1_1480625072856_106" class="yui3-widget sqs-widget sqs-checkout-form”>
<div id="yui_3_17_2_1_1480625072856_108" class="sqs-checkout-form-content”>
<form action="/commerce/submit-donation?crumb=BF2bsTsJ-mjNZmFjMjkxZDUyMDVlNmMxYjZmYjM4NjFiNWQ4MjU0" method="POST”>
<input type="hidden" name="customFormSubmission”>
<div id="yui_3_17_2_1_1480625072856_162" class="yui3-widget sqs-widget sqs-checkout-form-section card sqs-checkout-form-address sqs-checkout-form-payment editing sqs-checkout-form-payment-focused”>
<div id="yui_3_17_2_1_1480625072856_164" class="sqs-checkout-form-payment-content”>
<div class="title">
Any help would be greatly appreciated.
Thanks so much!

Loading HTML elements using JS

I'm trying to install custom MailChimp form with hidden fields.
The values that I want to pass on are included in the URL and I extract them using JS. No issue there.
The form code looks something like this:
<div id="mc_embed_signup">
<form action="//treat-candida.us3.list-manage.com/subscribe/post?u=d6e792c187ee9f2f2ad&id=787f11a" 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 list</h2>
<div class="indicates-required"><span class="asterisk"></span> </div>
<div class="mc-field-group">
<label for="mce-EMAIL"><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"><span class="asterisk"></span>
</label>
<input type="text" value="" name="FNAME" class="required" id="mce-FNAME">
</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>
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_d6e792c187ee9f2f2da2f179d_787f1101bd" 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]='COOKIE';ftypes[2]='text';fnames[3]='GENDER';ftypes[3]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
What I have to do is to append values from the URL to //treat-candida.us3.list-manage.com/subscribe/post?u=d6e792c187ee9f2f2ad&id=787f11a
within the code. I tried using and .innerHTML to edit just that part. It passes the values successfully that way, but the form won't be submitted properly because of the edit. It looks like I have to edit the whole code with divs and text at once. Is there an elegant way to do so?

Do something like:
$("#mc-embedded-subscribe-form").action = $("#mc-embedded-subscribe-form").action + values

background-image not showing on mobile but showing on desktop

l got a landing page up and running here compare.comxa.com..when l try to view on my android device only the form shows,the background image is no where to be found. please can you help.
this is the code
body {
height:100%;
background: url("http://bit.ly/1MOnMVB") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
#mc_embed_signup {
background:#fff;
clear:left;
font:14px Helvetica,Arial,sans-serif;
position:absolute;
top:85px;
left:35px;
border-radius:5px;
}
h2 {
color:orange;
font-weight:bold;
text-align:center;
}
h5 {
color:#483D8B;
text-align:center;
}
<!DOCTYPE HTML>
<html>
<head>
<title>black friday deals</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="author" content="ataga austin">
<meta name="keywords" contents="black friday,deals,black firday deals,black friday deal comapre">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-081711.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class=" col-xs-12 col-md-12">
<div class="row">
<div class=" col-xs-12 col-md-4">
<div id="mc_embed_signup">
<form action="//comxa.us12.list-manage.com/subscribe/post?u=3380c08f529e58f0eadc50f43&id=ab83c00a63" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Best Black Friday Deals</h2>
<h5>Compare Prices Across Your Favourite Stores</h5>
<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" placeholder=" something#some.com">
</div>
<div class="mc-field-group">
<label for="mce-FNAME">Name </label>
<input type="text" value="" name="NAME" class="" id="mce-NAME" placeholder=" smith davis">
</div>
<div class="mc-field-group">
<label for="mce-PRODUCT">PRODUCT </label>
<input type="text" value="" name="PRODUCT" class="" id="mce-PRODUCT" placeholder="apple tv" >
</div>
<div class="mc-field-group">
<label for="mce-LNAME">FAVORITE STORE </label>
<input type="text" value="" name="STORE" class="" id="mce-STORE" placeholder=" amazon">
</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_3380c08f529e58f0eadc50f43_ab83c00a63" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-success"></div>
</div>
</form>
</div>
</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]='PRODUCT';ftypes[2]='text';fnames[3]='STORE';ftypes['3']='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->
</div>
</div>
</div>
</div>
</body>
</html>

It looks like you're trying to load the background image from a protected ftp server. That works only in the following format ftp://user:password#server.tld
BUT that's clearly not recommended (password in cleartext!)
So rather than doing something stupid as that move the file to the right directory on the web server and just reference it like this: background-image: url(bkg1.jpeg);

Background image is not loading because it can't get access to to your account where you have your image Just change image url and it will work
background: url("http://www.wallpapereast.com/static/images/HD-Wallpapers1_Q75eDHE.jpeg") no-repeat center center fixed;

Integrating PayMill: Error "field_invalid_amount" by creating the token and its input field

I'm implementing the Credit Card Payment form of PayMill according to the Payment Form docu. So I copied the JS from the Bridge docu page and the form from the Payment Form docu page.
But no token is created. When I try to debug the JS and add console.info(error.apierror); into the paymillResponseHandler(...) function, I get the error code: field_invalid_amount.
According to the support page
There are three possible reasons for this error message:
no amount value was provided
numbers were rounded
wrong delimiter symbol
But the amuont is provided and I've already tried different delimiter symbols. What "numbers were rounded" means, is not clear.
What can be the problem and how to fix this issue?
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="generator" content="PSPad editor, www.pspad.com">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<title>
</title>
</head>
<body>
<!-- PayMill HEAD start -->
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap.no-responsive.no-icons.min.css" />
<script type="text/javascript">
var PAYMILL_PUBLIC_KEY = '51668632777bf03b57f861c5a7278a38';
</script>
<script type="text/javascript" src="https://bridge.paymill.com/"></script>
<!-- PayMill HEAD stop -->
<!-- PayMill FORM start -->
<form id="payment-form" class="span4" action="payment.php" method="POST">
<p class="payment-errors alert-error span3" style="display:none;">
</p>
<div id="payment-form-cc">
<div class="controls controls-row">
<div class="span2">
<label class="card-number-label">Kreditkarte
</label>
<input class="card-number span2" type="text" size="20" value="4111111111111111"/>
</div>
<div class="span1">
<label class="card-cvc-label">CVC
</label>
<input class="card-cvc span1" type="text" size="4" value="111"/>
</div>
</div>
<div class="controls controls-row">
<div class="span3 card-icon">
</div>
</div>
<div class="controls controls-row">
<div class="span3">
<label class="card-holdername-label">Karteninhaber
</label>
<input class="card-holdername span3" type="text" size="20" value="lala"/>
</div>
</div>
<div class="controls controls-row">
<div class="span3">
<label class="card-expiry-label">Gültigkeitsdatum (MM/YYYY)
</label>
<input class="card-expiry-month span1" type="text" size="2" value="12"/>
<span style="float:left;"> /
</span>
<input class="card-expiry-year span1" type="text" size="4" value="2015"/>
</div>
</div>
</div>
<div class="controls controls-row">
<div class="span2">
<label class="amount-label">Betrag
</label>
<input class="amount span2" type="text" size="5" value="9,99" name="amount"/>
</div>
<div class="span1">
<label class="currency-label">Währung
</label>
<input class="currency span1" type="text" size="3" value="EUR" name="currency"/>
</div>
</div>
<div class="controls controls-row">
<div class="span4">
<button class="submit-button btn btn-primary" type="submit" >Pay!</button>
</div>
</div>
</form>
<!-- PayMill FORM stop -->
<!-- PayMill FOOT start -->
<script type="text/javascript">
function paymillResponseHandler(error, result) {
if (error) {
console.info(error.apierror);
// Displays the error above the form
$(".payment-errors").text(error.apierror);
} else {
console.info('OK');
var form = $("#payment-form");
// Output token
var token = result.token;
// Insert token into form in order to submit to server
form.append(
"<input type='hidden' name='paymillToken' value='"+token+"'/>"
);
// Submit form
form.get(0).submit();
}
}
</script>
<script type="text/javascript">
paymill.createToken({
number: $('.card-number').val(), // required
exp_month: $('.card-expiry-month').val(), // required
exp_year: $('.card-expiry-year').val(), // required
cvc: $('.card-cvc').val(), // required
amount_int: $('.card-amount-int').val(), // required, e.g. "4900" for 49.00 EUR
currency: $('.currency').val(), // required
cardholder: $('.card-holdername').val() // optional
},
paymillResponseHandler);
</script>
<!-- PayMill FOOT stop -->
</body>
</html>

In the form the input fiel amount had classes amount and span2. And the token creating function was checking the value of $('.card-amount-int'). Now I've simply added the card-amount-int class to the amount input field and... get another issues... :) But this problem is solved.

Close popup after form is submitted

That seems to be a common question with multiple replies but I couldn't get any of them work.
I'm working on WP. Currently I'm using a plugin that shows a pop-up as soon as a not logged in user lands to the website. In the popup I use an optin form (created through MailChimp).
When the user submits his info, a new tab opens moving him to the email verification page.
The problem is that the popup remains open in the first tab.
I would like it to close as soon as the data are submitted. Is that possible?
Here's a link to the website.
Here's the code of my form:
<div id="mc_embed_signup">
<form action="http://fitnessforum.us6.list-manage.com/subscribe/post?u=d6acf8949532b107b7b21c9d0&id=1304ea7322" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="">
<div class="mc-field-group">
<input id="firstname3" style="width:260px;margin:5px 0;background-position:95% center" type="text" value="" name="FNAME" placeholder="'Ονομα">
</div>
<div class="mc-field-group">
<input id="primaryemail3" style="width:260px;margin:5px 0;background-position:97% center" type="email" value="" name="EMAIL" placeholder="Email">
</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>
<div class="clearfix">
<input name="subscribe" style="width:305px;margin:4px 5px 0 0" class="simplemodal-close button_link hover_fade large_button silver button_widget" type="submit" value="ΣΤΕΙΛΤΕ ΤΟ ΔΩΡΟ ΜΟΥ!"></div>
</form>
</div>
<div style="text-align: center">
<p class="under_button2"> Το email σου είναι ασφαλές στα χέρια μας.</p>
<div class="af-clear">
</div>
</div>
</div>
<!--End mc_embed_signup-->

Just make sure your "thank you" page has code like someone above is mentioning. Is it an actual popup or javascript one like shadowbox? You might need something like this:
parent.Shadowbox.close();"