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>";
}
Related
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.
I am trying to set default value in a list box from the values in the table. The values are getting populated in the listbox from the database and the values in the table are hard coded.
Can anybody help me with this?
<table>
<td align="center">
1<br>
2<br>
3<br>
...
</table>
<select class="form-control input-lg" id="experience"name="experience"
placeholder="Experience (in Years)" required="">
<option value="">Experience: </option>
<?php
$sql="SELECT * FROM experience";
$result=$conn->query($sql);
if($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo "<option value='".$row['value']."' data-
id='".$row['id']."'>".$row['value']."</option>";
}
}
?>
</select>
<script type="text/javascript">
function setExperienceValue () {
var element = document.getElementById(id);
element.value = val;
}
</script>
I am trying to set the default value in the listbox when the link in the table is clicked. How to populate the default value in such case?
So to make an option become default, you need to include selected attribute. You can easily do this and add a check with PHP to see if you want to include it. For example;
if($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$selected = null;
if($row["selected"] === 1) { //or some other condition
$selected= "selected";
}
echo "<option {$selected} value='".$row['value']."' data-id='".$row['id']."'>".$row['value'].</option>";
}
}
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option
You did not specify the element ID when calling document.getElementById(). If you are trying to get the id of the for example, you need to use
document.getElementById("experience");
You also need to specify some kind of an attribute to a to recognize it, example id="link".
Then:
var a = document.getElementById("link").textContent;
var selection = document.getElementById("experience");
selection.value = a;
I found a very easy solution for the problem. By adding the option of data-select in the anchor tag and adding a javascript for on click function. Below is the code changes.
<table>
<td align="center">
1<br>
2<br>
3<br>
...
</table>
<select class="form-control input-lg" id="experience"name="experience"
placeholder="Experience (in Years)" required="">
<option value="">Experience: </option>
<?php
$sql="SELECT * FROM experience";
$result=$conn->query($sql);
if($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo "<option value='".$row['value']."' data-
id='".$row['id']."'>".$row['value']."</option>";
}
}
?>
</select>
<script type="text/javascript">
var $expe = $('#experience');
$('a[href="#exp"]').click(function () {
$expe.val( $(this).data('select') );
});
</script>
Hope this helps anyone facing this issue.
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>
I have a HTML form with dropdown list populated by php. I want the user to be able to select an option from the dropdown list and click on "Proceed" button which would open a new page based on the selected value.
<form name="selectPatient" method="post">
<div align="centre">
<select name="patient_dropdown">
<?php
include "connection.php";
$sql = mysql_query("SELECT Name from patient_info");
while ($row = mysql_fetch_array($sql)) {
echo "<option value=".$row['Name'].">".$row['Name']."</option>";
}
?>
</select>
</div>
<br>
<br>
<input type="submit" name="submit" value="Proceed"/>
</form>
<?php
if(isset($_POST['submit'])) {
header("Location: http://localhost/lei/test.com/proper/specific_patient.php");
}
?>
The code above works fine. How do I get the selected value from dropdown list?? I want to use the selected value to run a SQL query using php to get other details of the patient and then call a javascript file with that information. How can I do that??
Thanks in advance !
You need to check your $_POST variables on submit:
$patient_dropdown = isset($_POST['patient_dropdown']) ? $_POST['patient_dropdown'] : false;
<fieldset>
<legend>Available Areas</legend>
<select id="availableAreas">
<?php
$sql = "SELECT * FROM workArea";
$result = $db->query($sql);
while ($row = $result->fetch_assoc()) {
$id = $row['id'];
$area = $row['name'];
echo "<option value='$id'>$area</option>";
}
?>
</select>
<input id="addArea" type="button" value="Add area" /><br />
<select id="workAreas" style="min-width: 200px" required multiple name="workAreaId"></select>
</fieldset>
The code above produces this output:
I haven't put the JavaScript in as it's not relevant to the question but clicking 'Add area' would add the area into the <select> element (the multiple list below the drop down).
When the user submits the form I need to send all of the <option>s that the user added to the list. Is there a way I can do this?
Thanks
Assuming you are using jQuery:
$('#yourForm').submit(function() {
$('#workAreas option').prop('selected', 'selected');
});
This should select all items in your multiple select when the form is submitted.
Another option would be to add a hidden input field for every Option. When you add [] to the name of the field it will be available on the server side as an array.
<input type="hidden" name="workareas[]" value="X" />