Avatar billede Jacobmoller Nybegynder
17. juli 2012 - 11:30 Der er 16 kommentarer og
1 løsning

Ændre <SELECT> til Checkbox

Hej, jeg fandt noget kode på w3schools som jeg sidder og rodder lidt rundt med.

Koden er en blanding af AJAX, PHP og HTML, og eksemplet på koden kan ses her:

http://www.w3schools.com/PHP/php_ajax_database.asp

Mit spørgsmål er nu, hvordan jeg får lavet <SELECT> om således at jeg blot kan markere checkboxe med forskellige VALUES, istedet for at skulle benytte drop-down boksen?

Jeg vil nemlig gerne bruge funktionen i forbindelse med et kategori-system, hvor SQL forespørgselen ændres, når brugeren afkrydser en given kategori.

Koden ses her:

<html>
<head>
<script type="text/javascript">
function showUser(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","test.php?cat="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>

<form>
<select name="cat" onchange="showUser(this.value)">
<option value="">Vælg en kategori:</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</form>
<br />
<div id="txtHint"><b>Indlæg i denne kategori:</b></div>

</body>
</html>

<?php
$cat=$_GET["cat"];

include 'includes.php';

$data = mysql_query("SELECT * FROM post WHERE categories = '".$cat."'")
or die(mysql_error());


echo "<table border='1'>
<tr>
<th>title:</th>
<th>category:</th>
</tr>";

while ($row= mysql_fetch_array($data))
  {
  echo "<tr>";
  echo "<td>" . $row['title'] . "</td>";
  echo "<td>" . $row['category'] . "</td>";
  echo "</tr>";
  }
echo "</table>";

?>

På forhånd tak
Avatar billede majbom Novice
17. juli 2012 - 11:41 #1
vil du så have den til at kalde AJAX-funktionerne hver gang der checkes/uncheckes én af de boxe?
Avatar billede majbom Novice
17. juli 2012 - 11:43 #2
og så er det i øvrigt elendig kode de har der på w3schools - det giver ingen mening at sende html-kode tilbage, man bør bruger XML, som X'et i AJAX står for, eller alternativt JSON og derefter behandle de modtagede data på klienten.
Avatar billede Jacobmoller Nybegynder
17. juli 2012 - 11:53 #3
Ja, det var meningen at den laver en ny forespørgsel hver gang en kategori checkes/uncheckes.

Jeg prøvede med noget:
<form name="cat" onchange="showUser(this.value)">
<input type="checkbox" value="1"/> Kategori 1<br />
<input type="checkbox" value="2"/> Kategori 2
</form>

Men det virker som du nok hurtigt kan se ikke


Jeg har ikke så meget forstand på PHP og AJAX, så jeg har kun W3schools kode at gå ud fra.
Avatar billede majbom Novice
17. juli 2012 - 12:28 #4
du skal jo have alle dine checkboxe-værdier med og du skal have en onchange-event på alle checkboxene.

fjern
this.value[pre] fra funktionskaldet, så du ikke sender den med som parameter. og fjern så 'str' fra funktions-declarationen i starten af din kode ([pre]showUser(str)
).

hvor mange checkboxes har du, som der skal bruges til dette?
Avatar billede Jacobmoller Nybegynder
17. juli 2012 - 12:50 #5
Jeg har 14 forskellige kategorier.
Avatar billede majbom Novice
17. juli 2012 - 13:08 #6
okay, jeg har ikke ret meget tid lige nu, men vil gerne prøve at lave noget til dig i aften, hvis ikke der er kommet en anden løsning inden.
Avatar billede Jacobmoller Nybegynder
17. juli 2012 - 13:16 #7
Det vil være meget fornemt.

Jeg prøver at rode lidt med det selv også, og melder lige tilbage hvis jeg får det løst.

Tak for hjælpen!
Avatar billede majbom Novice
17. juli 2012 - 13:26 #8
hvis du selv roder videre med det, er her et par hints:

- du skal have dine checkede checkboxe med i din querystring, når du kalder php-filen der returnerer resulatet:
xmlhttp.open("GET","test.php?cat1="+cat1+"&cat3="+cat3,true);

f.eks. - det skal selvsagt være dynamisk, så den kun smider de variabler på, hvor der er flueben i boxen.

- du kan få fat i de enkelte checkboxes med
document.getElementById('id_på_din_checkbox');


- når det spiller kan du lege med XML/JSON til at returnere dine data med :)
Avatar billede olsensweb.dk Ekspert
17. juli 2012 - 15:36 #9
@Jacobmoller skal der kunne selectes flere på sammen tid ?? i givet fald passer din sql ikke
ellers ville det være mere naturligt at bruge radio Buttons

