I have a select box which populates data based on selection on other select boxes.
I am able to populate data. But how to make a value selected and do onchange event during editing of the form. ie, updation.
I am facing difficulty in making it selected based on database entry and to do onchange. What I am able to do it just the populating data from DB based on change.
you can easly create it with jquery, here's the example:
$('#id_of_your_select').change(function(){
var val = $('#id_of_your_select option').attr('selected', 'selected');
$.post({
url: "your_url",
data: {
value: val; // get the input post of value in server side
},
success: function(result){
// loop a json array and use append function of the jquery on the second select box
}
})
});
i can only explain like that cause there's no code that you give.
Related
I have select control and input with jQuery UI autocomplete.
<select name="labels">
...some options
</select>
<input type="attr_type_input" class="attr_autocomplete ui-autocomplete-input">
<input type="attr_value_input" class="attr_autocomplete ui-autocomplete-input">
The values shown in autocomplete should depend on the value of select.
My javascript code looks like:
$(document).ready(function(){
$( ".attr_autocomplete" ).each(function(){
var type=$(this).attr("type");
$(this).autocomplete( {
serviceUrl: '?',
params: {
action: 'attr_autocomplete',
type:type,
label:$("select[name=labels]").val()
}
});
});
});
The problem is that label value passed to server is always the same, even if I change the select. As far as I understand this data structure is formed once on page load.
The question is - how to pass actual value of select?
You are correct, this structure is being initialised with the starting value of the select on page load. You can switch to using a function for the source parameter:
$(".attr_autocomplete" ).each(function(){
var type=$(this).attr("type");
$(this).autocomplete({
source: function(req, autoCallback) {
$.get('?', {
term: req.term,
action: 'attr_autocomplete',
type:type,
label:$("select[name=labels]").val()
}, function(response) {
//perform any transforms needed on the data, then:
autoCallback(response);
//autoCallback is expecting an array of strings to display
});
}
});
});
This function is then executed whenever the autocomplete wants data, and so it will read the value of the select each time, rather than when it's initialised.
you are not retrieving the value of select after change
try this way
$("select[name=labels]").change(function(){
var changeValue=this.value;
});
demo
I just had this issue and came up with this solution. Just another way to handle it.
If you want to have an autocomplete result set based on the value in another field in the form you can do this:
$(document).ready(function(){
$('#alpha').change(function(){setLibraryAutoComplete();});
setLibraryAutoComplete();
});
function setLibraryAutoComplete(){
$('#beta').autocomplete({source: "TypeAhead?param1=ABC¶m2="+$("#alpha").val()});
}
This sets up the auto complete on page load with the value from the field but then also causes the autocomplete call to update any time the source field value changes.
I have code in php to query database and populate records in a dropdown list which a user will pick. I also have javascript which populates the second dropdown list based on the selection of the first box.
How do I tie these two together so user selects value "x" from dropdown list, and the php will query the database "WHERE.... = SselectedValue"
Are there any examples online? I can't seem to find any.
Write an ajax/phpquery call to second dropdown on change method of first dropdown. Eg-
$("#firstDdwn").on('change',function(){
var val=$(this).val();
//php will query the database "WHERE.... = val"
//on success of data received from query, populate second dropdown
})
Ajax code is supposed to look something like this-
$.ajax(
{
url:"your_controller_URL",
data: val
success:function(result){
//populate 2nd dropdown with result
},
error:function(){
alert("No data received");
}
});
Link for brief info on jquery ajax --- http://www.w3schools.com/jquery/ajax_ajax.asp
I'm currently working a page that lists a lot of users inside a table using a role id.
The role id value is gathered using the select dropdown and then pressing submit. This shows the table below with all the users with that specific role. The way this is done is that when the form is submitted, the id is returned inside the $_POST of my select box. What i want to do is not use a submit button at all, I want to be able to scroll through the different roles, and when I click on a different role within the select, it update the table below automatically without needing to post.
Let's say my select box is called role:
<select id="role">
And the options are:
id: 1, name: blah1
id: 2, name: blah2
I have been working on trying to get this work using ajax and posting the data back to PHP using the change function. Here is my code:
$(document).ready(function() {
$('#role').change(function(){
var role_id = $('#role').val();
$.ajax({
url: 'assign-roles-2.php',
data: {"roleID":role_id},
type: 'post',
success:function(data){
$('#section').slideDown();
}
});
});
$('#role').trigger("change");
});
I have this in PHP also:
$role_id = trim($_POST["roleID"]);
But this returns as null. How would I go about getting the value I get from the select input and use it to set this role_id variable in PHP without submitting a form?
I am assuming that your description of your option elements: id: 1, name: blah1 does not reflect their markup and that they are defined like so...
<option value="1">blah1</option>
If so, then the following should work fine.
var role_id = $('#role').find('option:selected').val();
This is kind of a strange question, but this requirement came up about showing only those values inside a table which were selected using a dropdown list, I used dataTable plugin to display this data and to achieve the requirement I used the search[Filter plugin] feature. So whenever I selected any value from my dropdown list I entered it in the search input tag of dataTable. However, filtering of the data would not occur unless I changed the added data myself.
Have used the following script to add the selected value in the search box of DataTable; this function is triggered using onchange in the HTML tag:
function changeService(val) {
var service = val;
$('#example_filter').find('input').val(service);
}
This function adds the value in the required search input tag - I can see the value in the textbox; but the data within the dataTable is not filtered until I change this...
Instead of trying to hack around the ui, why not use the DataTables api for this:
http://datatables.net/api#fnFilter
So when you're dropdown list changes, you could call the fnFilter function on your datatable:
$('#dropdownlist').on('change', function() {
var val = $(this).val();
var dataTable = $('#table').dataTable();
dataTable.fnFilter(val);
});
Forgive me if this is already 'somewhere' on StackOverflow, but I don't 100% know exactly what it would come under...
I'm trying to retrieve information from a WebService, store this in an array, and then for each <select> within my ASP.Net Datalist, populate it with the array AND have binding attached to an OnChange event.
In other words, I have an array which contains "Yes, No, Maybe"
I've an ASP.Net Datalist with ten items, therefore I'd have 10 <Select>s each one having "Yes, No, Maybe" as a selectable item.
When the user changes one of those <Select>s, an event is fired for me to write back to the database.
I know I can use the [ID=^ but don't know how to:
a) Get the page to populate the <Select> as it's created with the array
b) Assign a Change function per <Select> so I can write back (the writing back I can do easy, it's just binding the event).
Any thoughts on this?
I have built a simple example that demonstrates, I think, what you are attempting to accomplish. I don't have an ASP.Net server for building examples, so I have instead used Yahoo's YQL to simulate the remote datasource you would be getting from your server.
Example page => http://mikegrace.s3.amazonaws.com/forums/stack-overflow/example-multiple-selects-from-datasource.html
Example steps:
query datasource to get array of select questions
build HTML of selects
append HTML to page
attach change event listener to selects
on select value change submit value
Example jQuery:
// get list of questions
$.ajax({
url: url,
dataType: "jsonp",
success: function(data) {
// build string of HTML of selects to append to page
var selectHtml = "";
$(data.query.results.p).each(function(index, element) {
selectHtml += '<select class="auto" name="question'+index+'"><option value="Yes">Yes</option><option value="No">No</option><option value="Maybe">Maybe</option></select> '+element+'<br/>';
});
// append HTML to page
$(document.body).append(selectHtml);
// bind change event to submit data
$("select.auto").change(function() {
var name = $(this).attr("name");
var val = $(this).val();
// replace the following with real submit code
$(document.body).append("<p>Submitting "+name+" with value of "+val+"</p>");
});
}
});
Example datasource => http://mikegrace.s3.amazonaws.com/forums/stack-overflow/example-multiple-selects-from-datasource-datasource.html
Example loaded:
Example select value changed: