how to create several select drop down listbox using php - javascript

I am new to php, I would like to generate the same select drop down list box.
This is the code I have, but it only works for the first drop down, not for the second one...
This is the code I am using without any success :
<?php
while($row = mysqli_fetch_array($result))
{
$output .= '
<tr>
<td>'.$row["id"].'</td>
<td class="last_name" >
<select id="t1"><option>'.$row["t1"].'</option>';
while($rowcode=mysqli_fetch_array($resulttasks))
{ $output .= '<option value="'.$rowcode["id"].'">'.$rowcode["code"].'</option>' ; }
$output .='</select>
</td>
<td class="last_name" >
<select id="t2"><option>'.$row["t2"].'</option>';
while($rowcode=mysqli_fetch_array($resulttasks))
{ $output .= '<option value="'.$rowcode["id"].'">'.$rowcode["code"].'</option>'; }
$output .='</select>
</td>
</tr>';
?>
Thanks in advance for the help !

Duplicate identifiers is not the issue, before the second loop of "t2" select, try putting mysqli_data_seek($resulttasks,0);
Explanation:
duplicate identifiers are only for DOM and it has nothing to do with parsing HTML in PHP. If you guys notice, he is using the same result set two times, PHP does not run another loop on same data once process already. So, we have to reset to 0th row if we want to run another loop on the same result set.

The id attribute must be unique, replace the duplicate ones by common classes :
<select id="t1">
Must be :
<select class="t1">
So when you loop through the $result you'll not generate duplicate identifiers.

hope this helps you
change your id with loop
example
$index = 1;
for($i = 0; $i < $count_array; $i ++) {
echo '<select id="t1' . $index . '"></select>';
$index ++;
}

Related

Select tag HTML dynamic javaScript PHP

Hello I want to achieve is to make "Select Form HTML" dynamic using JavaScript, What I mean by that is I expect every time I select a dropdown must be selected the value that I set to that tag.
The data from tag is from database I loop the data using php
ex. 1 src: Get selected value/text from Select on change
This example is 100% working correct but what I need is not to get the value but to assign like sample below next example 2
function handleSelectChange(event) {
var selectElement = event.target;
var value = selectElement.value;
alert(value);
}
<select onchange="handleSelectChange(event)">
<option value="1">one</option>
<option value="2">two</option>
</select>
ex 2 Those function will alert or run everytime I select/Click each of them F1 or F2
<table>
<tr>
<td onclick="myFunction1()">F1</td>
<td onclick="myFunction2()">F2</td>
</tr>
</table>
<script>
// Function 1 will run when I click the F1
function myFunction1() { alert('myFunction1'); }
// Function 2 will run when I click the F2
function myFunction2() { alert('myFunction2'); }
In example 1 As you can see the first example select form html will grab the the value of option tag, right?.
Now In example number 2 it will run the function when I click each of the F1 or F2
So what I need to the program is pass a value from my database to my javaScript function and run it like in alert or example 1 but in "Select tag" HTML version
ex. 3 Here's my query
<form action="">
<select name="customers" id="myId" class="form-control">
<option value="">Select a customer:</option>
<?php
$user_id = 1;
$sql = "SELECT * FROM `myTable` WHERE user_id = '$user_id' Order by create_at DESC";
$result = $mysqli->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc())
{ ?>
<!-- appsFunction('<?php echo $row['colName2']; ?>') << will be the value that should run in console.log -->
<option value="<?php echo $row['id']; ?>" onclick="appsFunction('<?php echo $row['colName2']; ?>')"><?php echo $row['colName1']; ?></option>
<?php }
} else { return false; }
?>
</select>
</form>
ex. 3 part 2 javascript
<script>
function appsFunction(passVar) {
colose.log(passVar);
}
</script>
As you can see in my first example a "Select Tag" HTML when I select dropdown it returns to me a value right?, in second example when I click F1 or F2 it will run the function then return alert, What I need here is When I select the dropdown it will accept the value I pass in function "appsFunction(passVar)" appsFunction('<?php echo $row['colName2']; ?>') from select tag which the value is from my database.. so I need help idea how to do that properly..
NOTE: The function must be run when I select the dropdown, the function must be accept the value I set which from my database it's like totally example number 2 but in Select tag HTML version not just text or html table.
Thanks in advance for solving my problem.
If you register an event handler on the select element itself that listens for change events you will be able to process the selected OPTION and access any value/property associated with it. You cannot assign an event handler directly to an OPTION element as you are trying to do here. You can add as many dataset attributes as you need to the OPTION elements however which you can easily access in the Javascript event handler.
If the value you pass into the SQL statement is to be dynamic ( from a GET or POST request most usually ) you really need to use a Prepared Statement to help mitigate SQL Injection attacks.
As your select menu is making use of only 3 columns from the mytable table you should limit the returned fields to those columns which in turns helps when using a Prepared Statement as you can easily assign the results as variables.
<form name='geronimo'>
<select name="customers" class="form-control">
<option selected hidden disabled>Select a customer:
<?php
$user_id = 1;
$sql="select `id`, `colName1`, `colName2` from `mytable` where user_id = ? order by create_at desc";
$stmt=$mysqli->prepare($sql);
$stmt->bind_param('s',$user_id);
$res=$stmt->execute();
if( $res ){
$stmt->bind_result($id,$col1,$col2);
while( $stmt->fetch() ){
printf('<option value="%s" data-col="%s">%s', $id, $col2, $col1 );
}
$stmt->free_result();
$stmt->close();
}
?>
</select>
</form>
<script>
document.forms.geronimo.customers.addEventListener('change',function(e){
let id=this.value;
let col2=this.dataset.col;
let col1=this.options[this.options.selectedIndex].text;
alert( id + ' ' + col2 + ' ' + col1 )
});
</script>

