I can't figure this out. I checked other questions regarding setting data attributes, seems to be a tricky enough thing.
The stripe button amount is purely for aesthetics, I'm trying to set it ('data-amount') each time a user updates the quantity select box.
Every time I change the quantity select an alert gives the correct amount and if I inspect the dom the 'data-amount' attribute appears to be set correctly but when I click the stripe button the modal shows the default data-amount, i.e nothing.
Anyone know how to do this?
view (form, select input not shown)
<div class="stripe-controls" align="center">
<script src="https://button.stripe.com/v1/button.js" class="stripe-button"
data-key="ENV['STRIPE_PUBLIC_KEY'] %>" data-amount="">
</script>
</div>
coffeescript
$ ->
$('#order_quantity').click(orderTotal)
orderTotal()
orderTotal = ->
quantity = $('#order_quantity').val()
price = $('#ticket-price').data('url')
total = quantity * price
$('.stripe-button').attr('data-amount', total)
alert total
Specify a custom amount using StripeCheckout.open().
Note: I work at Stripe.
Related
In a webpage, I have a select HTML list from which the user can select an item and change its price. I put the select and, below, an input text box. Its default value needs to be the current price of the element, so the user can see it and change it. However, when I change the selected item in the dropdown menu, the input text box continues to show the last item's price. I think that by refreshing the page the moment the user clicks the option in the dropdown, this will be fixed, but I don't know how. I hope the doubt was clear enough please tell me if you don't understand something. I would appreciate all your help!!
I was waiting for you to show some code, but you didn't, so according to your problem you don't need to reload the page, you need to handle the events properly, that's all, so I made this example for you, I have already said that you can use location.reload and other stuff, but that was because then I haven't read the body of your question just yet and I was just answering according to the title of the question, anyway here is the example, I have added some comments to make it clear for you to understand the code
// an example of some products and the price of each one
var products = {"ring": 2.54, "watch": 4.99, "necklace": 3.21},
// get the `<select>` dom element
productsList = document.querySelector("#products-container select"),
// get the `<input type="text">` dom element
productPrice =document.querySelector("#products-container input");
// set the value of the price input to the first product's price
productPrice.value = Object.values(products)[0];
// loop over the products and create an option for each one
for(var product in products) {
productsList.innerHTML += `<option value="${product}">${product}</option>`;
}
// when the user chooses a product we show its price on the price input
productsList.onchange = function() {
productPrice.value = products[this.value];
}
// when the user changes the price of an element we save that into our object of elements
productPrice.onchange = function() {
products[productsList.value] = this.value;
}
<div id="products-container">
<select>
</select>
<input type="text">
</div>
I have implemented Stripe's Client-Only Dashboard Checkout (https://stripe.com/docs/payments/checkout/client) on an html page. I changed the quantity value in the Stripe JS code from the integer, 1, to a variable of my choosing called numb. I made no other changes to Stripe's JS code.
If I use my own JS code to change the value of numb to an integer of my choice then when I click the Checkout button the Stripe Checkout Page has updated the quantity and total price to reflect the value of numb. This is what I want.
The problem comes when, instead of numb = 2;, I use a JS statement which allows the user of the html page to change the value of numb. Here is the section of code:
<P>How many tickets do you want to buy?</p>
<input type="number" id="steve-number-tickets">
<button id="steve-testing">How many?</button>
<p id="test-for-numb"></p>
<script>
// ***MY CODE***
numb = 7;
// User Chooses
var howManyButton = document.getElementById('steve-testing');
howManyButton.addEventListener('click', function () {
numb = 2;
// numb = document.getElementById('steve-number-tickets').value;
// document.getElementById('test-for-numb').innerHTML = numb;
});
// ***END OF MY CODE***
</script>
With the code above as it is, I get the following behaviour. If the user refreshes the page and just clicks on the Checkout button, Stripe checkout bills them for 7 items. If they refresh the page and click my How Many? button and then the Checkout button, Stripe checkout bills them for 2 items.
If I change the code so numb = 2 is commented out and comments are removed from numb = document.getElementById('steve-number-tickets').value;, then if the user refreshes the page and clicks on the Checkout button, Stripe chekout bills them for 7 items. If they refresh the page and click my How Many? button (whether or not they first enter an integer into the input element) and then click on the Stripe Checkout button, Stripe checkout fails to load.
I thought it must be a problem with the statement: numb = document.getElementById('steve-number-tickets').value;. So, I tested that by uncommenting the statement document.getElementById('test-for-numb').innerHTML = numb;. When I do that, the value the user entered in the input element is displayed in the p element with id="test-for-numb" when they click on the How Many? button. So, that statement does work as expected.
I am unable to understand why Stripe checkout fails to load when I use the statement numb = document.getElementById('steve-number-tickets').value; but does load when I use numb = 2;.
I would really like to know what is going on.
This is because the value of an input is always a string -- the type=number only affects the UI, not the value type. You just need to wrap that in parseInt() to get an actual number, which is what the Checkout API expects.
I have a form filled with 24 checkboxes that a user fills in, underneath these checkboxes I have 2 span tags. One counts how many are checked, and the other displays what percentage it is. When I submit this form, I get the following error: Undefined index: #countcheckboxes in D:\inetpub\wwwroot\SMT_24_Point_Check\newAudit.php on line 33
These are my span tags at the bottom of the form...
<div class="count-checkboxes-wrapper">
Total score: <span id="count-checked-checkboxes"
name="countcheckboxes">0</span> out of 24 checked
</div><br>
<!-- button to show div below -->
<input type="button" value="Show Audit Score" onclick=showDiv()>
<!--div showing total audit score as percentage-->
<div id="percentDiv"; style="display:none;" class="percentage-checkboxes-
wrapper">
Audit Result:<span id="percentage-checked-checkboxes"
name="percentagecheckboxes"> 0</span> %
</div>
On the newAudit.php page, this is the post tags I have for those 2 span tags...
$totalChecked = $_POST['countcheckboxes'];
$auditScore = $_POST['percentagecheckboxes'];
The out put from the checkboxes displays: Total score: 2 out of 24 checked
And after 'show audit score' is clicked, it says 'Audit result: 8%. I need the values of 2 and 8% to be inserted into the database.
There are lot of options for you to get the values rather that using meaningless name attribute over span.
Use a data-count attribute over both divs i.e., count-checked-checkboxes and percentagecheckboxes. With the same function, that update the counts, do update the data-attributes. At the time of data post, get those values by let checkCount = $('#count-checked-checkboxes').attr('data-count'); and so on.
Use a hidden input box in the place of span, and update the values of those box with the same update function, and get the values by using let checkCount = $('#count-checked-checkboxes').val() and so on.
( Not recommended ) use the text value of those span by using let checkCount = $('#count-checked-checkboxes').text() and so on.
I'm going to use Joomla K2 component as a directory system only, So just show Extra-Fields in front-end contents.
Therefore in the K2 item submission form which is available to registered users, I tend to remove all further inputs (including content tab and its huge textarea for writing post, attachment tab, title input, publish radio buttons and so on) and keep extra-fields' inputs only. I tried to do this through k2 template overriding by hiding those inputs using CSS or HTML however it's not a good idea because users are still able to show and see hidden stuff by set display to normal via browsers' developer tools.
Also it isn't possible to achieve this purpose by put those fields in an always false PHP condition since some inputs need to have at least one value, It seems.
Below is the default layout of K2 submission form in user section, Red areas are those I want to make them removed and inactive:
And here's the source of default layout:
com_k2/templates/default/itemform.php
By hiding category input from users, I also need to set a predefined category which all contents that users submit would apply to it and Extra-fields related to that category are shown to users in submission form.
Is there any way to define a value in template overriding files and hide its related field completely? (It's better to be by variable but constant would work too). I would need it to Auto title assignment for item submitted by users too (However it's not as necessary as
other things)
All these change would be in K2 adding item form in front-end site and not Admin section.
What's the workaround to this all?
Regards
I know this question is old but this is my idea, I did something similar, not exactly the same.
Because you can't submit the form if you remove the required fields like Category or Title, you can put a hidden INPUT field with a random value, as long as it is not empty value. In your override file templates/YOUR TEMPLATE/html/com_k2/default/itemform.php instead of showing category selection:
<tr>
<td class="adminK2LeftCol">
<label><?php echo JText::_('K2_CATEGORY'); ?></label>
</td>
<td class="adminK2RightCol">
<?php echo $this->lists['categories']; ?>
</td>
</tr>
You use something like this
<input type="hidden" id="catid" name="catid" value="-1">
Yes naughty users can use Firebug to put their values in that INPUT, but you still can build a plugin and listen to onBeforeK2Save event then set your default value of category to your own value (0, 1 , 2 anything) before saving the content to database. By using this way, you can generate title for your K2 item too.
<?php
defined('_JEXEC') or die ;
JLoader::register('K2Plugin', JPATH_ADMINISTRATOR.'/components/com_k2/lib/k2plugin.php');
class plgK2MyExample extends K2Plugin
{
var $pluginName = 'myexample';
var $pluginNameHumanReadable = 'My Example K2 Plugin';
function onBeforeK2Save(&$item, $isNew)
{
$item->catid = 10000;
$item->title = 'my own title';
}
}
Check the example plugin here: https://github.com/joomlaworks/example-k2-plugin (onBeforeK2Save is missing in the example plugin).
onBeforeK2Save is called in administrator/components/com_k2/models/item.php ("save" function).
I have a problem, I have been working on some jquery to set the quantity text box to display 25 or more. It checks if the wording personalisation has an empty string, if it doesnt them apply the 25 quantity as its obviously a kit product and personalised.
The crucial part for kit products is:
if (parseInt($("#kitProduct #Quantity").val()) < 25) {
$("#kitProduct #Quantity").attr("value", "25");
It knows its a kit product because i have a div.id wrapped around the page called Kit Product.
My problem is that i need to override this kit product code for certain products. I thought the best way to do this as aquick fix would be to check for the contents of a div, eg:
<div class="ProductNameText">Exclusive Handmade Box</div>
If Exclusive Handmade Box is found then allow the user to enter a quantity of 1 or more into the text box.
I have tried the following code:
quantity = $('div.ProductNameText').text().match(/Exclusive Handmade Box/g).length;
if(quantity)
{
$("#kitProduct #Quantity").attr("value", quantity);
$("#kitProduct #Quantity").keypress(function(){
var quantity = parseInt($.trim($(this).val()));
if( quantity < 1) {
$(this).val('1');
} else {
$(this).val(quantity);
}
But this will only ever force 1. I am really lost now, ive explained as best as i can and below is a cut down example of the page within a jsfiddle.
Really hope you can help?
More infomation:
For the most part Kit products are defined in an xml package which is applyed to a kit product in the admin section. However i have a few products which are still products but dont require 25 to be put into the quantity.
At the moment the jquery checks for a text area box because if the user adds a personalisation into that it means they are wanting a kit product therefore min quantity is 25.
But i have a product i want to check based on its div contents that i want to have as 1 or more...
so i should be able to enter 1-25 into the box without my current code saying oppps you entered less than 24 so im going to change it back to the min kit product quantity..
if you try the jsfiddle you can see that it wont let you put in a value of say 3? thats the problem.
http://jsfiddle.net/FB5MQ/3/
You should just have a variable minimum in the "crucial part for kit products" code:
var minValue = 25;
if ($('div.ProductNameText').text().match(/Exclusive Handmade Box/)) {
minValue = 1;
}
if (parseInt($("#kitProduct #Quantity").val(), 10) < minValue) {
$("#kitProduct #Quantity").prop("value", minValue);
// rest of code...