Hide or Show button based on two select values - javascript

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>

Related

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>

simultaneously change all input values

How could I clear (i.e. set to "") all the input values at once?
<div id="hidden-inputs">
<input type="hidden" value="9013 NE Hwy 99" id="adderss_copy" name="adderss_copy">
<input type="hidden" value="Vancouver" id="city_copy" name="city_copy">
<input type="hidden" value="WA" id="states_id_copy" name="states_id_copy">
<input type="hidden" value="98665" id="zipcode" name="zipcode">
<input type="hidden" value="Clark County" id="county" name="county">
<input type="hidden" value="US" id="country" name="country">
<input type="hidden" value="45.687949" id="latitude" name="latitude">
<input type="hidden" value="-122.659134" id="longitude" name="longitude">
<input type="hidden" value="" id="timezone" name="timezone">
</div>
I've unsuccessfully tried the following:
$('#hidden-inputs').find(':input').val('');
$('#hidden-inputs :input').val('');
Try
$('#hidden-inputs input').val('');
Try
Wrap your code in DOM Ready
$(function () {
$('#hidden-inputs input').val('');
});

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"/>

Javascript Show hide variable for form

Here is the code I am having trouble with everyone. This is what I have been working on for 8 hours since I do not know js. I got most of this from the w3school.com site and just have been trying to piece everything together. ugh please help
<script type="text/javascript">
var stringToMatch = 'christopher',
input = document.getElementById('text'),
div = document.getElementById('divColor1');
function toggle (switchElement){
if (this.value == stringToMatch){
div.style.display = 'block';
}
else {
div.style.display = 'none';
}
};?
</script>
<!--This is the start of the code which i want to appear-->
<h3>Coupon Redeem</h3>
<form action="test" method="post">
Please type in the Coupon Code you have recieved:
<form id='coupon' onChange="javascript: ShowMenu(document.getElementById('text').value,'divColor1');">
<input id="text" type="text">
<input type="button" id="text" value="Redeem" onClick="toggle(this)" />
</form>
<!--This is the start of the hidden field that i want to appear when the coupon code is entered correctly-->
<div id="divColor1" style="display:none;">
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="asjsanxci">
<input type="hidden" name="on0" value="Tokens">Tokens
<select name="os0">
<o ption value="5 tokens">5 tokens$5.00 USD</option>
<option value="10 tokens">10 tokens$10.00 USD</option>
<option value="15 tokens">15 tokens$13.00 USD</option>
<option value="20 tokens">20 tokens$18.00 USD</option>
<option value="25 tokens">25 tokens$23.00 USD</option>
<option value="30 tokens">30 tokens$27.00 USD</option>
<option value="35 tokens">35 tokens$33.00 USD</option>
<option value="40 tokens">40 tokens$38.00 USD</option>
<option value="50 tokens">50 tokens$45.00 USD</option>
</select>
<input type="hidden" name="on1" value="Username Verification">Username Verification
<input type="text" name="os1" maxlength="200">
<input type="hidden" name="currency_code" value="USD">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynow_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
</form>
</div>
<br>
</form>
your code has a syntax error
<div id="divColor1" style="displayed:none"
change that to
<div id="divColor1" style="display:none;">
also some other bugs that i found
<form id='coupon' onChange="javascript: ShowMenu(document.getElementById('text').var,'divColor1',);">
your ShowMenu is missing a variable, and another syntax error document.getElementById('text').var
>
<form id='coupon'
onChange="javascript: ShowMenu(document.getElementById('text').value,'divColor1');">
Update
I have made some changes to your code. you can see the working code here
Updated code
<script>
var stringToMatch = 'christopher';
function toggle (){
var input = document.getElementById('text').value;
if (input == stringToMatch){
document.getElementById('divColor1').style.display = 'block';
}
else {
document.getElementById('divColor1').style.display = 'none';
}
};​
</script>
<!--This is the start of the code which i want to appear-->
<h3>Coupon Redeem</h3>
<form action="test" method="post">
Please type in the Coupon Code you have recieved:
<form id='coupon' onChange="javascript: ShowMenu(document.getElementById('text').value,'divColor1');">
<input id="text" type="text">
<input type="button" id="text" value="Redeem" onClick="toggle()" />
</form>
<!--This is the start of the hidden field that i want to appear when the coupon code is entered correctly-->
<div id="divColor1" style="display:none;">
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="asjsanxci">
<input type="hidden" name="on0" value="Tokens">Tokens
<select name="os0">
<o ption value="5 tokens">5 tokens$5.00 USD</option>
<option value="10 tokens">10 tokens$10.00 USD</option>
<option value="15 tokens">15 tokens$13.00 USD</option>
<option value="20 tokens">20 tokens$18.00 USD</option>
<option value="25 tokens">25 tokens$23.00 USD</option>
<option value="30 tokens">30 tokens$27.00 USD</option>
<option value="35 tokens">35 tokens$33.00 USD</option>
<option value="40 tokens">40 tokens$38.00 USD</option>
<option value="50 tokens">50 tokens$45.00 USD</option>
</select>
<input type="hidden" name="on1" value="Username Verification">Username Verification
<input type="text" name="os1" maxlength="200">
<input type="hidden" name="currency_code" value="USD">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynow_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
</form>
</div>
<br>
</form> ​
fix the code
displayed:none => display:none
var input = document.getElementById('text');
// your html don't have id='text'
<input type="text"> => <input id='text' type="text">
you have to fix two problem then
it works!
good luck.

Refresh Javascript Variable without page reload

I have this form with a select list box in it. It shows a total that will change when the user selects different options:
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" name="paypal">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="upload" value="1">
<input type="hidden" name="currency_code" value="GBP">
<input type="hidden" name="business" value="contact#contact.org">
<select name="handling_cart" onChange="refresh();" style="margin-bottom: 5px;">
<option selected value="10.00">UK £10.00</option>
<option value="30.00">France £30.00</option>
<option value="35.00">Germany £35.00</option>
</select>
</td>
</tr>
<tr>
<td>Grand Total:</td>
<td>£
<script lanuage="JavaScript">
var delivery = document.paypal.handling_cart.value;
var total = parseInt(jtotal)+parseInt(delivery);
document.write(total);
</script></td>
</tr>
I haven't got a function refresh() but I'm guessing I'm going to need one?
TIA
Okay, created refresh() for you. Working demo is here http://jsfiddle.net/hwwDj/3/
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" name="paypal">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="upload" value="1">
<input type="hidden" name="currency_code" value="GBP">
<input type="hidden" name="business" value="contact#contact.org">
<select name="handling_cart" onChange="refresh();" style="margin-bottom: 5px;">
<option selected value="10.00">UK £10.00</option>
<option value="30.00">France £30.00</option>
<option value="35.00">Germany £35.00</option>
</select>
</td>
</tr>
<tr>
<td>Grand Total:</td>
<td><div id="etd">£</div></td>
</tr>
<script lanuage="javascript">
var jtotal=10;
var delivery = document.paypal.handling_cart.value;
function refresh()
{
delivery = document.paypal.handling_cart.value;
var total = parseInt(jtotal)+parseInt(delivery);
document.getElementById("etd").innerHTML="£ "+total;
}
//document.write(total);
</script>

Categories

Resources