Develop Reference

Populate a select with js in a foreache

IM trying to populate a select field with some data i receive from ajax but the other select the select_dropdow , dont populate and i dont know how to fix it, there someone who could help me with that?
I had some help to mkae the ajax work but now i dont have so im kinda lost i already try to make it with some code from js, but nothing happens in select_dropdow select and i want to populate that select with the data from the data from my sql, like in the image.
index.php
<select id="txt_maq" name="txt_maq">
<option value="">Selecione</option>
<option value="E02">E02</option>
<option value="E03">E03</option>
<option value="E04">E04</option>
<option value="E05">E05</option>
<option value="E06">E06</option>
<option value="E07">E07</option>
<option value="E08">E08</option>
<option value="E04/E07">E04/E07</option>
<option value="E04/E08">E04/E08</option>
<option value="E03/E04">E03/E04</option>
<option value="E03/E07">E03/E07</option>
<option value="E04/E07/E08">E04/E07/E08</option>
<option value="E03/E07/E08">E03/E07/E08</option>
<option value="E07/E08">E07/E08</option>
<option value="E09">E09</option>
</select>
<select id="select_dropdow" name="select_dropdow">
<option value="">Selecione</option>
</select>
<script>
let txt_maq =$("#txt_maq");
let select_dropdow =$("#select_dropdow");
console.log(txt_maq);
console.log(select_dropdow);
txt_maq.on("change", function() {
//faz a consulta no banco com ajax em um
$.ajax({
url: "test.php?maq="+txt_maq.val(),
context: document.body
}).done(function(response) {
console.log(response);
let resposta = JSON.parse(response);
resposta.forEach(function(valor, chave) {
option = new Option(chave, valor);
select_dropdow.options[select_dropdow.options.length] = option;
})
});
});
</script>
test.php
<?php
print_r($_GET);
include ("databaseconfig.php");
$maquina = $_GET["maq"];
$tpe_te = "";
if ($maquina == "E09"){
$type_te= "ET";
} else {
$type_te= "EP";
}
//$tpe_te = $_GET["maq"] === "E09" ? "ET" : "EP";
$consulta = "SELECT Cat_Material FROM cat_mat where TE = '" . $type_te . "' "; //código SQL
$pesquisa = mysqli_query($ligacao,$consulta);
$resultado = [];
while ($listar = mysqli_fetch_array($pesquisa)){
$resultado [$listar['Cat_Material']] = $listar['Cat_Material'];
}
echo json_encode($resultado);
?>
Here is the data when i select the first data in the first select

Filter a Database without if statements in Laravel