PHP dynamic options in select inside html

I have categories and sub-category taken from API json file, the API returns category objects with "parent" attribute, main category objects have parent attribute equals to 0, and the sub-category objects have the parent attribute equals to the main categories id.
the code of main categories is `
<label for="Category"> Main Category</label>
<select id="category">
<?php foreach ($obj as $category):?>
<?php if($category->parent==0) : ?>
<option value=<?=$category->id?>><?=$category->name?></option>
<?php endif; ?>
<?php endforeach; ?>
</select>
`
$obj is equals to the json decode taken from api.
How I can write the code of the sub-categories? I want make options where subcategory->parent equals to the id of the selected category"category->id" chosen above
So $obj is a list of all categories. Some are parents and some are children (subcategories)?
Is there a way to nest the categories on the API side so that it returns the children as a var on the parent object, or create a separate object for the children that you can access for each parent?
If those aren't an option, either format the categories prior to creating the select field so that you can more cleanly generate the children, or add a nested loop inside your current foreach that checks if a category is a child of the current category.
This is ugly and I haven't tested it, but you might be able to do something like this:
foreach ($obj as $category) {
if ($category->parent==0) {
echo "<option value='" . $category->id . "'>$category->name</option>"
foreach ($obj as $subCategory) {
if ($subCategory->parent != 0 && $subcategory->parent == $category->id) {
echo "<option value='" . $subcategory->id . "'>$subcategory->name</option>"
}
}
}
}

Change select option with javascript based on PHP variable

I've read multiple threads here and still can't find a good answer for my question, so I'm sorry for this silly question but there are no words for how bad I am with Javascript.
So I'm currently trying to change the select options on a 2nd select tag based on the selected option from the first one.
<select name="category" id="category">
<option value="" disabled selected value>Cat1</option>
<?php
$stmt = $conn->query("SELECT * FROM cats");
while($row = $stmt->fetch()) {
echo "<option value='".$row['name']."'>".$row['text']."</option>";
}
?>
</select>
</div>
</div>
<div class="div3">
<div class="div4">
<label for="test">cat2</label>
</div>
<div class="div7">
<select name="sub" id="sub">
<?php
$stmt = $conn->query("SELECT * FROM cats WHERE name = $cat");
while($row = $stmt->fetch()) {
echo "<option value='".$row['subname']."'>".$row['subtext']."</option>";
}
?>
</select>
</div>
So I know that I somehow need to call a JavaScript with "onchange" which will get the $cat variable and then pass back the information from the SQL table. But I have absolute no idea how I can do this..
I don't wanna use either form or Ajax. If this is possible with pure Javascript, I would be really happy..
Then of course I don't expect you to solve the entire issue for me but I would be glad if someone could point me in the right direction (Don't think too much about the prepared statements with $stmt, this is just a first test)
If you don't want to use Ajax, you need to get all data for each main category and save them all into a pieced-together JS array.
Something like
$jstext = ''; //our pieced-together array definition for JS
$stmt = $conn->query("SELECT * FROM cats");
while($row = $stmt->fetch()) {
echo "<option value='".$row['name']."'>".$row['text']."</option>";
$stmt2 = $conn->query("SELECT * FROM cats WHERE name = {$row['name']}");
$jstext .= "subcategories['".$row['name']."'] = '";
$tmp = '';
while($row2 = $stmt2->fetch()) {
$tmp .= '<option>'.$row2['name'].'</option>'; //generate html for each subcategory
}
}
$jstext .= $tmp."';\r\n"; //add subcategories to array index, add line break
Then in your <script> tag, add:
<script>
var subcategories;
<?php echo $jstext ?>
</script>
This should generate an array with an index of each main category and the content is the respective sub-categories.
Example Output:
<script>
var subcategories;
subcategories['maincat1'] = '<option>subcat1</option><option>subcat3</option>';
subcategories['maincat2'] = '<option>subcat4</option><option>subcat6</option>';
</script>
Now you just need to replace the innerHTML of your "sub" select when the "category" select fires an onchange event.

