Get text from closest selected dropdown option with class on button click

Get text from closest selected dropdown option with class on button click - javascript

I have many dropdowns, when I click the button I want it to look up the select option that is selected and alert me the text it says, like 'grape'.
It must use .closest, have tried many variations but cant seem to find it.....
<select name="div0" class="dropdowns">
<option value="orange">orange</option>
<option value="apple">apple</option>
<option value="grape">grape</option>
<option value="peas">peas</option>
</select>
<input type="button" name="mybutton" value="Edit Row">
<select name="div1" class="dropdowns">
<option value="orange">orange</option>
<option value="apple">apple</option>
<option value="grape">grape</option>
<option value="peas">peas</option>
</select>
<input type="button" name="mybutton" value="Edit Row" class="editrowbutton">
JQUERY (Nearest I can get)
$(document).on('click', '.editrowbutton', function() {
var thetext = $(this).closest('select').find('option:selected').text();
alert(thetext);
});

You are missing the class editrowbutton on your buttons in the example.
use .prev to get the previous element from target.
$(document).on('click', '.editrowbutton', function() {
var thetext = $(this).prev().find('option:selected').text();
alert(thetext);
});
http://jsfiddle.net/SeanWessell/wt00c2wu/
.closest looks up the tree at parents. Since the select is not a parent you will not return anything.
If you wanted to search the siblings you can use prev('selector') or next('selector') as well.
https://api.jquery.com/category/traversing/tree-traversal/

You can also use the data-* attribute, preventing DOM position mistakes.
$(function(){
$(document).on("click",'.editrowbutton',function(){
var target = $(this).data("select");
alert($('select[name='+target+'] option:selected').text())
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="div0" class="dropdowns">
<option value="orange">orange</option>
<option value="apple">apple</option>
<option value="grape">grape</option>
<option value="peas">peas</option>
</select>
<input type="button" name="mybutton" data-select="div0" class="editrowbutton" value="Edit Row">
<select name="div1" class="dropdowns">
<option value="orange">orange</option>
<option value="apple">apple</option>
<option value="grape">grape</option>
<option value="peas">peas</option>
</select>
<input type="button" name="mybutton" data-select="div1" class="editrowbutton" value="Edit Row">

Related

How to set parameter values to a "onClick" function using javascript or jquery

I am trying to set parameters to onClick event inside a html button using javascript.
This is how html button looks like:
<button type="button" id="upload-button" onclick="uploadFileIGCSE('param1', 'param2', 'param3')" class="btn btn-success" aria-expanded="false">Upload</button>
param1 = should be the value from a html select element with id='year' and name='year'
param2 = should be the value from a html select element with id='grade' and name='grade'
param3 = should be the value from a html select element with id='subject' and name='subject'
These are the html select options
<div class="col-md-3">
<select id="year" name="year" class="form-control">
<option value="select" disabled="disabled">- Select Year -</option>
<option value="1">2001</option>
<option value="2">2002</option>
<option value="3">2003</option>
</select>
</div>
<div class="col-md-3">
<select id="grade" name="grade" class="form-control">
<option value="select" disabled="disabled">- Select Grade -</option>
<option value="1">Grade 5</option>
<option value="2">Grade 6</option>
<option value="3">Grade 7</option>
</select>
</div>
<div class="col-md-3">
<select id="subject" name="subject" class="form-control">
<option value="select" disabled="disabled">- Select Subject -</option>
<option value="1">Edexcel</option>
<option value="2">National</option>
<option value="3">Other</option>
</select>
</div>
I have no clue how to set values to param1, param2, param3
This is what I tried but it feels wrong.
$('#upload-button').val = $('#year').val;
Can someone please help me?
I need to set values for the parameters (param1, param2, param3) in the function uploadFileIGCSE('param1', 'param2', 'param3') using javascript or jquery
Thank you

I can understand your needs. if you really wanted to do this only with HTML element, here is the way.
<button type="button" id="upload-button"
onclick="uploadFileIGCSE(
document.querySelector('#year').value,
document.querySelector('#grade').value,
document.querySelector('#subject').value)"
class="btn btn-success" aria-expanded="false">Upload</button>
Here is the working example
function uploadFileIGCSE(val1, val2, val3){
document.querySelector('#log').innerHTML = `${val1}, ${val2}, ${val3}`
}
<div class="col-md-3">
<select id="year" name="year" class="form-control">
<option value="select" disabled="disabled">- Select Year -</option>
<option value="1">2001</option>
<option value="2">2002</option>
<option value="3">2003</option>
</select>
</div>
<div class="col-md-3">
<select id="grade" name="grade" class="form-control">
<option value="select" disabled="disabled">- Select Grade -</option>
<option value="1">Grade 5</option>
<option value="2">Grade 6</option>
<option value="3">Grade 7</option>
</select>
</div>
<div class="col-md-3">
<select id="subject" name="subject" class="form-control">
<option value="select" disabled="disabled">- Select Subject -</option>
<option value="1">Edexcel</option>
<option value="2">National</option>
<option value="3">Other</option>
</select>
</div>
<button type="button" id="upload-button"
onclick="uploadFileIGCSE(
document.querySelector('#year').value,
document.querySelector('#grade').value,
document.querySelector('#subject').value)"
class="btn btn-success" aria-expanded="false">Upload</button>
<p>log value : (<span id="log"></span>)</p>

You really shouldn't be using inline event listeners like onclick (for maintainability, security and separation of concerns reasons).
Instead, add the listener using the DOM API's HTMLElement.prototype.addEventListener():
document.getElementById('upload-button').addEventListener('click', function() {
uploadFileIGCSE(year.value, grade.value, subject.value);
})
function uploadFileIGCSE(x,y,z) {
console.log(x,y,z);
}
document.getElementById('upload-button').addEventListener('click', function() {
uploadFileIGCSE(year.value, grade.value, subject.value);
})
<div class="col-md-3">
<select id="year" name="year" class="form-control">
<option value="select" disabled="disabled">- Select Year -</option>
<option value="1">2001</option>
<option value="2">2002</option>
<option value="3">2003</option>
</select>
</div>
<div class="col-md-3">
<select id="grade" name="grade" class="form-control">
<option value="select" disabled="disabled">- Select Grade -</option>
<option value="1">Grade 5</option>
<option value="2">Grade 6</option>
<option value="3">Grade 7</option>
</select>
</div>
<div class="col-md-3">
<select id="subject" name="subject" class="form-control">
<option value="select" disabled="disabled">- Select Subject -</option>
<option value="1">Edexcel</option>
<option value="2">National</option>
<option value="3">Other</option>
</select>
</div>
<button type="button" id="upload-button">Upload</button>

try this
<button type="button" id="upload-button" onclick="getOption()" class="btn btn-success"
aria-expanded="false">Upload</button>
function getOption() {
var year = document.getElementById("year");
var year_option = year.options[year.selectedIndex].value;
var grade = document.getElementById("grade");
var grade_option = grade.options[grade.selectedIndex].value;
var subject = document.getElementById("subject");
var subject_option = subject.options[subject.selectedIndex].value;
uploadFileIGCSE(year_option, grade_option, subject_option)
}

$('#upload-button').click(function(e) {
var year = $('#year').val();
var grade = $('#grade').val();
var subject = $('#subject').val();
uploadFileIGCSE(year, grade, subject);
})
You could try something like this.

The click event can simply run an anonymous function. Its only input will be the default event object supplied by the DOM engine. That function can then gather the values from the various elements you're interested in, and make a further call to the uploadFileIGCSE function, passing those values as parameters.
Here's a demo. Note that I've used an unobtrusive event handler using addEventListener() in the JS code, rather than "onclick" within the HTML. This is generally considered to be better practice, as it makes the code easier to read, maintain and debug, and helps to separate the functionality from the presentation.
N.B. you could use jQuery for any/all of this, but equally it's not really necessary, it doesn't really add much value in this situation.
var button = document.getElementById("upload-button");
button.addEventListener("click", function(event) {
var year = document.getElementById("year").value;
var grade = document.getElementById("grade").value;
var subject = document.getElementById("subject").value;
uploadFileIGCSE(year, grade, subject);
});
function uploadFileIGCSE(year, grade, subject) {
console.log(year, grade, subject);
}
<button type="button" id="upload-button" onclick="uploadFileIGCSE('param1', 'param2', 'param3')" class="btn btn-success" aria-expanded="false">Upload</button>
<div class="col-md-3">
<select id="year" name="year" class="form-control">
<option value="select" disabled="disabled">- Select Year -</option>
<option value="1">2001</option>
<option value="2">2002</option>
<option value="3">2003</option>
</select>
</div>
<div class="col-md-3">
<select id="grade" name="grade" class="form-control">
<option value="select" disabled="disabled">- Select Grade -</option>
<option value="1">Grade 5</option>
<option value="2">Grade 6</option>
<option value="3">Grade 7</option>
</select>
</div>
<div class="col-md-3">
<select id="subject" name="subject" class="form-control">
<option value="select" disabled="disabled">- Select Subject -</option>
<option value="1">Edexcel</option>
<option value="2">National</option>
<option value="3">Other</option>
</select>
</div>

Printing image on dropdown selection?

I have a dropdown selector in my HTML and I need to print out an image that is linked to a selection. But I have no idea how to start that.
<input type="text" id="TextVeld" class="form-control" placeholder="get value on option select">
<br><br>
<select name="cars" id="TextShow" class="form-control">
<option value="Pizza0">Kies je pizza</option>
<option value="Pizza1">Margherita</option>
<option value="Pizza2">Carciofi</option>
<option value="Pizza3">Marinara</option>
<option value="Pizza4">Funghi</option>
<option value="Pizza5">Calzone</option>
<option value="Pizza6">Napoli</option>
<option value="Pizza7">Romana</option>
<option value="Pizza8">Quattro Formaggi</option>
</select>
<br><br>
<button type="button" name="button">Toon</button>
<button type="button" name="button" onclick="Kiezen()">Kies</button>
I did find an example that does this, but not on a button click. Even then, it doesn't work when I add it to my code.

Assuming "Print out" means "Show", try this
var folder = "https://icco.co.uk/catalog/view/theme/iccqtheme/images/"
function showIt() {
var pizza = document.getElementById("pizzas").value;
document.getElementById("pizzaImage").src= folder + (pizza? pizza+".png" : "deliveroo.png");
}
window.addEventListener("load",function() {
document.getElementById("toon").addEventListener("click",showIt); // click
document.getElementById("pizzas").addEventListener("change",showIt); // or change
});
<input type="text" id="TextVeld" class="form-control"
placeholder="get value on option select">
</br></br>
<select name="pizzas" id="pizzas" class="form-control">
<option value="">Kies je pizza</option>
<option value="piza1">Margherita</option>
<option value="piza2">Carciofi</option>
<option value="piza3">Marinara</option>
<option value="piza4">Funghi</option>
<option value="piza5">Calzone</option>
<option value="piza6">Napoli</option>
<option value="piza7">Romana</option>
<option value="piza8">Quattro Formaggi</option>
</select>
</br></br>
<button type="button" id="toon">Toon</button>
<button type="submit" name="button">Kies</button><br/>
<img id="pizzaImage" src="https://icco.co.uk/catalog/view/theme/iccqtheme/images/deliveroo.png" />

Show and hide a div on corresponding dropdown value change

I have a DIV with two dropdown(maindd and subdd) and an ADD button in a seperate DIV. If i click ADD button i am generating another div with similar two dropdown which have same value(like maindd and subdd). If i click ADD button again, Again i am generating a div with two dropdown(Name maindd and subdd). Like that how many times i want, i can click the ADD button and add a DIV with two dropdowns.
The question is, if i change the first DIV first dropdown (maindd)value, i need to show the corresponding dropdown(subdd) which is present in the same div not on the other DIV. Similarly for second DIV dropdown change, i need to show its corresponding second DIV second dropdown.
Note: By default all the second dropdown(subdd) is set to "display:none;" through CSS. I am using JQUERY.
Code:
<div id="container">
<div class="records">
<select class="recordnumber" name="maindd">
<option value="first">first</option>
<option value="second">second</option>
<option value="other">other</option>
</select>
<select class="othertype" name="subdd">
<option value="one">One</option>
</select>
</div>
<div><input type="button>Add Row</button>
<div class="records">
<select class="recordnumber" name="maindd">
<option value="first">first</option>
<option value="second">second</option>
<option value="other">other</option>
</select>
<select class="othertype" name="subdd">
<option value="one">One</option>
</select>
</div>
<div><input type="button>Add Row</button>
</div>
Tried This:
$(document).ready(function(){
$(".recordnumber").on("change",function(){
if ( this.value == 'other')
{
$(this).siblings(".othertype").show();
}
else
{
if(this.value != 'other')
{
$(this).siblings(".othertype").hide();
}
}
});
});
Is this the right approach to do it?

Try this code may be useful that you want
$(".recordnumber").on("change",function(){
$(".othertype").hide();
$(this).siblings(".othertype").show();
});
DEMO

check below code it may help for you
$(".recordnumber").on("change",function(){
$(this).siblings(".othertype").css("display", "block");
});
.othertype{
display : none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="container">
<div class="records">
<select class="recordnumber" name="maindd">
<option value="first">first</option>
<option value="second">second</option>
<option value="other">other</option>
</select>
<select class="othertype" name="subdd">
<option value="one">One</option>
</select>
<input type="button" value="Add Row" />
</div>
<div class="records">
<select class="recordnumber" name="maindd">
<option value="first">first</option>
<option value="second">second</option>
<option value="other">other</option>
</select>
<select class="othertype" name="subdd">
<option value="one">One</option>
</select>
<input type="button" value="Add Row" />
</div>
</div>

Dropdown display output

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>

Show submit button on multiple forms only if option selected

I need to show the submit button on many forms on the same page only if one option from a select is selected.
I have:
<form id="1">
<input type="text">
<select>
<option value="">Select one value</option>
<option value="1">value 1</option>
<option value="2">value 2</option>
</select>
<input type="submit">
</form>
and
<form id="2">
<input type="text">
<select>
<option value="">Select one value</option>
<option value="1">value 1</option>
<option value="2">value 2</option>
</select>
<input type="submit">
</form>
so, I need to show the submit button only if an option of the select is selected
Thanks!!!

This a working example with you html http://jsfiddle.net/g188o5eg/
$('select').on('change', function(){
if($(this).val() != ''){
$(this).parent().find('input[type="submit"]').show();
} else {
$(this).parent().find('input[type="submit"]').hide();
}
});
It will work with all forms on your site :)

Try something like this (would work with multiple select boxes (uses the nearest submit):
<form>
<input type="text">
<select class="select">
<option value="">Select one value</option>
<option value="1">value 1</option>
<option value="2">value 2</option>
</select>
<input type="submit" class="submitbutton">
<script type="text/javascript">
$('.submitbutton').hide();
$('.select').click(function() {
$(this).closest('.submitbutton').show();
});
</script>

Develop Reference

JavaScript is the programming language of the Web.

Get text from closest selected dropdown option with class on button click - javascript

Related

How to set parameter values to a "onClick" function using javascript or jquery

Printing image on dropdown selection?

Show and hide a div on corresponding dropdown value change

Dropdown display output

Show submit button on multiple forms only if option selected

Categories

Resources