I want to hide the paypal payment button. I am using the paypal Javascript SDK. I know I can use the disable-fundings to disable credit card and so on. But there is no option for paypal. I am using my own payment method selection before. I have tried with jQuery but it does not work:
<script>
$( document ).ready(function() {
$( ".paypal-button-row.paypal-button-number-0" ).hide();
});
</script>
The paypal payment buttons are rendered by the Javascript SDK in a div called "paypal-button-container". That creates an iframe where all the payment buttons are in.
<div id="buttons-container" class="buttons-container"...
Inside that are other divs with the buttons. The button that I want to hide is this div:
<div class="paypal-button-row paypal-button-number-0 paypal-button-layout-vertical paypal-button-shape-rect paypal-button-number-multiple paypal-button-env-sandbox paypal-button-color-gold paypal-button-text-color-black paypal-logo-color-blue ... ">
I think at first I have to go into the iframe and then find the element.
Currently I am trying this
if ($( "#paypal-button-container" ).contents().find(".paypal-button-row.paypal-button-number-0")) {
console.log("found");
$( ".paypal-button-row.paypal-button-number-0" ).hide();
}
The console outputs "found". But it does not hide the div. Meanwhile I found out that the console always shows "found" even with a .find("abc").
Any ideas?
It appears what you are actually looking for is rendering standalone buttons.
Note that presenting such independent/standalone buttons for e.g. radio button functionality or to use your own layout for the buttons is not to be used to avoid/hide presenting the PayPal option somewhere on the site with equal prominence to other payment methods. If you don't feature the PayPal payment method alongside other options the PayPal account's processing could be deactivated, since that's a violation of its TOS.
if ($( "#paypal-button-container" ).contents().find(".paypal-button-row.paypal-button-number-0"))
This approach shouldn't be used, but FYI the problem with that use of jQuery is you need to make use of .length after invoking it, and test against that. Note the difference:
if ( $('#myElement').length ) {
console.log('#myElement was actually found')
}
if ( $('#myElement') ) {
console.log('This will always be true regardless...')
}
It's probably also executing too soon, not after the buttons are fully rendered. But anyway there's no reason to do it this way, see the standalone buttons documentation above.
That sounds great. With the standalone buttons it looks like it is working.
I have added the script for it.
var FUNDING_SOURCES = [
paypal.FUNDING.<?php echo $paymentMethod; ?>
];
// Loop over each funding source/payment method
FUNDING_SOURCES.forEach(function(fundingSource) {
// Initialize the buttons
var button = paypal.Buttons({
fundingSource: fundingSource
});
// Check if the button is eligible
if (button.isEligible()) {
// Render the standalone button for that funding source
button.render('#paypal-button-container');
}
});
I will continue to test it.
Of course we offer also Paypal as payment method.
For hide other buttons use this:
<script
src="https://www.paypal.com/sdk/js?client-id=sb¤cy=EUR&disable-funding=card,sofort">
</script>
Related
I have multiple fields including text,checkbok box, drop-down etc in jsf form, which is showing values from DB.I would like the submit button to be disabled by default and to only be clickable if the user made changes to any of the fields in the form. Please help !!
For a simple form you can use this jQuery plugin that a user mentioned here.
Edit:
The plugin is quite simple to use, and powerful, because for example you will have your buttons disabled again if you revert changes inside an input field.
Just make sure that you include the js file:
<h:outputScript name="path/jquery.are-you-sure.js"/>
And for using it, you have to add the line:
$('#idofyourform').areYouSure();
After that, for enabling and disabling submit buttons you have to add:
//All disabled by default
$('#idofyourform').find('button[type="submit"]').attr('disabled', 'disabled');
//Enabled all when there are changes
$('#idofyourform').bind('dirty.areYouSure', function () {
$(this).find('button[type="submit"]').removeAttr('disabled');
});
//Disable all when there aren't changes
$('#idofyourform').bind('clean.areYouSure', function () {
$(this).find('button[type="submit"]').attr('disabled', 'disabled');
});
Both codes inside your document ready function.
Note that I used button[type="submit"], which is what p:commandButton renders by default. You can use input if it's your case.
NOTE: This plugin also adds an extra functionality the OP didn't ask for (the dialog check when you navigate without saving changes). You can disable this if you want by doing:
$('#idofyourform').areYouSure( {'silent':true} );
Not tested, but I would simply use something like this :
$(document).ready(function() {
$('#formId input[type="submit"]').attr('disabled','disabled');
$('#formId').change(function(){ $('#formId input[type="submit"]').removeAttr('disabled'); });
});
If you don't use any jQuery functions already in the view (any PrimeFaces ajax buttons for example), you might need to add :
<h:outputScript library="primefaces" name="jquery/jquery.js" />
I am trying to add a few "next" and "back" buttons to a form. The Idea is to divide the filling-out process into several steps and with these buttons, the div of the current step gets hidden and the next resp. previous step is displayed.
My Problem is that when I add buttons in the following way...
<button class="proceed_button" id="loan_information">Proceed</button>
<button class="cancel_button" id="loan_information">Cancel</button>
... they submit the form.
Is every button inside a form-tag considered to be a submit-button?
If so, how can I change this behavior?
If not, why are they doing it then?
Ok, the solution is that the button needs a type.
<button type="button" class="proceed_button" id="loan_information">Proceed</button>
<button type="button" class="cancel_button" id="loan_information">Cancel</button>
Like this, it won't submit the form anymore.
According to http://w3schools.com/html5/att_button_type.asp the default type is depending on the browser, so you should always specify the type.
I'm not sure that you want a button, maybe you want it to look like a button. Either way, refer to this post: rails 3: display link as button?
Once you have your button, you'll need to update your javascript to prevent anything from happening when it's clicked (assuming you have jquery). It's still nice to provide a real fallback for those dinosaurs without js, so assuming your proceed button submits for users without js, for those with js you'd do something like:
$('#proceed_button').click(function(e) { e.preventDefault(); // Show and hide your divs here });
Also note that in your posted code you should not have two buttons with the same id, your ids and classes look swapped.
The "continue" button on the checkout page under delivery details doesn't work. But the ‘billing details’ continue button and all other always seems to work. When click on the button, the waiting GIF is loaded and nothing happen.. When I comment out below script then it seems to be fine in all browsers.
<script type="text/javascript">
<!--
$('.colorbox').colorbox({
width:640,
height:480
});
//-->
</script>
I want to show the Terms & Conditions in popup..I didn't get popup when I comment the above code and it shows in another page.
I had a similar problem with the tabs. I resolved the issue by placing the call in a document ready jquery container.(http://api.jquery.com/ready/)
The problem for me was that the JS in IE was trying to load before the element had rendered.
I have a dynamic form that is to be displayed using an iPad.
This form has a couple of radio buttons and some text fields and one submit button.
In an iPad the virtual keyboard GO button is supposed to act ad the enter key, causing the first submit button in the form to be clicked and the form to be posted.
To avoid excessive involuntary postings before the form is complete we added an extra submit button higher up in the form, absolutely positioned outside of the visible area with onclick="return false;".
This hijacks the enter keystroke preventing accidental posting in every browser except Safari Mobile.
On an iPad we even tested Opera mobile and it works as expected.
But Safari Mobile apparently ignores the return false since event clicking the button causes a post that no other browser does, not even safari on PC.
My questions are
1: Why is safari mobile ignoring "return false" on submit, is there an other mechanism at play here?
2: How can I stop Safari mobile from posting the form when clicking GO?
I have made numerous searches on Google and Stackoverflow and found many examples but all requires a lot of javascript and event binding and the dynamic nature of the form along with user generated content makes this error prone and pretty complex since almost all required binding events to every textbox and textarea.
Any solution that works is good but the simpler the better, especially if it does not require to much customization of the form or events that might conflict with autocomplete or validation events.
Example testpage: http://lab.dnet.nu/ipad.php
I found a solution to my problem.
The base to the problem is that Safari mobile ignores onsubmit="return false" on buttons, it only works on forms.
Setting onsubmit="return false;" on the form, making a normal button (not submit) and setting onclick="form.submit()".
Ex.
<form method="post" onsubmit="return false;">
... //Other fields here
<input type="button" value="Send" onclick="form.submit();" />
</form>
The Go button does not trigger a normal button, only submit buttons.
Since the form has onsubmit="return false;" it will not post.
The button on the other hand, when clicked triggers the onclick="form.submit();" which overrides the onsubmit on the form.
This solution seems to work in any browser reliably.
Better answer is this. The other does not allow you to use a regular submit button. This attacks just the go button.
$("body").keydown(function(){
if(event.keyCode == 13) {
document.activeElement.blur();
return false;
}
});
Seems very unconventional, as this basically breaks general UX and expected device behaviour.
However, I think it also important to mention that this solution relies on the actual <form> DOM element. Meaning the onclick handler on the button should not use a jQuery object to submit but the DOM element.
jQuery object. Does not work:
<input type="button" value="Send" onclick="$("#myform").submit();" />
DOM element. Works:
<input type="button" value="Send" onclick="$("#myform").get(0).submit();" />
Without jQuery. Works:
<input type="button" value="Send" onclick="document.getElementById('myform').submit();" />
Also, here is a similar approach, using jQuery to intercept keyboard submits and only allowing clicks on a button. Credit goes to #levi: http://jsfiddle.net/RsKc7/
Here's an additional answer, in case anyone winds up chasing this issue like I did.
Provided you're using jQuery, the following snippet should prevent the "Go" button from triggering a form submission (at least it does on Nexus 7's Chrome on Android 4.2.2; YMMMV). Also, note that if you want to allow the "Enter" key to work on any of the input types below, this will prevent that from happening.
$(document.body).on('keydown', 'input:text, input[type=password], input[type=email]',
function (e) {
// Android maps the "Go" button to the Enter key => key code 13
if (e.keyCode == 13) {
return false;
}
});
Edit: It seems this bug breaks keyup/keydown in Chrome in Android > 4.3, in which case this fix will no longer work in some circumstances.
Cannot comment so i have to put a new message.
#David solution works fine if we are using an "input type button"; instead, if we are using a button tag doesn't seems to be solved by David fix.
(env: cordova, ipad mini 2)
Thanks David!
Go buttons and return buttons on mobile touch screen keyboards trigger the onclick event of your first submit button. To determine if its the user or script clicking the button, you can use the following:
$('#mybuttonId').onclick(e) {
if (e.screenX && e.screenX != 0 && e.screenY && e.screenY != 0) {
//This is the user clicking on the button.
} else {
//This is not the user, but a script , do nothing.
return false;
}
}
I have a form with three radio button options, and a "submit" button (no checkboxes, no text fields). Yet if a user clicks the submit button, without choosing an option, the form still submits it, picking the first option anyway. What's the best method to prevent a form from being submitted if the user DOES NOT check any of the radio buttons? (My CMS is ExpressionEngine, and this form is generated using the CartThrob extension, just FYI. But it's not a CT issue as far as I can tell.)
With jQuery you can return false if there is no value for that input.
$('form').submit( function() {
if ( !$('input:radio[name="myRadio"]').val() ) {
alert('Fix this!');
return false;
}
});
You may need to change ! to =='', but that's the idea.