/    Sign up×
Community /Pin to ProfileBookmark

changing submit button to link

I’m using the Add to Cart <form> tag provided by paypal. Rather than use an image, I’d rather have a text link.

Here’s the code:

[code]
<form target=”paypal” action=”https://www.paypal.com/cgi-bin/webscr” method=”post”>
<input type=”image” src=”https://www.paypal.com/en_US/i/btn/x-click-but22.gif” border=”0″ name=”submit” alt=”Make payments with PayPal – it’s fast, free and secure!”>
<img alt=”” border=”0″ src=”https://www.paypal.com/en_US/i/scr/pixel.gif” width=”1″ height=”1″>
<input type=”hidden” name=”add” value=”1″>
<input type=”hidden” name=”cmd” value=”_cart”>
<input type=”hidden” name=”business” value=”[email protected]”>
<input type=”hidden” name=”item_name” value=”Test Item”>
<input type=”hidden” name=”amount” value=”1.00″>
<input type=”hidden” name=”no_shipping” value=”2″>
<input type=”hidden” name=”no_note” value=”1″>
<input type=”hidden” name=”currency_code” value=”USD”>
<input type=”hidden” name=”bn” value=”PP-ShopCartBF”>
</form>
[/code]

How do I do that?

to post a comment
HTML

3 Comments(s)

Copy linkTweet thisAlerts:
@gil_davisJun 26.2006 — <i>
</i>&lt;form name="paypalform" target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post"&gt;
&lt;!--input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-but22.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!"--&gt;

&lt;!-- this is the link that will submit the form --&gt;
&lt;a href="#" onclick="document.paypalform.submit();return false"&gt;Submit&lt;/a&gt;

&lt;img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1"&gt;
&lt;input type="hidden" name="add" value="1"&gt;
&lt;input type="hidden" name="cmd" value="_cart"&gt;
&lt;input type="hidden" name="business" value="[email protected]"&gt;
&lt;input type="hidden" name="item_name" value="Test Item"&gt;
&lt;input type="hidden" name="amount" value="1.00"&gt;
&lt;input type="hidden" name="no_shipping" value="2"&gt;
&lt;input type="hidden" name="no_note" value="1"&gt;
&lt;input type="hidden" name="currency_code" value="USD"&gt;
&lt;input type="hidden" name="bn" value="PP-ShopCartBF"&gt;
&lt;/form&gt;
Copy linkTweet thisAlerts:
@CharlesJun 26.2006 — Danger, Will Robinson, Danger! That'll give you a form that one in ten users cannot use.

One option is to style the submit button:[code=html]<button style="border:0; background-color:#000" type="submit">Submit</button>[/code]Another option is to do something more like:[code=html]<script type="text/javascript>
document.write ('<a href="#">Submit</a>')
document.links[document.links.length-1].onclick = function () {this.form.onsubmit() && this.form.submit()}
</script>

<noscript>
<button type="submit">Submit</button>
</noscript>[/code]
Copy linkTweet thisAlerts:
@gil_davisJun 28.2006 — Very creative, Charles! Styling a button like that was intriguing.

Unfortunately, your second suggestion has a flaw in the click function. The anchor tag does not know anything about forms, so "this.form" doesn't exist from the anchor tag's perspective. If you name the form and use that in the fuction, it should work.
<i>
</i>&lt;form name="f1" ...&gt;
&lt;script type="text/javascript"&gt;
document.write("&lt;a href='#' onclick='document.f1.submit();return false'&gt;Submit&lt;/a&gt;");
&lt;/script&gt;
&lt;noscript&gt;
&lt;button style="border:0; background-color=#000" type="submit"&gt;Submit&lt;/button&gt;
&lt;/noscript&gt;
&lt;/form&gt;

You need to change the value in background-color from #000 to match the document's background color. #000 makes a black box and you can't read the black text. ;-) You also can't tell if there is something there to click on unless you make the text blue and underlined so that it looks like a link. Something like this:
<i>
</i>&lt;button style="border:0; text-decoration: underline; color: blue; background-color=white; cursor: hand" type="submit"&gt;Submit&lt;/button&gt;
×

Success!

Help @planeboy747 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...