How to Add scroll bar to html autocomplete datalist element? - php

Here is my PHP Code, I am trying to add a scroll bar to my autocomplete search, I have retrieved data from database and wanted to add a scroll bar.:
<?php
include('connection.php');
$result1 = mysql_query("select * from legal_pashto");
$result2 = mysql_query("select * from legal_dari");
$result3 = mysql_query("select * from pashto_pashto");
$result4 = mysql_query("select * from dari_pashto");
?>
<datalist id="words">
<?php while($row = mysql_fetch_assoc($result1)){?>
<option value="<?php print $row['english_word']; ?>
<option value="<?php print $row['pashto_word']; ?>
<option value="<?php print $row['pashto_word1']; ?>
<option value="<?php print $row['pashto_word2']; ?>
<option value="<?php print $row['pashto_word3']; ?>
<option value="<?php print $row['pashto_word4']; ?>
<?php }?>
<?php while($row2 = mysql_fetch_assoc($result2)){?>
<option value="<?php print $row2['english_word']; ?>
<option value="<?php print $row2['dari_word']; ?>
<option value="<?php print $row2['dari_word1']; ?>
<option value="<?php print $row2['dari_word2']; ?>
<option value="<?php print $row2['dari_word3']; ?>
<option value="<?php print $row2['dari_word4']; ?>
<?php }?>
<?php while($row3 = mysql_fetch_assoc($result3)){?>
<option value="<?php print $row3['pashto_word']; ?>
<option value="<?php print $row3['pashto_meaning']; ?>
<option value="<?php print $row3['pashto_meaning1']; ?>
<option value="<?php print $row3['pashto_meaning2']; ?>
<option value="<?php print $row3['pashto_meaning3']; ?>
<option value="<?php print $row3['pashto_meaning4']; ?>
<?php }?>
<?php while($row4 = mysql_fetch_assoc($result4)){?>
<option value="<?php print $row4['dariword']; ?>
<option value="<?php print $row4['darimeaning']; ?>
<option value="<?php print $row4['darimeaning1']; ?>
<option value="<?php print $row4['darimeaning2']; ?>
<option value="<?php print $row4['darimeaning3']; ?>
<option value="<?php print $row4['darimeaning4']; ?>
<?php }?>
</datalist>

I am not very good when it comes to html but in my opinion adding your PHP code may help other help you. Just saying.

Related

How to get the second value in the echo in PHP?

