I am currently adding in a backup jquery function to replace FormData for support of i.e 9 and below. However i have come across this post:
jQuery iframe file upload
I can see that this is for uploading files which I will need but I have quite a lot of fields in my form. Is there a way to programmatically get all text fields in my form without using formData.
I have had a look at using this but it will get all input fields but no textarea fields and it will include images.
$("form").each(function(){
$(this).filter(':input') //<-- Should return all input elements in that specific form.
});
Or is there a better way to do this? I don't really want to touch the formData as this works fine for all other browsers but I have included the code
if(document.FormData === "undefined")
to detect and use another function instead.
EDIT:
just tried the following:
$(".inputfield").each(function(index,element){
form.attr("input:text",$(element).val());
});
but it doesn't update the iframe
EDIT:
This is the full code i am using to upload the form (hopefully)
if(window.FormData === undefined){
// create iframe
var iframe = $('<iframe name="postiframe" id="postiframe" style="display: none" />');
$("body").append(iframe);
var form = $('.myform');
form.attr("action", "scripts/addtocart.php");
form.attr("method", "post");
form.attr("enctype", "multipart/form-data");
form.attr("encoding", "multipart/form-data");
form.attr("target", "postiframe");
$(".inputfield").each(function(index,element){
form.attr("input:text",$(element).val());
});
form.submit();
$("#postiframe").load(function () {
iframeContents = $("#postiframe")[0].contentWindow.document.body.innerHTML;
$("#textarea").html(iframeContents);
});
alert("complete");
}
EDIT: added form:
<form class="myform" onsubmit="return false;" enctype="multipart/form-data">
<input type="hidden" name="price" class="inputfield" value="<?php echo $price; ?>" />
<input type="hidden" class="inputfield" id="product" name="product" value="<?php echo $_GET['id']; ?>"/>
<input type="hidden" class="inputfield" id="sid" name="sid" value="<?php echo $_GET['sid']; ?>"/>
<input type="hidden" class="inputfield" id="hiddenvalue" name="label" value=""/>
<input type="hidden" class="inputfield" id="quantity" name="quantity" value="1"/>
<input type="hidden" class="inputfield" id="labelquantity" name="labelquantity" value=""/>
<input type="hidden" class="inputfield" id="userlabel" name="userlabel" value=""/>
<input type="hidden" class="inputfield" id="colourlabel" name="colourlabel" value=""/>
<input type="hidden" class="inputfield" id="foillabel" name="foillabel" value=""/>
the majority of the rest of the form is generated depending on options chosen previously so abit hard to post that code
I usually add a class to the fields i want to validate, the same rule could be applied for what you want to do..
<input type="text" class="req" name="forename" value="Forename.." />
<textarea name="comments" class="req">Comments..</textarea>
and the jQuery
$(".inputfield").each(function(index,element){
form.append(element);
//form.attr("input:text",$(element).val());
});
Example
HTML
<form action="scripts/addtocart.php" target="post_requests" enctype="multipart/form-data" type="post">
<input type="hidden" name="price" class="inputfield" value="<?php echo $price; ?>" />
<input type="hidden" class="inputfield" id="product" name="product" value="<?php echo $_GET['id']; ?>"/>
<input type="hidden" class="inputfield" id="sid" name="sid" value="<?php echo $_GET['sid']; ?>"/>
<input type="hidden" class="inputfield" id="hiddenvalue" name="label" value=""/>
<input type="hidden" class="inputfield" id="quantity" name="quantity" value="1"/>
<input type="hidden" class="inputfield" id="labelquantity" name="labelquantity" value=""/>
<input type="hidden" class="inputfield" id="userlabel" name="userlabel" value=""/>
<input type="hidden" class="inputfield" id="colourlabel" name="colourlabel" value=""/>
<input type="hidden" class="inputfield" id="foillabel" name="foillabel" value=""/>
<input type="submit" />
</form>
<iframe name="post_requests" style="display:none;"></iframe>
<div id="response">
Waiting for form to be posted..
</div>
Javascript
function postResponse(_html)
{
document.getElementById('response').innerHTML = _html;
}
scripts/addcart.php
<script type="text/javascript">
var _html = 'The form was posted..';
parent.postResponse(_html);
</script>
This code: form.attr("input:text",$(element).val()); is setting/overriding an attribute in the <form> tag for each element that has class inputfield, so by the time you do form.submit(); there will effectively be this:
<form class="myform" input:text="valueOfLastElementWithClass'inputfield'">
Which I doubt is what you're trying to achieve. I'm not sure what you are trying to achieve, but you can select every <input type="text" and textarea and select in jquery like so:
$('input[type=text],textarea,select').each(function(index, element) {
// do something;
}
Related
I'm implementing MyPos payment gateway to accept debit card purchases. Their SDK is working in a weird manner. When I start the payment process, the SDK tries to echo HTML code with a form which will auto submit itself to their checkout page. This shouldn't be a problem if I submit my order page with the normal form submit, but I'm using ajax from my order page. I'm handling all other payment methods through ajax calls to my server, so I'd like to be consistent and use ajax here too.
So basically:
From my order page i press "pay with card" button.
Javascript will make ajax call to my server with order details, and will set up a purchase with MyPos sdk.
MyPos sdk echoes a HTML (but I'm capturing it with output buffer) which looks as following
<body onload="document.ipcForm.submit();">
<form id="ipcForm" name="ipcForm" action="https://www.mypos.eu/vmp/checkout-test" method="post"><input type="hidden" name="IPCmethod" value="IPCPurchase">
<input type="hidden" name="IPCVersion" value="1.4">
<input type="hidden" name="IPCLanguage" value="it">
<input type="hidden" name="SID" value="000000000000010">
<input type="hidden" name="WalletNumber" value="61938166610">
<input type="hidden" name="KeyIndex" value="1">
<input type="hidden" name="Source" value="SDK_PHP_1.2.1">
<input type="hidden" name="Currency" value="EUR">
<input type="hidden" name="Amount" value="5.26">
<input type="hidden" name="OrderID" value="46057">
<input type="hidden" name="URL_OK" value="http://website.test/api/private/mypos/success-redirect">
<input type="hidden" name="URL_Cancel" value="http://website.test/api/private/mypos/cancel-redirect">
<input type="hidden" name="URL_Notify" value="http://website.test/api/private/mypos/ipc-notify">
<input type="hidden" name="Note" value="">
<input type="hidden" name="customeremail" value="testuser24#gmail.com">
<input type="hidden" name="customerphone" value="3333333333">
<input type="hidden" name="customerfirstnames" value="Test">
<input type="hidden" name="customerfamilyname" value="User">
<input type="hidden" name="customercountry" value="ITA">
<input type="hidden" name="customercity" value="Arco">
<input type="hidden" name="customerzipcode" value="38062">
<input type="hidden" name="customeraddress" value="Via Fiori 12">
<input type="hidden" name="CartItems" value="1">
<input type="hidden" name="Article_1" value="CRONO-Ex 1kg">
<input type="hidden" name="Quantity_1" value="1">
<input type="hidden" name="Price_1" value="5.26">
<input type="hidden" name="Amount_1" value="5.26">
<input type="hidden" name="Currency_1" value="EUR">
<input type="hidden" name="CardTokenRequest" value="0">
<input type="hidden" name="PaymentParametersRequired" value="1">
<input type="hidden" name="PaymentMethod" value="3">
<input type="hidden" name="Signature" value="jq7OSRfkJmyt22rquIDoxK0QB1GBFug4eUcGYyyKg08bY+d036bgJ/R49iq9L8ZMB+Sz8VBDb/QsqLtRLqIbaP2e7j1sYRaoZZDeK+E3gRuDp/yJofVjPWjK8Q1ZbaokoM9ETaBZI+6oUjUEIES9nqfMYFgH0tk3axDcHkZ8HKg=">
</form>
</body>
Technically i should echo this to a page, and it will auto submit to their website. But instead I'm capturing this with output buffer, and send it back to javascript with JSON response.
Now how can I execute this HTML and make it do it's job? (eg. auto submitting itself to that post action URL)
You could read the Action URL from the response separately and then serialize the form and make a new Ajax call again.
var myForm = $(response).find("#ipcForm");
var url = myForm.attr('action'); //get submit url [replace url here if desired]
$.ajax({
type: "POST",
url: url,
data: form.serialize(), // serializes form input
success: function(data){
console.log(data);
}
});
Here is my code for going to the Paypal payment gateway for the item after a click on the "Buy Now" Button, But I want this function to be without even click on the "Buy Now" button, my meaning is when then webpage opened automatically go to the Paypal payment gateway without a click on "Buy Now" button. Is it possible? Any guidance will be very helpful.
<script type="text/javascript" src="https://test.com/java.js"></script>
<form target="PayPal" action="https://www.paypal.com/cgi-bin/webscr" method="post" style="margin:0;padding:0;">
<input type="hidden" name="business" value="test#yahoo.com">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="item_name" value="Membership">
<input type="hidden" name="item_number" value="1 Month">
<input type="hidden" name="amount" value="23">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="shipping" value="">
<input type="hidden" name="shipping2" value="">
<input type="hidden" name="handling" value="">
<input type="hidden" name="return" value="https://test.com/Successful_Payment.php">
<input type="hidden" name="cancel_return" value="">
<input type="hidden" name="undefined_quantity" value="0">
<input type="hidden" name="receiver_email" value="test#yahoo.com">
<input type="hidden" name="no_shipping" value="1">
<input type="hidden" name="no_note" value="0">
<div id="PayPal6" style="position:absolute;left:445px;top:470px;width:134px;height:65px;">
<input type="image" name="submit" src="images/buynow.png" style="position:absolute;left:0px;top:0px;" alt="Make payments with PayPal, it's fast, free, and secure!">
</div>
</form>
U can achieve that by JavaScript:
window.onload = function(){
// u should put a name for your form
document.forms['my_form_name'].submit();
}
EDIT: You could also submit the PayPal submit button instead of the form:
window.onload = function(){
document.getElementById('paypalButton').submit();
}
Here is my completed code for doing function for the form of going to the PayPal payment gateway by javascript without clicking on the "BUY NOW" button. Just my problem is here, this going to opening a new window to do that, I want this function to do it on the same window. Please guide me on how can we fix it? Any help will be appreciated.
window.onload = function() {
// u should put a name for your form
document.forms['my_form'].submit();
}
<form target="PayPal" id="my_form" action="https://www.paypal.com/cgi-bin/webscr" method="post" style="margin:0;padding:0;">
<input type="hidden" name="business" value="test#yahoo.com">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="item_name" value="Membership">
<input type="hidden" name="item_number" value="1 Month">
<input type="hidden" name="amount" value="23">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="shipping" value="">
<input type="hidden" name="shipping2" value="">
<input type="hidden" name="handling" value="">
<input type="hidden" name="return" value="https://test.com/Successful_Payment.php">
<input type="hidden" name="cancel_return" value="">
<input type="hidden" name="undefined_quantity" value="0">
<input type="hidden" name="receiver_email" value="test#yahoo.com">
<input type="hidden" name="no_shipping" value="1">
<input type="hidden" name="no_note" value="0">
</form>
```
remove attribute target="Paypal" from the form
I am trying to dynamically update the amount and currency value fields in the following PayPal Buy Now form based on the radio button selection using the function below. I am unable to get it to pass the currency and amount values to the form.
The form:
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top" name="f" id="f">
<input name="audio-book" type="radio" class="sum" value="54.95" checked="checked" /> NZ$ 54.95
<input name="audio-book" type="radio" class="sum" value="43.95" /> AU$ 43.95
<input name="audio-book" type="radio" class="sum" value="45.00" /> US$ 45.00
<input name="audio-book" type="radio" class="sum" value="34.95" /> EU€ 34.95
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="xxxxxxxxxx">
<input type="hidden" name="lc" value="NZ">
<input type="hidden" name="item_name" value="xxxxxxxxx">
<input type="hidden" name="amount" id="amount" value="">
<input type="hidden" name="currency_code" id="currency_code" value="">
<input type="hidden" name="button_subtype" value="services">
<input type="hidden" name="no_note" value="0">
<input type="hidden" name="cn" value="Add special instructions to the seller:">
<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="rm" value="1">
<input type="hidden" name="return" value="xxxxx">
<input type="hidden" name="cancel_return" value="xxxxxx">
<input type="hidden" name="bn" value="PP-BuyNowBF:btn_buynowCC_LG.gif:NonHosted">
<input type="image" class="alignleft wp-image-2884 size-full" src="../uploads/btn_buynow_pp_142x27.png" border="0" name="submit1" id="button" onclick="javascript:doSubmit();" alt="PayPal - The safer...">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
and the function:
<script>
function doSubmit(){
var $cost=0;
var $code="";
var $currency=['NZD', 'AUD', 'USD', 'EUR'];
var parent = document.getElementsByClassName('sum');
for (i = 0; i<parent.length; ++i){
if(parent[i].checked === true){
cost = Number(parent[i].value);
code = currency[i];}
}
document.getElementById('amount').value = cost;
document.getElementById('currency_code').value = code;
document.getElementById('f').submit();
return true;
}
</script>
It seems like everything is fine with the code . The only thing you need to change in the script is the below line :
Currently you have :
code = currency[i];
Change it to :
code = $currency[i];
I just tried it at my end and it worked .
Please have look at my sample fiddle:
http://jsfiddle.net/ghtgggb2/
Couple of things
move the script to the bottom (not sure where it is in your HTML)
move the function to the form for testing onsubmit="return doSubmit()"
I am trying to style a search box with the onFocus and onBlur attributes, but i don't get the expected result. Here is my HTML code
<form action="index.php" method="post" class="search">
<input name="searchword" id="mod_search_searchword" maxlength="20"
type="text" size="30" value="Search..."
onblur="if(this.value=='') {this.value='Search...'; this.className='search-default';}
elseif(this.value!='' && this.value!='Search...') {this.className='search-userinput';}"
onfocus="if(this.value=='Search...') {this.value=''; this.className='search-userinput';}
else {this.className='search-userinput';}" class="search-userinput">
<input type="hidden" name="option" value="com_search">
<input type="hidden" name="task" value="search">
</form>
If I don't set a condition for the onBlur attribute, then the onFocus bit works, but I need both to work. What solutions do I have?
this will work:
<script>
function setb(obj)
{
if(obj.value=='')
{obj.value='Search...'; obj.className='search-default';}
else if(obj.value!='' && obj.value!='Search...')
obj.className='search-userinput';
}
function setf(obj)
{
if(obj.value=='Search...')
{obj.value=''; obj.className='search-userinput';}
else
obj.className='search-userinput';
}
</script>
<form action="index.php" method="post" class="search">
<input name="searchword" id="mod_search_searchword" maxlength="20"
type="text" size="30" value="Search..."
onblur="setb(this)"
onfocus="setf(this)" class="search-userinput">
<input type="hidden" name="option" value="com_search">
<input type="hidden" name="task" value="search">
</form>
and we dont have elseif ! that's else if.