I have the following HTML code:
<select name = 'category' id='category'>
<option value="a">A <a href="" class = "edit" id ='1'> Click here to edit </a> </option>
<option value="b">B <a href="" class = "edit" id ='b'> Click here to edit </a> </option>
</select>
I am trying like this:
$(document).on('click','.edit', editfunction);
function editfunction() {
alert('hi');
//call here ajax code
}
Firstly your HTML is invalid; you cannot have a elements inside an option:
<select name="category" id="category">
<option value="a">A</option>
<option value="b">B</option>
</select>
To do what you require you can hook to the change event of the select, not the click of the a within the option. You can then use $(this).val() to get the selected value in editFunction():
$(document).on('change', '#category', editfunction);
function editfunction() {
var value = $(this).val();
console.log(value);
// AJAX...
}
Try using the following
$('#category').on('change', function(){
editfunction( $(this).val() );
})
function editfunction(val){
// Make your ajax call here
}
And You actually dont need the tag inside to make this happen
I think this is what u want JSFIDDLE example
Related
I'm using jquery.load() to get an html code. This html is a form with js inside.
My problem, I want to get selected value of an input inside this form, but it returned "" even if there is an selected value..
Main-page.html:
url = "http://url-to-get-info-div";
$('#info').load(url);
The Main-page.html then has then a form and script inside
<div id="info">
<select name="nature" title="" required="" class="form-control" id="id_nature">
<option value="">---------</option>
<option value="a-specifier">A spécifier</option>
<option value="perte">Perte</option>
<option value="dommage">Dommage</option>
<option value="retard" selected="">Retard</option>
<option value="non-livre">Contestation livraison</option>
</select>
</div>
<script type="text/javascript">
----some script who need $("#id_nature)---
function calcul_indemnisation(nature_litige = $("#id_nature").val()){
---some work who use id_nature value---
return montant_indemnisation
}
$("#calcul_indemnisation").click(function(){
montant_indemnisation = calcul_indemnisation();
}
</script>
the problem is when a click on the button "#calcul_indemnisation, the return value is not correct because id_nature value is not got correctly
I resolve it ! In fact, I had another select with the same id further in the code! so there was a conflict with the id name
Use .on() to wire up generated elements, or use .load() syntax and give one function as parameter.
function calcul_indemnisation(){
var option = $('#id_nature').find(':selected');
var value = option.val();
var text = option.text();
//perform the calculations
return value;
};
//.load(url, function)
$('#info').load('url-you-need', function(){
//create click event in #calcul_indemnisation
$('#calcul_indemnisation').click(function(){
console.clear();
console.log('triggered with load .click(): ' + calcul_indemnisation());
});
});
//create click event on #calcul_indemnisation inside #info.
$('#info').on('click','#calcul_indemnisation',function(){
let montant_indemnisation = calcul_indemnisation();
console.log('triggered with .on() click: ' + montant_indemnisation);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="info">
<select name="nature" title="" required="" class="form-control" id="id_nature">
<option value="">---------</option>
<option value="a-specifier">A spécifier</option>
<option value="perte">Perte</option>
<option value="dommage">Dommage</option>
<option value="retard" selected="">Retard</option>
<option value="non-livre">Contestation livraison</option>
</select>
<input type="button" id="calcul_indemnisation" value="Click me!"/>
</div>
I have a drop down list, which is within a pop modal. The drop-down list looks like this:
<select name="EventTypeId" class="form-control formTextBox" id="ddlEventType">
<option value="">Please Select</option>
<option value="1">Assessment</option>
<option value="2">Single Session</option>
<option value="3">Group Session</option>
</select>
And my jquery looks like this:
$("body").on("change", "#ddlEventType", function (e) {
var test = $('#ddlEventType').val();
});
It hits the onchange function no problem, but whenever I select an option on the ddl, the test variable is always "", never gets the value. Can anyone help me with what's going wrong here? Is it because the ddl is inside a modal popup? I actually have a ddl in a different modal popup, with the exact same code and it works completely as it should. There's no conflicting ids on the age either. Can't figure out why I'm not getting the value.
UPDATE
I gave the ddl a class name of ddlEventType, and changed the jquery to
$("body").on("change", "#ddlEventType", function (e) {
var test = $('.ddlEventType').val();
});
and for some reason this worked. Don't get why, but it works and that's all I need. Thanks for your help everyone.
Try this:
$(document).on('change','#ddlEventType',function(){
console.log($(this).val());
});
Are you doing any change to the body. And for preventDefault it should be e.preventDefault();
You can follow the below methods for obtaining the selected value from the select tag using the onchange() attribute.
First method i have called the onchange() directly to the script function.
Second Method i have given directly a function to the select tag and then called the function in the script file.
First Method:
$(document).ready(function(){
$("#ddlEventType").change(function(){
alert($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="EventTypeId" class="form-control formTextBox" id="ddlEventType">
<option value="">Please Select</option>
<option value="1">Assessment</option>
<option value="2">Single Session</option>
<option value="3">Group Session</option>
</select>
Second Method:
function get_value(a)
{
alert(a);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="EventTypeId" class="form-control formTextBox" id="ddlEventType" onchange="get_value(this.value)">
<option value="">Please Select</option>
<option value="1">Assessment</option>
<option value="2">Single Session</option>
<option value="3">Group Session</option>
</select>
I am using a lightbox called featherlight. I have a form inside of that lightbox that requires a dynamic select option to change the content of the next question select box.
The select box works outside of the lightbox yet inside it fails.
Any ideas where I appear to be going wrong?
<select>
<option value="111">111</option>
<option value="222">222</option>
</select>
<select>
<option value="111">111</option>
<option value="222">222</option>
</select>
<script type="text/javascript">
$(function(){
$('select').change(function(){ // when one changes
$('select').val( $(this).val() ) // they all change
})
})
</script>
Your HTML is most likely being added after the handlers are bound - you can use .on to get around this:
$(document).on("change", "select", function() {
$('select').val( this.value )
});
You should replace document with a container that is present at the time of page load and contains your dynamic content - else this event is going to fire each time the document is changed (and check if a select was actually changed)
With a common class:
<select class="common">
<option value="111">111</option>
<option value="222">222</option>
</select>
<select class="common">
<option value="111">111</option>
<option value="222">222</option>
</select>
$(document).on("change", "select.common", function() {
$("select.common").not(this).val( this.value ) //added .not(this) since we dont need to change the value of the select being interacted with
});
have unique id for both select as follow
<select id='select1'>
<option value="111">111</option>
<option value="222">222</option>
</select>
<select id='select2'>
<option value="111">111</option>
<option value="222">222</option>
</select>
<script type="text/javascript">
$(function(){
$('#select1').change(function(){ // when one changes
$('#select2').val( $(this).val() ) // they all change
})
})
</script>
Updated
I guess you are accessing parent element from child window
try the following
window.parent.$(#select2.val( $(this).val());
I have a select dropdown list having n number of options, i want on page load, option which i selected earlier should get selected in dropdown using jquery :
Here is my html code :
<select id="myList">
<option value="1">first</option>
<option value="2">second</option>
<option value="3">third</option>
</select>
<input type="hidden" value="1" id="hiddenoptionid" />
Here is my jquery code :
$(document).ready(function() {
var projectId=document.getElementById("hiddenoptionid").value;
$("#myList option[value="+projectId+"]").attr("selected", "selected");
});
$("#projectlist").on('change', function() {
var id = $(this).val();
document.getElementById("hiddenoptionid").value=id;
location.reload();
});
Thanks.
You can use like,
$(document).ready(function(){
$("#projectlist").val($("#hiddenoptionid").val());
});
Note that, if you reload the page, $("#hiddenoptionid").val() will get reset to 1 again. If you want to retain that value, use cookies for that
I am new to web development and I'm trying to do this:
I have a <select> and I want the value of the selected option to be one of the parameters of a method that is called whenever a button is clicked.
So for example:
<select id="instructorSelector">
<option value='abrown#gmail.com'>Anna Brown</option>
<option value='jdoe#gmail.com'>Jane Doe</option>
...
</select>
<button onclick="sendEmail(($('#instructorSelector').val()),...,...)" type="button">Send Email</button>
The problem with this is that it doesn't seen to detect when I've actually selected someone. I'm using freemarker templates but a general response as to how I should do this would be helpful too.
Also, how could I make it so the button is not clickable (or even visible) until the user actually selects something from the <select> ?
Thanks in advance! Sorry if this is an overly simple question.
You don't need to pass anything, what you need is a proper event handler:
<select id="instructorSelector">
<option value='abrown#gmail.com'>Anna Brown</option>
<option value='jdoe#gmail.com'>Jane Doe</option>
...
</select>
<button id="btn" type="button">Send Email</button>
JS
$(function() {
$('#btn').hide();
$('#instructorSelector').on('change', function() {
$('#btn').show();
});
$('#btn').on('click', function() {
var select_value = $('#instructorSelector').val();
// use the value here
});
});
I would solve it like this:
disable the button in the beginning using the proper disabled-attribute
toggle this attribute if the value of the box changes, depending on something is selected or not
store the selectors in variables, so you don't need to re-query them all the time
HTML
<select id="instructorSelector">
<option value="">Please select</option>
<option value="abrown#gmail.com">Anna Brown</option>
<option value="jdoe#gmail.com">Jane Doe</option>
</select>
<button class="send_email" type="button" disabled="disabled">Send E-mail</button>
JavaScript
// example of a selector using a class name
var button = $('button.send_email');
// example of using a selector using the id of an element
var selector = $('#instructorSelector');
selector.change(function () {
if ('' == selector.val()) {
button.attr('disabled', 'disabled');
} else {
button.removeAttr('disabled');
}
});
button.click(function(event) {
sendEmail(selector.val());
event.preventDefault();
});
Demo
Try before buy
Try to use .chage() from jQuery http://api.jquery.com/change/ to make button visible
$('#instructorSelector').change(function () {
$('#id-of-the-button').show();
});
In this chang function you can also capture values of option $(this).val()
I highly recommend that you read jQuery Event Basics
You will need to understand how you can use selectors along with events to truly leverage the power of jQuery.
I think after reading about events you will see how click and change will greatly benefits the goals you have for your page.
Simplest Way: http://jsfiddle.net/rA4VJ/
<select id="instructorSelector">
<option value='none' selected>Choose Someone</option>
<option value='abrown#gmail.com'>Anna Brown</option>
<option value='jdoe#gmail.com'>Jane Doe</option>
</select>
<button id="btn" type="button">Send Email</button>
var btn = document.getElementById("btn");
var elm = document.getElementById("instructorSelector");
elm.onchange = function (e) {
if (elm.value != 'none') {
console.log(elm.value);
btn.removeAttribute('disabled');
} else {
btn.setAttribute('disabled', 'disabled');
}
}
If you are using JavaScript, you can have the property onchange on the select, that can trigger a method that could check the value and make visible the the button. Use an option to indicate that there is no selection, and if that is the one selected, hide the button.
<select id="instructorSelector" onchange="something()">
<option value='selectone'>Select one</option>
<option value='abrown#gmail.com'>Anna Brown</option>
<option value='jdoe#gmail.com'>Jane Doe</option>
...
</select>
<button id="button" style="display:none;" onclick="sendEmail(($('instructorSelector').val()),...,...)" type="button">Send Email</button>
function something(){
if ( $('#instructorSelector').val()!='selectone' ) {
document.getElementById("button").style.display = 'block';
}
else{
document.getElementById("button").style.display = 'none';
}
}