Develop Reference

Hide or Show button based on two select values

I have a WordPress plugin that allows me to sell tickets on a website, the html looks like:
<form target="_blank" action="https://myurl.com/wp-admin/admin-post.php?action=add_wpeevent_button_redirect" method="post" class="tickets">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="path" value="paypal">
<input type="hidden" name="business" value="myemail#address.com">
<input type="hidden" name="item_name" value="My Event Name">
<input type="hidden" name="custom" value="20681">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="no_shipping" value="1">
<input type="hidden" name="notify_url" value="https://myurl.com/wp-admin/admin-post.php?action=add_wpeevent_button_ipn">
<input type="hidden" name="lc" value="EN_US">
<input type="hidden" name="bn" value="WPPlugin_SP">
<input type="hidden" name="return" value="https://myurl.com/thankyou">
<input type="hidden" name="cancel_return" value="https://myurl.com/tickets">
<input type="hidden" name="upload" value="1">
<table class="main-table_20681" style="width: 100% !important;">
<tbody>
<tr>
<td class="row-qty">
<select name="wpeevent_button_qty_a">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td class="row-name">Meal Ticket</td>
<td class="row-price">31.50 USD</td>
<td class="row-desc">Meal Ticket<input type="hidden" name="item_name_1" value="Meal Ticket"><input type="hidden" name="id_1" value="2201"><input type="hidden" name="amount_1" value="31.50"></td>
</tr>
<tr>
<td>
<select name="wpeevent_button_qty_b">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td>Dance Ticket</td>
<td>35.50 USD</td>
<td>Dance Ticket<input type="hidden" name="item_name_2" value="Dance Ticket"><input type="hidden" name="id_2" value="2202"><input type="hidden" name="amount_2" value="35.50"></td>
</tr>
</tbody>
</table>
<input class="wpeevent_paypalbuttonimage" type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" name="submit" alt="PayPal Button">
</form>
The plugin takes the sum of wpeevent_button_qty_a and wpeevent_button_qty_b then passes it to the next page so the user can pay.
The problem I am running into is when both values are 0, the plugin throws an error I'm thinking because PayPal can't charge for a 0 value (just guessing - it could also be the way the plugin is handling the values). By default, the select shows 0 as the chosen value, so if a user isn't paying attention, it's really easy to submit both of these selects as 0 and get the error.
Since this is a plugin, I can't modify the actual plugin to break gracefully when this happens. So, I found some JS that allows me to show or hide the Buy Now button if both values are 0.
By default, the button is hidden, if the quantity is less than 1 I hide the button, for everything else it is supposed to show the button...here is my code:
$('.wpeevent_paypalbuttonimage').hide();
let select = document.querySelector('.tickets');
select.addEventListener('change', function() {
var qty_a = $('.wpeevent_button_qty_a').val();
var qty_b = $('.wpeevent_button_qty_b').val();
if (qty_a > 1 && qty_b > 1) {
$('.wpeevent_paypalbuttonimage').hide();
} else {
$('.wpeevent_paypalbuttonimage').show();
}
});
Right now, the button is hidden and when I choose an option of 1 or more then the button shows, however if I go back and choose 0 for both select boxes the button doesn't hide. I'm sure this is something simple and I'm just overlooking something, but it seems regardless of how I write my code the behavior remains the same.
Originally, my code was:
$(function() {
$('.wpeevent_paypalbuttonimage').hide();
$('select[name^="wpeevent_button_qty_"]').change(function() {
var qty_a = $('.wpeevent_button_qty_a').val();
var qty_b = $('.wpeevent_button_qty_b').val();
if (qty_a > 1 && qty_b > 1) {
$('.wpeevent_paypalbuttonimage').hide();
} else {
$('.wpeevent_paypalbuttonimage').show();
}
});
});
Which functions the exact same way. I thought I had to have an addEventListener so it would work and found this: https://www.javascripttutorial.net/javascript-dom/javascript-change-event/, but after tweaking it, my code still works the same way.
Does anyone know how this should be written to function the way I'm thinking it should?
Thanks,
Josh

