Change function on Select - javascript

Continue from change 3 dropdown values through javascript, Just need to show the
function changeprice1(id){
On select of second dropdown i.e. Medical and Biomedical Manuscript Rewriting. What to do now, i am getting out of thinking now. Any Help in jS ?
<script type="text/javascript">
function changeprice(id){
var value = id;
if(value == ""){
document.getElementById('price').value="";
alert("Please select one valid word count");
return false;
}
if(value == "Lessthan1000"){
var newprice = "USD 290";
}
if(value == "Lessthan2000"){
var newprice = "USD 540";
}
if(value == "Lessthan4000"){
var newprice = "USD 1050";
}
if(value == "Lessthan6000"){
var newprice = "USD 1900";
}
var eprice = newprice;
document.getElementById('price').value = eprice;
}
function changeprice1(id){
var value = id;
if(value == ""){
document.getElementById('price').value="";
alert("Please select one valid word count");
return false;
}
if(value == "ReLessthan1000"){
var newprice = "USD 390";
}
if(value == "ReLessthan2000"){
var newprice = "USD 690";
}
if(value == "ReLessthan4000"){
var newprice = "USD 1600";
}
if(value == "ReLessthan6000"){
var newprice = "USD 2900";
}
var eprice = newprice;
document.getElementById('price').value = eprice;
}</script>
Here is the first dropdown
<select name="sp" id="sp" class="servicecategory">
<option value="" selected>Please Select...</option>
<option value="Medical and Biomedical Manuscript Writing" <?php if($servicename == "Medical and Biomedical Manuscript Writing"){ echo(" selected=\"selected\""); } ?>>Medical and Biomedical Manuscript Writing </option>
<option value="Medical and Biomedical Manuscript Rewriting" <?php if($servicename == "Medical and Biomedical Manuscript Rewriting"){ echo(" selected=\"selected\""); } ?>>Medical and Biomedical Manuscript Rewriting</option>
</select>
Here is the Second Dropdown ---
<select name="sp" id="sp" class="servicecategory" onChange="changeprice(this.value)">
<option value="" selected>Please Select...</option>
<option value="Lessthan1000">1 - 1000 words</option>
<option value="Lessthan2000">1001 - 2000 words</option>
<option value="Lessthan4000">2001 - 4000 words</option>
<option value="Lessthan6000">4001 - 6000 words</option>
</select>
This is the price area where the price is showing atlast
<tr>
<td valign="top" align="right">Price:</td>
<td width="5"></td>
<td valign="top" align="left"><input type="text" name="price" id="price" value="" readonly="" size="20"><br />
</td>
</tr>

Try this
<script type="text/javascript">
function changeprice(id)
{
var value = id;
selectedmenu=document.getElementById("sp").value
if(selectedmenu == "select"){
alert("Please select one valid word count");
fnc();
return false;
}
if(selectedmenu=='Medical and Biomedical Manuscript Writing')
if(value == "Lessthan1000"){
var newprice = "USD 290";
}
if(value == "Lessthan2000"){
var newprice = "USD 540";
}
if(value == "Lessthan4000"){
var newprice = "USD 1050";
}
if(value == "Lessthan6000"){
var newprice = "USD 1900";
}
var eprice = newprice;
document.getElementById('price').value = eprice;
if(selectedmenu=='Medical and Biomedical Manuscript Rewriting')
{
if(value == "Lessthan1000"){
var newprice = "USD 390";
}
if(value == "Lessthan2000"){
var newprice = "USD 690";
}
if(value == "Lessthan4000"){
var newprice = "USD 1600";
}
if(value == "Lessthan6000"){
var newprice = "USD 2900";
}
var eprice = newprice;
document.getElementById('price').value = eprice;
}
}
function fnc()
{
document.getElementById("select").selected=true;
}
</script>
<select name="sp" id="sp" class="servicecategory" onchange="fnc()">
<option value="select" selected>Please Select...</option>
<option value="Medical and Biomedical Manuscript Writing" >Medical and Biomedical Manuscript Writing</option>
<option value="Medical and Biomedical Manuscript Rewriting" >Medical and Biomedical Manuscript Rewriting</option>
</select>
<select name="Word_Count" id="Word_Count" onChange="changeprice(this.value)">
<option value="select" id="select">Please Select...</option>
<option value="Lessthan1000">1 - 1000 words</option>
<option value="Lessthan2000">1001 - 2000 words</option>
<option value="Lessthan4000">2001 - 4000 words</option>
<option value="Lessthan6000">4001 - 6000 words</option>
</select>
<tr>
<td valign="top" align="right">Price:</td>
<td width="5"></td>
<td valign="top" align="left"><input type="text" name="price" id="price" value="" readonly="" size="20"><br /></td>
</tr>

Related

Why doesn't my function detect a correct input selection?

I need to write a JavaScript function that will check if correct answer is chosen in list and then will print either answer is right or not.
I came up with this -
HTML code:
<select id="q1" style="background-color: #b0f1f1">
<option value="1">Saulkrasti Beach</option>
<option value="2">Jurmala Beach</option>
<option value="3">Ventspils Beach</option>
</select>
<p id="answer"></p>
Javascript code:
function rightchoice()
{
var e = document.getElementById("q1");
var value = e.options[e.selectedIndex].value;
if (value == 2) {
document.getElementById("answer").innerHTML = "Right Answer";
}
}
But it does not print anything.
you should add an event onChange where you will call your function
const selection = document.getElementById("q1");
selection.addEventListener("change", rightchoice);
You can add an eventListener to your select listen for a change.
I have added here an else part to reset the value to an empty string when the wrong choice was selected.
function rightchoice()
{
var e = document.getElementById("q1");
var value = e.options[e.selectedIndex].value;
if (value == 2) {
document.getElementById("answer").innerHTML = "Right Answer";
}else{
document.getElementById("answer").innerHTML = "";
}
}
const fom = document.getElementById("q1");
fom.addEventListener("change", rightchoice);
<select id="q1" style="background-color: #b0f1f1">
<option value="1">Saulkrasti Beach</option>
<option value="2">Jurmala Beach</option>
<option value="3">Ventspils Beach</option>
</select>
<p id="answer"></p>
function rightchoice() {
var e = document.getElementById("q1");
var value = e.value;
if (value == 2) {
document.getElementById("answer").innerHTML = "Right Answer";
}
else{
document.getElementById("answer").innerHTML = "Wrong Answer";
}
}
<select id="q1" style="background-color: #b0f1f1" onchange="rightchoice()">
<option value="1">Saulkrasti Beach</option>
<option value="2">Jurmala Beach</option>
<option value="3">Ventspils Beach</option>
</select>
<p id="answer">This is answer</p>
document.getElementById('q1').addEventListener('change', function() {
var newVal = this.value;
if (newVal == 2) {
document.getElementById('answer').innerText = "Right answer.";
} else {
document.getElementById('answer').innerText = "Wrong answer.";
}
});
<select id="q1" style="background-color: #b0f1f1">
<option value="1">Saulkrasti Beach</option>
<option value="2">Jurmala Beach</option>
<option value="3">Ventspils Beach</option>
</select>
<p id="answer"></p>

How to select a selectbox an option value with JS?

This may sound easy but I'm been having a heck of a time to get this to work. Somebody please help. My select box is like below. How do i select the value 3 from the list?
if(!empty($listeDoc))
{
$iGroups = 0;
while($iGroups < count($listeDoc))
{
?>
<tr>
<td>
<input type="checkbox" name="productSelect[<?php echo $listeDoc[$iGroups]->DOC_CLIENT_ID ?>]['product_id']" id="productSelectCreation_<?php echo $listeDoc[$iGroups]->DOC_CLIENT_ID ?>" onchange="setValueToOne(this)" ><?php echo $listeDoc[$iGroups]->DOC_CLIENT_NOM; ?>
</td>
<td>
<select name="productSelect[<?php echo $listeDoc[$iGroups]->DOC_CLIENT_ID ?>]['quantity']" id="productQty_<?php echo $listeDoc[$iGroups]->DOC_CLIENT_ID ?>" class="form-control1" value="<?php echo $qty; ?>" style="width:100%; height:25px; border : #62270c solid 1px;" tabindex="1">
<option value=""/></option>
<option value="1"<?php if ($qty == 1) echo 'selected="selected"'; ?>>1</option>
<option value="2"<?php if ($qty == 2) echo 'selected="selected"'; ?>>2</option>
<option value="3"<?php if ($qty == 3) echo 'selected="selected"'; ?>>3</option>
<option value="4"<?php if ($qty == 4) echo 'selected="selected"'; ?>>4</option>
<option value="5"<?php if ($qty == 5) echo 'selected="selected"'; ?>>5</option>
</select>
<td>
</tr>
<?php
$iGroups++;
}
}
here's is what i tried:
function setValueToOne(value)
{
checkbox = document.getElementById('productSelectCreation');
if (checkbox.checked == true)
{
document.getElementById("productQtyCreation").value = 1;
}
else
document.getElementById("productQtyCreation").value = '0';
}
If I understand correctly you want to change the select box selected option using vanilla javascript. You will need to loop the selectbox and compare values.
document.getElementById('productSelectCreation').onclick = function() {
var val;
var checkbox = document.getElementById('productSelectCreation');
var sel = document.getElementById('productQtyCreation');
if (checkbox.checked)
{
val = "3";
}
else
val = "0";
}
var opts = sel.options;
for (var opt, j = 0; opt = opts[j]; j++) {
if (opt.value == val) {
sel.selectedIndex = j;
break;
}
}
}
It seems you are looking something like this.
function setValueToOne(chkbox)
{
if (chkbox.checked) {
alert("checked");
alert(chkbox.value);
document.getElementById("productQtyCreation").value = chkbox.value;
} else {
alert("Unchecked");
document.getElementById("productQtyCreation").value = 0
}
}
<select name="productSelect" id="productQtyCreation" class="form-control1">
<option value=""/></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>
<input type="checkbox" name="productSelect" id="productSelectCreation" onClick="setValueToOne(this)" value="3" />Test
function setValueToOne(checkbox) {
if(checkbox.checked) {
document.getElementById('productQtyCreation').value = 3
}else{
document.getElementById('productQtyCreation').value = 0
}
}
<select id="productQtyCreation">
<option disabled selected value=""></option>
<option value="0">Zero</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<input type="checkbox" name="productSelect" id="productSelectCreation" onClick="setValueToOne(this)" value="3" />

