On my site, the user selects a person, and when the selection is made, it populates demographics about that patient below, but gives the user the options to change each demographic value. I have an html select statement for a "Prep RN" that is populated from a table of RNs when the form is loaded, but when I select a patient, I can't get it to change the select to the RN that is stored in the database and is contained in the list:
$.ajax({
url: 'php/pullselectedpatient.php',
type: 'POST',
dataType: 'json',
cache: false,
data: {Patient_UID: tempPatient_UID},
success: function(data) {
if (data.Prep_RN == 'Unassigned') {
//if unassigned, set option to unassigned
$('#selectpreprn').val('Unassigned');
} else {
//if assigned, change to selected RN
$('#selectpreprn').val(data.Prep_RN);
},
error: function() {
alert("ajax call failed.");
}
});
This code fills the option list successfully, but in case it's part of the problem, here it is:
<label for='selectpreprn'>Prep RN: </label>
<select id="selectpreprn">
<option value="empty"></option>
<?php
require('php/pullrns.php');
//loop and add the patients to the drop down list
foreach($result_rns->fetch_all(MYSQLI_ASSOC) as $row) {
echo "<option value='", $row['RN_UID'], "'>", $row['RN_UID'], "</option>";
}
?>
</select>
This results with the select filled with a 'blank', 'Unassigned', and then 3 names to choose from.
Also, this is my first time posting to this site (which is amazingly helpful), so I hope I provided everything. I have spent at least 3 hours trying different things to make this work.
To reiterate, the problem is that it doesn't select the option in the select tag when the patient is selected. It just stays blank.
This code works as intended, the issue was further down my page where I was inadvertently overwriting this selector. I copied and pasted similar code, and it got me in trouble =(
Related
I have a form when user select value from dropdown it can direct them to another page.but in the next page I want the selected value to be pass to another dropdown.
for instance: user select country; then go straight to the next page where there is a dropdown already selected the country value. then only they can do the next process...
note:(list item in the dropdown is same as the 1st)
hope anyone can help me.
thanks.
Simply you can store the first-page dropdown values in Session or Cookies. If you have less important things like country, cities, and address locations then you can simply use the Cookies to store the data.
You can use url parameter to pass the selected value from one page to another.
http://www.test.com/next_page.php?selected_value=12
Like above example you can pass the selected drop down value to another page in php.
You can use
$_GET['selected_value']
in next page to get selected value.
You have to get select value by doing onChange event via jquery.
After jquery, you need to pass that value to particular change event.
Lets say you have this select box
<select id="select1">
<option value"">Select</option>
<option value"1">A</option>
<option value"1">b</option>
<option value"1">C</option>
</select>
While if any value changes you need to navigate to that page taking that option value.
So this is how you can do it via jquery.
$("#select1").change(function(){
//alert();
var changedval = $(this).val();
var url = "pagename/countryname="+changedval;
window.location.href= url;
/* $.ajax({
url: url,
type: 'GET',
data: {'image_name': image_name, 'id' : id},
success: function (data) {
$("#profile_picture_display_outer").hide();
},
error: function (data) {
}
}); */
});
You can even get values via ajax as well or you can directly redirect to that particular url via appending current selected value.
Additional if you are using Codeigniter 3 then this is how you can mention routes in routes.php
$route['pagename/(:any)'] = 'Controller/methodname/$1';
Could you help me? I m working in a client CRUD in PHP, JS and AJAX but I am stuck.
My problem is in client edit form. When I click in edit client, all data of that client is loaded fine into the form, except one of the two selectpicker. I have two selectpicker, one for cities (#idprovincia) and the other for zones (#idmunicipio). When clicking on edit client the procedure should be:
1) Load all cities in #idprovincia selectpicker (works fine)
2) Load all zones of the selected city in #idmunicipio selectpicker (works fine)
3) Select and show as selected the client ´s zone in #municipio selectpicker.
The third point is not working.. I ´ve read about it but I can not find a correct solution for me, so i ´d appreciate your help.
I share my code for showing client data:
function mostrar(idcliente)
{
$.post("../ajax/clientes.php?op=mostrar",{idcliente : idcliente}, function(data, status)
{
data = JSON.parse(data);
mostrarform(true);
$("#idpago").val(data.idpago);
$('#idpago').selectpicker('refresh');
$("#idprovincia").val(data.idprovincia);
$('#idprovincia').selectpicker('refresh');
$("#idmunicipio").val(data.idmunicipio);
//$('#idmunicipio').selectpicker('refresh');
$("#idcliente").val(data.idcliente);
$("#tlfiscal").val(data.tlfiscal);
$("#nombre").val(data.nombre);
$("#zona").val(data.zona);
$("#telefono").val(data.telefono);
$("#movil").val(data.movil);
$("#fax").val(data.fax);
$("#contacto").val(data.contacto);
$("#domicilio1").val(data.domicilio1);
$("#cp").val(data.cp);
var provinciaID=data.idprovincia;
var municipioID = data.idmunicipio;
var data = {'provinciaID': provinciaID};
#this ajax sends client ´s ID to another file and gets the list of zones of a city and loads them into (#idmunicipio) selectpicker
$.ajax({
type:'POST',
url:'../ajax/clientes.php?op=selectMunicipio',
data: data,
contentType: "application/x-www-form-urlencoded",
success: function(data){
$("#idmunicipio").html(data);
$('#idmunicipio').selectpicker('refresh');
}
});
})
#now that I have all zones loaded I want to select the client ´s one and show it as selected in the user interface but this code doesn ´t work...
$("#idmunicipio").val(municipioID);
$('#idmunicipio').selectpicker('refresh');
}`
As you can read from documentation
https://silviomoreto.github.io/bootstrap-select/methods/#selectpickerval
The right way to do this would be
$('.selectpicker').selectpicker('val', 1);
For multiple values you can add array of values
$('.selectpicker').selectpicker('val', [1 , 2]);
So maybe as you select the option you could fill in the hidden input with the actually selected value?
Use on('change') or addEventListener('change') on any of them and fill input with the selected option (choose the value with the :selected selector).
Hope it helps ;)
Problem solved:
Two lines at the end should be:
$('#idmunicipio').selectpicker('val', municipioID);
$('#idmunicipio').selectpicker('refresh');
This is the screen
the php file named "fetching_book_title_for_barcode.php".
<?php
require_once('db.php');
$response=array();
$sql="select book_title from book where barcode_id LIKE '%".$_POST['value']."%'";
$result=mysql_query($sql);
if(mysql_num_rows($result)){
$book_title=mysql_fetch_assoc($result);
$response["book_title1"]=$book_title;
}
echo json_encode($response);
?>
Here is the java script file with some ajax call.
var searchTimeout;//Timer to wait a little before fetching the data
$("#barcode_id_textBox").keyup(function() {
var searchKey = this.value;
clearTimeout(searchTimeout);
searchTimeout = setTimeout(function() {
barcodeTextboxFill(searchKey);
}, 400); //If the key isn't pressed 400 ms, we fetch the data
});
function barcodeTextboxFill(searchKey){
$.ajax({
url: 'fetching_book_title_for_barcode.php',
type: 'POST',
dataType: 'json',
data: {value: searchKey},
success: function(data) {
$("#book_title_textBox").val(data);
}
});
}
The HTML
<input type="text" id="barcode_id_textBox">
<input type="text" id="book_title_textBox">
`I am making Library management system for my university according to their requirements.
In MySql database i have a table of book in which i inserted the book records in which one of the column is for barcode id and one of the column is for book title.
I have an html page on which i have 2 inline textboxes, one of which is for barcode id and the other one is for book title.
Now i want that when barcode id is entered then at the same time the book title fetched from the database and showed in the book title's textbox.
I tried alot on it but i didn't find any solution. I tried it through ajax but i didn't get the required answer. what is the problem in it?
everyone help would be appreciated.
Thanks in advance.
Use AJAX and jQuery.
In your text box add an onChange like so, <input type="text" id="barcodeTextBox" onChange="BarcodeBoxFill()">, the onChange will call the JS function BarcodeBoxFill() whenever the text box is altered.
Then the JS function should take the input from the box, var text = $('#barcodeTextBox').val()
Then on the same function should be your AJAX call which passed the value of the text box as a parameter. Then in the page the AJAX calls will be some SQL that gets the right value for the other box, (in this case the book title). As the success part of the AJAX you can change the value of the other text box,
success: function(data) {
$('#bookTitleTextBox').val(data);
}`
I'm using Bootstrap v3 and Codeigniter... In my app, there is two select option element, for choosing state and city. I'm using ajax and when a state is selected, populated second element with related cities:
$('#state').change(function(){
var state_id = $('#state').val();
if(state_id != ""){
var post_url = "<?php echo base_url(); ?>student/get_cities/" + state_id;
$.ajax({
type: "POST",
url: post_url,
cache: true,
success: function(cities){ //calling the response json array 'cities'
$('#city').empty();
$.each(cities, function(id, city){
$('#city').append($("<option></option>").val(id).text(city));
}); //each
}
}); //ajax
}
}); //change
everything is good, just bootstrap select option element has a bad view on other browsers! (it's good just on chrome). so I decide to use bootstrap-select plugin: Bootstrap-Select
My question is: How could I populate second select option for cities? In fact, It will be populate, but so the bootstrap-select using dropdown, I must also populate it.
thanks for attention...
EDITED:
<select class="form-control selectpicker" name="state" id="state">
<!--in a foreach loop, echo all states with the proper value-->
</select>
<select class="form-control selectpicker" name="city" id="city">
</select>
SOLVED: I find the solution... simply add one line after populating select element!
$('.selectpicker').selectpicker('refresh');
As I understand your question the city select will populate from the AJAX but it loses the selectpicker functionality?
Maybe that is due to the $('#city').empty() line?
If so: then could you try starting again with a new select? E.g.
replace: $('#city').empty();
with this code
$('#city').remove();
$('#state').after( $('<select></select>').addClass('form-control selectpicker').attr({'id' : 'city', 'name' : 'city'}) );
//do your ajax stuff and add the options
$('#city').selectpicker(); //initialise it
*untested
(If the above works it may be overkill and you could simply solve the problem by re-initialising the city select after re-loading it. I.e you'd just need the $('#city').selectpicker(); line).
I have a select input with the following code:
<select name="color" id="color" multiple class="form-control chzn-select" tabindex="8" onchange="autosave(this.id,this.value)">
It is successfully sending the function ID and select value, but seeing as one can select multiple items, it's having an issue. I can select up to 3 items without a problem, but attempting to select a 4th is causing it to pass the value of the first selected item. Not the most recently selected item. Here's the function, which sends other information such as title and date (both text inputs):
function autosave(inputid,values) {
var dataObj = {};
dataObj[inputid] = values;
$.ajax({
type: "POST",
url: "save.php",
data: dataObj,
success: function(msg) {
$('#autosavenotify').text(msg);
console.log('success');
}
})
}
HTML wise I am using Bootstrap3 if that makes a difference and here's how I'm populating the select options:
<?php
$colors = array('Red','Blue','Yellow','Purple','Green','Orange');
foreach($colors as $c) {
$selected = '';
if(in_array($c, $_SESSION['array']['colors'])) {
$selected = 'selected';
}
echo '<option value="'.$c.'" '.$selected.'>'.$c.'</option>';
}
?>
Any ideas why this might be happening? My save.php page is placing all items successfully within the array, the ajax is just sending the incorrect value for some reason.
Because you're already using jQuery, you'd probably be better off just using $(this).val( ) to get the selected options from your select. Here's a fiddle I came up with using your provided code: http://jsfiddle.net/y7NfF/1/
Another route you might consider taking would be using jQuery's .serialize() or .serializeArray() function to get all values of your form when submitting the data through ajax. However, if you want to do one element at a time, your method works just fine.
Here are a couple of links to those functions:
http://api.jquery.com/serialize/
http://api.jquery.com/serializeArray/