We Keep Coding

OnClicking Checkbox display a Hidden Select Box

I basically want to show a Hidden Select Box when a particular checkbox is checked.
This is my checkbox HTML;
<input type="checkbox" class="defaulter_checkbox" name="defaulter" value="1" onclick="show_defaulter_div(box, \'show_defaulter_div\')" />
and this is the Hidden Select Box HTML;
<span id="show_defaulter_div" style="display: none;"> x <select name="defaulter_month" class="small_input_box">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select></span>
The JavaScript Function code I am using is this;
function show_defaulter_div(box, show_defaulter_div)
{
var deF = document.getElementById(show_defaulter_div);
if(box.checked)
{
deF.style.display = "";
}
else
{
deF.style.display = "none";
}
}
Please help.

Something like this,
<input type="checkbox" class="defaulter_checkbox" name="defaulter" value="1" onclick="show_defaulter_div(this)" />
And, In Javascript,
function show_defaulter_div(checkbox) {
var deF = document.getElementById("show_defaulter_div");
if (checkbox.checked) {
deF.style.display = "";
} else {
deF.style.display = "none";
}
}

You only need to change the input to
<input type="checkbox" class="defaulter_checkbox" name="defaulter" checked="checked" onchange="show_defaulter_div(this, 'show_defaulter_div')" />

Use jquery drop-down menu to interact with each other

I have an array with five numbers in it
<scipt>
var array = ["1","2","3","4","5"]
</script>
<form>
<select id="num1">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</form>
<button type="button">Click Me!</button>
When I click the button, a new drop-down menu is generated
<form>
<select id="num2">
<option value="2" selected>2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</form>
Because I have selected 1 value above, the value of 1 has been removed when the second drop-down menu is generated.
<form>
<select id="num1">
<option value="1" selected>1</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</form>
At this time, because id = num1 selects 2 value, so when I change num2 num1, the value will also be changed.
I want to use the front-end to achieve this function, use JQUERY, how do you achieve this?
value will be given through the array.

How to copy option element after a specific option value element

How can I copy the select option element after a specific option value in JavaScript/jQuery?
Here's my two selects
First select where I want to copy the option below the copy value
<select class="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="copy">Copy below</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
Second select where I want to append what I copy on first element
<select class="select">
<option value="1">1</option>
<option value="2">2</option>
</select>

