[Java/html] Problemen met to & remove to list script

[Theske]

Beste mensen,

Ik heb een form waarvan bij een stuk de bedoeling is dat ik twee 'boxen' heb en daar tussen in staat een pijltje naar links en een pijltje naar rechts. In de linker box staan alle namen uit de database. Wanneer er een naam is geselecteerd en men op het pijltje naar rechts klikt wil ik graag dat deze naam naar de rechterkant verplaatst wordt. Dit geldt hetzelfde voor de namen van links naar rechts. Uiteindelijk wil ik dat de namen aan de rechterkant verder meegenomen worden in het form, maar dat vogel ik zelf wel uit dmv php.
Ik heb nu ergens een script gevonden waarmee ik dat zou kunnen doen, maar gezien ik op mijn websites bijna nooit gebruik maar van javascript is mijn kennis hierover niet alles.
Ik hoop dat jullie snappen wat de bedoeling is en mij hiermee kunnen helpen.
Ik krijg de melding " 'undefined' is null or not an object " terug
Hieronder staat het stukje javascript en de html code.

Java:

<script language="javascript">

function addToList(listField, newText, newValue) {
   if ( ( newValue == "" ) || ( newText == "" ) ) {
      alert("You cannot add blank values!");
   } else {
      var len = listField.length++; // Increase the size of list and return the size
      listField.options[len].value = newValue;
      listField.options[len].text = newText;
      listField.selectedIndex = len; // Highlight the one just entered (shows the user that it was entered)
   } // Ends the check to see if the value entered on the form is empty
}

function removeFromList(listField) {
   if ( listField.length == -1) {  // If the list is empty
      alert("There are no values which can be removed!");
   } else {
      var selected = listField.selectedIndex;
      if (selected == -1) {
         alert("You must select an entry to be removed!");
      } else {  // Build arrays with the text and values to remain
         var replaceTextArray = new Array(listField.length-1);
         var replaceValueArray = new Array(listField.length-1);
         for (var i = 0; i < listField.length; i++) {
            // Put everything except the selected one into the array
            if ( i < selected) { replaceTextArray[i] = listField.options[i].text; }
            if ( i > selected ) { replaceTextArray[i-1] = listField.options[i].text; }
            if ( i < selected) { replaceValueArray[i] = listField.options[i].value; }
            if ( i > selected ) { replaceValueArray[i-1] = listField.options[i].value; }
         }
         listField.length = replaceTextArray.length;  // Shorten the input list
         for (i = 0; i < replaceTextArray.length; i++) { // Put the array back into the list
            listField.options[i].value = replaceValueArray[i];
            listField.options[i].text = replaceTextArray[i];
         }
      } // Ends the check to make sure something was selected
   } // Ends the check for there being none in the list
}
</script>

HTML:

       <td>
         <select name="listField" size="5" multiple="multiple" ondblclick="addToList()" style="width: 170px;">
           <option>blaat</option>
           <option>blaat1</option>
           <option>blaat2</option>
         </select>
       </td>
       <td>
        <br>
        [img]"/frm-add.gif"[/img]
        <br>
        [img]"/frm-remove.gif"[/img]
       </td>
       <td>
        <select name="listField" size="5" multiple="mutiple" ondblclick="removeFromList()" style= "width: 170px;" ></select>          
       </td>

[Verwijderd]

De eerste fout die ik al zie is:
Op het moment dat je op dat linkje klikt, dan roep je de functie verkeerd aan.

[img]"/frm-add.gif"[/img]

Volgens het bijgevoegde script moeten er parameters meegegeven worden. Aangezien de code in de functie de parameters gebruikt, is de foutmelding wel begrijpelijk.

[Theske]

Hmmz, maar hoe kan je dit het beste doen dan?
Ja sorry, maar zoals ik al zei is m'n java kennis niet al te goed, gezien ik meestal alleen maar php programmeer.
Ik hoop dat jullie me toch nog even kunnen helpen hiermee...

[sig69]

Je functie addToList verwacht 3 parameters, en je geeft er geen. Wat die parameters moeten zijn hoor jij te weten en kunnen wij niet voor je raden.

O ja, en dit is JavaScript, geen Java

[Verwijderd]

Persoonlijk zou ik een extra functie maken die uitgevoerd wordt zodra je op dat linkje klikt. In die functie haal je de juiste gegevens uit de select en roep je de andere functie aan om hem toe te voegen.

[Theske]

Jah, ik zal al te twijfelen of ik in topic title java of javascript moest zetten, maar kan het nu volgens mij niet meer wijzigen.....

Verder klopt het inderdaad ook dat er 3 variabele aangeroepen worden, maar weer verder niet precies waar ik die vandaan moet halen.. ik heb wel wat dingen geprobeerd maar het mocht helaas allemaal niet baten.
Ik heb bijvoorbeeld de linker box de naam newText gegeven, newValue heb ik veranderd in '5' en zo wat dingen geprobeerd.
Maar ik dacht dat jullie misschien wel konden zien hoe dat script in elkaar zat en mij wat verder op weg konden helpen.

En die extra functie, daar had ik eerst ook al aangedacht maar het nadeel ervan is dat hij steeds weer opnieuw moet refreshen..... of zie ik dat verkeerd?

Maargoed, ik hoop dat jullie me nog steeds verder kunnen helpen....


edit::::
Waar ik trouwens deze script vandaan heb;
http://www.breakingpar.co...80015193F87256C5B00070E1C

[ Voor 9% gewijzigd door Theske op 18-10-2005 15:08 ]

[disjfa]

Als je niet weet wat de functie doet zou ik de maker even een mailtje sturen en vragen wat er precies mee moet gebeuren? Dat lijkt mij een stuk makkelijker dan ons helemaal de functie voor je te moeten ontleden.

