Selected value using jQuery, PHP, MySQL - php

Does anybody know why I cannot specify the default value this way when it is pulling values from MySQL? I am ultimately trying to have it repopulate the dropdown lists with the appropriate $_REQUEST fields, so that editing can be easier.
$(document).ready(function(){
$("#region").load('getRecords.php?start=regions');
}); //jQuery initializations
...............
<select
class = "region"
name = "region"
onchange = "value = this.value;
$('.country').load('getRecords.php?region='+value)
">
<option>.....Reading database.....</option>
</select>
<script>$('.region').val('Africa');</script>
...............
This is the kind of info that gets placed
<option value = "">Select One Region-------</option>
<option value="Africa">Africa</option>
<option value="Americas">Americas</option>
<option value="Asia">Asia</option>
<option value="Australasia">Australasia</option>
<option value="Europe">Europe</option>
<option value = "">------or a Sub-Region------</option>
<option value="Alps">Alps</option>
<option value="Amazon">Amazon</option>
//ETC>>>>
I can only get the jQuery .val method to work for very simple setups.

Not quite sure what you are aiming for but maybe something like this will give you a nudge in the right direction (taken from the top of my head), probably has syntax errors.
$("select.region option[selected]").removeAttr("selected");
$("select.region option[value='Africa']").attr("selected", "selected");

try this:
document.getElementById("region").selectedIndex=0;//put index of the element which you want as default
and give id="region" in select tag

You need to have a valid <option value="Africa"> first before you can make that value become the default. <select> tags do not have arbitrary value attributes.

I recommend like below:
$('#region option[value="' + response_var[0].columnname + '"]').prop('selected', true);

Related

how to pass multiple data values in option list? [duplicate]

I have the next selectbox in HTML:
<select id="listbox-taskStatus" class="selectpicker">
<option status="0">In progress</option>
<option status="1">Not started</option>
<option status="2">Done</option>
<option status="3">Failed</option>
</select>
I want to read the attribute value from selected option.
If just to take the value, it's simple:
var value = $('#listbox-taskStatus').val();
But what should I do, if I want to get the attribute value from selected option?
I know, that .attr() must help, but when I tried to use it I've got the incorrect result.
I've tried the next:
var status = $('#listbox-taskStatus option').attr('status');
But the returned value is always 0 despite on fact I was selecting different option.
What's wrong, how to solve my problem?
Use :selected Selector
var status = $('#listbox-taskStatus option:selected').attr('status');
However, I would recommend you to use data- prefixed attribute. Then you can use .data()
var status = $('#listbox-taskStatus option:selected').data('status');
DEMO
var optionAttr1 = $('#listbox-taskStatus').find('option:selected').attr("status");
var optionAttr = $('#listbox-taskStatus option:selected').attr("status");

Append dropdown list result to formData object

In html I have a file input element within a form:
<input type="file" id="file-select" name="photos" />
Then in javascript I append this to my formData object (formData) as follows:
formData.append('photos', file, file.name);
Then finally in php I retrieve the transferred file.
$fileName = $_FILES['photos']['name'];
This works great.
However I also have a dropdown list in the same form in HTML:
<label>Select Year to Load File to:</label>
<SELECT name = "year_list">
<OPTION Value="2013">2013</OPTION>
<OPTION Value="2014">2014</OPTION>
<OPTION Value="2015">2015</OPTION>
<OPTION Value="2016">2016</OPTION>
</SELECT>
However it is not clear to me what the syntax I need to use to append the users selection to formData and also to retrieve the result in php. Can someone enlighten me as to how to do this?
I Do not want to use jquery.
I understand for the append statement I should use the syntax:
append(DOMString name, DOMString value);
But then what DOMString name and DOMString value would I use? And what would I use in $_POST in the php file?
Many thanks.
Thanks folks. After a bit of sleep and some further experimentation I got it to work as follows:
In javascript declared variables to get the values from the dropdown list and appended those values to the formData object as follows:
var sel_month_list = document.getElementById("month_list");
var month_list = sel_month_list.value;
var sel_year_list = document.getElementById("year_list");
var year_list = sel_year_list.value;
formData.append('month_list', month_list);
formData.append('year_list', year_list);
Then in php the following successfully retrieved the values:
$month = $_POST['month_list'];
$year = $_POST['year_list'];
Seems a little cumbersome but it worked. Feel free to pitch in if there is a more elegant way to achieve this.
Regards

Get JSON specific value using jQuery

