How convert html form to javascript - javascript

I have html form
<form action="https://perfectmoney.com/api/step1.asp" method="POST">
<input type="hidden" name="PAYEE_ACCOUNT" value="U1224348">
<input type="hidden" name="PAYEE_NAME" value="Perfect Lottery">
<input type="text" name="PAYMENT_ID" value=""><BR>
<input type="text" name="PAYMENT_AMOUNT" value=""><BR>
<input type="hidden" name="PAYMENT_UNITS" value="USD">
<input type="hidden" name="STATUS_URL" value="">
<input type="hidden" name="PAYMENT_URL" value="http://simplecod.wordpress.com/transfers_completed_successfully">
<input type="hidden" name="PAYMENT_URL_METHOD" value="LINK">
<input type="hidden" name="NOPAYMENT_URL" value="http://simplecod.wordpress.com/transfers_will_fail/">
<input type="hidden" name="NOPAYMENT_URL_METHOD" value="LINK">
<input type="hidden" name="SUGGESTED_MEMO" value="">
<input type="hidden" name="time" value="Your bet on 05/23/2011;">
<input type="hidden" name="BAGGAGE_FIELDS" value="time">>
</form>
I need to do the same thing in javascript and send the link.
How do this?

if you use jquery, you can use the serialize() function which will do exactly what you want. It combines all names and values and generates a string from it.
You can find the function here: http://api.jquery.com/serialize/

not sure about javascript? but you can do this dynamically with a server side script such as Perl or PHP.

Related

paypal button form will not auto-submit in php file

