I have specified attribute to tag that I want to fetch using jquery.
<select id='duration' name='duration'>
<option value=''>Select Duration</option>
<option value='10' data-cost='50'>10 Min</option>
</select>
Here is my jquery code.
$(document).ready(function(){
$('#duration').change(function(){
var cst=$(this).data('cost'); // not working
var cst=$('#duration').data('cost');
alert(cst);
});
});
It is showing value undefined in alert.
I'm I doing anything wrong ?
data is attribute of option tag not select tag this represent select tag
Try this JSFIDDLE
$(document).ready(function(){
$('#duration').change(function(){
var cst=$(":selected",this).data('cost'); // not working
alert(cst);
});
});
Related
select id section
script section in head
So this is the situation.
I have this
<select name="users" onchange="showUser(this.value)" id="1">
<option value="">Select a person:</option>
<option value="'.$lectures[4][0].'">'.$lectures[4][0].'</option>
<option value="'.$lectures[5][0].'">'.$lectures[5][0].'</option>
<option value="'.$lectures[6][0].'">'.$lectures[6][0].'</option>
<option value="'.$lectures[7][0].'">'.$lectures[7][0].'</option>
</select>
Like this I have lots of select element in the page. I want to pass two value through ajax.
One is selected option value. Which I have done successfully.
Other is the I want to pass select tag id. In this case it is 1.
So Could you help me in the ajax part
xmlhttp.open("GET","optiondetails.php?q="+str,true);
xmlhttp.send();
How to pass this value through ajax. Please keep in mind that I have to do this for many select tag. So I cannot pass them directly by value.
Thanks for you help.
try this:
$(document).ready(function(){
$('select').change(function(){
var opt = $(this).find('option:selected');
console.log(opt.val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="1">
<option value="dog">dog</option>
<option value="cat">cat</option>
</select>
<select id="2">
<option value="chocolate">chocolate</option>
<option value="pizza">pizza</option>
</select>
I used jQuery selector to get the selected option inside the changed select element
I think this is more convenient way to do that:
$(document).ready(function(){
$(document).on('change', 'select', function(){
var optVal = $(this).val();
var id = $(this).attr('id');
$.ajax({
method: "GET",
url: "optiondetails.php",
data: {q:optval, tag_id:id},
cache: false
}).done(function(response){
console.log(response);
});
});
});
I retrieve the value of a select box in this way which goes to populate a input field:
<script>
$(document).ready( function ()
{
$('#dropdown_selector').change(function()
{
var option = $(this).find('option:selected').val();
$('#showoption').val(option);
});
});
</script>
<select id="dropdown_selector">
<option value="Option1">Option1</option>
<option value="Option2">Option2</option>
<option value="Option3">Option3</option>
</select>
<label>Value</label>
<input type="text" name="name" id="showoption" disabled="disabled" />
</label>
But my problem is how to retrieve that value and use it directly in a PHP variable,instead of populating the input field(with id showoption).
Something similar as:
$variable=(var selected in select box)
Thanks for your help!!!
This jQuery code is triggered when an option is selected and then stores the value of the option into variable valu. After that it sends the variable to your php document via Ajax post.
$('select').change(function(){
var valu=$( "select option:selected" ).attr('value');
$.ajax({
type:"POST",
url:"yourphpscript.php",
data: {values:valu}
});
});
http://jsfiddle.net/joey6978/peq74/ :this fiddle shows the select choosing trigger.
In your php script you should have the post method with the name values to recieve your data.
$myvariable=$_POST['values'];
In my form action there's a url: www.url.com/?quantity=$quantity
And in the form there's a select box where customers choose the quantity.
<form method="post" name="jform" action="www.url.com/?quantity=$quantity">
<select class="font_12" id="quantity" name="quantity">
<option value="10">10 PCs</option>
<option value="25">25 PCs</option>
<option value="50">50 PCs</option>
<option value="99">99 PCs</option>
</select>
I am trying to get the value in the select box using ajax, and then display into the action form url. I did a alert and it works, I am getting the value of the select box.
But I don't know how to put this vaue into the PHP varaible $quantity?
Here's my Ajax code:
$('#quantity').on('change', function() {
var val = $(this).val();
if(val != '') {
$.get('index.php', {'quantity' : val}, function(resp) {
alert(val);
});
}
});
Actually I want it to change the php variable right away when the quantity in the select box change before submitting the form.
Any help?
Use $_GET
If your URL is ?quantity=### then just use $_GET['quantity'] in your PHP code.
To change the action attribute on the form when you change the quantity you can just put the following inside your onchange event:
$('form[name="jform"]').attr('action','http://url.com/?quantity=' + val);
Noob here trying to do something simple with Jquery. Basically I have a small select-option dropdown like this:
<select onchange="javascript:swapContent('con3');">
<option>selection 1</option>
<option>selection 2</option>
<option>selection 3</option>
</select>
Currently it is posted via ajax to a $php variable here:
$contentVar = $_POST['contentVar'];
javascript function is here:
<script language="JavaScript" type="text/javascript">
function swapContent(cv) {
$("#myDiv").html('<img src="loader.gif"/>').show();
var url = "myphpscript.php";
$.post(url, {contentVar: cv} ,function(data) {
$("#myDiv").html(data).show();
});
}
</script>
How can I instead post the value of the select-option dropdown?
I realize this is basic, but I have to start somewhere and cannot find a tutorial that shows me how to do what I need. Thank you for your help.
How can I instead post the value of the select-option dropdown?
If you want to send values yo tour script you should start by giving values to your option elements (and an id to your <select> element to be able to use it and retrieve the selected value):
<select onchange="javascript:swapContent('con3');" id="myselect">
<option value="value1">selection 1</option>
<option value="value2">selection 2</option>
<option value="value3">selection 3</option>
</select>
and then:
// get the currently selected value from the dropdown
var value = $('#myselect').val();
$.post(url, { contentVar: cv, selectedValue: value }, function(data) {
$("#myDiv").html(data).show();
});
If on the other hand you wanted to send the text of the selected option you could use this:
// get the currently selected value from the dropdown
var text = $('#myselect option:selected').text();
$.post(url, { contentVar: cv, selectedText: text }, function(data) {
$("#myDiv").html(data).show();
});
Now inside your PHP script you could fetch the value:
$_POST['selectedValue']
HTML:
Remove the inline javascript change event from the select.
<select>
<option>selection 1</option>
<option>selection 2</option>
<option>selection 3</option>
</select>
jQuery:
Bind a change event to your select. Inside this event, this.value with be the value of the select.
$(document).on("change", "select", function(){
$("#myDiv").html('<img src="loader.gif"/>').show();
var url = "myphpscript.php";
$.post(url, {contentVar: this.value} ,function(data) {
$("#myDiv").html(data).show();
});
});
var val = $('select option:selected').text();
Using jQuery's selector syntax, you first select the "select" control, and then the "option" child of the select control. You then look for the selected state. Finally, return the text.
Of course, as is, this code will select every "select" control on the page. It would be better to give your select control an id:
<select id="mySelect">
<option>Some option</option>
<option>Some other option</option>
</select>
Then the code becomes
var val = $('#mySelect option:selected').text()
You might want to consider an unobtrusive JavaScript approach and not have the on-change event in your html mark-up, instead attach an event handler as shown below, from the jQuery API site
<!DOCTYPE html>
<html>
<head>
<style>div { color:red; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<select name="sweets">
<option>Chocolate</option>
<option>Candy</option>
<option>Taffy</option>
<option>Fudge</option>
<option>Cookie</option>
</select>
<div></div>
<script>
$("select").change(function () {
var str = "";
$("select option:selected").each(function () {
str += $(this).text() + " ";
});
$("div").text(str);
})
.change();
</script>
</body>
</html>
I am looking for a way to access the id attribute of the select tag from jquery.
say i have a select tag on the form : form.php
<select id="testid">
<option value="1">1</option>
<option value="2">2</option>
</select>
from jquery I can access the option value as $(this).attr("value"). But $(this).attr("id") gets undefined.
By giving the option tag some id attribute values it works. But, is there a way around to access the id of the select tag thru $(this) object
Thanks for any help
If you are trying within change event of select it will look like:
$('select').change(function() {
// here 'this' point to select
console.log( $(this)[0].id );
//OR simply
console.log(this.id);
})
But $(this).attr('id') should also work.
If your $(this) point to option then try
$('select').has(this).attr('id');
OR
$(this).parent('select').attr('id');
May be this in $(this).attr("id") pointing to option element.
Try this,
var id;
if(this.tagName === 'option'){
id = $(this).parent().attr('id');
}
else{
id = $(this).attr("id");
}
Try with:
$(this)[0].id
or
this.id
You could try this!
<select id="testid">
<option class='option' value="1">1</option>
<option class='option' value="2">2</option>
</select>
$(document).ready(function(){
$("#testid").change(function(){
var option = [];
$("option.option:selected").each(function(i){// this will filter the selected id
option[i] = $(this).val();
});
alert(option);
});
});