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>

AngularJS add selects based on dropdown value change

I have a form where users would be able to select the number of adults attending an event. Once this value is selected I would like a section to appear the has meal selection values for the number of adults chosen. IE, user selects 2 adults, Adult Meal 1 select appears, Adult Meal 2 select Appears. All I have right now are the form fields. I have researched and have seen that fields can be added dynamically, but I haven't figured out how to accomplish what I am trying to accomplish. Can anyone help?
<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14 /angular.min.js"></script>
</head>
<body>
<form name="oitrsvp">
<div ng-app="">
<p><b>First Name : </b><input type="text" ng-model="fname" required></p>
<p><b>Last Name : </b><input type="text" ng-model="lname" required></p>
<p><b>Email Address : </b><input type="email" ng-model="email" required></p>
<label><b>How many parking passes will you need (for non-GT employees)?<b></label><br>
<select ng-model="model.ppass" convert-to-number>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<br>
<br>
<label><b>Please Select your meal time :</b></label><br>
<input type="radio" ng-model="mealtime" value="1">
11:30am
<br/>
<input type="radio" ng-model="mealtime" value="2">
12:30pm
<br/>
<br>
<label><b>How many adults will be attending with you?</b></label><br>
<select ng-model="model.numad" ng-change="addFields(model.numad)" convert-to-number required>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<br><br>
<label><b>How many children will be attending with you?</b></label><br>
<select ng-model="model.numch" convert-to-number required>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<button ng-click="submit(form)">Submit</button>
<button ng-click="addFields(form)">Add</button>
</form>
</body>
</html>
UPDATE:
So I figured how to do this via JavaScript. I have divs set up to initially hide, but once a value in the dropdown in selected it shows that div. The problem I'm facing now is that I have two different drop downs that need to have this fnctionality, one for adults and one for children. When I select a number for the adults, the correct selects appear. Then when I go to the next dropdown for the children, the correct number of selects appear there too, but the selects for the adults go away. How cna I get them both to stay?
<!DOCTYPE html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript">
var currentlyShown = null;
function selectAdMeal(value){
//alert(value);
if(currentlyShown){
currentlyShown.style.display = 'none';
}
var elem='am_' + value;
// alert(elem);
currentlyShown = document.getElementById(elem);
if(currentlyShown){
currentlyShown.style.display = '';
}
}
function selectChMeal(value){
alert(value);
if(currentlyShown){
currentlyShown.style.display = 'none';
}
var elem='ch_' + value;
alert(elem);
currentlyShown = document.getElementById(elem);
if(currentlyShown){
currentlyShown.style.display = '';
}
}
</script>
</head>
<body>
<div ng-app="">
<form name="oitrsvp">
<p><b>First Name : </b><input type="text" ng-model="fname" required></p>
<p><b>Last Name : </b><input type="text" ng-model="lname" required></p>
<p><b>Georgia Tech Email Address : </b><input type="email" ng-model="gtemail" required></p>
<label><b>How many parking passes will you need (for non-GT employees)?<b></label><br>
<select ng-model="model.ppass" convert-to-number>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<br>
<h1>Hello {{fname}} {{lname}} {{model.ppass}}</h1>
<br>
<label><b>Please Select your meal time :</b></label><br>
<input type="radio" ng-model="mealtime" value="1">
11:30am
<br/>
<input type="radio" ng-model="mealtime" value="2">
12:30pm
<br/>
<br>
<label><b>How many adults will be attending with you?</b></label><br>
<select ng-model="numad" id='numad' onchange="selectAdMeal(this.options[this.selectedIndex].value);" convert-to-number required>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<br><br>
<div id="am_0" style="display:none;">
Please select the meal for yourself:<br>
<input type="radio" ng-model="selfmeal" value="p">
Pork<br>
<input type="radio" ng-model="selfmeal" value="c">
Chicken<br>
<input type="radio" ng-model="selfmeal" value="v">
Vegetarian
<br><br>
</div>
<div id="am_1" style="display:none;">
Please select the meal for yourself:<br>
<input type="radio" ng-model="selfmeal" value="p">
Pork<br>
<input type="radio" ng-model="selfmeal" value="c">
Chicken<br>
<input type="radio" ng-model="selfmeal" value="v">
Vegetarian
<br><br>
Please select the meal for Adult 1:<br>
<input type="radio" ng-model="ad1meal" value="p">
Pork<br>
<input type="radio" ng-model="ad1meal" value="c">
Chicken<br>
<input type="radio" ng-model="ad1meal" value="v">
Vegetarian
</div>
<div id="am_2" style="display:none;">
Please select the meal for yourself:<br>
<input type="radio" ng-model="selfmeal" value="p">
Pork<br>
<input type="radio" ng-model="selfmeal" value="c">
Chicken<br>
<input type="radio" ng-model="selfmeal" value="v">
Vegetarian
<br><br>
Please select the meal for Adult 1:<br>
<input type="radio" ng-model="ad1meal" value="p">
Pork<br>
<input type="radio" ng-model="ad1meal" value="c">
Chicken<br>
<input type="radio" ng-model="ad1meal" value="v">
Vegetarian
<br><br>
Please select the meal for Adult 2:<br>
<input type="radio" ng-model="ad2meal" value="p">
Pork<br>
<input type="radio" ng-model="ad2meal" value="c">
Chicken<br>
<input type="radio" ng-model="ad2meal" value="v">
Vegetarian
<br><br>
</div>
<label><b>How many children will be attending with you?</b></label><br>
<select ng-model="numch" id='numch' onchange="selectChMeal(this.options[this.selectedIndex].value);" convert-to-number required>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<br><br>
<div id="ch_0" style="display:none;">
</div>
<div id="ch_1" style="display:none;">
Please select the meal for Child 1:<br>
<input type="radio" ng-model="ch1meal" value="hd">
Hot Dog<br>
<input type="radio" ng-model="ch1meal" value="h">
Hamburger<br>
<input type="radio" ng-model="ch1meal" value="v">
Vegetarian
</div>
<div id="ch_2" style="display:none;">
Please select the meal for Child 1:<br>
<input type="radio" ng-model="ch1meal" value="hd">
Hot Dog<br>
<input type="radio" ng-model="ch1meal" value="h">
Hamburger<br>
<input type="radio" ng-model="ch1meal" value="v">
Vegetarian
<br><br>
Please select the meal for Child 2:<br>
<input type="radio" ng-model="ch2meal" value="hd">
Hot Dog<br>
<input type="radio" ng-model="ch2meal" value="h">
Hamburger<br>
<input type="radio" ng-model="ch2meal" value="v">
Vegetarian
<br><br>
</div>
<button ng-click="submit(form)">Submit</button>
<button ng-click="addFields(form)">Add</button>
</form>
</div>
</body>
</html>

