[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 112: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
www.dhtmlgoodies.com • View topic - Multiple select form widget issue in Firefox
Advertisement

Multiple select form widget issue in Firefox

Moderators: Calcifer, slothy

Multiple select form widget issue in Firefox

Postby phparmy » Fri Nov 30, 2007 3:52 pm

Hello,
multiple select from works well in ie6 and ie7.

But it not works on firefox.
<?php
$toBox=$_POST['toBox'];
foreach($toBox as $value){
echo "$value<br>";
}
?>
I can not get values in firefox.
I think problem is in multipleSelectOnSubmit function
function multipleSelectOnSubmit()
{
for(var no=0;no<arrayOfItemsToSelect.length;no++){
var obj = arrayOfItemsToSelect[no];
for(var no2=0;no2<obj.options.length;no2++){
obj.options[no2].selected = true;
}
}

}

Please Help.
phparmy
 
Posts: 4
Joined: Fri Nov 30, 2007 3:46 pm

Postby Batalf » Fri Nov 30, 2007 4:59 pm

Batalf
Site Admin
 
Posts: 2160
Joined: Sat Oct 22, 2005 9:38 pm

Postby phparmy » Mon Dec 03, 2007 8:57 am

Could you try this code in firefox, this code is your yavascript code i have not changed it. I have only changed after <body> tag. This Code runs in ie6 but not works in firefox.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Multiple select boxes</title>
<?
foreach($_POST['toBox'] as $key=>$value){
echo $key.":".$value."<br>";
}
?>
<style type="text/css">
body{
background-color:#FFF;
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
}

.multipleSelectBoxControl span{ /* Labels above select boxes*/
font-family:arial;
font-size:11px;
font-weight:bold;
}
.multipleSelectBoxControl div option{ /* Select box layout */
font-family:arial;

}

.multipleSelectBoxControl div select{

height:100%;
}
.multipleSelectBoxControl input{ /* Small butons */
width:25px;
}

.multipleSelectBoxControl div{
float:left;
}

fieldset{
width:500px;
margin:10px;
}
img{
border:0px;
}
</style>
<script type="text/javascript">

/************************************************************************************************************
(C) www.dhtmlgoodies.com, October 2005

This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.

Terms of use:
You are free to use this script as long as the copyright message is kept intact. However, you may not
redistribute, sell or repost it without our permission.

Thank you!

www.dhtmlgoodies.com
Alf Magne Kalleland

************************************************************************************************************/


var fromBoxArray = new Array();
var toBoxArray = new Array();
var selectBoxIndex = 0;
var arrayOfItemsToSelect = new Array();


function moveSingleElement()
{
var selectBoxIndex = this.parentNode.parentNode.id.replace(/[^\d]/g,'');
var tmpFromBox;
var tmpToBox;
if(this.tagName.toLowerCase()=='select'){
tmpFromBox = this;
if(tmpFromBox==fromBoxArray[selectBoxIndex])tmpToBox = toBoxArray[selectBoxIndex]; else tmpToBox = fromBoxArray[selectBoxIndex];
}else{

if(this.value.indexOf('>')>=0){
tmpFromBox = fromBoxArray[selectBoxIndex];
tmpToBox = toBoxArray[selectBoxIndex];
}else{
tmpFromBox = toBoxArray[selectBoxIndex];
tmpToBox = fromBoxArray[selectBoxIndex];
}
}

for(var no=0;no<tmpFromBox.options.length;no++){
if(tmpFromBox.options[no].selected){
tmpFromBox.options[no].selected = false;
tmpToBox.options[tmpToBox.options.length] = new Option(tmpFromBox.options[no].text,tmpFromBox.options[no].value);

for(var no2=no;no2<(tmpFromBox.options.length-1);no2++){
tmpFromBox.options[no2].value = tmpFromBox.options[no2+1].value;
tmpFromBox.options[no2].text = tmpFromBox.options[no2+1].text;
tmpFromBox.options[no2].selected = tmpFromBox.options[no2+1].selected;
}
no = no -1;
tmpFromBox.options.length = tmpFromBox.options.length-1;

}
}


var tmpTextArray = new Array();
for(var no=0;no<tmpFromBox.options.length;no++){
tmpTextArray.push(tmpFromBox.options[no].text + '___' + tmpFromBox.options[no].value);
}
tmpTextArray.sort();
var tmpTextArray2 = new Array();
for(var no=0;no<tmpToBox.options.length;no++){
tmpTextArray2.push(tmpToBox.options[no].text + '___' + tmpToBox.options[no].value);
}
tmpTextArray2.sort();

for(var no=0;no<tmpTextArray.length;no++){
var items = tmpTextArray[no].split('___');
tmpFromBox.options[no] = new Option(items[0],items[1]);

}

for(var no=0;no<tmpTextArray2.length;no++){
var items = tmpTextArray2[no].split('___');
tmpToBox.options[no] = new Option(items[0],items[1]);
}
}

function sortAllElement(boxRef)
{
var tmpTextArray2 = new Array();
for(var no=0;no<boxRef.options.length;no++){
tmpTextArray2.push(boxRef.options[no].text + '___' + boxRef.options[no].value);
}
tmpTextArray2.sort();
for(var no=0;no<tmpTextArray2.length;no++){
var items = tmpTextArray2[no].split('___');
boxRef.options[no] = new Option(items[0],items[1]);
}

}
function moveAllElements()
{
var selectBoxIndex = this.parentNode.parentNode.id.replace(/[^\d]/g,'');
var tmpFromBox;
var tmpToBox;
if(this.value.indexOf('>')>=0){
tmpFromBox = fromBoxArray[selectBoxIndex];
tmpToBox = toBoxArray[selectBoxIndex];
}else{
tmpFromBox = toBoxArray[selectBoxIndex];
tmpToBox = fromBoxArray[selectBoxIndex];
}

for(var no=0;no<tmpFromBox.options.length;no++){
tmpToBox.options[tmpToBox.options.length] = new Option(tmpFromBox.options[no].text,tmpFromBox.options[no].value);
}

tmpFromBox.options.length=0;
sortAllElement(tmpToBox);

}


/* This function highlights options in the "to-boxes". It is needed if the values should be remembered after submit. Call this function onsubmit for your form */
function multipleSelectOnSubmit()
{
for(var no=0;no<arrayOfItemsToSelect.length;no++){
var obj = arrayOfItemsToSelect[no];
for(var no2=0;no2<obj.options.length;no2++){
obj.options[no2].selected = true;
}
}

}

function createMovableOptions(fromBox,toBox,totalWidth,totalHeight,labelLeft,labelRight)
{
fromObj = document.getElementById(fromBox);
toObj = document.getElementById(toBox);

arrayOfItemsToSelect[arrayOfItemsToSelect.length] = toObj;


fromObj.ondblclick = moveSingleElement;
toObj.ondblclick = moveSingleElement;


fromBoxArray.push(fromObj);
toBoxArray.push(toObj);

var parentEl = fromObj.parentNode;

var parentDiv = document.createElement('DIV');
parentDiv.className='multipleSelectBoxControl';
parentDiv.id = 'selectBoxGroup' + selectBoxIndex;
parentDiv.style.width = totalWidth + 'px';
parentDiv.style.height = totalHeight + 'px';
parentEl.insertBefore(parentDiv,fromObj);


var subDiv = document.createElement('DIV');
subDiv.style.width = (Math.floor(totalWidth/2) - 15) + 'px';
fromObj.style.width = (Math.floor(totalWidth/2) - 15) + 'px';

var label = document.createElement('SPAN');
label.innerHTML = labelLeft;
subDiv.appendChild(label);

subDiv.appendChild(fromObj);
subDiv.className = 'multipleSelectBoxDiv';
parentDiv.appendChild(subDiv);


var buttonDiv = document.createElement('DIV');
buttonDiv.style.verticalAlign = 'middle';
buttonDiv.style.paddingTop = (totalHeight/2) - 50 + 'px';
buttonDiv.style.width = '30px';
buttonDiv.style.textAlign = 'center';
parentDiv.appendChild(buttonDiv);

var buttonRight = document.createElement('INPUT');
buttonRight.type='button';
buttonRight.value = '>';
buttonDiv.appendChild(buttonRight);
buttonRight.onclick = moveSingleElement;

var buttonAllRight = document.createElement('INPUT');
buttonAllRight.type='button';
buttonAllRight.value = '>>';
buttonAllRight.onclick = moveAllElements;
buttonDiv.appendChild(buttonAllRight);

var buttonLeft = document.createElement('INPUT');
buttonLeft.style.marginTop='10px';
buttonLeft.type='button';
buttonLeft.value = '<';
buttonLeft.onclick = moveSingleElement;
buttonDiv.appendChild(buttonLeft);

var buttonAllLeft = document.createElement('INPUT');
buttonAllLeft.type='button';
buttonAllLeft.value = '<<';
buttonAllLeft.onclick = moveAllElements;
buttonDiv.appendChild(buttonAllLeft);

var subDiv = document.createElement('DIV');
subDiv.style.width = (Math.floor(totalWidth/2) - 15) + 'px';
toObj.style.width = (Math.floor(totalWidth/2) - 15) + 'px';

var label = document.createElement('SPAN');
label.innerHTML = labelRight;
subDiv.appendChild(label);

subDiv.appendChild(toObj);
parentDiv.appendChild(subDiv);

toObj.style.height = (totalHeight - label.offsetHeight) + 'px';
fromObj.style.height = (totalHeight - label.offsetHeight) + 'px';


selectBoxIndex++;

}
</script>
</head>
<body>
<table>
<form action="multiple.php" method="post" onsubmit="multipleSelectOnSubmit();">
<tr>
<td>
<select multiple name="fromBox[]" id="fromBox">
<option value="3">Finland</option>
<option value="4">France</option>
<option value="6">Mexico</option>
<option value="1">Norway</option>
<option value="5">Spain</option>
<option value="2">United Kingdom</option>
</select>
<select multiple name="toBox[]" id="toBox">
<option value="12">Canada</option>
<option value="13">Germany</option>
<option value="11">United States</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="submit" value="OK">
</td>
</tr>
</form>
<script type="text/javascript">
createMovableOptions("fromBox","toBox",500,200,"List From","List To");
</script>
</table>
</body>
</html>
phparmy
 
Posts: 4
Joined: Fri Nov 30, 2007 3:46 pm

Postby Batalf » Mon Dec 03, 2007 10:18 am

The problem seems to be the placement of your <form> tag. Move it up above your <table> tag and it seems to work in Firefox.
Batalf
Site Admin
 
Posts: 2160
Joined: Sat Oct 22, 2005 9:38 pm

Postby phparmy » Mon Dec 03, 2007 10:54 am

In some circumstances i use more than one form in same table. In this situtation i have 3 forms in the same table. I am testing my wep applications newly in firefox. I always tested in ie and noted my applications only works ie5.5+. Nowadays iam trying todo my web applications compliant to crossbrowsers. Because i have like same problems in other applications. When i am using form tag inside of table, problems begin. Is it general firefox problem?

By the way thanks for your scirpts its helping us more and also your answers.
phparmy
 
Posts: 4
Joined: Fri Nov 30, 2007 3:46 pm

Postby Batalf » Mon Dec 03, 2007 11:03 am

No, I haven't seen this problem in Firefox before. It may be related to my script, I haven't confirmed that yet.
Batalf
Site Admin
 
Posts: 2160
Joined: Sat Oct 22, 2005 9:38 pm


Return to Form widget questions

Who is online

Users browsing this forum: No registered users and 4 guests