Retrieving .data('value') from <select> "sometimes" works - php

My select box that is generated by PHP:
<select>
<option selected>Select something</option>
<option data-value="test"></option>
</select>
So far I have tried the following ways to retrieve the value within the data-value attribute:
$('select').children(":selected").data('value');
$('select option:selected').data('value')
$('select option:selected').attr('data-value');
$('select').find(':selected').data('value');
Of course there are a couple of more ways to do this. Once the one of these options gets executed I "sometimes" get the value within the data-value attribute. Even using
$('select').on('change', function () { // code });
gives me the same result. Am I missing some underlying thing?
FIXED:
After every select I use the data information for something else. Then I refresh the select box data by retrieving the remaining data information from the database. At that point I forgot to add the attribute data-value to every option..

Related

Getting option text instead of value

Is that possible to get option text instead of value?
Somehow I need to use same option for 2 purpose. one of them need to get value which will be id of selected option and for another purpose i need to get text of that option.
here is how it looks like in HTML:
<select class="form-control" name="address_id">
<option value="1">Street 3.</option>
<option value="2">Street 4.</option>
</select>
I saw solutions base on Jquery and JavaScript but that's not gonna work for me I need PHP solution.
here is my saving method:
// codes....
$order->address = $request->input('address_id'); // basically will save value
//codes...
Auth::user()->orders()->save($order); //saving

Passing Javascript Variable (var ...) to PHP Variable ($...) using Ajax

I'm having a problem in passing variable from Javascript to PHP,
passing variables from PHP to Javascript is Easy
but is there a way to pass Variables from Javascript to PHP?
Here's the Situation
Think of this as the variables of the first select input
--2010
--2011
--2012
and
the Values of the second select group varies depending on the selected option
of the first select group
The values are:
2010
--AAA
--AAB
--AAC
2011
--ABA
--ABB
--ABC
2012
--ACA
--ACB
--ACC
say that the values are displayed by a conditional PHP function that
retrieves data from a Database
Here's What I Want to do:
When I Select One from the first select Group,
It will change the options of the second select group
of course, this happens via triggers when the first select group changes
I need to Retrieve the value of the first select group to filter the data
that will be displayed as the options of the second Group which comes from
a database and a PHP function is made to process it, thats why i need the value
of the first select group and use it as a parameter for the second select group.
The Problem:
i need to get the value of the first select group in PHP Varible
to make a PHP Function work.
Please Help!!!
You can simply add it in as a url parameter in the ajax request that you send.
Consider your first field is like so:
<select id="field1">
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
</select>
Your javascript will be like so:
var ajaxUrl="http://myserver.com/getfield2.php?field1=" + document.getElementById("field1").value;
And then you will send the ajax request to ajaxUrl
In the php, you will get this value as
$_GET["field1"]
Like said above, your fields are
<select id="field1">
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
</select>
Use jQuery to perform an AJAX call to your script. Something like that
$("#field1").change(function(){
var value = $(this).val();
$.post('script.php', {
phpvar: value
}, function(){
//this is callback, render your second field here, with the responce of php script
});
});
In your php script, variable passed from jQuery will be available like this
$_POST['phpvar']

Showing value data from dropdown in html

I created a script which get from my database the states and price of shipping by number of products.
So...I have 2 dropdown, one for quantity and the second one for state.
This is my main php file: http://pastebin.com/U6dncsZ6
This is the second php file (for database connect) - findcity.php : http://pastebin.com/AuEXrnpD
As you see, in my second php file I have this line:
<option value=<?=$row['price']?>><?=$row['title']?></option>
I want to display the shipping price from the database ($row['price'] on the page.
I specify that using "Inspect element" in my browser I can see the prices added as value for the states, like:
<option value="48.11">State</option>
Please help :(
Le: As I stated in a comment, I finally found that like here it's working: jsfiddle.net/Dkn4n/1/
But for some reasons, it's not detected but it's not working in my page, maybe because the value is not set in html, I can't see the values in source, only in "Inspect element". The value is set as I specified above, with $row['price']
Your select statement looks like this on the page:
<select id="provincia">
<option value="10.00">CA</option>
<option value="20.00">NY</option>
</select>
So using javascript/jQuery you can do the following to get the value of the selected option.
$(document).ready(function(){
$("#provincia").change(function(){
alert(this.value);
//do stuff here to set the value where you want it.
});
});
Here's a demo: http://jsfiddle.net/Dkn4n/
Adding to "Chase"s Answer:
$(document).ready(function(){
$("#provincia").change(function(){
$("#selectedprice").html(this.value);
//<div id=selectedprice></div> should show your value
});
});
and expanding it:
at this line:
document.getElementById('provinciadiv').innerHTML=req.responseText;
do
$("#provincia").change(function(){
$("#selectedprice").html(this.value);
//<div id=selectedprice></div> should show your value
});
again!
Because the "change" binding is gone once you replace the part...

get Value of Disabled (Disabled & Selected previously) option in select box

I have written below lines to display multiselect box and I want to few option disabled which is previously selected.
<select multiple="multiple" name='cars[]'>
<option value="volvo" disabled selected='selected'>Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
So here In POST method I want to get value of all the selected option including first one volvo.
Afaik, no modern browser will submit a disabled option/field in a form. The easiest solution is to make it a "readonly" field by using the "readonly" attribute.
However, you will have to style the field to look like it has been disabled, as readonly does not change the field's appearance it just prevents the user from modifying it.
The ugly part is, however, that some browsers will NOT allow the readonly attribute to be set for a select field.
What I have usually done in this case is to actually disable the select and store the value in a hidden field instead using some not so ugly javascript to control this on the fly.
Update:
You could easily write a "serializeDisabled" function, iterating over the disabled form elements which have a name attribute and using the jQuery.param function at the end, to generate the serialized string (function comes from the user CMS here):
(function ($) {
$.fn.serializeDisabled = function () {
var obj = {};
$(':disabled[name]', this).each(function () {
obj[this.name] = $(this).val();
});
return $.param(obj);
}
})(jQuery);
You could create a javascript function to loop around the options onSubmit and enabled them again. Disabled elements do not get posted.
when you set the disabled never get in the POST data.... replace select to input type text..and use "readonly" property of that...
Thanks

How do you set the default value of a drop down list that is being called via AJAX from another page?

For my code, my drop down lists are initiated on the original page, via
<select name =country id=country
onchange=showRecords(this.value,'country','province')>"
This function is taking the value, equating it to country, then querying MySQL, and setting the results where id=province, and creating cascading dropdown lists. This is obviously via Ajax.
So, when $_REQUEST['province'] is set, then the Province dropdown list gets populated with all provinces from the country to which it belongs, etc.; i.e.;
<?if(isset($province)){
echo "<script>showRecords('".$country."','country','province');</script>";}?>
However, for the life of me, I cannot figure out how I can set the default value equal to $_REQUEST['province']. I cannot use the traditional way:
if (($selected) == ($value)) {
$options.= " selected";
}
Because it is querying the AJAX page with one piece of information at a time.
Any ideas would be greatly appreciated.
Your code doesn't seem to make a lot of sense. The particular thing that worries me is that you say ajax is loading one item at a time?
Perhaps something like this. A country select tag like...
<select onchange="showRecords(this)">
As well as creating the javascript function showRecords() which will be called when someone chooses an option in the select tag.
<script>
function showRecords(calling_element) {
// do AJAX call here using calling_element.options[calling_element.selectedIndex].value as the selected country. this.value does not work for select tags.
}
</script>
the PHP page that receives this AJAXed request would reply with a JSON object containing all of the province values, or a delimited list.
once the Javascript showRecords function receives the responce from the PHP page, it would add each of these options to the correct select tag. Once finished, it would set the default value to whichever option it wants by something like the following:
target_element.selectedIndex = {desired list index here};
I have a lot of assumptions to your questions,
first is, if bydefault you have the select province like this
<select id="province">
<option value=""></option>
<option value="California">California</option>
<option value="Washington">Washingthon</option>
</select>
then you can use this script to default select
document.getElementById("province").value="Washington";
but if bydefault you have the select province like this
<select id="province"></select>
then you can use this script to default select
document.getElementById("province").innerHTML='<option value="Wahsington">Washington</option>';
so it depend on your code and your need. maybe if you have another case the problem should be solved in another way.
cmmiiw :)

Categories