I have a json which is generated through php and i assigned it to a JS variable like below,
var jsonObj = {
"ATF":["FLV"],
"Limecase":["FLV"],
"RCF":["FLV","HTTP","PALM","MOBILE","3GP","H263","F263","WMV"],
"Wave":["FLV","IPHONE","MOBILE"]
}
And also i have a selectbox in html as below,
<select id="selectbox" data-rel="chosen">
<option value='ATF'>ATF</option>
<option value='Limespace'>Limespace</option>
<option value='RCF'>RCF</option>
<option value='Wave'>Wave</option>
</select>
On changing, i am getting the selected value and passing it as below,
alert(jsonObj.selVal); but alert throws "undefined"
But if i give direct value jsonObj.ATF, it gives FLV.
Please suggest me on this.
var selVal = 'ATF'; // or from an input
alert(jsonObj[selVal]);

Loading a PHP file and set variable based on selection

I need to load the content of a PHP file using jquery based on what is selected by the user in one or more select fields.
I can use...
$("#first-choice").change(function() {
$("#second-choice").load("getter.php?choice=" + $("#first-choice").val() );
});
...to create the variable 'choice' and when the 'first-choice' field is set by the user.
However, what if I want to use 2 variables based on two drop down selectors, to set the variable 'choice' (based on the selection of #first-choice) and choice2 (based on the selection of #second-choice).
So I would want to load a PHP file something like getter.php?choice=first-choice&choice2=second-choice
here's how i would handle this situation..
don't treat your selects as ids. use a single class for all select options, then bind .change() to all selects using a class-based selector. if you do this, you can iterate over X number of selects, use their ids as the query argument variable and their values as each query value. I created a quick demo for you on jsfiddle. I also posted the code for you below....
Here is my demo on jsfiddle
<div>
<select class="php-options" id='first-choice' name='first-choice'>
<option value='1-0'>choose</option>
<option value='1-1'>1-1</option>
<option value='1-2'>1-2</option>
<option value='1-3'>1-3</option>
<option value='1-4'>1-4</option>
<option value='1-5'>1-5</option>
</select>
</div>
<div>
<select class="php-options" id='second-choice' name='second-choice'>
<option value='2-0'>choose</option>
<option value='2-1'>2-1</option>
<option value='2-2'>2-2</option>
<option value='2-3'>2-3</option>
<option value='2-4'>2-4</option>
<option value='2-5'>2-5</option>
</select>
</div>
<div id="request-url"></div>
$(document).ready(function(){
//treat your select options with classes,
//bind change event on each select
$('.php-options').change(function(e){
var urlValues = [],
parameterArgs = "";
//loop selects to build parameters
$('.php-options').each(function(i,v){
var optValue = $(this).val(),
optId=$(this).attr('id'),
parameter = ""+optId+"="+optValue;
urlValues.push(parameter);
});
//build parameter string
parameterArgs =urlValues.join("&");
//output query
$('#request-url').text('getter.php?'+parameterArgs);
});
});

PHP get dropdown value and text

<select id="animal" name="animal">
<option value="0">--Select Animal--</option>
<option value="1">Cat</option>
<option value="2">Dog</option>
<option value="3">Cow</option>
</select>
if($_POST['submit'])
{
$animal=$_POST['animal'];
}
I have a dropdown like this. What I want, I want to get selected value and text in button submit using PHP. I mean if it's selected 1st one. I want to get both 1 and Cat
Is there a reason you didn't just use this?
<select id="animal" name="animal">
<option value="0">--Select Animal--</option>
<option value="Cat">Cat</option>
<option value="Dog">Dog</option>
<option value="Cow">Cow</option>
</select>
if($_POST['submit'] && $_POST['submit'] != 0)
{
$animal=$_POST['animal'];
}
$animals = array('--Select Animal--', 'Cat', 'Dog', 'Cow');
$selected_key = $_POST['animal'];
$selected_val = $animals[$_POST['animal']];
Use your $animals list to generate your dropdown list; you now can get the key & the value of that key.
You will have to save the relationship on the server side. The value is the only part that is transmitted when the form is posted. You could do something nasty like...
<option value="2|Dog">Dog</option>
Then split the result apart if you really wanted to, but that is an ugly hack and a waste of bandwidth assuming the numbers are truly unique and have a one to one relationship with the text.
The best way would be to create an array, and loop over the array to create the HTML. Once the form is posted you can use the value to look up the text in that same array.
you can make it using js file and ajax call. while validating data using js file we can read the text of selected dropdown
$("#dropdownid").val(); for value
$("#dropdownid").text(); for selected value
catch these into two variables and take it as inputs to ajax call for a php file
$.ajax
({
url:"callingphpfile.php",//url of fetching php
method:"POST", //type
data:"val1="+value+"&val2="+selectedtext,
success:function(data) //return the data
{
}
and in php you can get it as
if (isset($_POST["val1"])) {
$val1= $_POST["val1"] ;
}
if (isset($_POST["val2"])) {
$selectedtext= $_POST["val1"];
}

Categories