I have some options to select and would like to set some textinputs to visible or hidden depending on what user selects. I have the functionality already but in this case I need to take the second value of the echo and check if its equal to something, I can currently only check the first value of the echo:
<select id="type_id" name="device_type_id" onchange="if (this.value==''){this.form['device_imei_textinput'].style.visibility='hidden'}else{this.form['device_imei_textinput'].style.visibility='visible'};">
<option value='Select'>Select</option>
<?php foreach ($result as $row) { ?>
<option value="<?php echo $row['id'] . $row['serial_or_imei'] ?>"> <?php echo $row['name']; ?> </option>;
<?php } ?>
</select>
So, I need to get ONLY the value of $row['serial_or_imei'] and compare onchange="if (this.value=='') , how can I do that?
EDIT: further explanation
I need to read the value of $row['serial_or_imei'] which could be empty, 'serial' OR 'imei', so, one of these three.
P.S: I must keep the $row['id'] in the value attribute because I am passing that value later to server so dont suggest removing that.
You can add one attribute to option element and test with it. something like
<select id="type_id" name="device_type_id" onchange="if (this.getAttribute('data')==''){this.form['device_imei_textinput'].style.visibility='hidden'}else{this.form['device_imei_textinput'].style.visibility='visible'};">
<option value='Select'>Select</option>
<?php foreach ($result as $row) { ?>
<option data="<?php echo $row['serial_or_imei'] ?>" value="<?php echo $row['id'] . $row['serial_or_imei'] ?>"> <?php echo $row['name']; ?> </option>;
<?php } ?>
</select>
You can compare the value of an array in the onchange by assign the value to a variable which will be a quite neat format as
<?php $value = echo $row['serial_or_imei']; ?>
<select id="type_id" name="device_type_id" onchange="if (this.value=='<?php empty($value)?>'){this.form['device_imei_textinput'].style.visibility='hidden'}else{this.form['device_imei_textinput'].style.visibility='visible'};">
<option value='Select'>Select</option>
<?php foreach ($result as $row) { ?>
<option value="<?php echo $row['id'] . $row['serial_or_imei'] ?>"> <?php echo $row['name']; ?> </option>;
<?php } ?>
</select>
You add a new custom attribute serial and supply the value of serial_or_imei to it and then compare in javascript with onchange="if (this.value=='')
<select id="type_id" name="device_type_id" onchange="if (this.value==''){this.form['device_imei_textinput'].style.visibility='hidden'}else{this.form['device_imei_textinput'].style.visibility='visible'};">
<option value='Select'>Select</option>
<?php foreach ($result as $row) { ?>
<option value="<?php echo $row['id'] . $row['serial_or_imei'] ?>" data-serial="<?php echo $row['serial_or_imei'] ?>"> <?php echo $row['name']; ?> </option>;
<?php } ?>
</select>
EDIT: Attribute “serial” is not allowed on element “option”. Changed this to data-seial.
You say you need the values back to server because they change dynamically. A clean way would be to have a dedicated hidden field:
<?php foreach ($result as $row) { ?>
<input type="hidden" name="map[<?php echo $row['id']; ?>]" value="<?php echo $row['serial_or_imei']; ?>">
<? } ?>
Here's a full self-contained script to illustrate it:
<?php
$random_serial_or_imei = range(1000, 9999);
shuffle($random_serial_or_imei);
$result = [];
for ($i = 0; $i < 5; $i++) {
$result[] = [
'id' => $i,
'serial_or_imei' => $random_serial_or_imei[$i],
'name' => "Name #$i",
];
}
?>
<select name="device_type_id">
<option value="">Select</option>
<?php foreach ($result as $row) { ?>
<option value="<?php echo $row['id']?>"><?php echo $row['name']; ?></option>
<?php } ?>
</select>
<?php foreach ($result as $row) { ?>
<input type="hidden" name="map[<?php echo $row['id']; ?>]" value="<?php echo $row['serial_or_imei']; ?>">
<? } ?>
This prints something like:
<select name="device_type_id">
<option value="">Select</option>
<option value="0">Name #0</option>
<option value="1">Name #1</option>
<option value="2">Name #2</option>
<option value="3">Name #3</option>
<option value="4">Name #4</option>
</select>
<input type="hidden" name="map[0]" value="9513">
<input type="hidden" name="map[1]" value="3931">
<input type="hidden" name="map[2]" value="3971">
<input type="hidden" name="map[3]" value="4476">
<input type="hidden" name="map[4]" value="6429">
Selected type can be found at $_POST['device_type_id'] and the corresponding IMEI at $_POST['map'][ $_POST['device_type_id'] ].
Based on the information from the comments, I think this solution is what you are looking for. Note I move the onchange to a function for clarity.
You can see the "three" option hides the text input as it doesn't have a imei.
Also notice how I use the data- attribute inside your option so you can retrieve that information as well, independent of the option id. Also note the this.form['device_imei_textinput'] didn't worked. The elements reference is required.
function check_imei(obj, form) {
var imei = obj.options[obj.selectedIndex].getAttribute('data-imei');
if (imei == '') {
form.elements.device_imei_textinput.style.visibility='hidden';
} else {
form.elements.device_imei_textinput.style.visibility='visible';
}
}
<form>
<select id="type_id" name="device_type_id" onchange="check_imei(this, this.form);">
<option value='Select'>Select</option>
<option value="1" data-imei="foo">One</option>
<option value="2" data-imei="bar">Two</option>
<option value="3" data-imei="">Three</option>
</select>
<input type="text" id="device_imei_textinput" name="device_imei_textinput" />
</form>
Mirror of example : https://jsfiddle.net/asp1hewx/
EDIT : To address the PHP side of things, the form above could be generated with :
<form>
<select id="type_id" name="device_type_id" onchange="check_imei(this, this.form);">
<option value='Select'>Select</option>
<?php foreach ($result as $row) { ?>
<option value="<?php echo $row['id'] . $row['serial_or_imei'] ?>" data-imei="<?php $row['serial_or_imei'] ?>"><?php echo $row['name'] ?></option>
<?php } ?>
</select>
<input type="text" id="device_imei_textinput" name="device_imei_textinput" />
</form>