skal de udskrives i en tabel ??

kan du give et eks på hvad der står i din db (gerne et reduceret sql dump, dvs max 5 poster)
jeg er interesseret i datatyper, er feltet categories din id ??

hvorfor anvender du det gamle Mysql API ??, du bør anvende det "nye" MySqlI API, hvis du slår en mysql function op på php.net får du at vide du bør bruger mysqli
feks mysql_query, henvisses til mysqli.query eller pdo.query

>- når det spiller kan du lege med XML/JSON til at returnere dine data med :)
vil anbefale JSON, da det er født til js og fylder ca 8% mindre en tilsvarende XML
Avatar billede olebole Juniormester
17. juli 2012 - 17:09 #10
<ole>

Han er så enig, at der næsten driver dug i den gamle mands øjenkrog  *D

Jeg vil dog lige nævne, at besparelsen ved JSON ofte er langt større end 8%. Jeg prøvede lige et kald til Google's mere eller mindre 'hemmelige' vejr-API - og knaldede det over i JSON. Omkring 34% var besparelsen!

Endnu større besparelse kan opnås ved returnering af resultatsæt på arrayform. I stedet for:

{
    "rows": [
        {"username":"Ole Bole", "age":57, "sex":"m"},
        {"username":"Foo Bar", "age":34, "sex":"k"},
        {"username":"Baz Foo", "age":78, "sex":"k"},
        {"username":"Bar Baz", "age":22, "sex":"m"}
    ]
}

- kan man sende det som:

{
    "fields": ["username", "age", "sex"],
    "rows": [
        ["Ole Bole", 57, "m"],
        ["Foo Bar", 34, "k"],
        ["Baz Foo", 78, "k"],
        ["Bar Baz", 22, "m"]
    ]
}

Hvis der er tale om et resultatsæt med rigtig mange rækker - og man bruger databasens (måske lange) feltnavne - er der tale om en ret stor besparelse. Det burde ikke skabe problemer, at hver række ikke er 'associativ' på klienten. White-space udelades naturligvis i en 'skarp' situation, hvor koden udskrives dynamisk  =)

/mvh
</bole>
Avatar billede Jacobmoller Nybegynder
17. juli 2012 - 23:02 #11
@ronols

På længere sigt var det planen at der skulle kunne vælges flere kategorier, men pt. holder mine kompetencer ikke til det - så med mindre du har en fornuftig og forklarlig måde at gøre det på, er en checkbox ad gangen helt fint.

Jeg har følgende tabeller:
POST
post_id, title, description, categories

categories
cat_id, title


Når der oprettes et nyt indlæg (post), bliver der tilføjet et tal - svarende til den givne kategori - til post.categories.

Og jeg vil nemlig gerne kunne lade brugeren trykke på en kategori, og så opdaterer SQL forespørgselen således at de post der indeholder det valgte cat_id vises.

Ang. mysql API'en, er det blot fordi jeg altid har brugt den gamle. - Men tak for hintet, det opdaterer jeg ;)
Avatar billede olebole Juniormester
17. juli 2012 - 23:10 #12
#11: Jeg tror, du misforstod ronols. Hvis der kun skal vælges én ad gangen, er en checkbox det forkerte element at bruge. I den situation er radio buttons det eneste, der giver mening  =)
Avatar billede olsensweb.dk Ekspert
20. juli 2012 - 14:12 #13
@Jacobmoller hvor langt er du kommet ??