You can target the option element with attribute equal selector, along with .nextAll(), .clone() and .appendTo() to create clone of option element and append in second select dropdown
$('option[value=copy]').nextAll().clone().appendTo('.select2');
$(function(){
$('option[value=copy]').nextAll().clone().appendTo('.select2');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="copy">Copy below</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select class="select2">
</select>

First select the first element to copy :
let $copyElement = $('#firstSelect option[value="copy"]').next();
Then, while elements are available, clone them and append them to the second select:
while($copyElement.length > 0) {
$('#secondSelect').append( $copyElement.clone() );
$copyElement = $copyElement.next();
}
let $copyElement = $('#firstSelect option[value="copy"]').next();
while($copyElement.length > 0) {
$('#secondSelect').append( $copyElement.clone() );
$copyElement = $copyElement.next();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="select" id="firstSelect">
<option value="1">1</option>
<option value="2">2</option>
<option value="copy">Copy below</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select class="select" id="secondSelect">
<option value="1">1</option>
<option value="2">2</option>
</select>

Consider the following example.
$(function() {
function copyOpts(a, b) {
if ($("option:selected", a).val() == "copy") {
$("option:selected", a).nextAll().clone().appendTo(b);
}
}
$(".primary").change(function() {
copyOpts($(".primary"), $(".secondary"));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="select primary">
<option value="1">1</option>
<option value="2">2</option>
<option value="copy">Copy below</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select class="select secondary">
<option value="1">1</option>
<option value="2">2</option>
</select>
You can move the if() statement to either the change callback, or leave it in the function.
See more:
https://api.jquery.com/nextAll/
https://api.jquery.com/clone/
https://api.jquery.com/appendTo/

trying to calculate rates runtime using javascript and html5

here im trying to calculate rates of bus ticket on selection of seat
for that i did searched on internet then i found something relavant on stack but its not working
following is html something minor issue help me to get out of this rates are not getting calculate on selection of value
here is my js
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<script type="text/javascript">
$('#quantity').change(function(){
var qty = $('#quantity').val();
var price = $('#productPrice').val();
var total = price * qty;
$("#totalprice").val(total);
});
</script>
<div class="pricesection">
<input type="hidden" id="productPrice" value="340"/>
Quantity:
<select id="quantity">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
Total: $
<input type="text" id="totalprice" value="340"/>

You may have a conflict in some other code that you have not posted (I closed your div, but not much else). Here is a working example that may help you troubleshoot.
$('#quantity').change(function() {
var qty = $('#quantity').val();
var price = $('#productPrice').val();
var total = price * qty;
$('#totalprice').val(total);
});
<div class="pricesection">
<input type="hidden" id="productPrice" value="340" />
Quantity:
<select id="quantity">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
Total: $
<input type="text" id="totalprice" value="340" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Use parseInt() to convert string to number
var qty =parseInt($('#quantity').val());
var price = parseInt($('#productPrice').val());
var total = price * qty;
$("#totalprice").val(total);

There is no problem with your code, but in its' order. The script code goes in your post above the elements inside the document. The running order in WEB is line by line, so when your script asking for $("#quantity") it gets an undefined as answer. All you need to do is to move your script to be after your document's elements.
Another solution can be creating of script file and use there with post initialize of the DOM elements- Something like this:
$(document).ready(function() { /* code here */ })
You can read more here: window.onload vs document.onload
See that the following code is perfect when the script tag is after the elements' initialize:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<div class="pricesection">
<input type="hidden" id="productPrice" value="340"/>
Quantity:
<select id="quantity">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
Total: $
<input type="text" id="totalprice" value="340"/>
<script type="text/javascript">
$('#quantity').change(function(){
var qty = $('#quantity').val();
var price = $('#productPrice').val();
var total = price * qty;
$("#totalprice").val(total);
});
</script>

Show/Hide text box based on selection from multiple drop down boxes

I have a table with a row of drop down menus with the values 1 -5. When the user selects a value less than three on any box, I want a pop up box to appear underneath the table. The popup only needs to appear once for any amount of drop downs that have a value less than 3, not once for every value less than 3. The code works when I assign the <select id='purpose'>, but it will only work on the first <select>. How do I make it work for all of them?
using this function:
$(document).ready(function(){
$('#purpose').on('change', function() {
if ( this.value < 3)
{
$("#business").show();
}
else
{
$("#business").hide();
}
});
});
Snippet of the HTML:
<td>
<select id='purpose'>
<option value="" selected="selected">Select...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td>
<select id='purpose'>
<option value="" selected="selected">Select...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
...
</table>
<div style='display:none;' id='business'>
<input type='text' class='text' name='business' placeholder="You gave a rating of less than 3 in one or more categories. Please provide a brief explination as to why." />
<br/>
</div>

Each select element should be assigned to to the same class rather than the same id. Then, the logic can be applied to all classes.
<td>
<select class="purpose">
<option value="" selected="selected">Select...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td>
<select class="purpose">
<option value="" selected="selected">Select...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
And the appropriate selector is:
$(document).ready(function(){
$('.purpose').on('change', function() {
if ( this.value < 3) {
$("#business").show();
} else {
$("#business").hide();
}
});
});

First you have duplicate ids which should be removed.
The popup only needs to appear once for any amount of drop downs that have a value less than 3, not once for every value less than 3. The code works when I assign the , but it will only work on the first . How do I make it work for all of them?
If you want the change event for work on both the both select you
can just attach on select element. This will trigger the code for all
select elements as below.
$(document).ready(function(){
$('select').on('change', function() {
if ( this.value < 3)
{
$("#business").show();
}
else
{
$("#business").hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td>
<select >
<option value="" selected="selected">Select...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td>
<select>
<option value="" selected="selected">Select...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
...
</table>
<div style='display:none;' id='business'>
<input type='text' class='text' name='business' placeholder="You gave a rating of less than 3 in one or more categories. Please provide a brief explination as to why." />
<br/>
</div>