You had some minor errors which I fixed. Most notably the selector for the selects wasn't matching so the values were undefined.
$('.wpeevent_paypalbuttonimage').hide();
let form = document.querySelector('.tickets');
form.addEventListener('change', function() {
var qty_a = $('[name=wpeevent_button_qty_a]').val();
var qty_b = $('[name=wpeevent_button_qty_b]').val();
if (qty_a == 0 && qty_b == 0) {
$('.wpeevent_paypalbuttonimage').hide();
} else {
$('.wpeevent_paypalbuttonimage').show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form target="_blank" action="https://myurl.com/wp-admin/admin-post.php?action=add_wpeevent_button_redirect" method="post" class="tickets">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="path" value="paypal">
<input type="hidden" name="business" value="myemail#address.com">
<input type="hidden" name="item_name" value="My Event Name">
<input type="hidden" name="custom" value="20681">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="no_shipping" value="1">
<input type="hidden" name="notify_url" value="https://myurl.com/wp-admin/admin-post.php?action=add_wpeevent_button_ipn">
<input type="hidden" name="lc" value="EN_US">
<input type="hidden" name="bn" value="WPPlugin_SP">
<input type="hidden" name="return" value="https://myurl.com/thankyou">
<input type="hidden" name="cancel_return" value="https://myurl.com/tickets">
<input type="hidden" name="upload" value="1">
<table class="main-table_20681" style="width: 100% !important;">
<tbody>
<tr>
<td class="row-qty">
<select name="wpeevent_button_qty_a">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td class="row-name">Meal Ticket</td>
<td class="row-price">31.50 USD</td>
<td class="row-desc">Meal Ticket<input type="hidden" name="item_name_1" value="Meal Ticket"><input type="hidden" name="id_1" value="2201"><input type="hidden" name="amount_1" value="31.50"></td>
</tr>
<tr>
<td>
<select name="wpeevent_button_qty_b">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td>Dance Ticket</td>
<td>35.50 USD</td>
<td>Dance Ticket<input type="hidden" name="item_name_2" value="Dance Ticket"><input type="hidden" name="id_2" value="2202"><input type="hidden" name="amount_2" value="35.50"></td>
</tr>
</tbody>
</table>
<input class="wpeevent_paypalbuttonimage" type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" name="submit" alt="PayPal Button">
</form>

Ask user for amount and user value in a form

I'm trying to integrate a payment method called SiamPay on my website but I don't know javascript :(
On SiamPay website they have this instructions:
Copy the following program code to your payment page and
dynamic generate the Amount show below by yourself
<form name="payForm" method="post" action="https://www.siampay.com/b2c2/eng/payment/payForm.jsp">
<input type="submit" name="submit" value="Buy">
<input type="hidden" name="amount" value="Amount">
<input type="hidden" name="merchantId" value="76117579">
<input type="hidden" name="orderRef" value="76117579">
<input type="hidden" name="currCode" value="764" >
<input type="hidden" name="successUrl" value="">
<input type="hidden" name="failUrl" value="">
<input type="hidden" name="cancelUrl" value="">
<input type="hidden" name="remark" value="">
<input type="hidden" name="lang" value="E">
<input type="hidden" name="payMethod" value="ALL">
</form>
Example in jsp:
<%
double amount = qty * unitPrice ;
%>
<form name="payForm" method="post" action="https://www.siampay.com/eng/payment/payForm.jsp">
<input type="submit" name="submit" value="Buy">
<input type="hidden" name="amount" value="<%= amount %>">
<input type="hidden" name="merchantId" value="76117579">
<input type="hidden" name="orderRef" value="76117579">
<input type="hidden" name="currCode" value="764" >
<input type="hidden" name="successUrl" value="">
<input type="hidden" name="failUrl" value="">
<input type="hidden" name="cancelUrl" value="">
<input type="hidden" name="remark" value="">
<input type="hidden" name="lang" value="E">
</form>
I would like to create a field where the user can input an amount to pay in THB (Thai currency) and transport that value to this field:
< input type="hidden" name="amount" value="<%= amount %>">.
I think this is relatively easy but because I never user javascript I'm a little confused.
I appreciate any help.
Thank you so much.
Best Regards,
Alex

There's no need to create an extra input field. You have to change the name=amount input's type to number so that it will become visible to the user. Now the user can enter a number of their choice and click the pay button to submit the payment form.
<form name="payForm" method="post" action="https://www.siampay.com/eng/payment/payForm.jsp">
<input type="submit" name="submit" value="Buy">
<input type="number" name="amount" value="" placeholder="Enter amount in THB ">
<input type="hidden" name="merchantId" value="76117579">
<input type="hidden" name="orderRef" value="76117579">
<input type="hidden" name="currCode" value="764" >
<input type="hidden" name="successUrl" value="">
<input type="hidden" name="failUrl" value="">
<input type="hidden" name="cancelUrl" value="">
<input type="hidden" name="remark" value="">
<input type="hidden" name="lang" value="E">
</form>

To set value to an element, you can use the document.getElementById().value function. Set the amount data into the Amount variable as shown below.
var Amount = 123;
Also, modify the input tag for the amount to include the same id:
<input type="hidden" name="amount" id="amtId" value="Amount">
var Amount = 123;
function setAmountValue() {
document.getElementById('amtId').value = Amount;
}
<form name="payForm" method="post" action="https://www.siampay.com/b2c2/eng/payment/payForm.jsp">
<input type="submit" name="submit" value="Buy" onclick="setAmountValue();">
<input type="hidden" name="amount" id="amtId" value="Amount">
<input type="hidden" name="merchantId" value="76117579">
<input type="hidden" name="orderRef" value="76117579">
<input type="hidden" name="currCode" value="764">
<input type="hidden" name="successUrl" value="">
<input type="hidden" name="failUrl" value="">
<input type="hidden" name="cancelUrl" value="">
<input type="hidden" name="remark" value="">
<input type="hidden" name="lang" value="E">
<input type="hidden" name="payMethod" value="ALL">
</form>

try something like this:
<form name="payForm" method="post" action="https://www.siampay.com/eng/payment
/payForm.jsp">
<input type="submit" name="submit" value="Buy">
<input type="hidden" id="amount" value="<%= amount %>">
<input type="hidden" name="merchantId" value="76117579">
<input type="hidden" name="orderRef" value="76117579">
<input type="hidden" name="currCode" value="764" >
<input type="hidden" name="successUrl" value="">
<input type="hidden" name="failUrl" value="">
<input type="hidden" name="cancelUrl" value="">
<input type="hidden" name="remark" value="">
<input type="hidden" name="lang" value="E">
</form>
<button id='cmdSend'>Click me</button>
<input id='howmuch' type="number" name="amount" value=1000>
And the JS:
document.getElementById("cmdSend").addEventListener("click", myFunction);
function myFunction() {
document.getElementById("cmdSend").innerHTML = "YOU CLICKED ME!";
//Get the value the user typed:
var Value = document.getElementById("howmuch").value;
console.log(Value);
//Set the value into the hidden input, can be done in 2 ways:
document.getElementById("amount").value = Value;
document.getElementById("amount").setAttribute('value',Value);
//Check the value got assigned:
console.log(document.getElementById("amount").value);
}
Fiddle here: https://jsfiddle.net/s2ztkn8L/

Use JavaScript checkbox value in HTML

I'd like to be able to use a total amount generated using javascriptand displayed on the page in a <span> field later on in an HTML form. The checkbox additions and subtractions work correctly, I have no issue with that. What I have not been able to figure out is how to use that value later on in an HTML field (shown below as the PayPal code).
I have this in the <head> which handles the javascript:
<head>
<script type="text/javascript">
var total = 0.00;
function test(item) {
if (item.checked) {
total += parseFloat(item.value);
} else {
total -= parseFloat(item.value);
}
//alert(total);
document.getElementById('Totalcost').innerHTML = total.toFixed(2);
}
</script>
</head>
The this adds/subtracts if a check box is checked:
<td class="column-3">
<br>
<label class="container">
<input type="checkbox" name="Shoes" value="2.95" onClick="test(this);">Select<span class="checkmark"></span>
</label>
</td>
<td class="column-3">
<br>
<label class="container">
<input type="checkbox" name="Clothes" value="2.95" onClick="test(this);">Select<span class="checkmark"></span>
</label>
</td>
Then I display the total with this:
Total Amount: $<span id="Totalcost">0.00</span>
All of this works correctly and checking/unchecking reflects on the Total Amount shown at the bottom of the page.
What I'd like to do is use the total amount that is show in the HTML below for the PayPal subscription link so that the amount is added into the
line.
<form name="_xclick" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_xclick-subscriptions">
<input type="hidden" name="business" value="myemailaddress.com">
<input type="hidden" name="item_name" value="Shows & Clothes">
<input type="hidden" name="item_description" value="Shows & Clothes">
<input type="hidden" name="currency_code" value="GBP">
<input type="hidden" name="no_shipping" value="1">
<input type="image" src="http://www.paypal.com/en_GB/i/btn/x-click-but20.gif" border="0" name="submit" alt="Make payments with PayPal - it\'s fast, free and secure!">
<input type="hidden" name="a3" value="TOTAL_AMOUNT">
<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>
Is it possible to capture the 'totalcost' and have it dynamically added to the "a3" field in the PayPal form (where it says TOTAL_AMOUNT) for when the customer clicks the PayPal button it already has the correct value/amount in the form?
Thank you.

You can use document.getElementsByName. By default you'll get a NodeList. For example:
var a3 = document.getElementsByName("a3")[0];
a3.value = total.toFixed(2);
You can easily update its value.
Something like this:
var total = 0.00;
function test(item) {
if (item.checked) {
total += parseFloat(item.value);
} else {
total -= parseFloat(item.value);
}
document.getElementById("Totalcost").innerHTML = total.toFixed(2);
var a3 = document.getElementsByName("a3")[0];
a3.value = total.toFixed(2);
}
<form name="_xclick" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_xclick-subscriptions">
<input type="hidden" name="business" value="myemailaddress.com">
<input type="hidden" name="item_name" value="Shows & Clothes">
<input type="hidden" name="item_description" value="Shows & Clothes">
<input type="hidden" name="currency_code" value="GBP">
<input type="hidden" name="no_shipping" value="1">
<input type="image" src="http://www.paypal.com/en_GB/i/btn/x-click-but20.gif" border="0" name="submit" alt="Make payments with PayPal - it\'s fast, free and secure!">
<input type="hidden" name="a3" value="TOTAL_AMOUNT">
<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>
<table>
<tr>
<td class="column-3">
<br>
<label class="container">
<input type="checkbox" name="Shoes" value="2.95" onClick="test(this);">Select<span class="checkmark"></span>
</label>
</td>
<td class="column-3">
<br>
<label class="container">
<input type="checkbox" name="Clothes" value="2.95" onClick="test(this);">Select<span class="checkmark"></span>
</label>
</td>
</tr>
</table>
<span id="Totalcost">0.00</span>

Hide submit button for PayPal payment form if input field is not 40 characters

I have a PayPal buy now button form on my website that users fill out to purchase a product.
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="BHQLX7V2W2GJQ">
<table>
<tr><td><input type="hidden" name="on0" value="Select package">Select package</td></tr><tr><td><select name="os0">
<option value="Premium">Premium $5.49 USD</option>
<option value="Platinum">Platinum $14.49 USD</option>
<option value="Diamond">Diamond $9.49 USD</option>
</select> </td></tr>
<tr><td><input type="hidden" name="on1" value="Enter your 40 character UDiD">Enter your 40 character UDiD</td></tr><tr><td><input type="text" name="os1" id="field" maxlength="40" placeholder="Paste UDiD here"></td></tr>
</table>
<input type="hidden" name="currency_code" value="USD">
<input type="image" src="https://www.paypalobjects.com/en_AU/i/btn/btn_buynow_LG.gif" border="0" name="submit" id="paypalButton" alt="PayPal — The safer, easier way to pay online.">
<img alt="" border="0" src="https://www.paypalobjects.com/en_AU/i/scr/pixel.gif" width="1" height="1">
</form>
In this form, there is a text input field:
<input type="text" name="os1" id="field" maxlength="40">
I want to force the user to enter their exactly 40 character UDiD (for their iOS device) before they can purchase the product by clicking the
'Buy now' button (submit button for the form). How can I do this by disabling/hiding the button if the input field does not have a 40 character string entered?
Edit: new form code

I went ahead a fixed up all your code.
Change your form to this...
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" id="paypalForm" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="BHQLX7V2W2GJQ">
<table>
<tr><td><input type="hidden" name="on0" value="Select package">Select package</td></tr><tr><td><select name="os0">
<option value="Premium">Premium $5.49 USD</option>
<option value="Platinum">Platinum $14.49 USD</option>
<option value="Diamond">Diamond $9.49 USD</option>
</select> </td></tr>
<tr><td><input type="hidden" name="on1" value="Enter your 40 character UDiD">Enter your 40 character UDiD</td></tr><tr><td><input type="text" name="os1" id="field" maxlength="40" placeholder="Paste UDiD here"></td></tr>
</table>
<input type="hidden" name="currency_code" value="USD">
<input type="image" style="display:none;" src="https://www.paypalobjects.com/en_AU/i/btn/btn_buynow_LG.gif" name="submit" id="paypalButton" alt="PayPal — The safer, easier way to pay online.">
<img alt="" src="https://www.paypalobjects.com/en_AU/i/scr/pixel.gif" width="1" height="1">
</form>
And add this right above you </body> tag
<script>
$(window).keydown(function(event){
if(event.keyCode == 13) {
event.preventDefault();
if($('#field').val().length == 40){
$( "#paypalForm" ).submit();
}
}
});
$(document).ready(function() {
$("#field").keyup(function() {
if ($('#field').val().length == 40) {
$('#paypalButton').fadeIn();
} else {
$('#paypalButton').fadeOut();
}
});
});
</script>

Disable form submission if checkbox is unchecked

I am trying to use function checkbox() to disable form submission.
Can anyone suggest what am i doing wrong?
Thanks in advance.
Here is the code snippet for the JS:
<script type = "text/javascript">
function checkbox() {
if(document.form.checkbox.checked)
{
document.form.submit.disabled=false;
}
else
{
document.form.submit.disabled=true;
}
}
</script>
And here is the HTML code.
<form name="form" action="shop_paypal.php" method="post">
<input name="cmd" type="hidden" value="_xclick" />
<input name="no_note" type="hidden" value="1" />
<input name="lc" type="hidden" value="UK" />
<input name="currency_code" type="hidden" value="USD" />
<input name="bn" type="hidden" value="PP-BuyNowBF:btn_buynow_LG.gif:NonHostedGuest" />
<input type="hidden" name="item_name" id="item_name"value="YOUTUBE"/>
<select name="amount" id="amount" style="width:256px; height:32px;">
<option value="18" id="1">10,000 PINS - $18 </option>
<option value="35" id="2">20,000 PINS - $35</option>
<option value="75" id="3">30,000 PINS - $75</option>
<option value="140" id="4">50,000 PINS - $140</option>
</select>
<label>Your Facebook fan page URL: </label><br />
<input class="input-box" type="text" />
<input type="text" />
<input type="checkbox" class="checkbox" name="checkbox" id="checkbox"/>
<label class="agree">I agree to Terms & Conditions</label>
<input type="image" src="images/products/buynow.gif" class="submit" onclick= "checkbox();" name = "submit"/>
</form>

The obvious first thought would be:
var form = document.getElementsByTagName('form')[0];
function check (){
return document.getElementById('checkbox').checked;
}
form.addEventListener('submit', check);

Try this and notice how the function is simplyfied and calling is moved to the checkbox itself. When it's checked, button is enabled, and when unchecked, it's disabled (this is also a default state).
Here's also a working demo: http://jsfiddle.net/kL7We/
<script>
function enableSending() {
document.form.submit.disabled = !document.form.checkbox.checked;
}
</script>
<form name="form" action="shop_paypal.php" method="post">
<input name="cmd" type="hidden" value="_xclick" />
<input name="no_note" type="hidden" value="1" />
<input name="lc" type="hidden" value="UK" />
<input name="currency_code" type="hidden" value="USD" />
<input name="bn" type="hidden" value="PP-BuyNowBF:btn_buynow_LG.gif:NonHostedGuest" />
<input type="hidden" name="item_name" id="item_name"value="YOUTUBE"/>
<select name="amount" id="amount" style="width:256px; height:32px;">
<option value="18" id="1">10,000 PINS - $18 </option>
<option value="35" id="2">20,000 PINS - $35</option>
<option value="75" id="3">30,000 PINS - $75</option>
<option value="140" id="4">50,000 PINS - $140</option>
</select>
<label>Your Facebook fan page URL: </label><br />
<input class="input-box" type="text" />
<input type="text" />
<input type="checkbox" class="checkbox" name="checkbox" id="checkbox" onclick= "enableSending();"/>
<label for="checkbox" class="agree">I agree to</label> Terms & Conditions
<input type="button" src="images/products/buynow.gif" class="submit" name = "submit" value="Send" disabled="disabled"/>