Loading a Google Chart into page via POST request - javascript

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.

Related

Target text without tags in a form

I am using a WordPress plugin on my website and I have a form that has some text I need to change, basically perform a find and replace. The problem is the form doesn't have a class and neither does the text, but since this is a plugin, I am not able to modify the actual plugin files. I only want to target a specific form on a specific page, so I'm wondering how to do this? I found a band-aid solution, but I'm wondering if there isn't a better way to do this?
My code looks like:
<?php if (is_page("tickets")) { ?>
<script type="text/javascript">
$("form").addClass("tickets");
$("form").contents().filter(function(){
return this.nodeType === 3
}).wrap('<p />');
$("form p").text($("form p").text().replace("PayPal", ""));
</script>
<?php } ?>
Basically, this is a WordPress website, so is_page is targeting the specific page that has the form on it. The JS is only executing on the "Tickets" page.
Then, I am adding a class called tickets to my form, so I can target that specific form for styling purposes. This way I'm not affecting any of my other forms site-wide :-)
I am also wrapping text without tags in p tags. This way, I can target the text without tags for JS and styling purposes.
Finally...I am targeting the text (I just wrapped in p tags) and am removing the word "PayPal".
I try and stay away from JS if I can, because I know it can slow your page speed down, but I'm thinking since I narrowed it down to a specific page and a specific form, it probably won't affect things that much.
All this JS is pieced together from code I found here and there. Is there a better way to do this
The form looks like:
<div>
<form target="_blank" action="https://url.com/wp-admin/admin-post.php?action=add_wpeevent_button_redirect" method="post">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="path" value="sandbox.paypal">
<input type="hidden" name="business" value="seller#url.com">
<input type="hidden" name="item_name" value="2022 Event Name">
<input type="hidden" name="custom" value="20681">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="no_shipping" value="1">
<input type="hidden" name="notify_url" value="https://url.com/wp-admin/admin-post.php?action=add_wpeevent_button_ipn">
<input type="hidden" name="lc" value="EN_US">
<input type="hidden" name="bn" value="WPPlugin_SP">
<input type="hidden" name="return" value="">
<input type="hidden" name="cancel_return" value="">
<input type="hidden" name="upload" value="1">
<table class="main-table_20681" style="width: 100% !important;">
<tbody>
<tr>
<td class="row-qty">
<select name="wpeevent_button_qty_a">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td class="row-name">Ticket</td>
<td class="row-price">31.50 USD</td>
<td class="row-desc">
2022 Event Name
<input type="hidden" name="item_name_1" value="Ticket">
<input type="hidden" name="id_1" value="2201">
<input type="hidden" name="amount_1" value="31.50">
</td>
</tr>
</tbody>
</table>
Your eTicket will be sent to your PayPal email address after payment.<br>
<input class="wpeevent_paypalbuttonimage" type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="Make your payments with PayPal. It is free, secure, effective." style="border: none;"><img loading="lazy" alt="" border="0" style="border:none;display:none;" src="https://www.paypal.com/EN_US/i/scr/pixel.gif" width="1" height="1">
</form>
</div>
Thanks,
Josh
I ended up using #vinay suggestion...thank you #vinay!
So now, the code looks like:
<?php if (is_page("tickets")) { ?>
<script type="text/javascript">
$("form").addClass("tickets");
$("form").contents().filter(function(){
return this.nodeType === 3
}).wrap('<span />');
$("form span").text($("form span").text().replace("PayPal", ""));
</script>
<?php } ?>

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

How to completely hide radio button options when a page loads using Jquery or javascript?