I'm currently filtering users in my database with a ton of if / elseif statements. And hoping there is an easier way. Right now I'm writting if statements for every possible query with the following 5 values:
Location
Gender
Age
Birth Month
Birth Date
Just to note, I'm using Laravel 5.7
HTML: Filtering by Pre-Populated Select Dropdowns
<!-- LOCATION -->
<div>
<select id="location" name="location">
<option value="">No Preference</option>
#foreach ($country as $c)
<option value="{{ $c->country_name }}">{{ $c->country_name }}</option>
#endforeach
</select>
</div>
<!-- GENDER -->
<div>
<select id="gender" name="gender">
<option value="">No Preference</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
<!-- AGE -->
<div>
<select id="age" name="age">
<option value="">No Preference</option>
<option value="1">1</option>
<option value="2">2</option>
ETC...
</select>
</div>
<!-- BIRTH MONTH -->
<div>
<select id="month" name="month">
<option value="">No Preference</option>
<option value="01">January</option>
<option value="02">February</option>
ETC...
</select>
</div>
<!-- BIRTH DATE -->
<select id="day" name="day">
<option value="">No Preference</option>
<option value="1">1</option>
<option value="2">2</option>
ETC...
</select>
</div>
<!-- FILTER RESULTS BTN -->
<div>
<button id="ajaxSubmit">
Filter Results
</button>
</div>
JS to filter results
$('#ajaxSubmit').click(function() {
console.log('clicked');
var location = $('#location').val();
var gender = $('#gender').val();
var age = $('#age').val()
var month = $('#month').val()
var day = $('#day').val()
$.get('/child-sponsorship/filter?location=' + location + '&gender=' + gender + '&age=' + age + '&month=' + month + '&day=' + day, function(data){
console.log(data);
$('#kids_results').empty();
$('#kids_results').html(data);
});
});
Controller: This works but it's an if statement nightmare
PRETTY MUCH MAKING EVERY POSSIBLE VARIATION OF THE FILTERS...
public function filter(Request $request){
$location = $request->location;
$gender = $request->gender;
$age = $request->age;
$month = $request->month;
$day = $request->day;
$country = DB::table('countries')->orderBy('country_name')->get();
//IF ALL FILTERS ARE EMPTY
if(empty($location) && empty($gender) && empty($age) && empty($month) && empty($day)){
$sponsorKid = Kid::orderBy('id')->get();
}//IF ALL FILTER ARE TRUE
elseif(!empty($location) && !empty($gender) && !empty($age) && !empty($month) && !empty($day)){
$sponsorKid = DB::table('kids')
->where('current_country', $location)
->where('gender', $gender)
->where('age', $age)
->where('month', $month)
->where('day', $day)
->orderby('id')
->get();
}//IF LOCATION ONLY IS TRUE
elseif(empty($gender) && empty($age) && empty($month) && empty($day)){
$sponsorKid = DB::table('kids')
->where('current_country', $location)
->orderby('id')->get();
}//IF GENDER ONLY IS TRUE
elseif(empty($location) && empty($age) && empty($month) && empty($day))
//etc.....
//return Response::json($sponsorKid);
$view = View::make('child-sponsorship.filter_results', compact('sponsorKid'));
$view = $view->render();
return $view;
}
IS THERE AN EASIER WAY?
I tried using LIKE to filter in my controller, but no luck:
$sponsorKid = Kid::query()
->where('countries', 'LIKE', "%{$location}%")
->orWhere('gender', 'LIKE', "%{$gender}%")
->orWhere('age', 'LIKE', "%{$age}%")
->orWhere('month', 'LIKE', "%{$month}%")
->orWhere('day', 'LIKE', "%{$day}%")
->orderby('id')
->get();
$view = View::make('child-sponsorship.filter_results', compact('sponsorKid'));
$view = $view->render();
return $view;
Any help would be appreciated.

try to used conditional-clauses
when method of query builder
$sponsorKid = Kid::when($location,function($q,$location) {
return $q->where('countries', 'LIKE', "%."$location."%")
})->when($gender,function($q,$gender) {
return $q->orWhere('gender', 'LIKE', "%".$gender."%")
})->when($age,function($q,$age) {
return $q->orWhere('age', 'LIKE', "%".$age."%")
})->when($month,function($q,$month) {
return $q->orWhere('month', 'LIKE', "%".$month."%")
})->when($day,function($q,$day) {
return $q->orWhere('day', 'LIKE', "%".$day."%")
})->orderby('id')
->get();

I believe you have a model for kids table named Kid.php using that you can start a query and do like this:
//create a query of Kid model
$sponsorKid = Kid::query();
// add a where clause for location only if location is not empty,
//otherwise you have the default query
if(!empty($location)) {
$sponsorKid = $sponsorKid->where('location', $location);
}
// add a where clause for gender only if gender is not empty,
//otherwise you have the default query, or if this condition and
//above is true then you will have a query which has 2 wheres
if(!empty($gender)) {
$sponsorKid = $sponsorKid->where('gender', $gender);
}
if(!empty($age)) {
$sponsorKid = $sponsorKid->where('age', $age);
}
if(!empty($month)) {
$sponsorKid = $sponsorKid->where('age', $age);
}
if(!empty($day)) {
$sponsorKid = $sponsorKid->where('day', $day);
}
//now that you have a final query pull the records
$sponsorKid = $sponsorKid->orderBy('id')->get();
$view = View::make('child-sponsorship.filter_results', compact('sponsorKid'));
$view = $view->render();
return $view;

Reset a dynamic dropdown back to initial state