dette er bestemt ikke en begynder project, AJAX kræver godt kendskab til HTML, JS, serverside (PHP, SQL), og i særdeleshed array[/h], i JS og PHP

Det er ikke  noget problem at tage værdierne fra flere checkboxe med over, du skal bare tage værdierne fra de checked og adskille dem med et komma.

<script type="text/javascript">    
    var lng = document.cat.cb.length;            
    var vals="";
    for(var k=0; k<lng;k++){
        if (document.cat.cb[k].checked===true){
            vals += document.cat.cb[k].value + ",";
        }
    }
    vals=vals.slice(0, -1); // fjerner sidst karakter (komma)){
    alert(vals); // test skal slettes
    .....
    // xmlhttp.open("GET","test.php?cat1="+cat1+"&cat3="+cat3,true);
    // bliver til
    // xmlhttp.open("GET","test.php?cat=vals,true);   
</script>


html   
<form name="cat">
<input type="checkbox" name="cb" value="1"/> Kategori 1<br />
<input type="checkbox" name="cb" value="2"/> Kategori 2<br />
....
<input type="checkbox" name="cb" value="14"/> Kategori 14
</form>


i sql skal du kigge på [b]IN

http://stackoverflow.com/questions/5468204/select-rows-from-a-mysql-table-where-value-is-an-array
http://stackoverflow.com/questions/907806/php-mysql-using-an-array-in-where-clause

hvad bruger du til at skrive ajax i ?? ren js eller et js framework (jquery, motools, prototypejs,...)

NB: når du har det oppe og kører bør du nok forbedre sikkerheden (bedst er at tænke det ind fra starten)
xmlhttp.open("GET","test.php?cat=vals,true); her bør bruges post, men det kræver yderligere headers og andre parameter
du bør kigge på Prepared Statements

ide: ovenstående js kan med fordel laves som en function, med "formname" (cat), og "name" (cb) og evt seperator karakteren (,) som paremeter (komma bør være default value), værdier kunne på sigt godt være kommatal.
Avatar billede Jacobmoller Nybegynder
20. juli 2012 - 15:06 #14
@Ronols.

Jeg er ikke kommet så meget længere, men jeg prøver da at arbejde med det, så tak for din kommentar som jeg vil arbejde videre med.

Jeg ved at det ikke er et begynder projekt, og har da i nogen tid arbejdet med programmering - dog aldrig AJAX og JS sådan for alvor - men jeg bliver nød til at lave en funktion ala denne, og der er jo kun en måde at lære det på ;)
Avatar billede olsensweb.dk Ekspert
25. juli 2012 - 13:18 #15
AJAX er ca 75% JS, så hvis du ikke har ordenligt styr på JS og array så drop AJAX og brug tiden på at lære JS
i AJAX får du grundlæggende "bare" et encodet array retur fra serveren med rå data, som du skal decode og anvende/udskrive hvor de skal bruges, selve serverside coden er rimelig simpel (en sql forspørgelse, der udskriver i et array, dette encodes og udskrives serverside)

jeg vil anbefale dig at starte med et simpelt project.
lav noget simpelt med array i JS
som begynder project i AJAX kunne være postnummer, når man skriver et post nummer og forlader input feltet skrives bynavnet automatisk, dette ville du kunne anvende på mange tilmeldings forms, hvor du skal registrerer danske brugerens addresse
kunne også være kundenummer, retunerer kunde navn, og siden udvides til flere kundeoplysninger
Avatar billede Jacobmoller Nybegynder
15. august 2012 - 18:29 #16
@Ronols - smider du et svar.

Jeg kommer ikke videre pt. - men dit svar hjalp mig på rette vej
Avatar billede olsensweb.dk Ekspert
15. august 2012 - 19:19 #17
får du her
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester



IT-JOB

Businessmann A/S

DevOps Consultant

NOVAX A/S

Sales Director

Børns Vilkår

IT Supporter (Valby)

Unit IT

Project Manager

Scanreco Nordic A/S

Softwareudvikler