multiselect filter using javascript

I have option tag and it works fine with single filter and I want to make it multi select....following is my code:-
$('#version_no').change(function () {
var version_no = $('#version_no').val();
if (version_no != null) {
showAll(version_no);
} else {
showAll();
}
});
showAll() is a function that returns data after filtering. if no filter is selected then everything is shown.
following is the view code:-
<select multiple="multiple" style="margin-top:15px;" name="version_no" id="version_no">
<option value="">Select Version No</option>
<?php if (count($get_version_no)): ?>
<?php foreach ($get_version_no as $version): ?>
<option value=<?php echo $version->version_no; ?>><?php echo $version->version_no; ?></option>
<?php endforeach; ?>
<?php else: ?>
<?php endif; ?>
$get_version_no is generating the dropdown value like 1,1.1,1.2 etc.....
SO I want to make it multi select any help will be appreciated. I'm using codeigniter 3.
You need to make version_no array in name for multiple select
<select multiple="multiple" style="margin-top:15px;" name="version_no[]" id="version_no">
In jquery
var version_no= [];
$.each($("#version_no option:selected"), function(){
version_no.push($(this).val());
});
var version = version_no.join(", ");
version will be the string with all selected values seperated by comma
Your Javascript code just needs to be refactored so that version_no is an array instead of a single value. You can use the ':selected' selector to get the selected options.
(see https://api.jquery.com/selected-selector/)
You will also need to refactor the showAll() function so that it parses an array instead of a single value. I would also have the showAll() function perform null checks instead of doing that if...then/else.

Multiple dependent dynamic select boxes in form

There is a model A that has_many B and a form where one can create a new A and
add/remove Bs. I.e. there is a link Add new B that runs some Javascript to insert another partial where one fills in values for B. All works fine.
The problem
Specifying a B is done through selecting the values using a couple of select
boxes. The problem is that depending on a value selected in one, the
collections used in the other selects should be scoped to only show relevant options. It's the classic case
with dynamic select boxes (think country - state select boxes), only with more
select boxes and I'd like all the select boxes to appear initially, so the
user can start from anywhere (select state first and country select box
narrows down its collection to the ones that can be chosen for that state).
Current approach
The Bs are rendered in a table, one B per row and I was thinking that I could
use AJAX to replace the table row (content) after fetching the new collections
from the server. This obviously needs a couple of things in place.
tr tag must have a unique id attribute, so replace_html can be used.
need to have a trigger on change for each select box
need to pass all select boxes' values (for that row) to the server
I'm stuck here, because of the following:
adding a B needs to have something unique to identify the tr tag as well
as all the selects on that row. I can use Time.now.to_i but that won't
work for the Javascript run by the link to add a new B because that will
hardcode the value and all use the same.
not sure if I should go with observe_field or a remote call in the select
form field helper.
how to pick up the values of all selects in one row and pass that remotely
to the server when triggered?
The project I'm working on is Rails 1.2.3 and uses Prototype. Please feel free to post "newer" solutions too, because I'm curious to see different solutions.
Any help on this is highly appreciated. Thanks in advance!
This doesn't answer your entire question but it might get you started. I handle it like this... this is for playlist entry, where the user can add new forms in a div #playlist-entry, and each form is .new_song_form with a hidden field .form_num (which I use in the create.js.erb file to tell it which form to hide/warn of validation errors, which isn't really relevant for you I guess).
var form_counter = 1;
function addSongFields() {
playlistEntry = $('#playlist-entry');
playlistEntry.append("<%= escape_javascript(render :partial => 'playlist_entry_form', :locals => { :schedule_event => #schedule_event, :playlist_entry => PlaylistEntry.new }) %>");
playlistEntry.find('.new_song_form:last').attr('id', 'new_song_form_'+form_counter);
playlistEntry.find('.form_num:last').val('new_song_form_'+form_counter);
}
$(document).ready(function() {
$('#add-song-link').click(function(event) {
event.preventDefault();
addSongFields();
form_counter++;
});
});
This form is a little different because there's no one "major" form to submit, it's a bunch of forms all on one page, but this basic idea might help you. It's not perfect programming - for example I should be passing form_counter as an argument to the function... but it works perfectly.
Dynamic Dependent Select Boxes
How to create dependent drop down list in php? I have searched a lot then implemented this one. This is created using HTML, JS, PHP simple dependent drop down boxes.
I knew it was possible to create a dynamic dependent drop down form using PHP, MySQL, and JavaScript,
but I had never had an excuse to use one before I need to teach to my students.
<?php
$region = $country = $state = $city = null; //declare vars
$conn = mysql_connect('localhost', 'username', 'password');
$db = mysql_select_db('selects',$conn);
if(isset($_GET["region"]) && is_numeric($_GET["region"]))
{
$region = $_GET["region"];
}
if(isset($_GET["country"]) && is_numeric($_GET["country"]))
{
$country = $_GET["country"];
}
if(isset($_GET["state"]) && is_numeric($_GET["state"]))
{
$state = $_GET["state"];
}
if(isset($_GET["city"]) && is_numeric($_GET["city"]))
{
$city = $_GET["city"];
}
?>
<script language="JavaScript">
function autoSubmit()
{
var formObject = document.forms['theForm'];
formObject.submit();
}
</script>
<form name="theForm" method="get">
<!-- REGION SELECTION -->
<select name="region" onChange="autoSubmit();">
<option value="null"></option>
<option VALUE="1" <?php if($region == 1) echo " selected"; ?>>East</option>
<option VALUE="2" <?php if($region == 2) echo " selected"; ?>>West</option>
</select>
<br><br>
<!-- COUNTRY SELECTION BASED ON REGION VALUE -->
<?php
if($region != null && is_numeric($region))
{
?>
<select name="country" onChange="autoSubmit();">
<option VALUE="null"></option>
<?php
//POPULATE DROP DOWN MENU WITH COUNTRIES FROM A GIVEN REGION
$sql = "SELECT COUN_ID, COUN_NAME FROM COUNTRY WHERE RE_ID = $region";
$countries = mysql_query($sql,$conn);
while($row = mysql_fetch_array($countries))
{
echo ("<option VALUE=\"$row[COUN_ID]\" " . ($country == $row["COUN_ID"] ? " selected" : "") . ">$row[COUN_NAME]</option>");
}
?>
</select>
<?php
}
?>
<br><br>
<?php
if($country != null && is_numeric($country) && $region != null)
{
?>
<select name="state" onChange="autoSubmit();">
<option VALUE="null"></option>
<?php
//POPULATE DROP DOWN MENU WITH STATES FROM A GIVEN REGION, COUNTRY
$sql = "SELECT STAT_ID, STAT_NAME FROM states WHERE COUN_ID = $country ";
$states = mysql_query($sql,$conn);
while($row = mysql_fetch_array($states))
{
echo ("<option VALUE=\"$row[STAT_ID]\" " . ($state == $row["STAT_ID"] ? " selected" : "") . ">$row[STAT_NAME]</option>");
}
?>
</select>
<?php
}
?>
<br><br>
<?php
if($state != null && is_numeric($state) && $region != null && $country != null)
{
?>
<select name="city" onChange="autoSubmit();">
<option VALUE="null"></option>
<?php
//POPULATE DROP DOWN MENU WITH CITIES FROM A GIVEN REGION, COUNTRY, STATE
$sql = "SELECT CIT_ID, CITY_NAME FROM CITY WHERE STAT_ID = $state ";
$cities = mysql_query($sql,$conn);
while($row = mysql_fetch_array($cities))
{
echo ("<option VALUE=\"$row[CIT_ID]\" " . ($city == $row["CIT_ID"] ? " selected" : "") . ">$row[CITY_NAME]</option>");
}
?>
</select>
<?php
}
?>
</form>

Categories

Resources