I have an ajax dynamic dropdown form that onchange changes a second dropdown based on the firsts selection. However, if someone were to reset the form, all elements get cleared except for the dynamic one.
I made a reset button function that does: $('#myForm')[0].reset();
However it doesn't reset the dynamic dropdown.
Then I added $('#state').prop('selectedIndex',0); which only then selects the initial subitem.
Essentially I want it to go back to the default <option value="">State/Province</option> state that was there prior to becoming dynamic and I cannot figure out how to exactly to do this.
I am very very new and used previous questions and google to even get me this far.
Thanks
Update:
This is what I need reset:
<select name="state" class="dropdown" id="state">
<option value="">State/Province</option>
<!-- this is populated by ajax -->
</select>
This form changes the above:
<select name="country" class="dropdown" id="country" onchange="getStates();">
<option value="">Select Country</option>
<?php
$con = mysql_connect($db_host, $db_user, $db_pass);
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db('earth');
$query = "select id,country from regions order by country";
$result = mysql_query($query);
while ( $row = mysql_fetch_object( $result ) )
{
?>
<option value=<?php echo $row->id; ?>><?php echo $row->country;?> </option>
<?php }
mysql_free_result($result);
?>
</select>
Additional code:
function getStates()
{
$('#state').html('');
var e = document.getElementById("country");
var countryID = e.options[e.selectedIndex].value;
$.ajax({
type: "POST",
url: "getStates.php",
data: {countryID:countryID},
dataType:'json',
//success: function(result){
success: function(data){
var toAppend = '';
$.each(data,function(i,o){
toAppend += '<option value=' +o.id + '>' + o.name + '</option>';
});
$('#state').append(toAppend);
},
});
}
function reset_select_box(selector, default_value)
{
if(typeof default_value !== 'string') default_value = "";
var select_box = $(document).find(selector),
children = select_box.children();
console.log(children);
for(var i in children){
if(children[i].value === ""){
select_box.prop('selectedIndex', i);
}
}
};
function resetForm()
{
// since the form is dynamic, reset form does not reset the states
$('#frmSigGen')[0].reset();
}

This seems to do the trick:
function resetForm()
{
$('#frmSigGen')[0].reset();
$('#state').empty();
$('#state').append('<option value="">State/Province</option');
}

Maybe try looping through the select elements children looking for the default value?
var reset_select_box = function(selector, default_value){
if(typeof default_value !== 'string') default_value = "";
var
select_box = $(document).find(selector),
children = select_box.children();
console.log(children);
for(var i in children){
if(children[i].value === ""){
select_box.prop('selectedIndex', i);
}
}
};
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<select id="test">
<option value="">Default</option>
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">option 4</option>
<option value="5">option 5</option>
</select>
<button type="button" onclick="reset_select_box('#test');">Reset</button>
</body>
</html>

You could mark the newests options adding a particular data tag, i.e. data-toreset. Then, when you need to reset, remove only options with that tag.
The newest options:
<option data-toreset="1"></option>
The JQuery script could be like:
$('*[data-toreset="1"]').remove();
And then you could select the first element of your combo.

Dynamic PHP array with accordingly added onchange scripts

So the code below works for this particular example, and I would like to make it work in scenario where the amount of forms select + input type is dynamic determined by user on previous page. So now we have in php array of $champion[] = ("Aatrox", "somethingelse", "somethingelse2"); so now we loop the amount of select and input fields. Every champion has different spells so now when you choose Q for first champion AAtrox in input you will see "Spell1" below in somethingelse input user might want to choose E and he will see the name of the spell for that champion in the input form
<?php
$champion = "Aatrox"
?>
<select id="spell" name="spell" onchange="val()">
<option value="Passive">Passive</option>
<option value="Q" selected>Q</option>
<option value="W">W</option>
<option value="E">E</option>
<option value="R">R</option>
</select>
<input type="text" id="spellname" disabled>
<script>
var champions = {
"Aatrox":["Passive", "spell1", "spell2", "spell3", "spell4"],
"Ahri":["Passive", "spell1", "spell2", "spell3", "spell4"]
};
function change(x){
if(x==="Passive"){x=0;}
if(x==="Q"){x=1;}
if(x==="W"){x=2;}
if(x==="E"){x=3;}
if(x==="R"){x=4;}
return x;
}
function val(d) {
if(typeof d === "undefined"){
d = document.getElementById("spell").value;}
var spellname = document.getElementById("spellname");
spellname.value=champions["<?php echo $champion; ?>"][change(d)];
}
val("Q");
</script>
I can't really figure out dynamic how to check dynamic array from PHP in this javascript script

