Keskustelu: Nettisivujen teko: Listbox-arvojen välitys funktiolle

javerkki [06.03.2008 09:21:09]

Terve.

Minulla on sivulla multiselect listbox ja yritän siitä valitut arvot funktiolle, mutta jokin menee pieleen.

Löysin netistä kaksi funktiota (getSelected ja outputselected), jotka ainakin tulostavat valitut arvot alert-funktiolla.

Kokeilin muuttaa alert-funktion Hae-funktioksi ja antaa valitut arvot sille, mutta testi.php skripti jota kutsutaan Hae-funktiosta palauttaa vain: 0

function getSelected(opt) {
            var selected = new Array();
            var index = 0;
            for (var intLoop = 0; intLoop < opt.length; intLoop++) {
               if ((opt[intLoop].selected) ||
                   (opt[intLoop].checked)) {
                  index = selected.length;
                  selected[index] = new Object;
                  selected[index].value = opt[intLoop].value;
                  selected[index].index = intLoop;
               }
            }
            return selected;
         }

         function outputSelected(opt) {
            var sel = getSelected(opt);
            var strSel = "";
            for (var item in sel)
               strSel += sel[item].value + "\n";
            Hae(strSel);
         }


	function Hae(strSel) {
		var strURL="testi.php?valinnat="+strSel;
		var req = getXMLHTTP();

		if (req) {

			req.onreadystatechange = function() {
				if (req.readyState == 4) {
					// only if "OK"
					if (req.status == 200) {
						document.getElementById('testidiv').innerHTML = req.responseText;
					} else {
						alert("There was a problem while using XMLHTTP:\n" + req.statusText);
					}
				}
			}
			req.open("GET", strURL, true);
			req.send(null);
		}

	}

Tässä multiselsect listbox ja nappi

<SELECT NAME="multistore" SIZE=3 MULTIPLE>
            <OPTION VALUE="Computer" SELECTED>Computer</OPTION>
            <OPTION VALUE="Bookstore">Book Store</OPTION>
            <OPTION VALUE="MailOrder" SELECTED>Mail Order</OPTION>
         </SELECT>
         <INPUT TYPE=BUTTON VALUE="Selected List Items"
            ONCLICK="outputSelected(this.form.multistore.options)">

Eli miten saan vietyä valitut listboksin arvot funktiolle ja sitä kautta sitten php-skriptille joka vaikkapa tulostaisi arvot ruudulle ?

Tässä vielä php-skripti (testi.php)

<?php

$valinnat=intval($_GET['strSel']);

echo "<h1>$valinnat</h1>"; //RUUDULLE TULOSTUU 0

?>

neau33 [06.03.2008 11:39:47]

Heippa javerkki!

yksinkertaistetaan hieman...

<html><head><script language="JavaScript">

function getSelected(response, opt) {
  var items = new Array(); items = response;
  var i = 0; var strSel = "";
    for (i = 0; i <items.length; i++) {
      if (items[i].selected) {
        strSel += items[i].value + "\n";
        alert(strSel);
        //Hae(strSel);
      }
    }
}

//...

</script></head><body><form>
<SELECT NAME="multistore" SIZE=3 MULTIPLE>
         <OPTION VALUE="Computer" SELECTED>Computer</OPTION>
         <OPTION VALUE="Bookstore">Book Store</OPTION>
         <OPTION VALUE="MailOrder" SELECTED>Mail Order</OPTION>
         </SELECT>
         <INPUT TYPE=BUTTON VALUE="Selected List Items"
         ONCLICK="getSelected(this.form.multistore.options)"/>
</form></body></html>

neau33 [06.03.2008 22:32:38]

Heippa taas javerkki!

sama aihe osa2...

<HTML><HEAD></HEAD>
<script Language="JavaScript" Src="scripti.js"></script>
<BODY>
<FORM id=form1>
<SELECT id=ListBox1 multiple size=3 name=multistore>
  <OPTION value=Computer>Computer</OPTION>
  <OPTION value=Bookstore>Book Store</OPTION>
  <OPTION value=MailOrder>Mail Order</OPTION></SELECT>
  <INPUT onclick=getSelected(this.form.ListBox1.options)
  type=button value="Selected List Items">
</FORM></BODY></HTML>

//scripti.js
var strSel;
function getSelected(response, opt){
  strSel = "";
  for (var i = 0; i <response.length; i++){
    if (response[i].selected){
      //NAPATAAN INDEKSI VAIN JOS VALITTU ***
      strSel += i + "\n";
      document.getElementById('ListBox1').options[i].selected = 0;
    }
  }
  if (strSel != ""){
     getXMLData();
  }
  else{
    alert("Absolut ingenting har blivit valt");
  }
}
function getXMLData(){
  var strURL="testi.php?valinnat="+strSel;
  var req = getXmlHttp() ;
  if (req){
    req.onreadystatechange = function(){
      if (req.readyState == 4){
        if (req.status == 200){
          try{
            document.getElementById('testdiv').innerHTML = "";
          }
          catch(e)
          {
            var xdiv = "<div id=\"testdiv\"></div>";
            document.getElementById('form1').innerHTML += xdiv;
          }
          document.getElementById('testdiv').innerHTML = req.responseText;
        }
        else {
          alert("Uno problemo: XMLHTTP:\n" + req.statusText);
        }
      }
    }
  req.open("GET", strURL, true);
  req.send(null);
  }
}

<?php

$valinnat=intval($_GET['strSel']);
//NYT RUUDULLE VOI TULOSTUA 0:n LISÄKSI MUUTAKIN ***
echo "<h1>$valinnat</h1>";
?>

ajv [06.03.2008 23:16:43]

paitsi et

$valinnat = $_GET['valinnat'];

javerkki [07.03.2008 10:32:13]

Kiitoksia todella paljon vaivannäöstäsi Nea!

Nyt sivusto toimii.

Kiitos vielä kerran!

*muokattu*

javerkki [07.03.2008 15:01:03]

Pienenpieni kysymys vielä.

Miten saisin "kuljetettua" yhden toisenkin arvon testi.php:lle.

eli kun kutsun funktiota getSelected, niin haluaisin kuljettaa yhden arvon testi.php:lle siinä mukana:

getselected(this.form.ListBox1.options, this.form.div3.value)

Olisiko div-3:n arvo mahdollista saada vasta "viimeisessä" funktiossa tyyliin:

function getXMLData(){

var arvo=form.div3.value;
var strURL="testi.php?valinnat="+strSel+"&div3arvo="+arvo;

Tai siis tiedän, ettei sitä yo. tavalla saa, koska kokeilin jo, mutta
onko mahdollista ylipäätänsä saada tuossa kohtaa napattua div:n arvoa mukaan ?

neau33 [07.03.2008 18:31:36]

Heippa taas javerkki!

<html><head></head>
<script language="javascript">
function funktio(){
var arvo=document.getElementById('testidiv').innerHTML
alert(arvo)
}
</script>
<body><form>
<input type="button" id="nappi" onclick="funktio()"
value="nappi" style="width=50"/>
<div id ="testidiv">plaa plaa plaa</div>
</form></body></html>

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Kirjautuminen

Haku

Tehtävät

Kilpailu