OnClicking Checkbox display a Hidden Select Box - javascript

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

Related

how to return false if two div have the same value when submit the form

I have a form has a lot of selects inside divs so i want when the user submits the form if there are two div or more have the
same value, form example the first has this value : 1 one and the third has
the same value so don't submit and return false, so is there any way javascript or jquery can help me to do that?
$("form").submit(function() {
alert("2 div or more have the same value, please change them");
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div>
<select class="number">
<option value="">select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="letter">
<option value="">select</option>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
</div>
<div>
<select class="number">
<option value="">select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="letter">
<option value="">select</option>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
</div>
<div>
<select class="number">
<option value="">select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="letter">
<option value="">select</option>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
</div>
<input type="submit"/>
</form>
You can try this javascript code keeping your html
$("form").submit(function(event)
{
var selects = $('select');
selects.each(function(i,select1){
var found = false;
selects.each(function(j,select2){
if(i!=j && select1.value == select2.value){
alert("2 div or more have the same value, please change them");
found = true;
event.preventDefault();
return false;
}
});
if(found){
return false;
}
});
});

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>

jQuery if Form with Selects are Filled out, show div

I am look for a way to make it so that when the user selects an item form all the select (for which the value of the option is not nil) the div with id "js-market" is shown.
This is my html code:
<form class="js-chose">
<div class="col-md-6 col-xm-12">
<div class="form-group js-select">
<label>Select a Market</label>
<select class="form-control">
<option value='' disabled selected>Chose a Market</option>
<%Item.all.each do |item|%>
<option value="<%=item.id%>"><%=item.name.capitalize%></option>
<%end%>
</select>
</div>
</div>
<div class="col-md-6 col-xm-12">
<div class="form-group">
<label>Enter Market with:</label>
<select class="form-control js-select">
<option value='' disabled selected>Chose a Company</option>
<%Company.where(user_id: current_user.id).each do |company|%>
<option value="<%=company.id%>"><%=company.name%></option>
<%end%>
</select>
</div>
</div>
</form>
In short I need to make jQuery show the div with id="js-market" when both selects have been filled by the user and get the values of the selected items and assign them to a variable.
Thank you. Please let me know if I wasn't clear enough.
Example that works with multiple select elements
Link to jsfiddle
var counter = $('.select').length;
$('.select').change(function() {
$.each($('.select'),function(i,e) {
var t = $(this);
if (t.val() == undefined || t.val() == '') {
$('#js-market').fadeOut();
return;
}
if (i+1 == counter) {
$('#js-market').fadeIn();
}
});
});
#js-market {
display: none;
}
<select class="select">
<option value="">No Value</option>
<option value="value1">Value 1</option>
<option value="value2">Value 2</option>
<option value="value3">Value 3</option>
<option value="value1">Value 4</option>
</select>
<select class="select">
<option value="">No Value</option>
<option value="value1">Value 1</option>
<option value="value2">Value 2</option>
<option value="value3">Value 3</option>
<option value="value1">Value 4</option>
</select>
<select class="select">
<option value="">No Value</option>
<option value="value1">Value 1</option>
<option value="value2">Value 2</option>
<option value="value3">Value 3</option>
<option value="value1">Value 4</option>
</select>
<div id="js-market">Lorem ipsum</div>
See this fiddle
You can do this by onchange() event in javascript. In the fiddle specified above, what I do is that, I've placed 2 select boxes and a div with id demo will be shown only if two of the select boxes are selected.
HTML
<select id="mySelect1" onchange="myFunction()">
<option value="0">--Select--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="mySelect2" onchange="myFunction()">
<option value="0">--Select--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<div id="demo"></div>
JS
function myFunction() {
if (document.getElementById("mySelect1").value > 0 && document.getElementById("mySelect2").value > 0) {
document.getElementById("demo").style.display = "block";
} else document.getElementById("demo").style.display = "none";
}

Getting values as number from html dropdown menu with Javascript

I tried to show an alert box which content will change everytime the user pick different selection on the dropdown list.
There are two dropdown list here, but the "product" dropdown list is pointed to the same array
As you can see that I've tried to make the js but it still does not work
What I want to ask is:
How do we get values from dropdown menu?
And how do we get the values from a dropdown list as an integer, not string?
*sorry for the broken english
Here's the javascript
<script language="javascript">
function RadioCheck() {
var number = new Array('0', '20', '30', '40', '50', '60');
var selection1 = document.quiz.product1;
var selection2 = document.quiz.product2;
var amountselection1 = parseInt(document.quiz.amount1,10);
var amountselection2 = parseInt(document.quiz.amount2,10);
for (i=0; i<selection1.length; i++) {
if (selection1[i].checked == true) {
result1=number[i]*amountselection1;
}
}
for (i=0; i<selection2.length; i++) {
if (selection2[i].checked == true) {
result2=number[i]*amountselection2;
}
}
var result = (result1 + 'is the first result, and' + result2 + 'is the second result');
alert(result);
return false;
}
</script>
Here is the HTML
<form name="quiz">
<select id="product1">
<option name="product1" value="0" selected="selected"> </option>
<option name="product1" value="1">Product 1</option>
<option name="product1" value="2">Product 2</option>
<option name="product1" value="3">Product 3</option>
<option name="product1" value="4">Product 4</option>
<option name="product1" value="5">Product 5</option>
</select>
<select id="amount1">
<option name="amount1" value="0" selected="selected">0</option>
<option name="amount1" value="1">1</option>
<option name="amount1" value="2">2</option>
<option name="amount1" value="3">3</option>
<option name="amount1" value="4">4</option>
<option name="amount1" value="5">5</option>
</select>
<select id="product2">
<option name="product2" value="0" selected="selected"> </option>
<option name="product2" value="1">Product 1</option>
<option name="product2" value="2">Product 2</option>
<option name="product2" value="3">Product 3</option>
<option name="product2" value="4">Product 4</option>
<option name="product2" value="5">Product 5</option>
</select>
<select id="amount2">
<option name="amount2" value="0" selected="selected">0</option>
<option name="amount2" value="1">1</option>
<option name="amount2" value="2">2</option>
<option name="amount2" value="3">3</option>
<option name="amount2" value="4">4</option>
<option name="amount2" value="5">5</option>
</select>
<input type="submit" value="Check Answer" onClick="RadioCheck(); return false;">
</form>
Problem is you haven't declared variables result1 & result2. Also to get amount selected use document.quiz.amount1.value instead of just document.quiz.amount1, so on for amount2. Again to compare dropdown selection use selection1[i].selected instead of selection1[i].checked.
Try this code:
function RadioCheck() {
var number = new Array(0, 20, 30, 40, 50, 60); //quotes will work but not recommended for numbers
var selection1 = document.quiz.product1;
var selection2 = document.quiz.product2;
var amountselection1 = parseInt(document.quiz.amount1.value, 10); //changed
var amountselection2 = parseInt(document.quiz.amount2.value, 10); //changed
var result1 = 0, result2 = 0; //added line
for (i = 0; i < selection1.length; i++) {
if (selection1[i].selected) { //changed
result1 = number[i] * amountselection1;
}
}
for (i = 0; i < selection2.length; i++) {
if (selection2[i].selected) { //changed
result2 = number[i] * amountselection2;
}
}
var result = (result1 + 'is the first result, and ' + result2 + 'is the second result');
alert(result);
return false;
}
<form name="quiz">
<select id="product1">
<option name="product1" value="0" selected="selected"></option>
<option name="product1" value="1">Product 1</option>
<option name="product1" value="2">Product 2</option>
<option name="product1" value="3">Product 3</option>
<option name="product1" value="4">Product 4</option>
<option name="product1" value="5">Product 5</option>
</select>
<select id="amount1">
<option name="amount1" value="0" selected="selected">0</option>
<option name="amount1" value="1">1</option>
<option name="amount1" value="2">2</option>
<option name="amount1" value="3">3</option>
<option name="amount1" value="4">4</option>
<option name="amount1" value="5">5</option>
</select>
<select id="product2">
<option name="product2" value="0" selected="selected"></option>
<option name="product2" value="1">Product 1</option>
<option name="product2" value="2">Product 2</option>
<option name="product2" value="3">Product 3</option>
<option name="product2" value="4">Product 4</option>
<option name="product2" value="5">Product 5</option>
</select>
<select id="amount2">
<option name="amount2" value="0" selected="selected">0</option>
<option name="amount2" value="1">1</option>
<option name="amount2" value="2">2</option>
<option name="amount2" value="3">3</option>
<option name="amount2" value="4">4</option>
<option name="amount2" value="5">5</option>
</select>
<input type="submit" value="Check Answer" onClick="RadioCheck(); return false;">
</form>
Looks like this was already answered: Get selected value in dropdown list using JavaScript?
As for the integer values instead of strings, why not just convert? parseInt($stringVal);

Change Textbox value when an item is selected in drop down box

I'm trying to change the value of a text box with the the item I select from a drop down box. But it's not working.
I tried this HTML:
<select name="ncontacts" id="contacts" onchange="ChooseContact(this);">
</select>
and this JS:
function ChooseContact(data)
{
alert(data);
document.getElementById("friendName").value = data;
}
But the text box val is not updated.
This is because this (the argument to ChooseContact) refers to the select element itself, and not its value. You need to set the value of the friendName element to the value of the select element:
document.getElementById("friendName").value = data.value; //data is the element
Here's a working example.
I suggest you very simple method
$('#quantity').change(function(){
var qty = $('#quantity').val();
$("#totalprice").val(qty);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></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="1"/>
</div>

Categories