Selectbox, shoutbox and variable sending in form?!

Xasho · September 12, 2007

Hello,

I am new to javascript, but I am doing a project with complicated regforms that require multiple selectboxes..

What I have done to solve the issues is that I have made a selectbox containing several alternatives which in the code is reffered to as "srcList"

I will then populate it with a list fetched from a MySQL db.

The problem is this:What happens now is just plain stupid, (check the link you´ll see what I mean), I have four JS functions that should be two, and all are behaving independently and doing their own thing.

the user should be able to select one or several choices from the first selectbox ("srcList"), then click on what is now the "0" button (if you click the link that I have provided you´ll see what I mean) and get it to appear in a div next to the selectbox so that they see what has been selected. A remove link should also be next to the selected item

also the selected items should be stored in variables så that they can be sent in a form when everything is filled out.

I know that this can probably be made in AJAX but I tried and had no success.

Just ignore the insert button, that is for later

http://ab.forcafighting.com/yes.html

here is the code:

<html>
<head>
<script language="JavaScript">
function addSrcToDestList() {

destList1 = window.document.forms[0].destList;
srcList = window.document.forms[0].srcList;
var len = destList1.length;
for(var i = 0; i < srcList.length; i++) {
if ((srcList.options[i] != null) && (srcList.options[i].selected)) {
//Check if this value already exist in the destList or not
//if not then add it otherwise do not add it.
var found = false;
for(var count = 0; count < len; count++) {
if (destList1.options[count] != null) {
if (srcList.options[i].text == destList1.options[count].text) {
found = true;
break;
}
}
}

if (found != true) {
destList1.options[len] = new Option(srcList.options[i].text);
len++;
}
}
}
}

// Deletes from the destination list.
function deleteFromDestList() {
var destList1 = window.document.forms[0].destList;
var len = destList1.options.length;
for(var i = (len-1); i >= 0; i--) {
if ((destList1.options[i] != null) && (destList1.options[i].selected == true)) {
destList1.options[i] = null;
}
}
}


function allSelect()
{
List = document.forms[0].destList;
if (List.length && List.options[0].value == 'temp') return;
for (i=0;i<List.length;i++)
{
List.options[i].selected = true;
}
}

// -------------------------------------------------------------------------
function addEvent()
{
var ni = document.getElementById('myDiv');
var numi = document.getElementById('theValue');
var num = (document.getElementById("theValue").value -1)+ 2;

numi.value = num;
var divIdName = "my"+num+"Div";
var newdiv = document.createElement('div');
newdiv.setAttribute("id",divIdName);
newdiv.innerHTML = "Element Number "+num+"! <a href=\"javascript:;\" onclick=\"removeEvent(\'"+divIdName+"\')\">Remove</a>";
ni.appendChild(newdiv);
}

function removeEvent(divNum)
{
var d = document.getElementById('myDiv');
var olddiv = document.getElementById(divNum);
d.removeChild(olddiv);
}

</SCRIPT>
</head>

<body>
<form name="upload" id="upload" ENCTYPE="multipart/form-data" method="POST" action="<?php $_SERVER['PHP_SELF']?>" onSubmit="allSelect();">

<select name="srcList" multiple size=10 style="width:150;" onChange="moveOver();">
<option value ="0" >Admin</option>
<option value ="1" >Public</option>
<option value ="2" >Private</option>
<option value ="3" >All</option>
</select>


<br> <input type="button" id="theValue" value="0" onClick="javascript:addEvent();javascript:addSrcToDestList();">
<br>
<input type="button" value=" << " onClick="javascript:deleteFromDestList();">

<select name="destList[]" id="destList" size=10 style="width:150;" >
</select>
<div id="myDiv"> </div>
<input type="submit" class="button3" name="upload" value="Insert" >

</body></html>

thx guys...

Xasho · September 14, 2007

Bump need help on this guys..

Sign In

Selectbox, shoutbox and variable sending in form?!

Recommended Posts

Xasho

Link to comment

Share on other sites

Xasho

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information