We Keep Coding

Automatically function for a form on webpage without click on button

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();
}

JavaScript function of form without click the button

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

Dynamically updating PayPal currency and amount fields using javascript function

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()"

submit a form in jQuery [duplicate]

This question already has answers here:
Submit a form using jQuery [closed]
(22 answers)
Closed 8 years ago.
I have a form like this
<form id="add-to-cart" action="http://example.com/add_to_form" method="post">
<div>
<input type="hidden" name="cartkey" value="">
<input type="hidden" name="id" value="10">
buy Now
</div>
<div>
<input type="hidden" name="cartkey" value="">
<input type="hidden" name="id" value="12">
buy Now
</div>
<div>
<input type="hidden" name="cartkey" value="">
<input type="hidden" name="id" value="19">
buy Now
</div>
</form>
and I want to submit the form using jquery by taking the id. So can someone kindly tell me how to do this?
Update
You can see with each link I have the id. I just want to pass this id to the form action.

Try to use the .submit() function to manually trigger the form's submission,
$('#add-to-cart').submit();

You can use the .submit() function to submit your form through id's ..

you need to try like this. otherwise you cant get result.
<form id="add-to-cart" action="http://example.com/add_to_form" method="post">
<div>
<input type="hidden" name="cartkey" value="">
<input type="hidden" name="id" value="">
buy Now
</div>
<div>
buy Now
</div>
<div>
buy Now
</div>
</form>
<script>
$('.buy-now-button').click(function(){
$('[name="id"]').val($(this).attr("id"));
$('#add-to-cart').submit();
});
</script>

As mentioned in this SO article, you can post back the value of a button if you give your submit button a name property (and obviously, a value to post).
From the linked question (with corrected code snippet):
<input type="submit" name="respond" value="Confirm" class="btn_confirm" />
<input type="submit" name="respond" value="Ignore" class="btn_ignore" />
The "response" value that will be posted back to the server will contain either "Ignore" or "Confirm", depending on which button was clicked.
I would suggest adding these attributes so the form submission will send back the value you want, and no custom code or custom event is required. That should keep it easier to understand.

<form id="add-to-cart" action="test.php" method="post">
<div>
<input type="hidden" name="cartkey" value="">
<input type="hidden" name="id" value="10">
buy Now
</div>
<div>`enter code here`
<input type="hidden" name="cartkey" value="">
<input type="hidden" name="id" value="12">
buy Now
</div>
<div>
<input type="hidden" name="cartkey" value="">
<input type="hidden" name="id" value="19">
buy Now
</div>
<input type="hidden" name="currentId" id="currentId" >
</form>
<script>
$( ".buy-now-button" ).click(function() {
$( "#currentId" ).val(this.id);
$( "#add-to-cart" ).submit();
});
</script>
Your can get the current id from $_POST['currentId']

As you have several inputs with the same name, your form looks more like three forms.
<form class="add-to-cart" action="http://example.com/add_to_form" method="post">
<input type="hidden" name="cartkey" value="">
<input type="hidden" name="id" value="10">
<button type="submit">buy Now</button>
</form>
<form class="add-to-cart" action="http://example.com/add_to_form" method="post">
<input type="hidden" name="cartkey" value="">
<input type="hidden" name="id" value="12">
<button type="submit">buy Now</button>
</form>
<form class="add-to-cart" action="http://example.com/add_to_form" method="post">
<input type="hidden" name="cartkey" value="">
<input type="hidden" name="id" value="19">
<button type="submit">buy Now</button>
</form>
Now if you want to submit your form(s) via ajax, you can do something like:
$(".add-to-cart").on("submit", function(e) {
e.preventDefault();
e.stopPropagation();
$.ajax({
url: $(this).attr("action"),
method: "POST",
data: $(this).serialize()
});
});
UPDATE:
But unless you want a fallback in case javascript is deactivated, you don't need any form:
buy Now
buy Now
buy Now
JavaScript:
$(".buy-now-button").on("click", function(e) {
e.preventDefault();
e.stopPropagation();
$.ajax({
url: "http://example.com/add_to_form",
method: "POST",
data: {id: $(this).attr("id")}
});
});

Programmatically sending data to iframe

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;
}