Select options taking same value every time

Looping from database duplicating the option values in options tag.
Please help me out.
My code is below.
<input type="hidden" name="beautician<?php echo $data[0]; ?>[]" id="beautician">
<select name="beautician[<?php echo $data[0]; ?>]" id="beauty" onchange="pvalue()">
<option value="null">Select</option>
<?php
$query = "select id,title from beautician order by id";
$run = mysql_query($query);
while ($row = mysql_fetch_array($run)) {
$id = $row[0];
$name = $row[1];
?>
<option value="<?php echo $id; ?>"> <?php echo $name; ?> </option>
<?php } ?>
</select>
whenever the user is selecting beautician it is taking id of the first option.
If id of the first selected beautician is 6 then every other beautician will have id 6
Because you forgot to print $id
Correct
<option value="<?php $id; ?>"> <?php echo $name; ?> </option>
To
<option value="<?php echo $id; ?>"> <?php echo $name; ?> </option>
Instead this:
<input type="hidden" name="beautician<?php echo $data[0]; ?>[]" id="beautician">
<select name="beautician[<?php echo $data[0]; ?>]" id="beauty" onchange="pvalue()">
<option value="null">Select</option>
<?php
$query = "select id,title from beautician order by id";
$run = mysql_query($query);
while ($row = mysql_fetch_array($run)) {
$id = $row[0];
$name = $row[1];
?>
<option value="<?php $id; ?>"> <?php echo $name; ?> </option>
<?php } ?>
</select>
Try this:
<input type="hidden" name="beautician <?php echo $data[0]; ?>[]" id="beautician">
<select name="beautician[<?php echo $data[0]; ?>]" id="beauty" onchange="pvalue()">
<option value="null">Select</option>
<?php
$query = "select id,title from beautician order by id";
$run = mysql_query($query);
while ($row = mysql_fetch_array($run)) {
$id = $row['id'];
$name = $row['title'];
?>
<option value="<?php echo $id; ?>"> <?php echo $name; ?> </option>
<?php } ?>
</select>
In the below statement you are not echoing $id in value. To get the value you have to <?php echo $id;?> OR <?=$id?>. Using your existing statement you have not printed the $id so the select option will take the <option> tag's text value, In your case value will be from $name variable.
Your statement:
<option value="<?php $id; ?>"> <?php echo $name; ?> </option>
Correct Statement:
<option value="<?php echo $id; ?>"> <?php echo $name; ?> </option>
As per my thinking you are getting value from the pvalue() on the change event of <select> tag and in this function you might be getting value based on the #beauty selector, because of this you are getting first dropdown value this happens because of duplicate id selector #beauty
Checkout below fiddle. There are two dropdowns and those have onchange="pvalue(this)" function on change event. Instead of no parameters in pvalue() function I have passed this in pvalue(this) function. Based on this parameter it will give you current <select> option.
<select name="beautician[0]" id="beauty" onchange="pvalue(this)">
<option value="null">Select</option>
<option value="one - 1">One - 1</option>
<option value="Two - 1">Two - 1</option>
</select>
<select name="beautician[1]" id="beauty" onchange="pvalue(this)">
<option value="null">Select</option>
<option value="one - 2">One - 2</option>
<option value="Two - 2">Two - 2</option>
</select>
<script>
function pvalue(obj, rowid){
var x = obj.value;
var y = document.getElementById('beautician'+ ).value = x;
alert(x);
}
</script>
<input type="hidden" name="beautician<?php echo $data[0]; ?>[]" id="beautician-<?php echo $data[0]; ?>">
<select name="beautician[<?php echo $data[0]; ?>]" id="beauty" onchange="pvalue(this, '<?php echo $data[0]; ?>')">
<option value="null">Select</option>
</select>
<script>
function pvalue(obj, rowid) {
var x = obj.value;
var y = document.getElementById('beautician-' + rowid).value = x;
}
</script>
This line:
<option value="<?php $id; ?>"> <?php echo $name; ?> </option>
Should be:
<option value="<?php echo $id; ?>"> <?php echo $name; ?> </option>

