I have two fields, one of which has the jQuery autoComplete plugin.
<input type='text' name='primary_diagnosis' id='icd1-diagnosis'/>
<input type='text' name='ICD_No1' id='icd1-num' />
$(document).ready(function(){
$("#icd1-diagnosis").autocomplete("autocomplete-icd.php",
{
selectFirst: true
});
});
Is there a way to automatically fill up the second text input once a value has been selected for the first? For example, selecting "Dengue fever [classical dengue]" for the first text input, then query the database for certain value to yeild "A90" as the value for the second text input.
Here's autocomplete-icd.php
<?php
include('config.php');
$q=$_GET['q'];
$my_data=$q;
$sql=mysql_query("SELECT col9 FROM tb_data_icd WHERE col9 LIKE '%$my_data%' ORDER BY col9",$con);
if($sql)
{
while($row=mysql_fetch_array($sql))
{
$col9=$row['col9'];
echo "$col9"."\n";
}
}
?>
You should be able to use the change event to fire off some javascript to update the second input's value. Something like this:
$("#icd1-diagnosis").change(function(){
//retrieve your value
var val = 'sample';
$('#icd1-num').val(val);
});
Related
I have two input fields. One is to search auto suggest product names using jquery.autocomplete, and in my database I have column name product left, and I want to display it in the second input, is that possible?
For example: I have a product called apple with product left of 30. apple will display in the first input field after typing, and at same time 30 must appear in the second field.
<form action="sales.php" method="post">
<input name="productlist" type="text" id="productlist" size="20"/>
<input name="productleft" type="text" value=""/>
</form>
call jquery ui
<script type="text/javascript" src="js/jquery.autocomplete.js"></script>
<script>
$(document).ready(function(){
$("#productlist").autocomplete("psuggest.php", {
selectFirst: true
});
});
</script>
inside psuggest.php
<?php
$q=$_GET['q'];
$my_data=mysql_real_escape_string($q);
$mysqli=mysqli_connect('localhost','root','','saganatracker') or die("Database Error");
$sql="SELECT pdesc FROM products WHERE pdesc LIKE '%$my_data%' ORDER BY pdesc";
$result = mysqli_query($mysqli,$sql) or die(mysqli_error());
if($result)
{
while($row=mysqli_fetch_array($result))
{
echo $row['pdesc']."\n";
}
}
?>
Use parameter onselect from .autocomplete() to bring the number of item left :
$(document).ready(function(){
$("#productlist").autocomplete("psuggest.php", {
selectFirst : true,
onselect : function(value, data) {
$.post("myPhPfileWhichBringNumberOfItem.php", { product : value }, function(count) {
$("#productleft").val(count); // Don't forget to mention an id for the input first
}
}
});
});
Use JQuery post at the moment a value is selected, and then use a php script which open your database, go to the table and select number of product left (not sure if you should use value or data, please someone correct if I am wrong).
I am using php and getting data from mysql. I would like to have a dropdown of countries and then when the country is selected then the prefix must be the result either in a text box on the same line or just below the dropdown box.
so far my code gives me the prefix concatenated with prefix eg
Zimbabwe-263
here is the code
<?php
include 'config.php';
$query="SELECT countryname, countryprefix FROM cc_country";
$result = mysql_query($query);
$options="";
echo "<select name='processor' value=''>
<option>Select A Country</option>";
while($nt=mysql_fetch_array($result))
{
echo "<option value='".$nt['countryprefix']."'>".$nt['countryname']."-".$nt['countryprefix']."</option>";
}
If you want the selected value to display in textbox you can use jquery for that.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<sctipt>
$('select').change(function(){
var value=$(this).val();
$('#text').val(value);
});
</script>
Create a textbox with id text for this
You will need to fire another query that will fetch the country prefix on selection of the country.That is pass the value of your select box to he sql query.You can do this using jquery or javascript by giving an id to the select box you are using .
var countryname = $('#yourId').val();
then do a ajax or jquery post to a PHP file which will have the blow query.
For example:
$query="SELECT countryprefix FROM cc_country where countryname='your post value";
then below your while loop add a text field which will display the value returned by your above query
$('select').change(function(){
var value = $(this).val();
$('.textbox').val(value); // html <input type="text" class="textbox">
});
So, here's the deal. I have an html table that I want to populate. Specificaly the first row is the one that is filled with elements from a mysql database. To be exact, the table is a questionnaire about mobile phones. The first row is the header where the cellphone names are loaded from the database. There is also a select tag that has company names as options in it. I need to trigger an onChange event on the select tag to reload the page and refill the first row with the new names of mobiles from the company that is currently selected in the dropdown list. This is what my select almost looks like:
<select name="select" class="companies" onChange="reloadPageWithNewElements()">
<?php
$sql = "SELECT cname FROM companies;";
$rs = mysql_query($sql);
while($row = mysql_fetch_array($rs)) {
echo "<option value=\"".$row['cname']."\">".$row['cname']."</option>\n ";
}
?>
</select>
So... is there a way to refresh this page with onChange and pass the selected value to the same page again and assign it in a new php variable so i can do the query i need to fill my table?
<?php
//$mobileCompanies = $_GET["selectedValue"];
$sql = "SELECT mname FROM ".$mobileCompanies.";";
$rs = mysql_query($sql);
while ($row = mysql_fetch_array($rs)) {
echo "<td><div class=\"q1\">".$row['mname']."</div></td>";
}
?>
something like this. (The reloadPageWithNewElements() and selectedValue are just an idea for now)
Save the value in a hidden input :
<input type='hidden' value='<?php echo $row['cname'] ?>' id='someId' />
in your JavaScript function use the value from this hidden input field:
function reloadPageWithNewElements() {
var selectedValue = document.getElementById('someId').value;
// refresh page and send value as param
window.location.href = window.location + '?someVal='+ selectedValue;
}
Now again in your PHP file retrieve this value from url for use as:
$someVal = null;
if (isset($_GET['someVal']) {
$someVal = $_GET['someVal'];
}
see if this works!!!
The best option would be using AJAX.
reloadPageWithNewElements() is a function which calls a page of your own site which will return the data you would like to put in your table.
If you are using JQuery, AJAX is very easy to implement:
$.ajax({
url: '/yourPage',
data: { selectedCompany: $('.companies').val() },
success: function(result) {
//delete your tablerows
$(".classOfTable tr").remove();
//put the result in your html table e.g.
$('.classOfTable').append(result);
},
dataType: html
});
The browser will send a request to "/yourPage?selectedCompany=Google" or something
All you have to do is let this page print out only html (maybe even easier is to print only the tablerow (<tr>).
If you have any further questions, please ask.
I would use jQuery to do it.
first You need to add 'id' attribute to every option tag
<option id="option1">
<option id="option2">
and so on...
then with jQuery:
$('<option>').change(function() {
var id=$(this).attr('id');
...save data here (i.e: with ajax $.post(url, { selected_id: id}, callback }
});
I'm still trying to learn jquery so bear with me. I have a dual select box that only works if I select all the results of the second select box after I move them there. What I want is when the first box transfers values to the second second select box, it doesn't require highlighting the options, but posts that second select box on form submit. Here is what
I have:
HTML:
<span id="dualselect1" class="dualselect">
<select name="select1[]" multiple="multiple" size="10">
<?php
$c='0';
foreach($lp_name as $lpn){
echo '<option value="'.$lp_id[$c].'">'.$lpn.' ('.$lp_url[$c].')</option>';
$c++;
}
?>
</select>
<span class="ds_arrow">
<span class="arrow ds_prev">«</span>
<span class="arrow ds_next">»</span>
</span>
<select name="select2[]" multiple="multiple" size="10">
<option value=""></option>
</select>
</span>
JQUERY:
<script type="text/javascript">
jQuery(document).ready(function(){
var db = jQuery('#dualselect1').find('.ds_arrow .arrow'); //get arrows of dual select
var sel1 = jQuery('#dualselect1 select:first-child'); //get first select element
var sel2 = jQuery('#dualselect1 select:last-child'); //get second select element
sel2.empty(); //empty it first from dom.
db.click(function(){
var t = (jQuery(this).hasClass('ds_prev'))? 0 : 1; // 0 if arrow prev otherwise arrow next
if(t) {
sel1.find('option').each(function(){
if(jQuery(this).is(':selected')) {
jQuery(this).attr('selected',false);
var op = sel2.find('option:first-child');
sel2.append(jQuery(this));
}
});
} else {
sel2.find('option').each(function(){
if(jQuery(this).is(':selected')) {
jQuery(this).attr('selected',false);
sel1.append(jQuery(this));
}
});
}
});
});
PHP:
if(isset($_POST['submit'])) {
var_dump($_POST['select2']);
}
Like I said, I have this sort of working. But, if I send a value to select2, I have to highlight it before I submit or else it wont POST. Any ideas?
I've come across this before and you have a couple of options. Using JS you can either push all of the values in the second box into a hidden field as well, or also using JS you can select all of the values in the second box as an onsubmit handler on the form.
I've actually done the latter before, and it works just fine.
Ultimately, a select box (multi or single select) only sends the values that are selected -- so that's why it only works if you select them first. It works a lot like checkboxes do, where the unchecked values just don't get posted.
This should "select" all of them:
$('#myform').submit(function() {
var sel2 = $('#dualselect1 select:last-child');
sel2.find('option').each(function(){
$(this).attr('selected',true);
});
});
OR this would put them into a series of hidden fields:
$('#myform').submit(function() {
var sel2 = $('#dualselect1 select:last-child');
sel2.find('option').each(function(){
var hidden = $('<input type="hidden" name="selectedOptions[]"/>');
hidden.val($(this).val());
sel2.after(hidden);
});
});
and then in PHP you'd get these values by using $_POST['selectedOptions'];
You can simply modify this line jQuery(this).attr('selected',false); in sel1.find....block
with jQuery(this).attr('selected',true); .
In this mode al selection moved from first to second box is automatically selected,
so when you submit form, you directly pass this value.
Try it.
this should work:
if(t) {
sel1.find('option').each(function(){
if(jQuery(this).is(':selected')) {
jQuery(this).attr('selected',true);
var op = sel2.find('option:first-child');
sel2.append(jQuery(this));
}
});
}
I have a form with some fields of type text and 2 fields (name and second name) that have a value by default, and these 2 fields are of type="hidden".
Now, I would like to add a link on the form "Fill an order for another person". If the user click on this link the fields name and second name must be of type text to allow the user enter a name/second name. I tried to use jQuery to remove the existing hidden field, and create a new textbox in it's place, with the same value as the hidden one.
Here is an example of what I want: http://jsfiddle.net/FT2B3/1/
Can you tell me whats wrong? Thanks in advance.
(...)
if ($field_label=="First name")
{
return sprintf("<div class='ginput_container'>$fname<input name='n1' id='$fname1' type='hidden' value='$fname' class='ginput_container/></div>");
?>
<script type="text/javascript">
$(function(){
$('#nform').click(function()
{
$nbox1 = $("<div class='ginput_container'><input id='$fn1' type='text' class='ginput_container'/></div>").val($('#fname1').val());
$('#fname1').after($nbox1).remove();
});
});
</script>
Link
<?php
}
(...)
How about this?
HTML:
<input id="hiddenname" type="hidden" value="secret value" /><br />
Show me the hidden field!
Javascript:
$(function() {
$('#showLink').click(function() {
$('#hiddenname').prop('type', 'text');
});
});
Because a div element is wrapping input element when you try to set value with .val() jQuery tries to set value to that div element. You can set the value while you create the input field like this;
$nbox1 = $("<div class='ginput_container'><input id='$fn1' type='text' class='ginput_container' value='" + $('#fname1').val() + "' /></div>");