I'm building a site with a shopping cart that doesn't give you access to the source code. I can edit the text on this page but I can't touch the forum fields or html.
Is it possible (using javascript or jquery) to hide the radio buttons on this payment page when the page loads so the customer can't edit payments on ALL pending orders at once? I'd like it to do the following:
1. hide both radio buttons when the page loads;
2. select only the radio button for the selected order
<form id="AccountSettingsForm" action="/AccountSettings.asp" method="POST" onsubmit="if (typeof(Update_Hidden_State_Fields) == 'function') Update_Hidden_State_Fields();"><input type="hidden" name="modwhat" value="change_c">
<input type="hidden" name="BillingID" value="">
<input type="hidden" name="ShipID" value="">
<input type="hidden" name="CCardID" value="">
<input type="hidden" name="OrderPlaced" value="4">
<input type="hidden" name="ReturnTo" value=""><br>
<table width="80%" border=0 align="center" cellpadding="5" cellspacing="1" bgcolor="#F7E26C">
<tr><td bgcolor="#FFFFCC">
<input type="radio" name="Apply_Payment_Method_To_All_Orders" value="" checked="checked" /><font color="#000000"><strong>Apply this payment method change to my Order#: 4 </strong></font><br />
<input type="radio" name="Apply_Payment_Method_To_All_Orders" value="Y" />
<font color="#000000"><strong>Apply Payment Method To All Orders</strong></font></td></tr></table>
Appreciate any help you can provide.
Thanks!
Start your page with the AccountSettingsForm element with the css property display set to none, then
<input class="rdbBtn" type="radio" name="Apply_Payment_Method_To_All_Orders" value="" checked="checked" /><font color="#000000"><strong>Apply this payment method change to my Order#: 4 </strong></font><br />
<input class="rdbBtn" type="radio" name="Apply_Payment_Method_To_All_Orders" value="Y" />
$('.rdbBtn').on('load',function(){
$('AccountSettingsForm').css('display', 'inline-block');
}

How convert html form to 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.

Sending Dual Forms with one submit, while pulling the email field from first Form into the second

I have two forms I need to send - the first form is a PHP mailer that takes the info from a bunch of fields and mails it to a recipent. That form has a checkbox and if checked I need the email from that for to be sent via ANOTHER form to a list server adding them to mailing list. I need all this to happen when clicking the submit button from the first form. Can anyone help me with a solution. Thanks.
Form
<form class="form_1" method="post" enctype="multipart/form-data" onSubmit="return validate()">
<div class="field">
<div class="text2">
<input type="text" id="name" value="<?php echo $_POST['name'];?>" name="name" title="Name" />
</div>
<!--text2-->
<div class="req">*</div>
<!--req-->
</div>
<!--field-->
<div class="field field_right">
<div class="text2">
<input type="text" id="email" name="email" value="<?php echo $_POST['email'];?>" title="Email" />
</div>
<!--text2-->
<div class="req">*</div>
<!--req-->
</div>
Sign-up for newsletter
Upload Resume:
<div class="clearer"></div>
<br />
<div class="field">
<input type="submit" value="Send" class="btn3" />
</div>
<!--field-->
</form>
Form 2
<form action="http://www.example.com/mailing_list.html" method="post" name="xxxxxxx" onSubmit="return (!(UPTvalidateform(document.UPTmxxxxxx)));">
<input type="hidden" name="submitaction" value="3">
<input type="hidden" name="mlid" value="xxxxxx">
<input type="hidden" name="siteid" value="xxxxxx">
<input type="hidden" name="tagtype" value="q2">
<input type="hidden" name="demographics" value="-1">
<input type="hidden" name="redirection" value="http://www.xxxx.com/thankyou.php">
<input type="hidden" name="uredirection" value="http://">
<input type="hidden" name="welcome" value="">
<input type="hidden" name="double_optin" value="">
<input type="hidden" name="append" value="">
<input type="hidden" name="update" value="on">
<input type="hidden" name="activity" value="submit">
<tr><td colspan="2"></td></tr><tr><td> </td><td> <div class="text1"><input type="text" name="email" id="email" />
</div></td></tr><tr><td colspan="2"><button type="submit" name="send" value="send" class="button1"></button></td></tr>
On your form, have the button tie back to a javascript event
<input type = 'button' value='Submit!' onclick='submitForms()' />
Then have that javascript function, submitForms, actually submit both of your forms.
document.forms["form1"].submit();
document.forms["form2"].submit();
You will probably need to do the second submission using PHPs curl wrapper so that you only have one form for the user to fill in. Is there any reason you must have two forms?
So it would work like this:
User submits form
Code sends first email
If checkbox checked then submit curl request to second form
Complete
A recent SO answers contains a simple intro to the curl post request process: How to issue HTTP POST request?

Categories

Resources