Multiple Select Unselect And Disabled

I Have 2 Multiple Select Field On My Code
I Want Make If All Selected Then Other Option Will Be Unselect And Disabled And Similarly If Other Any Field Selected Then All Option Will Unselect And Disabled
My Code Is
<select multiple name="device[]" id="device" class="form-control" >
<option value=\'ALL\' selected="selected">ALL</option>
<option value=\'Android\'>Android</option>
<option value=\'iPod\'>iPod</option>
<option value=\'iPad\'>iPad</option>
<option value=\'Java\'>Java</option>
<option value=\'Windows\'>Windows</option>
<option value=\'Linux\'>Linux</option>
<option value=\'Mac\'>Mac</option>
</select>
And
<select multiple name="country[]" id="device" class="form-control" >
<option value=\'ALL\' selected="selected">ALL</option>
<option value=\'BD\'>Bangladesh</option>
<option value=\'IN\'>India</option>
<option value=\'ID\'>Indonesia</option>
<option value=\'NG\'>Naigeria</option>
<option value=\'PK\'>Pakistan</option>
</select>
By disabling an element you say i'll not use this element, I refuse to use this elemen, so disabled elements can not get Mouse Events, so disabling is wrong way.
Instead make it visually disabled.
Here is pure JS code, because i am not like jquery ;)
<style>
select {
height:300px;
width:150px;
}
</style>
<body>
<select multiple name="device[]" id="device" class="form-control" onChange="Go()" >
<option value=\'ALL\' selected="selected">ALL</option>
<option value=\'Android\'>Android</option>
<option value=\'iPod\'>iPod</option>
<option value=\'iPad\'>iPad</option>
<option value=\'Java\'>Java</option>
<option value=\'Windows\'>Windows</option>
<option value=\'Linux\'>Linux</option>
<option value=\'Mac\'>Mac</option>
</select>
<select multiple name="country[]" id="device" class="form-control" onChange="Go()" >
<option value=\'ALL\' selected="selected">ALL</option>
<option value=\'BD\'>Bangladesh</option>
<option value=\'IN\'>India</option>
<option value=\'ID\'>Indonesia</option>
<option value=\'NG\'>Naigeria</option>
<option value=\'PK\'>Pakistan</option>
</select>
<script>
function Go(){
parentElements = document.getElementsByTagName("select");
for(var i = 0; i < parentElements.length; i++){
parentElement = parentElements[i]
children = parentElement.childNodes;
for(var j = 0; j < children.length; j++){
childNode = children[j];
if(childNode.nodeName == "OPTION" || childNode.nodeName == "option"){
if(childNode.value == "\\'ALL\\'" && childNode.selected == true){
for(var k = 0; k < children.length; k++){
if(typeof(children[k].value) !== "undefined" && k != j){
children[k].style.color = "#ccc";
children[k].style.textDecorationLine = "line-through";
children[k].selected = false;
}
if(typeof(children[k].value) !== "undefined" && k == j){
children[k].style.color = "";
children[k].style.textDecorationLine = "";
}
}
}
if(childNode.value != "\\'ALL\\'" && childNode.selected == true){
for(var k = 0; k < children.length; k++){
if(typeof(children[k].value) !== "undefined" && children[k].value == "\\'ALL\\'"){
children[k].style.color = "#ccc";
children[k].style.textDecorationLine = "line-through";
children[k].selected = false;
}
if(typeof(children[k].value) !== "undefined" && children[k].value != "\\'ALL\\'"){
children[k].style.color = "";
children[k].style.textDecorationLine = "";
}
}
}
}
}
}
}
</script>
</body>
EDIT:
How about adding an extra button to reset the menus ?
Please check this fiddle
OLD:
If you are not holding ctrl key then other options will be deselected automatically
$(document).ready(function() {
$('#device, #country').on('change', function() {
var selectedVal = $(this).val();
for (var i = 0; i < selectedVal.length; i++) {
if (selectedVal[i] === 'ALL') {
// $("#device > option").attr('disabled','disabled');
$(this).find('option').attr('disabled', 'disabled');
$(this).find('option[value=ALL]').removeAttr('disabled');
} else {
$(this).find('option[value=ALL]').attr('disabled', 'disabled');
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select multiple name="device[]" id="device" class="form-control">
<option value='ALL'>ALL</option>
<option value='Android'>Android</option>
<option value='iPod'>iPod</option>
<option value='iPad'>iPad</option>
<option value='Java'>Java</option>
<option value='Windows'>Windows</option>
<option value='Linux'>Linux</option>
<option value='Mac'>Mac</option>
</select>
<select multiple name="country[]" id="country" class="form-control">
<option value='ALL'>ALL</option>
<option value='BD'>Bangladesh</option>
<option value='IN'>India</option>
<option value='ID'>Indonesia</option>
<option value='NG'>Naigeria</option>
<option value='PK'>Pakistan</option>
</select>
$('#device option').click(function(){
var Allselected = $('#device :selected').text();
var AllselectedCountry = $('#country :selected').text();
if(Allselected =="ALL"){
$('#device option:not(:selected)').addClass('ashClass');
}
else if (Allselected !="ALL"){
$('#device option:first-child').css('color', '#ccc');
$('#device option:not(:selected)').removeClass('ashClass');
}
});
$('#country option').click(function(){
var AllselectedCountry = $('#country :selected').text();
if(AllselectedCountry =="ALL"){
$('#country option:not(:selected)').addClass('ashClass');
}
else if (AllselectedCountry !="ALL"){
$('#country option:first-child').css('color', '#ccc');
$('#country option:not(:selected)').removeClass('ashClass');
}
});
.ashClass {
color: #ccc;
}
.blackClass {
color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<select multiple name="device[]" id="device" class="form-control" >
<option value=\'ALL\' >ALL</option><option value=\'Android\'>Android</option><option value=\'iPod\'>iPod</option><option value=\'iPad\'>iPad</option><option value=\'Java\'>Java</option><option value=\'Windows\'>Windows</option><option value=\'Linux\'>Linux</option><option value=\'Mac\'>Mac</option> </select>
<select multiple name="country[]" id="country" class="form-control" >
<option value=\'ALL\' >ALL</option><option value=\'BD\'>Bangladesh</option><option value=\'IN\'>India</option><option value=\'ID\'>Indonesia</option><option value=\'NG\'>Naigeria</option><option
value=\'PK\'>Pakistan</option></select>
Updated the codes,Hope this one resolves your problem.
Is this what you are asking?

Get value of input inside an input

I have this form with the following options:
<select name="choices" id="options" onchange="showText()">
<option value="">Select amount</option>
<option value="1">100PHP</option>
<option value="2"> 500PHP</option>
<option value="3"> 1000PHP</option>
<option value="4"> 2000PHP</option>
<option value="5"> 3000PHP</option>
<option value="6"> 4000PHP</option>
<option value="7"> 5000PHP</option>
<option value="8"> 10,000PHP</option>
<option value="others"> others..</option>
</select>
<div class="control-group" id="show" style="display:none;">
When the user selects option 1-8, it will display the amount. I've successfully done that through this javascript:
function showText(){
var value = document.getElementById('options').value;
if(value == '1'){
var amount = document.getElementById("amount");
amount.value = "100";
document.getElementById('show').innerHTML =
"<br><br><font size =+1><b>Amount P 100 </b></font>"
document.getElementById('show').style.display = "block";
}
else if(value == '2'){
var amount = document.getElementById("amount");
amount.value = "500";
document.getElementById('show').innerHTML = "<br><br><font size =+1><b>Amount P 500 </b></font>"
document.getElementById('show').style.display = "block";
}
//up to option 8
Now, when the user selects 'others' it will display another input field. The value that the user will input will be the value option 'others':
else if (value == 'others'){
document.getElementById('show').innerHTML = "<br><div class='control-group'><label class='control-label'>Enter Amount</label><div class='controls'><input type='text' id='other_amount' name='other_amount'> ";
var amount = document.getElementById("other_amount").value;
document.getElementById('show').style.display = "block";
}
Unluckily, I was not successful in getting the value of the second input to be the value of the first input. I hope you could help! Thank you!
First of all, you can improve your code quite a lot:
function showText(){
var value = document.getElementById('options').value;
if(value == '-1'){
//Other
document.getElementById('hidden').style.display = 'block';
}
else {
document.getElementById('hidden').style.display = 'none';
var amount = document.getElementById("amount");
amount.value = value;
document.getElementById('show').innerHTML = "<br><br><font size =+1><b>Amount P " + value + "</b></font>"
document.getElementById('show').style.display = "block";
}
}
Where you change your html to:
<select name="choices" id="options" onchange="showText()">
<option value="">Select amount</option>
<option value="100">100PHP</option>
<option value="500">500PHP</option>
<option value="1000">1000PHP</option>
<!-- (...) -->
<option value="-1"> others..</option>
</select>
I'd also suggest adding the "hidden" input for when they choose others already in your html, but set it invisible:
<div id="hidden" style="display:none;"class='control-group'>
<label class='control-label'>Enter Amount</label><div class='controls'>
<input type='text' id='other_amount' name='other_amount' onChange='otherText()'/>
</div>
</div>
Now, when they select others.. with value -1 you want to show an input where they can choose their own value:
if (value == -1) {
document.getElementById('hidden').style.display = 'block';
}
Now we just need the function otherText() which shouldn't be a problem:
function otherText() {
document.getElementById('amount').value = document.getElementById("other_amount").value;
}
Working jsFiddle

onChange event on two select option

is it possible to change the limit the value of the dropdown2 when the dropdown1 changes?
here is my code
<!--DROPDOWN 1-->
<p class="">From</p>
<select name="From" id="From" onChange="displayVal(this)">
<option value="any">Any</option>
<option value="none">None</option>
<option value="10000">£10,000</option>
<option value="20000">£20,000</option>
<option value="30000">£30,000</option>
<option value="40000">£40,000</option>
<option value="50000">£50,000</option>
<option value="60000">£60,000</option>
<option value="70000">£70,000</option>
<option value="80000">£80,000</option>
<option value="90000">£90,000</option>
<option value="100000">£100,000</option>
<option value="110000">£110,000</option>
<option value="120000">£120,000</option>
<option value="130000">£130,000</option>
<option value="140000">£140,000</option>
<option value="150000">£150,000</option>
<option value="150001">£150,000+</option>
</select>
<!--DROPDOWN 2-->
<p class="">To</p>
<select name="To" id="To">
<option value="any">Any</option>
<option value="none">None</option>
<option value="10000">£10,000</option>
<option value="20000">£20,000</option>
<option value="30000">£30,000</option>
<option value="40000">£40,000</option>
<option value="50000">£50,000</option>
<option value="60000">£60,000</option>
<option value="70000">£70,000</option>
<option value="80000">£80,000</option>
<option value="90000">£90,000</option>
<option value="100000">£100,000</option>
<option value="110000">£110,000</option>
<option value="120000">£120,000</option>
<option value="130000">£130,000</option>
<option value="140000">£140,000</option>
<option value="150000">£150,000</option>
<option value="150001">£150,000+</option>
</select>
I want is when I change dropdown1 to none the dropdown2 option will only show none and no other more.
And I also want is if I change the value of dropdown1 to an amount, for example 30000, dropdown2 will show only the values that are greater that 30000 including the option any.
Is there a way to do this in javascript or jQuery?
sorry. I'm new at javascript and jQuery.. Thank you in advance!
Demo: http://jsfiddle.net/LsaLA/1/
Code:
function setTo() {
var f = $('#From').val();
var t = $('#To');
t.children().hide();
if( f == 'none' ) {
t.children('[value="none"]').show();
t.val('none');
}
else if( t == 'any' ) {
t.children().show();
t.val('any');
}
else {
f = parseInt(f, 10);
t.children().each(function() {
if( $(this).val() == 'any' ) {
$(this).show();
t.val('any');
}
else {
var v = parseInt($(this).val(), 10);
if(!isNaN(v) && v >= f) {
$(this).show();
}
}
});
t.val('any');
}
}
$('#From').change(setTo);
//call it on load as well
setTo();
try this: http://jsfiddle.net/F6xnL/4/
$("#From").change(function() {
$("#To").attr("disabled", false).children().each(function() {
$(this).attr('disabled', false);
});
if ($(this).val() === 'any') return;
if ($(this).val() === 'none') {
$("#To").val("none").attr("disabled", true);
return;
}
var pound = parseInt($(this).val());
$("#To").children().each(function() {
var val = $(this).val();
if (val === 'none' || val === 'any') {
$(this).attr('disabled', true); return;
}
if (parseInt($(this).val()) <= pound) {
$(this).attr('disabled', true);
}
});
});​
$('#From').change(function(){
if($(this).val() == 'none'){
$('#To').prop('disabled', true);
}else if((true == $('#To').prop('disabled')) && ($(this).val() != 'none')){
$('#To').prop('disabled', false);
}
$('#To option').each(function(){
if($(this).val() < $('#From').val()){
$(this).hide(0);
}else{
if($(this).css('display') == 'none'){
$(this).show(0);
}
}
});
});
Untested, but this should work. I'm a bit verbose.

Categories

Resources