[sig69]

Theske schreef op dinsdag 18 oktober 2005 @ 15:06:
Verder klopt het inderdaad ook dat er 3 variabele aangeroepen worden, maar weer verder niet precies waar ik die vandaan moet halen..

Wij ook niet. Ik kan aan de hand van wat je hier post alleen maar gokken dat het uit de select moet komen.

Ik heb bijvoorbeeld de linker box de naam newText gegeven, newValue heb ik veranderd in '5' en zo wat dingen geprobeerd.

Dat kan je wel doen, maar dan nog roep je de functie aan zonder parameters. Die zal je waarschijnlijk uit je select moeten halen.

[Theske]

disjfa schreef op dinsdag 18 oktober 2005 @ 15:09:
Als je niet weet wat de functie doet zou ik de maker even een mailtje sturen en vragen wat er precies mee moet gebeuren? Dat lijkt mij een stuk makkelijker dan ons helemaal de functie voor je te moeten ontleden.

Ach ja... het principe is eigenlijk gewoon om de waarde van de linkerbox naar de rechterbox brengen.
Maargoed, soms hoeft ook niet heel het script grondig ontleed te worden om te zien wat het doet of wat er veranderd moet worden, teminste dat ik heb bij php scrippies...

sig69 schreef op dinsdag 18 oktober 2005 @ 15:10:
[...]

Wij ook niet. Ik kan aan de hand van wat je hier post alleen maar gokken dat het uit de select moet komen.

[...]

Dat kan je wel doen, maar dan nog roep je de functie aan zonder parameters. Die zal je waarschijnlijk uit je select moeten halen.

Hebben jullie daar dan tips voor hoe ik deze het beste in de select kan stoppen??
Gezien jullie alle informatie hebben die ik ook heb...

[ Voor 31% gewijzigd door Theske op 18-10-2005 15:22 ]

[KabouterSuper]

Als je het per se wil doen met de bestaande javascript code, dan moet je de parameters van de functie doorgeven. In onderstaand voorbeeld heb ik dit even gedaan. Ik heb hiervoor de twee selects een id gegeven, zodat ik ze gemakkelijk kan gebruiken.

code:

 <td>
         <select name="listField" id="FLinput" size="5" multiple="multiple" ondblclick="addToList(document.getElementById('FLoutput'),document.getElementById('FLinput').options[document.getElementById('FLinput').selectedIndex].value,'x')" style="width: 170px;">
           <option>blaat</option>
           <option>blaat1</option>
           <option>blaat2</option>
         </select>
       </td>
       <td>
        <br>
        <a href="" onclick="addToList(document.getElementById('FLoutput'),document.getElementById('FLinput').options[document.getElementById('FLinput').selectedIndex].value,'x');return false;" > voeg toe </a>
               <br>
        <a href="" onclick="removeFromList(document.getElementById('FLoutput'));return false;" > verwijder </a>
       </td>
       <td>
        <select name="listField" id="FLoutput" size="5" multiple="mutiple" ondblclick="removeFromList()" style= "width: 170px;" ></select>          
       </td>

Hierbij wel nog wat opmerkingen

1) de javascript functie verwijdert niet de rijen die je naar de andere kant hebt gesleept.
2) multi select werkt niet.
3) de code is niet echt een voorbeeld van nette code. Beter zou het zijn om met een extra functie te werken. Kan je gelijk de multi select werkend maken. Je moet dan loopen over alle geselecteerde elementen in het select. Dus:

code:

  while (listField.options.selectedIndex!=-1) // loop while there is a selected index
   {
     blah blah blah
        
       // ik ben in een goede bui, dus hier het statement om de rij te verwijderen
        listField..options[source_id.options.selectedIndex] = null; // delete from source

   }

Hopelijk kan je hiermee weer wat verder.

[Theske]

Kijk is, dank je wel!
Ik zal hier mee verder aan de slag gaan en ik heb wel het gevoel dat het gaat lukken
Bedankttttt!!!!
*Wat ben ik toch even blij dat jij in een goeie bui bent vandaag

[sig69]

Google geeft ook nog wat prachtige resultaten met kant en klare scripts...

[Theske]

sig69 schreef op dinsdag 18 oktober 2005 @ 15:40:
Google geeft ook nog wat prachtige resultaten met kant en klare scripts...

Okeejjj dankuuu
Ja ik heb wel wat gezocht, maar wist niet precies of deze functie een bepaalde naam had.

[Creepy]

Laat ik weet het, maar bij deze alsnog:

Java is heel iets anders dan Javascript. Met dat laatste hebben we hier te maken en daarom zou je topic in Webdesign & Graphics horen en niet in Programming & Webscripting. Zie ook HTML, CSS, JavaScript, Flash en Director topics *12-05*.

Je geeft aan dat je een script hebt gedownload en de zaken die je erin gewijzigd wilt zien. Dat zouden we als scriptrequest kunnen zien. (zie ook P&W FAQ - Scriptrequests). De foutmelding die je geeft is iets wat je met een beetje basiskennis van Javascript zelf op zou moeten kunnen lossen. Fouten oplossen en debuggen doen we in eerste instantie zelf (zie ook P&W FAQ - Leer **** debuggen!!). Mocht je er dan alsnog niet uitkomen dan kan je prima een topic openen. Let daarbij wel op dat je aangeeft welke zaken je nu hebt geprobeerd en wat daar niet mee lukte.

Nu komt je topic over als "dit is mijn script, dit gaat fout, fix eens even voor me". Iets wat niet de bedoeling is

Met de gegeven informatie moet je er nu denk ik zelf wel kunnen uitkomen.