Not sure if I fully understand what you're trying to accomplish here, but here's a go at it.
<?php
$champions = array("Aatrox","Ahri");
foreach($champions as $champion){
?>
<select id="spell-<?php echo $champion ?>"
name="spell" onchange="val('<?php echo $champion ?>')">
<option value="Passive">Passive</option>
<option value="Q" selected>Q</option>
<option value="W">W</option>
<option value="E">E</option>
<option value="R">R</option>
</select>
<input type="text" id="spellname-<?php echo $champion ?>" disabled>
<?php } //end foreach ?>
<script>
var champions = {
"Aatrox":["Passive", "spell1", "spell2", "spell3", "spell4"],
"Ahri":["Passive", "spell1", "spell2", "spell3", "spell4"]
};
function change(x){
if(x==="Passive"){x=0;}
if(x==="Q"){x=1;}
if(x==="W"){x=2;}
if(x==="E"){x=3;}
if(x==="R"){x=4;}
return x;
}
function val(championName) {
d = document.getElementById("spell-" + championName).value;
var spellname = document.getElementById("spellname-" + championName);
spellname.value=champions[championName][change(d)];
}
<?php foreach($champions as $champion) {
echo "val(" . $champion . ");";
} ?>
</script>
Keep in mind it is generally bad practice to mix server side code with client side code. Although, at this point it would require a restructure of how you're handling everything (using AJAX to load JSON for example). I highly encourage you to research the topic.

Sort table by selected value