I've got a paypal button form in a php file that I'm trying to auto-submit using javascript. It seems like it should be very straight forward, but when I test it, the submit button displays, and I am not automatically re-directed to paypal as expected. When I click the submit button I am redirected to paypal and everything looks right. I've read through all the similar posts, which is where I found the script I'm trying to use. I've been at this for several hours and have tried several different recommendations from other posts but I just can't get it to work. Any assistance would be very appreciated! The form code (with some values "xxx"'d out for security) and script is shown below. Note that some of the field values are populated with php.
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" id="paypalButton" name="paypalButton" target="_top" >
<input type="hidden" name="cmd" value="_xclick-subscriptions">
<input type="hidden" name="business" value="xxx">
<input type="hidden" name="lc" value="US">
<input type="hidden" name="item_name" value="<?php echo $_SESSION['item_name'];?>">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="no_shipping" value="1">
<input type="hidden" name="rm" value="1">
<input type="hidden" name="return" value="http://example.com/sucess.php">
<input type="hidden" name="cancel_return" value="http://example.com/Cancel.php">
<input type="hidden" name="src" value="1">
<input type="hidden" name="a3" value="<?php echo $_SESSION['price'];?>">
<input type="hidden" name="custom" value="<?php echo $_SESSION['deal_id'].$_SESSION['refresh_token'];?>">
<input type="hidden" name="p3" value="1">
<input type="hidden" name="t3" value="<?php echo $_SESSION['t3'];?>">
<input type="hidden" name="a1" value="<?php echo $_SESSION['a1'];?>">
<input type="hidden" name="p1" value="1">
<input type="hidden" name="t1" value="Y">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="bn" value="xxx">
<input type="submit" name="submit">
</form>
<script type="text/javascript">
document.getElementById('paypalButton').submit(); // SUBMIT FORM
</script>
``
I think it should be (even if you have your JS after the Form is created):
window.onload = submit_document();
function submit_document(){
document.getElementById('paypalButton').submit();
}
If you had JQuery, you may even do:
$().ready(function(){
$("#frm1").paypalButton();
});
Would this work for you?

Same form multiple times on page, Get values of submitted form

I have the same form multiple times on my page, I'm trying to use jquery to detect which form is submitted and get its values. But currently only the first form on the page works and the other ones wont trigger. How can I fix this issue?
Forms look like this:
<form id="prepare_payment_form" action="#" method="post">
<input name="merchant_id" type="hidden" value="'.$paypal_acount.'"/>
<input name="merchant_amount" type="hidden" value="'.$entity_price.'"/>
<input name="site_owner_id" type="hidden" value="'.$site_owner_id.'"/>
<input name="site_owner_commission" type="hidden" value="'.$site_owner_commission.'"/>
<input name="currency_code" type="hidden" value="'.$entity_unit->currency.'"/>
<input name="use_sandbox" type="hidden" value="'.$use_sandbox.'"/>
<input name="entity_guid" type="hidden" value="'.$entity_unit->guid.'"/>
<input name="trackingId" type="hidden" value="'.$entity_unit->guid.'-'.$buyer->guid.'-'.$entity_unit->container_guid.'-'.time().'"/>
<input name="entity_plugin" type="hidden" value="'.$plugin_name.'"/>
<input id="prepare_payment" type="submit" name="prepare_payment" class="paypal_button" value="" />
</form>
Jquery code:
$("#prepare_payment").unbind('click').click(function(e) {
e.preventDefault();
var data = {
action: 'the_php_page_that_will_handle_the_request.php',
payment_data: $('#prepare_payment_form').serialize()
};
});
I figured it out thanks. used this:
form:
<form id="'.time().'" action="#" method="post">
<input name="merchant_id" type="hidden" value="'.$paypal_acount.'"/>
<input name="merchant_amount" type="hidden" value="'.$entity_price.'"/>
<input name="site_owner_id" type="hidden" value="'.$site_owner_id.'"/>
<input name="site_owner_commission" type="hidden" value="'.$site_owner_commission.'"/>
<input name="currency_code" type="hidden" value="'.$entity_unit->currency.'"/>
<input name="use_sandbox" type="hidden" value="'.$use_sandbox.'"/>
<input name="entity_guid" type="hidden" value="'.$entity_unit->guid.'"/>
<input name="trackingId" type="hidden" value="'.$entity_unit->guid.'-'.$buyer->guid.'-'.$entity_unit->container_guid.'-'.time().'"/>
<input name="entity_plugin" type="hidden" value="'.$plugin_name.'"/>
<input id="prepare_payment" type="submit" name="prepare_payment" class="paypal_button" value="" />
</form>
Jquery:
$("form").submit(function (e) {
e.preventDefault();
var data = {
action: 'the_php_page_that_will_handle_the_request.php',
payment_data: $(this).serialize()
};
});

IFrame form submittal opens in frame, needs to open in new window

Trying to resolve an issue using a 3rd party form that unfortunately has to use an iframe to be embedded in the article content. When a user submits their email address, the thank you page opens up in the space taken up by the iframe instead of the page / a new window. I tried using the following JS script to no avail:
<script type="text/javascript">
// If "&_parent=URL" is in this page's URL, then put URL into the top window
var match = /_parent=(.+)/.exec(window.location.href);
if (match != null) {
top.location = match[1];
}
</script>
The page in question:
http://restoringqualityoflifeblog.org/subscribe/
Thanks!
From https://help.salsalabs.com/entries/21689130-Embed-a-signup-form
Here is the form you need by itself with [] indicating the keys you need for it to work.
<form action="[[API URL]]/save" method="POST">
<input type="hidden" name="organization_KEY" value="5881"/>
<input type="hidden" name="chapter_KEY" value="887"/>
<input type="hidden" name="email_trigger_KEYS" value="12644,12656"/>
<input type="hidden" name="object" value="supporter"/>
<label for="first_name">First Name:</label><input type="text" id="first_name" name="First_Name"/></br>
<label for="last_name">Last Name:</label><input type="text" id="last_name" name="Last_Name"/></br>
<label for="email">Email:</label><input type="text" id="email" name="Email"/></br>
<style>.memberCode{display:none;}</style>
<div class="memberCode"> Optional Member Code <input name="first_name_949" value=""/></div>
<input type="hidden" name="link" value="groups"/>
<input type="hidden" name="linkKey" value="11"/>
<input type="hidden" name="link" value="groups"/>
<input type="hidden" name="linkKey" value="12"/>
<input type="hidden" name="link" value="groups"/>
<input type="hidden" name="linkKey" value="13"/>
<input type="hidden" name="tag" value="excellent"/>
<input type="hidden" name="redirect" value="http://YOUR URL">
<input type="Submit" value="Sign up" />
</form>
You already have a working copy of the form here:
http://salsa3.salsalabs.com/o/50047/p/salsa/web/common/public/signup?signup_page_KEY=8896

Set a html form with javascript

I've been playing with the PayPal code:
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" name="paypal">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="upload" value="1">
<input type="hidden" name="currency_code" value="GBP">
<input type="hidden" name="business" value="test#test.org">
<input type="hidden" name="item_name_1" value="Item1">
<input type="hidden" name="amount_1" value="1.00">
<input type="hidden" name="item_name_2" value="Item2">
<input type="hidden" name="amount_2" value="2.00">
<input type="submit" value="PayPal">
</form>
And I want to set the value of item_name_1 and amount_1 via javascript when a button is pressed elsewhere so when that form is submitted the values are all set:
So I have this function run when the add to cart is clicked:
<script type='text/javascript'>
function addtocart(){
paypal.item_name_2.value="Hello!";
}
</script>
I feel I'm on the right tracks but no joy. Help please! TIA
Try this
document.forms["paypal"].item_name_2.value="heelo";
try this
document.forms['paypay']['item_name_2'].value = "hello";

Loading a Google Chart into page via POST request

So I have a page set up to use Google Chart API via POST requests. I have multiple charts to draw each with a submit button so that a user can view any chart they want. So it's working where pressing the submit will load the chart, but I want to improve that.
Ideally, I'd like a way (submit button or link) to submit the form with javascript, but get the result back and add the image to the page dynamically. I really don't know if it is possible to like process the form with some javascript that will pass the data to Google and give an image back without leaving the current page. So can I?
I cannot use GET (which would be easier) because I might hit the data limit. Also, it is way easier the way I am doing this to generate these forms into a single HTML page (instead of multiple pages and using iframes which would do what I want).
Here is a snippet of my page with some charts. Just an example.
<tr class="chart-row">
<td colspan="2">
<form action="http://chart.apis.google.com/chart" method="POST" id="chartForm-idtestcasex2x32time">
<input type="hidden" name="cht" value="lc">
<input type="hidden" name="chs" value="800x375">
<input type="hidden" name="chtt" value="Performance Graph for SingleFrameNotNullSurface Time">
<input type="hidden" name="chts" value="FFFFFF,24">
<input type="hidden" name="chco" value="000000">
<input type="hidden" name="chls" value="2">
<input type="hidden" name="chm" value="o,006A71,0,-1,4">
<input type="hidden" name="chma" value="15,15,15,15">
<input type="hidden" name="chf" value="bg,s,006A71|c,s,CCDDDD">
<input type="hidden" name="chd" value="t:0.208,0.133">
<input type="hidden" name="chds" value="0.12,0.22">
<input type="hidden" name="chg" value="100,10">
<input type="hidden" name="chxt" value="x,x,y,y">
<input type="hidden" name="chxr" value="2,0.12,0.22,0.01">
<input type="hidden" name="chxl" value="0:|140|143|1:|Build Number|3:|Time (ms)">
<input type="hidden" name="chxp" value="1,50|3,50">
<input type="hidden" name="chxs" value="0,FFFFFF|1,FFFFFF,16|2N*f5*,FFFFFF|3,FFFFFF,16">
<input type="submit" value="Show Time Graph">
</form>
</td>
<td colspan="2">
<form action="http://chart.apis.google.com/chart" method="POST" id="chartForm-idtestcasex2x32fps">
<input type="hidden" name="cht" value="lc">
<input type="hidden" name="chs" value="800x375">
<input type="hidden" name="chtt" value="Performance Graph for SingleFrameNotNullSurface Time">
<input type="hidden" name="chts" value="FFFFFF,24">
<input type="hidden" name="chco" value="000000">
<input type="hidden" name="chls" value="2">
<input type="hidden" name="chm" value="o,006A71,0,-1,4">
<input type="hidden" name="chma" value="15,15,15,15">
<input type="hidden" name="chf" value="bg,s,006A71|c,s,CCDDDD">
<input type="hidden" name="chd" value="t:0,0">
<input type="hidden" name="chds" value="-1,1">
<input type="hidden" name="chg" value="100,25">
<input type="hidden" name="chxt" value="x,x,y,y">
<input type="hidden" name="chxr" value="2,-1,1,0.5">
<input type="hidden" name="chxl" value="0:|140|143|1:|Build Number|3:|Average FPS">
<input type="hidden" name="chxp" value="1,50|3,50">
<input type="hidden" name="chxs" value="0,FFFFFF|1,FFFFFF,16|2N*f5*,FFFFFF|3,FFFFFF,16">
<input type="submit" value="Show FPS Graph">
</form>
</td>
</tr>
You can append the parameters to the url and load it as an image with javascript.
I know you said you might hit the limit with get requests, but here is an excerpt from : http://code.google.com/apis/chart/docs/making_charts.html that might help you.
Google Chart Usage Policy
There's no limit to the number of calls per day you can make to the Google Chart API. However, we reserve the right to block any use that we regard as abusive. If you think your service will make more than 250,000 API calls per day, please let us know by mailing an estimate to chart-api-notifications#google.com.

Categories

Resources