I have a form like this;
<form action="out.php" method="post">
<input type="hidden" name="a" value="a" />
<input type="hidden" name="b" value="b" />
<input type="hidden" name="c" value="c" />
<input type="hidden" name="d" value="d" />
<input type="hidden" name="e" maxlength="60" value="e" />
<input type="hidden" name="f" value="f" />
<input type="submit" value="Create & Send">
</form>
this form can not be seen by users. They just see a submit button like "Create Label & Send To Customer" .
But they need to input Customer's eMail Address. So i have a js code the submit button trigger it. And it asks the email address.
The JS code:
$('#dialog_prompt').click(function(){
$.prompt("What is customer's email?","",
function(value){
$.msg("So, you like '"+value+"'?");
},
function(){
$.msg("You clicked cancel!");
});
});
So my problem is;
when the user submit the button and input the customer's email and hit the ok, JS must send the values from the form & email address to the "out.php".
So how can I send form data via JS?
HTML:
<form action="out.php" method="post">
<input type="hidden" name="em" value="" class="customeremail" />
<input type="hidden" name="a" value="a" />
<input type="hidden" name="b" value="b" />
<input type="hidden" name="c" value="c" />
<input type="hidden" name="d" value="d" />
<input type="hidden" name="e" maxlength="60" value="e" />
<input type="hidden" name="f" value="f" />
<input type="submit" value="Create & Send">
</form>
JS:
$('#dialog_prompt').click(function(){
$.prompt("What is customer's email?","",
function(value){
$('form .customeremail').val(value);
$('form').ajaxSubmit();
},
function(){
$.msg("You clicked cancel!");
});
});
You can send the details using AJAX.
$('#dialog_prompt').click(function(){
$.prompt("What is customer's email?","",
function(value){
$.msg("So, you like '"+value+"'?");
$.ajax({
url: "out.php", // url to which details are send
type: 'POST',
data: $('form').serialize(), // pass form details
} ).done (function(data) { // on success
});
},
function(){
$.msg("You clicked cancel!");
});
});
Now you can access the values passed through AJAX in out.php page using $_POST.
Note : The serialize() method creates a URL encoded text string by serializing form values.
Related
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()
};
});
I am facing problem when using javscript to update inner html of form. I want to dynamically add input type with same name in form and then send this form data via jquery ajax serialize.
Eg.
function addinput()
{
//update form html to add following
<input type="text" value="1" name="addtext" />
<input type="text" value="2" name="addtext" />
<input type="text" value="3" name="addtext" />
<input type="text" value="4" name="addtext" />
<input type="text" value="5" name="addtext" />
}
function initiate()
{
document.myform.action="initiateMultipleReceiptReceiptAction.action?next=0";
var formdata=$('form[name$="myform"]').serialize();
}
Click to add more
<form id="myform" action="initiate();">
<input type="submit" value="submit" />
</form>
now the problem is that formdata is not showing $addtext value
I have a paypal form that I want to dynamically change the email address in based on a radio button in the form. In other words, if one of the radio buttons is checked then the form would send one email address value and if the other was checked it would send another. Here is the sample code I have so far and what I've tried to do.
<form name="myform" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_xclick-subscriptions">
<input type="hidden" name="business" value="email#theaddress.com">
<input type="hidden" name="item_name" value="item_name">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="no_shipping" value="1">
<input type="hidden" name="a3" value="60">
<input type="radio" name="operation" value="0" checked>Joe Bob
<input type="radio" name="operation" value="1">Hank
<input type="submit" src="img/ico/joinow.png" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
<input type="hidden" name="p3" value="1">
<input type="hidden" name="t3" value="M">
<input type="hidden" name="src" value="1">
<input type="hidden" name="sra" value="1">
</form>
Once again, if someone selects JoeBob I want the email to be a different email address then if someone selected Hank.
Thanks!
var radios = document.querySelectorAll("input[type='radio']");
for(var i=0;i<radios.length;i+++){
radios[i].onchange = function(){
var email= document.querySelector("input[name='business']");
if(this.value==0) // selected Joe Bob
email.value= "email for Joe";
}
else{ // Selected Hank
email.value= "email for Hank";
}
}
I am using Minicart.JS for my simple paypal shopping cart. But this is not working as it should. The cart is not popping up if I click 'add to cart' button.
Here's my code.
<html>
<body>
<script src="//cdnjs.cloudflare.com/ajax/libs/minicart/3.0.3/minicart.min.js"></script>
<script>
paypal.minicart.render();
</script>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart" />
<input type="hidden" name="add" value="1" />
<input type="hidden" name="business" value="labs-feedback-minicart#paypal.com" />
<input type="hidden" name="item_name" value="Test Product" />
<input type="hidden" name="quantity" value="1" />
<input type="hidden" name="amount" value="1.00" />
<input type="hidden" name="currency_code" value="USD" />
<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="shipping2" value="1.50">
<input type="hidden" name="shipping" value="2.50">
<strong>Test Product</strong>
<p>
<label><input type="checkbox" id="terms" name="terms" value="" /> I agree to the terms</label>
</p>
<input type="submit" name="submit" value="Add to cart" />
</form>
<script>
paypal.minicart.render();
paypal.minicart.cart.on('checkout', function (evt) {
var hasAgreed = !!document.getElementById('terms').checked;
if (!hasAgreed) {
alert('You must agree to the terms!');
evt.preventDefault();
}
});
</script>
</body>
</html>
Here is the actual site. , I found an error in console that said:
Uncaught TypeError: Cannot call method 'appendChild' of null
I am not sure how to fix this, please let me know what's wrong with my setup. Thanks.
You need to change the Add to cart button to not be saved on PayPal (In Profit and loss Section) and also unprotect code after the button is created right before you copy and paste it :)
Hope this helps :)
I am trying to append values from a checked checkbox to a url that later would be used for an ajax call. As mentioned I would only like to have the values appended to the url if checkbox is checked. If a user checks and then unchecks, this would indicate not to add the value to the url. Below I have some basic foundation code. How can I append multiple items to the url ?
<form>
<input type="checkbox" value="1" id="item1" />
<input type="checkbox" value="2" id="item2" />
<input type="checkbox" value="3" id="item3" />
<input type="submit" id="submitForm" value="Submit Form" />
<form>
<script>
$('#submitForm').click(function() {
$('checkbox').click(function() {
$.getJSON('www.mysite.com/mypage.php?id='+item1+item2+item3)
});
});
</script>
First give your checkboxes a specific name like;
<form name="checkbox_form" id="checkbox_form">
<input type="checkbox" value="1" id="item1" name="val1" />
<input type="checkbox" value="2" id="item2" name="val2" />
<input type="checkbox" value="3" id="item3" name="val3" />
<input type="submit" id="submitForm" value="Submit Form" />
<form>
And your js will be;
$('#submitForm').click(function() {
var url = "'www.mysite.com/mypage.php";
if ($("#checkbox_form").serialize().length > 0) {
url += "?" + $("#checkbox_form").serialize();
}
alert("Your ajax url will be: " + url);
$.getJSON(url)
});
Here is a working fiddle: http://jsfiddle.net/cubuzoa/UKV3r/2/
You can use JQuery method serialize() as follows:
var query = $('form').serialize()
and after:
$.getJSON('www.mysite.com/mypage.php?'+query );
Only necessary to provide the input field attribute "name":
<form>
<input type="checkbox" value="1" id="item1" name="item1"/>
<input type="checkbox" value="2" id="item2" name="item2"/>
<input type="checkbox" value="3" id="item3" name="item3"/>
<input type="submit" id="submitForm" value="Submit Form" />
<form>
and you get:
www.mysite.com/mypage.php?item1=1&item2=2&item3=3
if all checkboxes are selected.