I have an online rugby game and I want to make a page where users have displayed in a table with only one column player name. If they select something from the dropdown list (speed, kicking, etc), the players are sorted based on what user selected.
Here is what I tried to do:
<script type="text/javascript">
var arr_head = ['name','age','ss','experience','leadership','weight','height','stamina','strength','breakthroughs','tackling,'handling','speed','kicking'];
var arr_ord = ['asc','asc','desc','desc','desc','desc','desc','desc','desc','desc','desc','desc','desc','desc'];
var arr_players = new Array();
var col = 0;
// the array bellow is generated with a function: $arr_players = player_list($teamid);
arr_players[0] = ['Bruce Ewing',20,151,2,3,84,182,21,22,21,23,24,23,17];
arr_players[1] = ['Barbu Frates',18,113,2,3,105,185,3,99,3,1,2,3,2];
arr_players[2] = ['Costi Buhaescu',24,116,2,1,95,198,2,99,2,3,4,4,2];
arr_players[3] = ['Corneliu Kirita',20,113,1,1,88,183,1,99,2,4,2,4,1];
arr_players[4] = ['Cristi Stelea',23,116,2,4,93,197,2,99,2,4,4,4,1];
arr_players[5] = ['Codrin Sarapatin',23,115,2,5,103,200,3,99,2,4,1,3,3];
arr_players[6] = ['Cosmin Tadici',19,113,1,5,99,203,2,99,2,1,2,4,3];
arr_players[7] = ['Dudu Dumea',21,115,1,5,87,179,2,99,3,3,2,4,2];
arr_players[8] = ['Dorian Hizo',24,115,1,4,98,195,4,99,3,2,1,3,3];
arr_players[9] = ['Ernest Cazacu',18,113,2,5,93,193,2,99,3,1,1,3,4];
arr_players[10] = ['Emil Siman',18,115,1,2,88,187,4,99,2,3,2,1,4];
arr_players[11] = ['Grigorie Banciu',20,116,2,5,102,198,3,99,2,4,2,4,2];
arr_players[12] = ['Horea Profis',19,112,2,5,104,185,3,99,2,2,3,1,2];
arr_players[13] = ['Iuliu Alexandrescu',19,112,1,4,99,174,3,99,1,2,4,1,2];
arr_players[14] = ['Ionut Halipa',20,117,2,4,87,171,2,99,4,4,2,1,5];
arr_players[15] = ['Ioan Ogasanu',20,120,1,5,85,198,4,99,4,4,3,3,3];
arr_players[16] = ['Larie Lozovan',19,115,1,5,102,180,3,99,4,4,2,1,2];
arr_players[17] = ['Mugur Buscan',20,114,1,3,93,192,2,99,1,2,2,3,5];
arr_players[18] = ['Nicusor Lucescu',22,113,2,4,94,193,4,99,2,2,2,3,1];
arr_players[19] = ['Olimpu Plesu',25,117,1,4,90,177,3,99,1,3,2,4,5];
arr_players[20] = ['Razvan Corlatean',23,112,1,1,92,194,1,99,2,3,4,1,2];
arr_players[21] = ['Sorin Halmageanu',21,115,1,4,101,193,2,99,2,2,2,3,5];
arr_players[22] = ['Sebi Ioanovici',21,116,1,3,104,179,2,99,4,3,2,3,3];
arr_players[23] = ['Titu Baldovin',25,113,2,2,100,185,2,99,3,3,2,2,2];
function sortMultiDimensional(a,b) {
if (arr_ord[col] == 'asc')
return ((a[col] < b[col]) ? -1 : ((a[col] > b[col]) ? 1 : 0));
else
return ((a[col] > b[col]) ? -1 : ((a[col] < b[col]) ? 1 : 0));
}
function sort_arr(crit) {
for (i=0; i<arr_head.length; i++) {
if (arr_head[i] == crit ) {
col = i;
arr_players.sort(sortMultiDimensional);
}
}
var tbl = document.getElementById('players').getElementsByTagName('tr');
for (i=0; i<arr_players.length; i++) {
linie = i + 2;
tbl[linie].getElementsByTagName('td')[1].innerHTML = arr_players[i][1];
}
}
</script>
<table id="players" border="0" width="100%">
<tr>
<th style="text-align: center;"><?php echo $text['PLAYERS']; ?></th>
</tr>
<tr>
<td>
<select onchange="sort_arr(this.options[selectedIndex].value)">
<option></option>
<option value="name"><?php echo $text['NAME']; ?></option>
<option value="age"><?php echo $text['AGE']; ?></option>
<option value="ss"><?php echo $text['SS']; ?></option>
<option value="experience"><?php echo $text['EXPERIENCE']; ?></option>
<option value="leadership"><?php echo $text['LEADERSHIP']; ?></option>
<option value="weight"><?php echo $text['WEIGHT']; ?></option>
<option value="height"><?php echo $text['HEIGHT']; ?></option>
<option value="stamina"><?php echo $text['STAMINA']; ?></option>
<option value="strength"><?php echo $text['STRENGTH']; ?></option>
<option value="breakthroughs"><?php echo $text['BREAKTHROUGHS']; ?></option>
<option value="tackling"><?php echo $text['TACKLING']; ?></option>
<option value="handling"><?php echo $text['HANDLING']; ?></option>
<option value="speed"><?php echo $text['SPEED']; ?></option>
<option value="kicking"><?php echo $text['KICKING']; ?></option>
</select>
</td>
</tr>
<tbody>
<?php for($i=0; $i<count($arr_players); $i++) { ?>
<tr><td><?php echo $arr_players[$i][1]; ?></td></tr>
<?php } ?>
</tbody>
</table>
But it doesn't work. What is wrong?

I would highly recommend an off-the-shelf solution like the jQuery plugin http://www.datatables.net/

The [1]'s from the original version of the line below needs to be [0] (as shown). Arrays in javascript are zero-based, the first element is 0, not 1. There is only one cell in the table rows so I think you want the first (only) one. The 2nd one (for getting the element from the player array) I am guessing you also want to use the first element (the name).
tbl[linie].getElementsByTagName('td')[0].innerHTML = arr_players[i][0];
This error was easily found when I put this (as much as possible) in a fiddle here: http://jsfiddle.net/TeAGw/5/
Did you try to debug this at all? If you had simply looked at the error message reported by the browser when it "did not work" you should have been able to instantly determine the cause of this error. All three major web browsers now have integrated debugging tools, I recommend using them.