I am trying to get text and selected value from checked radio button and put it into variable. Trying to get something like "Is published" or if is other radio checked to be like "Is not In Review". This needs to be plain javascript - no jquery or any other framework.
<form>
<div class="filter-option">
<input type="radio" id="status" name="status" checked="checked"/>
<label for="status">Is</label>
<div class="searchFilter">
<select class="selectpicker" title="" data-size="false" multiple
data-live-search="true">
<option value="all">All</option>
<option value="published">Published</option>
<option value="draft">Draft</option>
<option value="in-review">In Review</option>
<option value="deleted">Deleted</option>
</select>
</div>
</div>
<div class="filter-option">
<input type="radio" id="is_not" name="status"/>
<label for="is_not">Is not</label>
<div class="searchFilter">
<select class="selectpicker" title="" data-size="false" multiple data-
live-search="true">
<option value="all">All</option>
<option value="published">Published</option>
<option value="draft">Draft</option>
<option value="in-review">In Review</option>
<option value="deleted">Deleted</option>
</select>
</div>
</div>
<div class="filter-option">
<input type="radio" id="contain" name="author"/>
<label for="contain">Contain</label>
<div class="searchFilter">
<input type="text" class="simpleSearch">
</div>
</div>
</form>
You give the select element an id, then use document.getElementById(id).value.
This should return the value of the selected option, which you can then use any way you want.
Using .text instead gives you the text shown to the user in the list (in this example they are the same).
Related
I have a select which contains options, I want to be able to resent each of the select to its first value onclick
$('.reset').on('click', function() {
$('food option:first').prop('selected', true);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<select class="food">
<option value="" selected disabled>Select Food</option>
<option value="rice">Rice</option>
<option value="garri">Garri</option>
</select>
<input type="text" class="showfood">
<button class="reset">Reset Select</button>
</div>
<div class="box">
<select class="food">
<option value="" selected disabled>Select Food</option>
<option value="beans">Beans</option>
<option value="pear">pear</option>
</select>
<input type="text" class="showfood">
<button class="reset">Reset Select</button>
</div>
However, what this does is reset only the first select.
Your logic to reset is correct. The issue you have is that you need to find only the option related to the select within the same container as the clicked button. To achieve that you can use closest() and find(), like this:
$('.reset').on('click', function() {
$(this).closest('.box').find('.food option:first').prop('selected', true);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<select class="food">
<option value="" selected disabled>Select Food</option>
<option value="rice">Rice</option>
<option value="garri">Garri</option>
</select>
<input type="text" class="showfood">
<button class="reset">Reset Select</button>
</div>
<div class="box">
<select class="food">
<option value="" selected disabled>Select Food</option>
<option value="beans">Beans</option>
<option value="pear">pear</option>
</select>
<input type="text" class="showfood">
<button class="reset" type="button">Reset Select</button>
</div>
I have a question on how to use javascript to calculate a form, but I can't seem to get it. Sorry if it's obvious but I'm new to scripting. Okay, so I have a form in html where you can select different options:
if (((document.getElementById("age").value = "15")||(document.getElementById("gender").value = "male")||(document.getElementById("psy").value = "sedentary")))
{
return("2200cal");
}
<div class="container">
<div class="row">
<label for="age">Age</label>
<input type="text" id="age" name="age" placeholder="Enter age">
<div class="row">
<label for="gender">Gender</label>
<select id="gender" name="gender">
<option value="" disabled selected hidden>Select gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
</div>
<div class="row">
<label for="fname">Physical Activity</label>
<select id="psy" name="psy">
<option value="" disabled selected hidden>Select activity level</option>
<option value="sedentary">SEDENTARY</option>
<option value="mod">MOD. ACTIVE</option>
<option value="active">ACTIVE</option>
</select>
<input type="submit" value="Submit" onclick="if">
</div>
and using it I wanted to use javascript to output a number based on this chart:
output chart
I tried using an equation to output a value by using if and then statements but it doesn't work, especially when it needs to find the result from all three variables together in the code.
Edit: fixed values but still not outputting anything.
I have 2 dropdown, What I need is when a user select an option from the 2 dropdown. When a user clicks the button GO, it will display it selected option respectively
I want it to be like this, I'm only using label for better understanding
<label for="bl" class="control-label col-xs-3"><p class="left">Branch:</p></label><p>Branch A</p>
<label for="bl" class="control-label col-xs-3"><p class="left">Category:</p></label><p>Stock</p>
my brand dropdown is actually php.
Well here's my dropdown
<div class="col-xs-8">
<div class="req">
<select name="bid" class="form-control">
<option value="" default style="color:gray;">Branch</option>
<option value="brancha">Branch A</option>
<option value="branchb">Branch B</option>
<option value="branchc">Branch C</option>
</select>
</div>
</div>
<div class="col-xs-8">
<div class="req">
<select name="brcat" class="form-control">
<option value="" default style="color:gray;">Category</option>
<option value="Stock">Stock</option>
<option value="Sales">Sales</option>
<option value="Stock Transfer">Stock Transfer</option>
</select>
</div>
</div>
<button type="submit" class="btn btn-default bt" style="align:right;">Go</button>
You can use jQuery Selectors to search and match the elements in a document. For example, you can get the value of an element by using ID Selectors when you add an id to it:
$('#go_btn').on('click', function(){
var branch = $('#branch_opt option:selected').val();
var category = $('#category_opt option:selected').val();
$('#branch_div').html('Branch : '+branch);
$('#category_div').html('Category : '+category);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="branch_opt">
<option value="">Branch</option>
<option value="brancha">Branch A</option>
<option value="branchb">Branch B</option>
<option value="branchc">Branch C</option>
</select>
<select id="category_opt">
<option value="">Category</option>
<option value="Stock">Stock</option>
<option value="Sales">Sales</option>
<option value="Stock Transfer">Stock Transfer</option>
</select>
<input type="button" id="go_btn" value="Go">
<div id="branch_div"></div>
<div id="category_div"></div>
I am having a hard time determining what it is your trying to accomplish. If I am understanding your question, you want to have a particular option on your drop down selected?
<option value="" selected="yes" style="color:gray;">Category</option>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I am new in javascript. I hope someone could help me with my question. I wanted my form to display another drop down once the first drop down is selected. The second drop down depends on which option is selected in the first drop down. Thanks!
<body>
<div class="control-group">
<label class="control-label" for="input01">Select</label>
<div class="controls">
<select name="client_orderid" id="options" onchange="showText()">
<option value="A"> A</option>
<option value="B"> B</option>
<option value="C"> C</option>
</select> <br>
<div class="control-group" id="showA" style="display:none;">
<select name="client_orderid" id="options" onchange="showText()">
<option value="blue"> blue</option>
<option value="green"> green</option>
<option value="yellow"> yellow</option>
</select>
</div>
<div class="control-group" id="showB" style="display:none;">
<select name="client_orderid" id="options" onchange="showText()">
<option value="sun"> sun</option>
<option value="sky"> sky</option>
<option value="tree"> tree</option>
</select>
</div>
<div class="control-group" id="showC" style="display:none;">
<select name="client_orderid" id="options" onchange="showText()">
<option value="dog"> dog</option>
<option value="cat"> cat</option>
<option value="fish"> fish</option>
</select>
</div>
</div>
</div>
Initially , display only 1st Dropdown hide others.
So on change of 1st show 2nd like
$("#1stDropdown").change(function(){
$("#2nsDropdown").show();
});
and so on
Some points to correct-
1-Put second dropdown hidden by default and display it on change of 1st dropdown.
2-Also call different function onchange of different select.
3-Id of all elements should be unique. If you want it to be same, use class instead
<div class="control-group">
<label class="control-label" for="input01">Select</label>
<div class="controls">
<select name="client_orderid" id="options1" onchange="showTexColor()">
<option value="A"> A</option>
<option value="B"> B</option>
<option value="C"> C</option>
</select> <br>
<div class="control-group" id="showA" style="display:none;">
<select name="client_orderid" id="options2" onchange="showTextNature()">
<option value="blue"> blue</option>
<option value="green"> green</option>
<option value="yellow"> yellow</option>
</select>
</div>
<div class="control-group" id="showB" style="display:none;">
<select name="client_orderid" id="options3" onchange="showTextAnimal()">
<option value="sun"> sun</option>
<option value="sky"> sky</option>
<option value="tree"> tree</option>
</select>
</div>
<div class="control-group" id="showC" style="display:none;">
<select name="client_orderid" id="options4" onchange="showText()">
<option value="dog"> dog</option>
<option value="cat"> cat</option>
<option value="fish"> fish</option>
</select>
</div>
</div>
</div>
Demo: http://jsfiddle.net/fqzturn4/
Firstly, pass the value selected to the function:
<select name="client_orderid" id="options" onchange="showText(this.value)">
Then, in the function, show or hide the appropriate div based on the value matching the element ID (I presume "A" should match "showA" and so on):
function showText(value) {
var elements = document.querySelectorAll('.controls .control-group');
var re = new RegExp( value + '$');
for (var i=0, iLen=elements.length; i<iLen; i++) {
elements[i].style.display = re.test(elements[i].id)? '' : 'none';
}
}
showText should only be used on the first select, not the others unless there is some logic that you haven't explained.
I'm wondering how I can chain an input box after chaining a selection in my form.
I'm using http://www.appelsiini.net/projects/chained to chain my selects and it works. However, I need to adjust this to also allow for the chaining of an input. In the below example it would be someone would choose an option such has an item has Strength on it then the select menu of value options then input the value. I'm trying to also incorporate into this where after those 3 options of item, controller, value are inputed the user has the option to filter more so another box appear with the same options of strength, agility, etc. http://jsfiddle.net/isherwood/XMx4Q/ is an example of work I used to incorporate this into my own work.
<form id="myform" name="myform" method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
<div>
<label for="searchterm">Name:</label>
<input type="text" name="searchterm">
</div>
<div>
<div class="chainedSelectFilter">
<select name="specificFilter" class="attribute">
<option value="" selected>Select a Filter</option>
<option value="strength">Has Strength</option>
<option value="agility">Has Agility</option>
<option value="spirit">Has Spirit</option>
<option value="stamina">Has Stamina</option>
</select>
<select name="specificFilter" class="valueController">
<option value=">" selected>></option>
<option value=">=">>=</option>
<option value="=">=</option>
<option value="<="><=</option>
<option value="<"><</option>
</select>
</div>
</div>
</div>
<div>
<label for="submit"></label>
<input type="submit" name="submit" value="Filter">
</div>
Code reference below shows how to accomplish this. Here is jsFiddle that shows it's working.
HTML
<form id="myform">
<div class="container">
<select>
<option value=""></option>
<option value="one">one</option>
<option value="two">two</option>
</select>
<input type="text" class="chain" value="" placeholder="Type here"/>
</div>
<div class="container">
<select>
<option value=""></option>
<option value="one">one</option>
<option value="two">two</option>
</select>
<input type="text" class="chain" value="" placeholder="type here"/>
</div>
<div class="container">
<select>
<option value=""></option>
<option value="one">one</option>
<option value="two">two</option>
</select>
<input type="text" class="chain" value=""/>
</div>
</form>
JS
$('select').change(function () {
$(this).next('input').fadeIn();
});
$('body').on('keyup','input.chain',function () {
$(this).parent().next('div').fadeIn();
});