Terve!
Kuinka käytän arrayta alla olevan Html ja Javascriptin kanssa? Tarkoituksena on ottaa postauksessa useampi valinta ja käsitellä ne seuraavalla PHP sivulla
Javascript:
var arrFbox = new Array();
var arrTbox = new Array();
var arrLookup = new Array();
var i;
for(i=0; i<tbox.options.length; i++) {
arrLookup[tbox.options[i].text] = tbox.options[i].value;
arrTbox[i] = tbox.options[i].text;
}
var fLength = 0;
var tLength = arrTbox.length
for(i=0; i<fbox.options.length; i++) {
arrLookup[fbox.options[i].text] = fbox.options[i].value;
if(fbox.options[i].selected && fbox.options[i].value != "") {
arrTbox[tLength] = fbox.options[i].text;
tLength++;
} else {
arrFbox[fLength] = fbox.options[i].text;
fLength++;
}
}
arrFbox.sort();
arrTbox.sort();
fbox.length = 0;
tbox.length = 0;
var c;
for(c=0; c<arrFbox.length; c++) {
var no = new Option();
no.value = arrLookup[arrFbox[c]];
no.text = arrFbox[c];
fbox[c] = no;
}
for(c=0; c<arrTbox.length; c++) {
var no = new Option();
no.value = arrLookup[arrTbox[c]];
no.text = arrTbox[c];
tbox[c] = no;
}
}
function selectAll(box) {
for(var i=0; i<box.length; i++) {
box[i].selected = true;
}
}Html -lomake:
<form method="post" name="combo_box"> <table cellpadding="4" cellspacing="0" border="0"> <tr> <td> <select multiple size="10" name="list1" style="width:150" onDblClick="move(document.combo_box.list1,document.combo_box.list2)"> <option value="12">Alabama</option> <option value="54">Alaska</option> <option value="65">Arizona</option> <option value="45">Arkansas</option> <option value="2">California</option> </select> </td> <td align="center" valign="middle"> <input type="button" onClick="move(this.form.list2,this.form.list1)" value="<<" id=button1 name=button1> <input type="button" onClick="move(this.form.list1,this.form.list2)" value=">>" id=button2 name=button2> </td> <td> <select multiple size="10" name="list2" style="width:150" onDblClick="move(document.combo_box.list2,document.combo_box.list1)"> </select> </td> </tr> <tr><td align="center" colspan="3"><input type="submit" name="submit_button" value="Submit" onClick="selectAll(document.combo_box.list2);"></td></tr> </table> </form>
Koodin lähde löytyy tästä.
Liian pitkä ja vaikea koodi, en jaksa lukea.
Miksi sinulla edes on kaksi laatikkoa? Jos tarkoitus on vain tehdä laatikko, josta voi valita monta vaihtoehtoa, laita yksi ainoa select ja käytä control-näppäintä.
Entä mihin niitä taulukoita tarvitaan? Jos on tarkoitus siirtää valittu vaihtoehto tuplaklikkausella laatikosta toiseen, voit vain poistaa sen yhdestä listasta ja lisätä sen toiseen; jos järjestys on tärkeä, voit ensimmäisellä kerralla merkitä jokaiseen vaihtoehtoon järjestysnumeron ja sitten aina etsiä silmukassa oikean välin lisäystä varten.
Metabolix kirjoitti:
Miksi sinulla edes on kaksi laatikkoa?
Ensimäiseen laatikkoon tulostuu tiedot joista käyttäjä valitsee haluamansa toiseen laatikkoon. Tämän jälkeen hän lähettää lomakkeen tiedot PHP tiedostolle.
Metabolix kirjoitti:
Entä mihin niitä taulukoita tarvitaan?
Arrayta tarvitaan jotta lomake voi lähettää kaikki käyttäjän valikoimat tiedot.
Kysymys kuuluukin kuinka käytän arrayta ensin Html lomakkeessa ja sen jälkeen Javascriptissa?
Tiedän että laatikot täytyy nimetä: name="list1[]" ja name="list2[]".
Et sinä siihen mitään epämääräistä taulukkoa tarvitse. Tiedot lähetetään palvelimelle joka tapauksessa merkkijonona.
Tässä esimerkki lomakkeen tietojen lähettämisestä palvelimelle ajaxilla jQuerya käyttämällä.
$(function() {
$('form').on('submit', function(event) {
event.preventDefault();
var data = $(event.target).serialize();
$.post('form_handler.php', data).done(function(response) {
// Tulostaa palvelimen vastauksen konsoliin
console.log(response);
});
});
});fatter kirjoitti:
Ensimäiseen laatikkoon tulostuu tiedot joista käyttäjä valitsee haluamansa toiseen laatikkoon.
Niin, tämän ymmärsin kyllä. Kysyin, miksi. Voit ihan hyvin käyttää vain yhtä selectiä, josta käyttäjä valitsee haluamansa vaihtoehdot. Siihen ei tarvita lainkaan JavaScriptia.
Oletko kokeillut tällaista tapaa ollenkaan? Onko tavassa jotain vikaa?
Siis tässä on lomake, josta voi valita monta vaihtoehtoa:
<form action="post.php" method="post"> <select multiple="multiple" size="3" name="lista[]"> <option value="1">yksi</option> <option value="2">kaksi</option> <option value="3">kolme</option> </select> <button type="submit">Lähetä</button> </form>
Kun lomakkeen lähettää, valinnat tulevat PHP:lle taulukkona.
<?php if (empty($_POST["lista"])) { echo "Ei valintoja.\n"; } else { $valinnat = $_POST["lista"]; foreach ($valinnat as $valinta) { echo "Valittu $valinta.\n"; } }
fatter kirjoitti:
Ensimäiseen laatikkoon tulostuu tiedot joista käyttäjä valitsee haluamansa toiseen laatikkoon.
Jos nyt jostain ihmeellisestä syystä on ihan pakko saada kaksi laatikkoa, alla on tästä esimerkki. En suosittele! Ei ole järkeä kikkailla, kun yllä on jo oikea ratkaisu. Muista laittaa sivulle selvä käyttöohje, jotta käyttäjät osaavat käyttää poikkeavasti rakennettua viritelmääsi.
<script>
function aseta_valinta(select, tila) {
for (var i = 0; i < select.options.length; ++i) {
select.options[i].selected = tila;
}
}
function form_onsubmit(form) {
aseta_valinta(form["lista[]"], true);
aseta_valinta(form["vapaat"], false);
}
function vapaat_dblclick(select) {
siirra(select, select.form['lista[]']);
}
function valitut_dblclick(select) {
siirra(select, select.form.vapaat);
}
function siirra(a, b) {
for (var i = 0; i < a.options.length; ++i) {
while (i < a.options.length && a.options[i].selected) {
var o = a.options[i];
a.removeChild(o);
b.appendChild(o);
}
}
}
</script>
<form action="post.php" method="post" onsubmit="return form_onsubmit(this);">
<select multiple="multiple" size="3" name="vapaat" ondblclick="return vapaat_dblclick(this);">
<option value="1">yksi</option>
<option value="2">kaksi</option>
<option value="3">kolme</option>
</select>
<select multiple="multiple" size="3" name="lista[]" ondblclick="return valitut_dblclick(this);">
</select>
<button type="submit">Lähetä</button>
</form>Jos vielä järjestyksenkin pitää säilyä, koodia voi muuttaa näin:
function siirra(a, b) {
for (var i = 0; i < a.options.length && !a.options[i].jarjestys; ++i) {
a.options[i].jarjestys = 1 + i;
}
for (var i = 0; i < b.options.length && !b.options[i].jarjestys; ++i) {
b.options[i].jarjestys = 1 + i + a.options.length;
}
for (var i = 0; i < a.options.length; ++i) {
while (i < a.options.length && a.options[i].selected) {
var o = a.options[i];
a.removeChild(o);
for (var j = 0; j <= b.options.length; ++j) {
if (j == b.options.length) {
b.appendChild(o);
} else if (b.options[j].jarjestys > o.jarjestys) {
b.insertBefore(o, b.options[j]);
break;
}
}
}
}
}Aihe on jo aika vanha, joten et voi enää vastata siihen.