I'm using the following function to move data between two select fields:
<script language="javascript">
function move(tbFrom, tbTo)
{
var arrFrom = new Array(); var arrTo = new Array();
var arrLU = new Array();
var i;
for (i = 0; i < tbTo.options.length; i++)
{
arrLU[tbTo.options[i].text] = tbTo.options[i].value;
arrTo[i] = tbTo.options[i].text;
}
var fLength = 0;
var tLength = arrTo.length;
for(i = 0; i < tbFrom.options.length; i++)
{
arrLU[tbFrom.options[i].text] = tbFrom.options[i].value;
if (tbFrom.options[i].selected && tbFrom.options[i].value != "")
{
arrTo[tLength] = tbFrom.options[i].text;
tLength++;
}
else
{
arrFrom[fLength] = tbFrom.options[i].text;
fLength++;
}
}
tbFrom.length = 0;
tbTo.length = 0;
var ii;
for(ii = 0; ii < arrFrom.length; ii++)
{
var no = new Option();
no.value = arrLU[arrFrom[ii]];
no.text = arrFrom[ii];
tbFrom[ii] = no;
}
for(ii = 0; ii < arrTo.length; ii++)
{
var no = new Option();
no.value = arrLU[arrTo[ii]];
no.text = arrTo[ii];
tbTo[ii] = no;
}
}
</script>
main php page
<?php
mysql_select_db($database_UARData, $UARData);
$query_DistributionGroups = "SELECT distgrp.distgrpnme FROM distgrp";
$DistributionGroups = mysql_query($query_DistributionGroups, $UARData) or die(mysql_error());
$row_DistributionGroups = mysql_fetch_assoc($DistributionGroups);
$totalRows_DistributionGroups = mysql_num_rows($DistributionGroups);
?>
<select name="newusrdgavail" size="10" id="newusrdgavail" style="width:300px">
<?php
do {
?>
<option value="<?php echo $row_DistributionGroups['distgrpnme']?>"><?php echo $row_DistributionGroups['distgrpnme']?></option>
<?php
} while ($row_DistributionGroups = mysql_fetch_assoc($DistributionGroups));
$rows = mysql_num_rows($DistributionGroups);
if($rows > 0) {
mysql_data_seek($DistributionGroups, 0);
$row_DistributionGroups = mysql_fetch_assoc($DistributionGroups);
}
?>
</select>
</label></td>
<td align="center" bgcolor="#CCCCCC"><p>
<input type="button" name="newusrdgadd" id="newusrdgadd" value="Add" onclick="move(newusrdgavail,newusrdgreq)"/>
</p>
<p>
<input type="button" name="newusrdgremove" id="newusrdgremove" value="Remove" onclick="move(newusrdgreq,newusrdgavail)"/>
</p></td>
<td bgcolor="#CCCCCC"><label>
<select name="newusrdgreq" size="10" multiple="multiple" id="newusrdgreq" style="width:300px">
</select>
</label></td>
The move function works well and the moved values show in the correct field on the form. The problem is when I go to php submit:
$newusrdgreq = $_POST['newusrdgreq'];
$email_message .= "Required Email Distribution Groups: ".$newusrdgreq."\n";
I get the Notice: Undefined Index. On this field only. Everything else submits just fine. I know I can use the isset function to avoid empty or null values. However I think the great issue is that the "newusrdgreq" field is not getting the added and removed values properly attached to the field, but I cannot see why. Any help would be appreciated.
problem here that SELECT has only one value, even if you set it multiple - user must select all values manually, so basically all you items in select box - are not sending back to server
to fix this you can have 2 options:
create hidden field were you will duplicate data from select box
before submit - select all values in SELECT
Related
I have 2 select's. I want to move items between them. They should be sorted. I grabbed some code from SO, and am experiencing something weird. When I pass the element as a parameter to the sort function, it doesn't work. When I explicitly get the element in the sort function it works perfectly. Look at the first line in the sort function and you'll see what I'm talking about.
Here's my PHP part.
echo "
<div><select id='listBox1' class='form-control select-manage-category' size='5'>
<option value=1>1-text</option>
<option value=2>2-text</option>
<option value=3>3-text</option>
<option value=4>4-text</option>
</select></div>
<input id='add-category' onclick='ClickAdd()' name='add' type='button' value='Add Item'>
<input id='remove-category' onclick='ClickRemove()' name='add' type='button' value='Remove Item'>
<div>
<select id='listBox2' class='form-group percent-100' size='5'></select>
</div>
";
echo "<script>";
include 'bstest.js';
echo "</script>";
And, this is my JS (bstest.js).
function ClickAdd()
{
// get the 'left' listbox.
var e = document.getElementById('listBox1');
// get the text and value of selected item.
var eText = e.options[e.selectedIndex].text;
var eVal = e.value;
// create the new element
var opt = document.createElement('option');
opt.text = eText;
opt.value = eVal;
// add it to the 'right' listbox.
document.getElementById('listBox2').options.add(opt);
// now remove it from the 'left' list.
value = e.selectedIndex;
e.removeChild(e[value]);
sortSelect(e);
}
function ClickRemove()
{
// get the 'right' listbox.
var e = document.getElementById('listBox2');
// get the text and value of selected item.
var eText = e.options[e.selectedIndex].text;
var eVal = e.value;
// create the new element
var opt = document.createElement('option');
opt.text = eText;
opt.value = eVal;
// add it to the 'left' listbox.
document.getElementById('listBox1').options.add(opt);
// now remove it from the 'right' list.
value = e.selectedIndex;
e.removeChild(e[value]);
sortSelect(e);
}
function sortSelect(selectToSort)
{
//selectToSort = document.getElementById('listBox1'); // works. If I comment it, it doesn't work.
var arrOptions = [];
for (var i = 0; i < selectToSort.options.length; i++)
{
arrOptions[i] = [];
arrOptions[i][0] = selectToSort.options[i].value;
arrOptions[i][1] = selectToSort.options[i].text;
arrOptions[i][2] = selectToSort.options[i].selected;
}
arrOptions.sort();
for (var i = 0; i < selectToSort.options.length; i++)
{
selectToSort.options[i].value = arrOptions[i][0];
selectToSort.options[i].text = arrOptions[i][1];
selectToSort.options[i].selected = arrOptions[i][2];
}
return;
}
I'm trying to have some options start as selected when using a selectize multiselect. I'm pulling some info from a database using PHP then converting the info to a JS array. When I try to "initialize the Selectize control" I get an error saying ReferenceError: options is not defined. What can I do to add items to my multiselect?
<?
//Query
$courseQuery = $page->dbf->query("SELECT * FROM courses");
$curCourses = $page->dbf->query("SELECT * FROM recipesToCourse WHERE recipeId = '$recID'");
$course = [];
while($crs = $courseQuery->fetch_object()) {
$course[$crs->id] = $crs->title;
}
$jsCourse = json_encode($course);
$crsList = [];
while($cr = $curCourses->fetch_object()) {
$crsList[] = $cr->courseId;
}
$jsCrsList = json_encode($crsList);
?>
<script>
//Enable multiselect
$('#course').selectize({
maxItems: 10
});
</script>
<select id="course" name="course[]" multiple>
<option value="">-- Select Courses --</option>
<?
foreach($course as $key=>$value) {
?>
<option value="<?=$key?>"><?=$value?></option>
<?
}
?>
</select>
<script>
var courses = '<?echo $jsCourse?>';
courses = JSON.parse(courses);
var crsList = '<?echo $jsCrsList?>';
crsList = JSON.parse(crsList);
// initialize the Selectize control !!My ERROR!!
var $select = $('#course').selectize(options);
// fetch the instance
var selectize = $select[0].selectize;
index = 0;
var select = document.getElementById('course');
for(var i = 1; i < Object.keys(courses).length + 1; i++) {
console.log('checking...');
if(crsList[index] == i) {
console.log('adding');
selectize.addItem(courses[i]);
index++;
}
}
</script>
I have a html-form to read out data from a database.
By clicking a button, there is the possibility to create additional input fields.
<table>
<tr>
<td>
<input type="text" id="productinput" name="productinput[]" class="awesomplete" list="productselect" size="20"/>
</td>
</tr>
<tr>
<td>
<input type="text" id="productinput2" name="productinput[]" class="awesomplete" list="productselect" size="20"/>
</td>
</tr>
<tr>
<td>
<input type="text" id="productinput3" name="productinput[]" class="awesomplete" list="productselect" size="20"/>
</td>
</tr>
</table>
<script>
var counter = 1;
var limit = 10;
function addInput(divName){
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}
else {
// Create new div
var newdiv = document.createElement('div');
newdiv.innerHTML = '<br><input type="text" name="productinput[]" class="awesomplete" list="productinputselect" size="20"/>';
document.getElementById(divName).appendChild(newdiv);
// Re instantiate Awesomplete
new Awesomplete(newdiv.querySelector('input'), { list: document.querySelector('#productinputselect') });
// Set counter
counter++;
}
}
</script>
<div id="dynamicInput">
<b></b><input type="text" id="productinput4" name="productinput[]" class="awesomplete" list="productinputselect" size="20"/>
</div>
<input type="button" value="Additional Input Field" onClick="addInput('dynamicInput');">
<select name="productselect" id="productselect" size="9" onclick="sendproductnameinput()">
<?php
include("../files/zugriff.inc.php"); // database access
$sql = "SELECT * FROM product_main ORDER BY Name";
$result = mysqli_query($db, $sql);
while ($row = mysqli_fetch_assoc($result)) {
echo '<option class="optproduct" value='. $row['Name'] . '>' . $row['Name']. '</option>';
echo '<br>';
}
mysqli_close($db);
?>
</select>
So far, this works fine!
By using the following javascript-function the selected value from the -list is displayed in the first input-field.
function sendproductnameinput() {
document.formdatabase.productinput.value = document.formdatabase. productselect.value;
}
How can I get the next selected value in the second input-field and so on? This function should work in the additionally added fields, too.
You can use this :
for (var i = document.formdatabase.length - 1; i >= 0; i--) {
document.formdatabase[i].value = document.formdatabase.productselect.value;
}
Your Select seems to be not Multiple select, so I suppose you want to put the same selected value in each input.
And if multiple select than you can use this:
function getSelectValues(select) {
var result = [];
var options = select && select.options;
var opt;
for (var i=0, iLen=options.length; i<iLen; i++) {
opt = options[i];
if (opt.selected) {
result.push(opt.value || opt.text);
}
}
return result;
}
function sendproductnameinput() {
var selected = getSelectValues(document.formdatabase.productselect);
for (var i = document.formdatabase.length - 1; i >= 0; i--) {
if(i < selected.length) {
document.formdatabase[i].value = selected[i];
}
}
}
here is a fiddle https://jsfiddle.net/586menbv/16/
Well, it depends on where the function sendproductnameinput() is defined, but if the variable counter is visible from it's scope, I would dare to write something like this:
var timesSomethingSelected = 1;
function sendproductnameinput() {
var productinput = 'productinput';
if(timesSomethingSelected > 1) {
productinput += timesSomethingSelected;
timesSomethingSelected++;
} else if(timesSomethingSelected == counter) {
//Do something if there aren't more inputs.
}
document.formdatabase[productinput].value = document.formdatabase. productselect.value;
}
How can I refresh second select option when first select option is changed?
I am generating the array here for patient_code2:
//GENERATE NUMBERS FOR CYCLE
function patsient(selector) {
var i;
for (i = 1; i <= 99; i++) {
var text = '0' + i;
selector.options[i - 1] = new Option(text.substr(text.length - 2, 2));
}
}
patsient(document.getElementById("patient_code2"));
I am generating the array for patient_code here:
function myFunction(selector) {
var i;
for (i = 1; i <= 999; i++) {
var text = '00' + i;
selector.options[i - 1] = new Option(text.substr(text.length - 3, 3));
}
}
//usage:
myFunction(document.getElementById("patient_code"));
Here I am inserting the last value from database to the field:
//INSERT THE VALUE FROM DATABASE
var tsykkel_id = '<?php foreach ($tsykkel_id as $row){echo $row['patsiendi_tsykkel'];}?>';
$('#patient_code2')[0].options[parseInt(tsykkel_id)].selected = true;
$(document).ready().on('change', '#patient_code2', function () {
var index = $('option:selected', $(this)).index();
$('option', $(this)).each(function (i, x) {
if (i < index) { $(this).remove(); }
});
});
HTML
<select name="patient_code" data-placeholder="" id="patient_code" class="chosen-select form-control" tabindex="2">
</select>
<label class="control-label">Tsükkel:</label>
<select name="patient_code2" data-placeholder="" id="patient_code2" class="chosen-select form-control" tabindex="2">
</select>
So lets say that person chooses 002 from the first then the second should start from 01 again.
try this then. Code is tested.
$(document).ready().on('change','#patient_code2',function(){
var index = $('option:selected',$(this)).index();
$('option',$(this)).each(function(i,x){
if(i<index){$(this).remove();}
});
$('select#patient_code').prop('selectedIndex', 0);
});
fiddle : http://jsfiddle.net/roullie666/69j94ro6/2/
You can just start printing after the match has been found. I am writing both ways since you asked?
For javascript version use roullie's no point duplicating.
<?php
$flag = false;
foreach ($tsykkel_id as $row) {
if ($selected) {
$flag = true;
}
if ($flag) {
$row['patsiendi_tsykkel'];
}
}?>
I have multiple dropdown lists on my PHP page and all are created like this:
<?php
//Select values from MySQL Database
$query = "SELECT name FROM Player";
$result = mysql_query($query);
//Show DropDownList
echo '<select name="players" onclick="sortlist(this)">';
while($row = mysql_fetch_assoc( $result ))
{
echo '<option value="'.$row['name'].'">' . $row['name'] . '</option>';
}
echo '</select>';
?>
Now in case you haven't noticed I call a javascript function "sortlist(this)" on every dropdownlist i have. This function just order values alphabetically. You can check the script:
<script>
function sortlist(selElem) {
var tmpAry = new Array();
for (var i=0;i<selElem.options.length;i++) {
tmpAry[i] = new Array();
tmpAry[i][0] = selElem.options[i].text;
tmpAry[i][1] = selElem.options[i].value;
}
tmpAry.sort();
while (selElem.options.length > 0) {
selElem.options[0] = null;
}
for (var i=0;i<tmpAry.length;i++) {
var op = new Option(tmpAry[i][0], tmpAry[i][1]);
selElem.options[i] = op;
}
return;
}
</script>
All my dropdownlists are inside a form tag like this:
<form accept-charset="utf-8" action="" method="post">
The script is running ok, i have the dropdownlist ordered alphabetically, but whenever i select one value, it always shows the first one.
try something like this
<body>
<select id="select_id" >
<option value="B">B</option>
<option value="Z">Z</option>
<option value="C">C</option>
<option value="E">E</option>
<option value="A">A</option>
</select>
</body>
<script type="text/javascript">
function sortlist(selElem) {
var tmpAry = new Array();
for (var i=0;i<selElem.options.length;i++) {
tmpAry[i] = new Array();
tmpAry[i][0] = selElem.options[i].text;
tmpAry[i][1] = selElem.options[i].value;
}
tmpAry.sort();
while (selElem.options.length > 0) {
selElem.options[0] = null;
}
for (var i=0;i<tmpAry.length;i++) {
var op = new Option(tmpAry[i][0], tmpAry[i][1]);
selElem.options[i] = op;
}
return;
}
sortlist(document.getElementById('select_id'));
</script>
REASON: your script always sorting your select on onclick no matter whether you are selecting value it is sorting and reseting your selected value.
so call your script only once for sorting after you have render your select element
Why not just
$query = "SELECT name FROM Player ORDER BY name ASC";
How about this
function sortlist(elem) {
arrTexts = new Array();
for(i=0; i<elem.length; i++) {
arrTexts[i] = elem.options[i].text;
}
arrTexts.sort();
for(i=0; i<elem.length; i++) {
elem.options[i].text = arrTexts[i];
elem.options[i].value = arrTexts[i];
}
}