avoiding the display of dropdown value twice in edit

While editing the record from database, i display already selected value and option to select other values too. But i want to avoid already selected value to display twice in dropdown. Not getting how to do it
here is my code
<label class="control-label">Sales Area</label>
<?php
$sql5 = "SELECT * FROM sales_area ORDER BY name";
$query5 = mysqli_query($con, $sql5);
?>
<select name="area" class="form-control" required>
<option value="<?php echo $row['sales_area']; ?>"><?php echo $row['areaname']; ?></option>
<?php while ($rs5 = mysqli_fetch_array($query5)) { ?>
<option value="<?php echo $rs5["id"]; ?>"><?php echo $rs5["name"]; ?></option>
<?php } ?>
</select>
in $row['sales_area'], data already present in database, this should not display again.
haven't tested it, but should be something like this:
<select name="area" class="form-control" required>
<?php while ($rs5 = mysqli_fetch_array($query5)) { ?>
<option value="<?php echo $rs5["id"]; ?>" <?php if($rs5["id"] == $row['sales_area'] ) { echo "selected"; } ?> ><?php echo $rs5["name"]; ?>
</option>
<?php } ?>
</select>

PHP dropdown populated from database

I need to pull down a column of color codes for a color picker site I'm making but it won't work:
<select name="select" id="dropdown">
<option id="0">-- Select Color --</option>
<?php
$getColors = mysql_query("SELECT * FROM color_codes");
while($list = mysql_fetch_array($getColors)){
?>
<option id="<?php echo $list ['colorID']; ?>">
<?php echo $list['color_code'] ?></option>
<?php } ?>
</select>
Any ideas?
just did a couple of changes to your code and it worked for me, Hope it works for you.
<?php
$mysqli= new mysqli(DB_HOST,DB_USER,DB_PASS,DB_NAME) or die(mysqli_connect_error());
$sql="select * from test";
$result=$mysqli->query($sql);
?>
<select name="select" id="dropdown">
<option id="0">-- Select Color --</option>
<?php
while($list = $result->fetch_array(MYSQLI_ASSOC)){
?>
<option id="<?php echo $list['id']; ?>">
<?php echo $list['name'] ?></option>
<?php } ?>
</select>

How to Get Two option value by 1 select?

Please modify this code so that i will get 2 option value from this code
<select name="student_class1" class="input-xlarge" >
<option value="null">--Select Class---</option>
<?php $sel_service = "select * from all_services where school_id='$school_id'";
$sel_service= mysql_query($sel_service);
while($display_class= mysql_fetch_assoc($sel_service))
{ ?>
<option value="<?php echo $display_class['sub_cat_id']; ?>"><?php echo ucfirst($display_class['sub_cat_name']); ?></option>
<?php } ?>
student_class1 giving me value sub_cat_id
i want
student_class2 will give me sub_cat_name
iwant both values by one select
plz modify it
i already spent my whole sunday on this problem
something like?
<form action="" method="get" accept-charset="utf-8">
<select name="student_class1" class="input-xlarge" >
<?php
$sel_service = "select * from all_services where school_id='$school_id'";
$sel_service= mysql_query($sel_service);
while ($row = mysql_fetch_assoc($sel_service)) {
?>
<option value="null">--Select Class---</option>
<option value="<?php echo $row['sub_cat_id']; ?>"></option>
<option value="<?php echo $row['sub_cat_name']; ?>"></option>
<?php
}
?>
</select>
</form>

Categories