I got stuck with targeting the correct element and I hope you can help me.
So:
I have fields generated by PHP script:
<fieldset>
<div class="row">
<select>
<option value="A">A</option>
<option value="B">B</option>
</select>
<input type="text" />
</div>
<div class="row">
<select>
<option value="A">A</option>
<option value="B">B</option>
</select>
<input type="text" />
</div>
</fieldset>
And I need to initialize an auto complete plugin over each of textfield on focus, based on what is selected inside the select in the row, where is the textbox.
Because of templates of project, where I don't have access, I cannot edit the ID or classes of rows (like numbering the rows), so even this is a simplified solution, it is all like what I am working with.
So, once again, what I need to achieve:
$(input).focus(function(){
Ask_what_is_in_select_at_the_same_row()
Store_value_of_Selected_Option_to_Variable()
});
You can use it this way:
$('div.row :text').focus(function(){
// get the value of the select which is the sibling of focussed text input.
var optVal = $(this).siblings('select').find('option:selected').val();
// now you can use it.
});
DEMO
Related
I m trying to select an option in a list using document.getElementsByTagName('select')[1].value = 'oop1'
if it works but it didn't update the information related to the selection made
<div class="b">
<label class="page-text" for="symbol">Symbol:</label>
<select class="input-combobox" id="symbol">
<option value="oop1">oop1, Description of it</option>
<option value="oop2”>oop2, Description of it</option>
</select>
I would like that once the selection is made, the form updates the information related to the selection. If I choose manually I see the update, If I use this function, it selects the option but didn't update.
You have to use the [0] for getting the first element as there is only one select element. You code was wrong as many tags were incomplete and you were using wrong quotes
var e=document.getElementsByTagName('select')[0];
e.options[e.selectedIndex].textContent = 'updated value'
e.value='oop1';
<div class="b">
<label class="page-text" for="symbol" >
<select class="input-combobox" id="symbol">
<option value="oop1">oop1, Description of it</option>
<option value="oop2">oop2, Description of it</option>
</select>
I am new to coding and I am currently working on an assignment. I basically need to build a very basic webpage in which I can ask questions to users and then suggest a vacation destination using their answers.
I used a select dropdown box with options for the user. I am now on the js part and I cannot figure out how to get their input.
this is my code for one of the boxes:
<div class="container">
<h1>Let's find your ideal vacation getaway!</h1>
<div id="userinput">
<form>
<div class="form-group">
<label for="question1">1.What is your favorite cuisine?</label>
<select class="form-control">
<option></option>
<option>Mexican</option>
<option>Italian</option>
<option>Indian</option>
<option>Caribbean</option>
</select>
My question is, what function do I utilize to get their answers, thus allowing me to use branching to generate results. I am sorry if this is confusing, like I said, I am very new to this.
Thanks in advance!
You have to make some changes in both HTML and JS part. In HTML add value attribute and assign a value to each of the options. Also add an onchange event handler which will be fired on change of options from drop-down.
Assign an id to the select element. Use selectedIndex to get index of selected item
HTML
<select class="form-control" onChange="getSelected()" id="selDesc">
<option value="0"> Select a destination</option>
<option value="1">Mexican</option>
<option value="2">Italian</option>
<option value="3">Indian</option>
<option value="4">Caribbean</option>
</select>
JS
function getSelected(){
var getValue =document.getElementById("selDesc").selectedIndex;
alert(getValue);
}
JSFIDDLE
Make changes in Html Code means give the id on select tag
<div class="container">
<h1>Let's find your ideal vacation getaway!</h1>
<div id="userinput">
<form>
<div class="form-group">
<label for="question1">1.What is your favorite cuisine?</label>
<select class="form-control" id="country">
<option value="0" selected> --Select--</option>
<option value="1">Mexican</option>
<option value="2">Italian</option>
<option value="3">Indian</option>
<option value="4">Caribbean</option>
</select>
</div>
</form>
</div>
</div>
JS use Jquery
$("#country").change(function (e) {
alert($(this).val());
})
I have several dropdowns that are basically identical. I want it so that selecting one of the non-blank values will make the information div after appear and selecting the blank values will make the information div disappear. The information div should start out invisible. Here is the html:
<div class="form-group">
<select class="form-control time_range_dropdown">
<option value=""></option>
<option value="Morning">Morning</option>
<option value="Afternoon">Afternoon</option>
</select>
</div>
<div class="information" style="display: none;">
Some information goes here
</div>
<div class="form-group">
<select class="form-control time_range_dropdown">
<option value=""></option>
<option value="Morning">Morning</option>
<option value="Afternoon">Afternoon</option>
</select>
</div>
<div class="information" style="display: none;">
Different information goes here
</div>
<div class="form-group">
<select class="form-control time_range_dropdown">
<option value=""></option>
<option value="Morning">Morning</option>
<option value="Afternoon">Afternoon</option>
</select>
</div>
<div class="information" style="display: none;">
Even more different information goes here
</div>
Here is the jquery:
$('.time_range_dropdown').change(function(){
alert('dropdown is changing');
$(this).next(".information").show();
});
The alert is working so I know it's not a problem with .change. I can't figure out how to make the information div appear though. The code above is not working. The other problem is that this will cause any change of the dropdown to trigger the information div but I only want it triggered if the value changes from blank to non-blank or vice-versa. How do I do this.
You can use closest() to select the correct parent and then next() to select the respective information.
So, it would be:
$('.time_range_dropdown').change(function(){
var value = $(this).val();
if (value == '')
$(this).closest('.form-group').next(".information").hide();
else
$(this).closest('.form-group').next(".information").show();
});
Hope it helps!
Change:
$(this).next(".ride_information").show();
to:
$(this).parent().next(".information").toggle(this.value.length);
.next() selects the next sibling, however you need to traverse up the DOM (using .parent()) first.
jsFiddle example
I have three options in a dropdown in html.Now on selecting each one of the option in dropdown i want different input types to be created dynamically.
Firstly here are the options in dropdown :
<select name="choicetosearch">
<option value="None" style="display:none;">
---None---
</option>
<option value="searchName">
Notification Sender
</option>
<option value="searchType">
Notification Type
</option>
<option value="searchDate">
Notification Date
</option>
</select>
Now, on selecting Notification Sender I want a textbox to be displayed.
On selecting Notification Type I want that two checkboxes should be shown.
On selecting Notification Date I want two date type input fields to be shown.
How this can be done?Please help.
You really need to learn some javascript since you didn't even provide any attemts to solve this problem.
Anyway, you need to create the fields you want to show/hide depending on the select box in your html markup and hide them via css. Afterwards you have to use an on change js event on your selectbox and check for the selected option. you now can hide/show the boxes you need.
Check this Example
JS:
$('.search-select').on('change', function(){
$('.search-inputs').children().hide();
var classn =$(this).find(":selected").val();
$('.'+classn).show();
})
HTML:
<select class="search-select" name="choicetosearch">
<option value="None">
---None---
</option>
<option value="searchName">
Notification Sender
</option>
<option value="searchType">
Notification Type
</option>
<option value="searchDate">
Notification Date
</option>
</select>
<div class="search-inputs">
<input class="searchName" type="text"></input>
<input class="searchType" type="checkbox"></input>
<input class="searchDate" type="text"></input>
</div>
Please make sure you refactor the classnames and values since I made this quickly.
In onchange event of select create the elements dynamically using
var dynElem = document.createElement('input');
dynElem.type = 'text';
dynElem.value = 'welcome';
then append the dynElem to Div using Javascript or Jquery like appendChild(dynElem) in javascript or append(dynElem) in jquery
Use 'onchange' attribute of 'select' element to track change of elements in dropDown. To add an element, first generate it some thing like this -
var elem = '<b> hey</b>;
Then you can use 'append(elem)' function in jQuery or 'appendChild(elem)' in javascript.
I am not giving you the code so that you can try it, but if it still doesn't work, ping me, and I will share the code.
Here's a demo -
http://jsfiddle.net/RcfNL/2/
Adding to it, you can get the selected value of the drop down using this -
var city_name = $('#city option:selected').text();
Based on the value, you can perform the required action.
Please you can use this code snippet to your code block or test it first then use it.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
.searchName, .searchType, .searchDate{
display:none;
}
</style>
<script src="jquery-1.7.1.js"></script>
<script type="text/javascript">
function createElement123(val){
$('.search-inputs').children().hide();
$('.' + val).show();
}
</script>
</head>
<body>
<select class="search-select" name="choicetosearch" onchange="createElement123(this.value)">
<option value="None">---None---</option>
<option value="searchName">Notification Sender</option>
<option value="searchType">Notification Type</option>
<option value="searchDate">Notification Date</option>
</select>
<div class="search-inputs">
<input class="searchName" type="text" />
<input class="searchType" type="checkbox" />
<input class="searchDate" type="date" />
</div>
</body>
</html>
Hope that it will help to solve your problem. #Cheers
I have a list of select elements:
<select id="id_tags_to" multiple="multiple" size="0" name="tags" class="filtered"></select>
I'd like to somehow either translate the entire list of select elements into text OR, populate a new form (with an input type=text) with the contents of the select elements list as one string of text.
I tried:
<form action="/search/{{search_type}})" method="get">
<input type="text" name="qTag">
<input type="submit" value=" Search Tags">
<select id="id_tags_to" multiple="multiple" size="0" name="tags" class="filtered"></select>
</form>
This did not work in that it not only did not accomplish what I'm trying to do but it also broke the select functionality.
In case its not very obvious, I have no experience with html or javascript or jquery, I'm just trying to get something working with temporary code, so any quick and dirty suggestion would be great.
Hello you could use html5 to achieve that easily, its called a datalist its a new form type in html5 which is very useful hope this helps - Andrew
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
First you need that the <select> element contains some <option> elements. See some reference here!
Then, you can get the list of select elements using javascript and populate it in the text field. Install jQuery and use this example to work on your code. I hope that helps you!