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.
I have input radio list with custom values wich is loaded from the database. By default i have one item checked when window is loaded.
So when i try to grab that checked value i get NULL, but value of checked radio exist.
Loop:
<?php $first = true; ?>
<?php foreach ($prices as $item): ?>
<tr>
<td><input type="radio" name="price" value="<?= $item['price'];?>" class="price" <?= $first ? 'checked' : '' ?>> </td>
<td><input type="text" name="price" value=" <?= $item['price'];?>" class="price_field">€</td>
</tr>
<?php $first = false;?>
<?php endforeach; ?>
Whit this loop i get succesfull list of items and only first item is selected.
So now when page is loaded i want to get selected value and put him on other div like sum.
I try with jQuery but null
$(window).on("load", function(){
var price = $(".price");
var total = $(".total");
alert($(".price").val()); // null
});
I have following code to get the values of all checked checkboxes. Surprisingly last element of an array comes as a 'Array'.
var selected = [];
$('#checkboxes input:checked').each(function(){
selected.push($(this).attr('value'));
});
Even if only one checkbox is checked, it adds extra element in an array.
Array will be like this:
selected[0]=Dove
selected[1]=Array
What can be the issue with it? I'm unable to find any reason behind this. Can anyone help?
HTML Code
<ul id='checkboxes' class="list-style1">
<?php foreach($brands as $row){ ?>
<span class='checkbox-wrapper' id='<?php echo $brand; ?>'>
<li><input type='checkbox' value='<?php echo $row['brand']; ?>'>
<label for='<?php echo $row['brand']; ?>'><?php echo $row['brand']; ?></label>
</li></span>
<?php } ?>
</ul>
var checkedValues = $('#checkboxes input:checked').map(function() {
return this.value;
}).get();
it will return the selected value of the checkbox in array.
referrence link
I am creating a Data table with following code
<?php
foreach($redeemSales as $sale)
{
?>
<tr class='clickableRow<?php echo $isRead ? '' : ' newrow' ?>' href='#'>
<td><form><input type="checkbox" id="userSelection" name="userslection" ></form></td>
<td><?php echo $sale["ring"];?></td>
<td><?php echo formatFullDate($sale["soldDate"]) ?></td>
<td><?php echo $sale["saleType"]; ?></td>
<td>
<div class="col-lg-8">
<select name="type" id="redeemOptions" class="form-control">
<option value="None">None</option>
<option value="CD">(CD)</option>
<option value="Amex">American Express Card (Amex)</option>
</select>
</div>
</td>
</tr>
<?php }?>
I want to make it so if anyone change the option to any oe of CD Or Amex, it will set the selection to its row as checked.
jAVAScript code is here
<script language="javascript">
$(document).ready(function(e)
{
$('#redeemOptions').change(function(){
if($('#redeemOptions').val() == 'None')
{
document.getElementById("userSelection").checked = false;
}
else
{
document.getElementById("userSelection").checked = true;
}
});
});
</script>
As you can see that there is a for loop, so its rows getting added in a table. The above method works only for first row. If i change the options, it will set selection to Checked. But after first rows, no other row is showing that behavior. It is probably something to do with id of the elements.
How can one find out a solution so that other rows show same behavior. Secondly, if I have to get the ids or values of all rows that are "Checked" how will i do it in php
the problem is that an id has to identify one single element on the page, and you are generating multiple items with the same id. Change your select to something like the following:
<select name="type" class="form-control redeemOptions">
And then change your javascript function to the following, to take advantage of the fact that "this" will equal the object that the change event is being fired from:
$('.redeemOptions').change(function(){
var menuChanged = $(this),
parentForm = menuChanged.closest('form'),
correspondingCheckbox = parentForm.find('input[name=userSelection]');
if(menuChanged.val() == 'None')
{
correspondingCheckbox[0].checked = false;
}
else
{
correspondingCheckbox[0].checked = true;
}
});
Finally, remove the id="userSelection" from the checkbox and just leave the name. It won't hurt the functionality but it is technically invalid because again you can only have one element of a given id on the page.
As I can see for every $sale in $redeemSales you have a checkbox having id "userSelection" and a select box having id "redeemOptions". I advise you to use unique ids. So append $i=0...$i++ to the ids of both.
For Row 1: userSelection0 redeemOptions0
For Row 2: userSelection1 redeemOptions1
and so on..
In Select tag, use onchange event :-
<select name="type" id="redeemOptions<?php echo $i; ?>" class="form-control" onchange="foo(<?php echo $i; ?>)">
And write a javascript function :-
<script language="javascript" type="text/javascript">
function foo(id)
{
if($('#redeemOptions'+id).val() == 'None')
{
document.getElementById("userSelection"+id).checked = false;
}
else
{
document.getElementById("userSelection"+id).checked = true;
}
}
</script>
I have this in the popup, which creates the dropdown with database entries.
<select name="ddlNames" id="ddlNames">
<?php
while($row = mysql_fetch_array($result)) {
?>
<option value="<?php echo $row["vendorid"]; ?>"><?php echo $row["vendorname"]; ?></option>
<?php
}
?>
</select>
<input type="button" value="Select" onclick="SetVendor();" />
Then this javascript takes the values and inserts them into the fields of parent page and also closes the popup at the same time.
<script type="text/javascript">
function SetVendor() {
if (window.opener != null && !window.opener.closed) {
var vendor_name = window.opener.document.getElementById("vendor_name");
var vendor_nameSelect = document.getElementById("ddlNames");
var vendor_nameSelectedText = vendor_nameSelect.options[vendor_nameSelect.selectedIndex].text;
vendor_name.value = vendor_nameSelectedText;
var vendorid = window.opener.document.getElementById("vendorid");
vendorid.value = document.getElementById("ddlNames").value;
}
window.close();
}
</script>
I am already grabbing 2 different fields. an id number which are populated in the value parameter of each option, and the name of each option as well.
So now i want a third thing, then 4th and 5th and so on. i can't just put this in the dropdown options loop. doesn't work.
<input type="hidden" id="street" name="street" value="<?php echo $row["street"]; ?>">
Those are the fields i want to grab next from each record. the address fields. street, city, state, zip.
So for each drop down i want to grab 6 different values and when selecting one of the dropdown items from popup window form, those 6 values should insert into 6 different input boxes of parent page. what i have so far works fine for 2 values. just don't know how to do 3 or more.
UPDATE:
what if i don't use a dropdown? what if i just use divs with id's? and one of the div items would be a link and when clicking that link, all the div values will be collected of just that row that was clicked? something like this:
<?php
while($row = mysql_fetch_array($result)) {
?>
<div style="display: block; clear: both;" id="this_needs_to_be_loop">
<div id="myvendorid" style="float: left; padding-right: 10px;"><?php echo $row["vendorid"]; ?></div>
<div id="myvendorname" style="float: left; padding-right: 10px;"><?php echo $row["vendorname"]; ?></div>
<div id="mystreet" style="float: left; padding-right: 10px;"><?php echo $row["street"]; ?></div>
<div id="mycity" style="float: left; padding-right: 10px;"><?php echo $row["city"]; ?></div>
<div id="mystate" style="float: left; padding-right: 10px;"><?php echo $row["state"]; ?></div>
<div id="myzip" style="float: left; padding-right: 10px;"><?php echo $row["zip"]; ?></div>
</div>
<?php
}
?>
UPDATE:
my json script looks like this. doesn't look right.
<script>var myDataBase = {"1":{"0":"1","vendorid":"1","1":"34534","vendor_no":"34534","2":"hi","vendorname":"hi","3":"3434534534","phone":"3434534534","4":"sdfsdfs#sdfsdfsd.com","email":"sdfsdfs#sdfsdfsd.com","5":null,"website":null,"6":null,"glacct":null,"7":null,"category":null,"8":"sdfsdfsdf","street":"sdfsdfsdf","9":"sdfsdfsd","city":"sdfsdfsd","10":"sdfsdf","state":"sdfsdf","11":null,"pobox":null,"12":null,"postalcode":null,"13":null,"country":null,"14":null,"description":null},"2":{"0":"2","vendorid":"2","1":"5334534","vendor_no":"5334534","2":"sfsdfsfsd","vendorname":"sfsdfsfsd","3":"78654653","phone":"78654653","4":"ggh#sdsg.com","email":"ggh#sdsg.com","5":null,"website":null,"6":null,"glacct":null,"7":null,"category":null,"8":"sfsdfsdfsdf","street":"sfsdfsdfsdf","9":"sdfsdfsdsdf","city":"sdfsdfsdsdf","10":"sdfsdfsdfsd","state":"sdfsdfsdfsd","11":null,"pobox":null,"12":null,"postalcode":null,"13":null,"country":null,"14":null,"description":null},"4":{"0":"4","vendorid":"4","1":"345342","vendor_no":"345342","2":"dgdf","vendorname":"dgdf","3":"dfgdf","phone":"dfgdf","4":"dfgdfgdf","email":"dfgdfgdf","5":null,"website":null,"6":null,"glacct":null,"7":null,"category":null,"8":"sdfsdsd","street":"sdfsdsd","9":"sdfsfsd","city":"sdfsfsd","10":"sdfsdf","state":"sdfsdf","11":null,"pobox":null,"12":null,"postalcode":null,"13":null,"country":null,"14":null,"description":null},"5":{"0":"5","vendorid":"5","1":"978765345546","vendor_no":"978765345546","2":"jfgsdfjghdfger","vendorname":"jfgsdfjghdfger","3":"54686576456","phone":"54686576456","4":"sdfjhr#dfghjkl.com","email":"sdfjhr#dfghjkl.com","5":null,"website":null,"6":null,"glacct":null,"7":null,"category":null,"8":"gdfgdf","street":"gdfgdf","9":"dfgdfgdf","city":"dfgdfgdf","10":"dfgdfgdf","state":"dfgdfgdf","11":null,"pobox":null,"12":null,"postalcode":null,"13":null,"country":null,"14":null,"description":null}};</script>
Your dropdown popup window must perforce contain all the values. You can do this in Javascript.
You will have a loop in PHP that fetches a tuple:
{ vendorid, vendorname, street, address, ... }
You now use this tuple to create a dropdown:
<option value="{$vendorid}">{$vendorname}</option>
To do what you want, you need to also save the same data in a different structure:
<?php
// This is OUTSIDE the cycle that creates the options
$database = array();
// This is inside the cycle that creates the options
$option = "<option value=\"{$data['vendorid']}\">{$data['vendorname']}</option>";
$database[$data['vendorid']] = $data;
// Now the cycle has ended. We print the data in Javascript.
print "<script>";
print "var myDataBase = ";
print json_encode($database);
print ";\n";
print "</script>";
The above defines a Javascript array which is much like a PHP one, with the fields having the same names as in PHP thanks to json_encode.
Now in the Javascript you get the vendor Id as before:
var vendor_id = vendor_nameSelect.options[vendor_nameSelect.selectedIndex].value;
This vendor_id is a key inside what is now a Javascript variable, myDataBase. So you can do:
window.opener.document.getElementById("streetfieldid").value
= myDatabase[vendor_id]["street"];
window.opener.document.getElementById("addressfieldid").value
= myDatabase[vendor_id]["address"];
...and so on.
You can see the concept in action (except for PHP of course) here. I have only used three fields and they are all in the same page, but the modifications are trivial. To generate myDataBase you use the above PHP code.