In AngularJs you have ng-show attribute, You can set the appearance of an element according to variable in the scope:
<body ng-app="myApp">
<div ng-controller="myctrl">
<form name="oitrsvp">
<select ng-model="numad" id='numad' convert-to-number required>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<div id="am_0" ng-show="numad=='0'">am_0</div>
<div id="am_1" ng-show="numad=='1'">am_1</div>
<div id="am_2" ng-show="numad=='2'">am_2</div>
<select ng-model="numch" id='numch' convert-to-number required>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<div id="ch_0" ng-show="numch=='0'">
ch_0
</div>
<div id="ch_1" ng-show="numch=='1'">
ch_1
</div>
<div id="ch_2" ng-show="numch=='2'">
ch_2
</div>
</form>
</div>
var myApp = angular.module('myApp',[]);
myApp.controller("myctrl",function(){
});

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>

Copy select value data form one form to another without button in form1

Hi I have problems to figure out how to copy select value data from one form to another form. I need a copy javascript for this I guess.
Form1
<form id="form1" name="form1">
<input type="checkbox" name="email'.$emailCount++.'" value="'.email.'"/>
<input type="hidden" name="name'.$nameCount++.'" value="'.$id.'"/>
</form>
Form2
<form id="form2" method="POST" action="script/do-something.php" name="form2">
<label for="name">Add Selected</label>
<select name="list" id="list" class="form-text">
<option value="">Add To List</option>
<option value="All">All</option>
<option value="All">Blog</option>
<option value="All">Dj</option>
</select>
<input type="hidden" name="name'.$nameCount++.'" value="'.$id.'"/>
<input type="button" name="new_address" id="clicky3" value="Add Selected">
</form>

How do you validate an HTML form using JavaScript?

I am creating a basic survey using the tag, but I am having trouble with using JavaScript to validate the form. I would like it to check all forms and not just one. Please help! Thanks! Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>SurveyBot v1</title>
</head>
<body>
<form action="">
What is your first name?: <input type="text" name="firstname"><br>
What is your last name?: <input type="text" name="lastname">
</form>
<h5>What is your gender?</h5>
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
<h5>Which of the following vehicles do you own? (Check all that apply):</h5>
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Scooter">I have a scooter<br>
<input type="checkbox" name="vehicle" value="Quad">I have a quad<br>
<input type="checkbox" name="vehicle" value="Snowmobile">I have a snowmobile<br>
<input type="checkbox" name="vehicle" value="Skateboard">I have a skateboard<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
<h5>Which of the following car brands do you drive as your primary car?</h5>
<form action="">
<select name="cars">
<option value="none">None</option>
<option value="other">Other</option>
<option value="volvo">Volvo</option>
<option value="kia">Kia</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
<option value="honda">Honda</option>
<option value="mitsubishi">Mitsubishi</option>
<option value="toyota">Toyota</option>
<option value="ford">Ford</option>
</select>
</form>
<h5>Please check the box that says "I have finished" and press submit. Thank you for taking the survey.</h5>
<form name="input" action="html_form_action.html" method="get">
<input type="checkbox" name="finished" value="I am finished">I have finished<br>
<br><br>
<input type="submit" value="Submit">
</body>
</html>

Just add JavaScript function call near submit button.
<input type="submit" onclick="return validateForm(this.form);" />
Make JavaScript function. Take help from following link: link or you can google some examples.
Moreover, You need to put all stuffs inside single <form></form> tags to make it work. Else you need a workaround that makes your work more tedious.