I have a text input (z-index:1) which i put in front of the drop down box. So that the user can input text and also choose from drop down list. I did hide the down arrow button for the drop down list. So, I want when user click on the text input, the drop down listing will automatic display. I plan to used Jquery to display the listing, but i don't know what function that I need to use.
Here my code
<span id="plantimefromdd" style="position:relative;">
<input id="textin1" name="textin1" type="text" style="width:100px;position:absolute;top:-4px;left:13;z-index:1;padding:3;margin:0;opacity:0;" value="<?php echo $todisplay; ?>" onclick="this.style.opacity=1;">
<?php
//display dropdown time for from interval 5 minutes
$start = strtotime('12:00am');
$end = strtotime('11:55pm');
echo '<select name="plantimefromdd" style="width:100px;height:26px;-webkit-appearance:none;border-width:2px;border-color:#D8D8D8;" onchange="$(\'input#textin1\').val($(this).val());">';
for ($i = $start; $i <= $end; $i += 300){
$timerfrom = date('H:i', $i);
if($todisplay == $timerfrom) {$temp = "selected";} else {$temp = "";}
echo '<option '.$temp.' >' . $timerfrom ;
}
echo '</select>';
?>
</span>
Thank you for your helping.
First add id to your drop-down and then for the text-box make the following from:
onclick="this.style.opacity=1;"
To:
onclick="$('#dropdown').show()" onblur="$('#dropdown').hide()"
Related
I have a dropdown menu with selected options from my database. They are linked to a table which when submit is pressed will display the table with results from the dropdown. e.g if the dropdown states snake, a submit will show me a table with just snakes. When I press the back browser button however i am unable to see previous results. e.g if i click snake then deicide to click crocodile , if i then press back browser button i cannot see the table displaying snakes. I want to be able to click snake then crocodile then when going back be able to see previous selected results e.g table with snakes.
<option selected='true' disabled='disabled'>Select option </option>
<option value='All'>All</option>
<?php
$s = "SELECT DISTINCT species,status from animal";
$result = $con->query($s);
if($result = mysqli_query($con, $s)){
if(mysqli_num_rows($result) > 0){
while($row = mysqli_fetch_array($result)){
if($row['status']=='rare'){
$output = "<option value='".$row['species']."'"; //keeps select option on dropdown the same upon page refresh
if($_GET['fetching'] == $row['species']){
$output .= " selected='selected'";
}
$output .= ">".$row['species']."</option>";
echo $output;
if($_GET['fetching']){
// $output .= " selected='selected'";
$_SESSION['animal6'] = $_GET['fetching'];
header("Location: room.php?pn=1"); //added 12.04.22
exit;
}
}
}
}
}
?>
</select>
<input id='submit' name='submit' type='submit' value='submit' ></input>
</form>
I am trying to mark a table that the user selected in a form, but if he changes it while he still in the same form selection, I want the last marking disappear and the new one showing. However, I've tried several approaches and this one is not working, it won't mark anything but if I call only the select(x)function it marks every single one I choose without removing the last one. I'll be glad for some help or ideas for improving my code.
View Code
<select type="number" id="tnum2" name="num" style="display: none;" onchange="table_selection(this.value)">
<?php for ($i = 12; $i <= 23; $i++) : ?>
<option id="out" value="<?php echo $i; ?>"><?php echo $i; ?></option>
<?php endfor; ?></select>
JavaScript Code
function table_selection(x){
remove_selection(),
select(x);
}
function remove_selection(){
for(var i=2;i<34;i++){
document.getElementById(i).style.outline="none";
}
}
function select(x){
document.getElementById(x).style.outline="8px dotted #F2FF21";
}
With a SELECT query I obtain an array of 7 names, create a dropdown list and each name is a table which is then hidden.
I want to click on the name in the dropdown list and display the table.
I am not receiving any errors but the following code only displays the first table in the array no matter what option is selected. I have little knowledge of javascript and the function has been cobbled together from various queries on the site.
Javascript:
function changeOpt(clicked) {
var x = document.getElementById("optChange");
var optVal = x.options[x.selectedIndex].value;
for(var i =0; i<x.length;i++){
if(optVal = document.getElementById('datath'))
document.getElementById('data').style.display = 'block';
}
}
HTML/PHP:
while($row = mysqli_fetch_array($result))
{
$array = $row;
//echo '<pre>'.print_r($array).'</pre>';
echo '<table id="data" style="display:none;">';
echo '<tr><td>You searched for:</td></tr>';
echo '<tr><th id="datath">'.$row[0].'</th><th>'.$row[1].'</th><th>'.$row[2].'</th>';
echo '</tr>';
echo '</table>';
$option .= '<option value = "'.$row['1'].'">'.$row['1'].'</option>';
}
?>
<form method="post" action="#" id="my_form" >
<select id="optChange" name="opt" onchange="changeOpt(this.id)">
<option><--select a name--></option>
<option><?php echo $option; ?></option>
</select>
<input type="button" name="submit" value="submit" >
</form>
Am I completely off-beam ? Can someone give me some guidance please to get my code straight.
The system asks the user to identify the number of records they would like to enter, based on their selection (say 3), the system displays three text boxes.
<?php for($i=1; $i<=$rows; $i++) { ?> // $i is 3 here
<input type="text" name="company_name[]" id="cn[]">
<input type="text" size="3"name="entertainment[]" id="en[]">
<?php } ?>
So this will generate 3 rows, with the same text boxes. If the user enters a value in the 1st row for entertainment, the company name should get grayed out or vice versa. Similarly it should do the same for the 2nd and 3rd line as well - based on which text box they fill.
How do I do that via js/jquery?
P.S: I am not a good front-end developer, so I could use all the help I can get.
Thanks.
First wrap then into <div>.
Element Id should be unique, change it as following
<?php for($i=1; $i<=$rows; $i++) { ?> // $i is 3 here
<div>
<input type="text" name="company_name[]" onchange="grayOther(this);" id="cn_<?php echo $i ?>">
<input type="text" size="3"name="entertainment[]" onchange="grayOther(this);" id="en_<?php echo $i ?>">
</div>
<?php } ?>
Then here is the js.
<script>
function grayOther(elem){
elem = $(elem); // convert to jquery object
if (elem.val().length == 0) {
elem.siblings().prop('disabled',false);
}else {
if (elem.is("[name='company_name[]']")){
elem.siblings("[name='entertainment[]']").prop('disabled',true);
}else {
elem.siblings("[name='company_name[]']").prop('disabled',true);
}
}
}
</script>
Some Background information:
I have a table with two fields, TECHNAME and TECHCOLOR
What I am trying to do is:
Have a SQL generated Drop down menu based on TECHNAME (DONE)
Have TECHCOLOR update in text box when TECHNAME is selected (ISSUE IS HERE)
What is wrong
Currently, the textbox is showing TECHNAME insead of TECHCOLOR
Code
JavaScript:
<script type="text/javascript">
function load_value(value)
{
document.getElementById("test").value=value;
}
</script>
HTML/PHP:
<table>
<form method="post" action="">
<?php
$select_box='<select name="edittech" id="edittech" onchange="javascript:load_value(this.value);">';
$input="";
$result = $conn->query("select * from techs");
while ($row = $result->fetch_assoc()) {
$select_box .='<option id="name" value="'.$row["TECHNAME"].'">'.$row['TECHNAME'].'</option>';
}
$input ='<input type="text" name="test" id="test" value="" />';
echo $select_box."</select>";
echo $input;
?>
Thanks in advance! :D
When you submit the form, is the value for your edittech dropdown list used at all? If it isn't then you can simply change the value part of your dropdown to be TECHCOLOR and it will still show TECHNAME on the dropdown.
while ($row = $result->fetch_assoc()) {
$select_box .= "<option id=\"name\" value=\"{$row['TECHCOLOR']}\">{$row['TECHNAME']}</option>";
}