Avatar billede andersasp Nybegynder
03. august 2010 - 07:19 Der er 17 kommentarer og
2 løsninger

Tilføje flere textbokse til fungerende ajax eksempel

Hejsa,

Jeg har et ajax eksempel som virker helt perfekt med en enkelt tekstboks.. Men hvis jeg ville have nogle flere elementer med hvordan fik jeg så indsat disse?

Jeg har brug for at indsætte 1 checkbox, 1 dropdown samt 2 flere tekstbokse??

jeg er helt ny til java samt ajax, så er desværre lidt/meget blank :)

min fungerende kode ser således ud:

tekstboks:
<input type="text" name="timesearch" id="timesearch" style="width:95%" onKeyUp="showHint(this.value)"/>

her viser den resultatet:
<span id="txtHint"></span>



Dette er så javakoden, hvor jeg skal tilføje de resterende elementer..

Jeg tænker at man bare skulle få den til at tilføje querystrings som

q
q1
q2
q3
osv..

// JavaScript Document
var xmlHttp

function showHint(str)
{
if (str.length==0)
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
  {
  alert ("Your browser does not support AJAX!");
  return;
  }
var url="http://www.version2.frisornet.dk/search/gethints/gethint.asp";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}

function stateChanged()
{
if (xmlHttp.readyState==4)
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
}
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
return xmlHttp;
}
Avatar billede majbom Novice
03. august 2010 - 08:18 #1
lige én ting: java og javascript er 2 VIDT forskellige ting - eneste ting de har tilfælles er de 4 bogstaver i "java"!

hvad er det du vil helt præcist? vil du have værdien af din checkbox, dropdown og det andet med når du kører din ajax-request?
Avatar billede andersasp Nybegynder
03. august 2010 - 08:31 #2
Hejsa,

det som jeg vil er blot at få værdierne af de ekstra elementer sendt til gethint.asp ligesom den nuværende tekstboks..

tekstboks1  = request.querystring("q")
tekstboks2  = request.querystring("q2")
tekstboks3  = request.querystring("q3")
checkbox    = request.querystring("q4")
dropdownbox = request.querystring("q5")

Ja jeg er meget noob til javascript, og helt lost i java :)

Men jeg vil rigtig gerne lære at arbejde med ajax/javascript noget mere.. men lærer bedst ved at se eksempler :)

håber ovenstående giver mening!
Avatar billede majbom Novice
03. august 2010 - 08:55 #3
du skal blot ændre:

url=url+"?q="+str;


til:

url=url+"?q="+str+"&q1="+document.getElementById('id_på_din_checkbox').checked+"&q2="+document.getElementById('id_på_din_dropdown').value+"&q3="+document.getElementById('id_på_dit_textfelt1').value+"&q4="+document.getElementById('id_på_dit_textfelt2').value;
Avatar billede andersasp Nybegynder
03. august 2010 - 09:25 #4
Hejsa,

Tusinde tak for det det virker helt perfekt..

Men hvordan får jeg den så til at opdatere når jeg ændrer på de andre elementer.. lige nu viser den alle korrekt, men den opdaterer kun når jeg ændrer på denne tekstboks:

<input type="text" name="timesearch" id="timesearch" style="width:95%" onKeyUp="showHint(this.value)"/>

På forhånd tak!
Avatar billede majbom Novice
03. august 2010 - 09:38 #5
du vil også have den til at køre din ajax-request når du ændrer værdi i de andre felter?

det kan du gøre ved at kalde funktionen i din onchange-event på de andre elementer ligesom du gør på det første, så skal du bare også bruge document.getElementById('id_på_dit_første_felt') i stedet for at tage 'this' med i funktionskaldet og bruge str i funktionen...
Avatar billede andersasp Nybegynder
03. august 2010 - 09:42 #6
Det er jeg ikke helt sikker på at jeg forstår :)

jeg har nu indsat dette i en anden tekstboks.. men når jeg skriver i denne bliver teksten for q også ændret til dennes værdi?

<input name="timefrom" type="text" id="timefrom"  value="14:00" size="5" onKeyUp="showHint(document.getElementById('timefrom').value)"/>
Avatar billede majbom Novice
03. august 2010 - 10:00 #7
hvis du bare dropper at sende parameter med og bare kalder funktionen: showHint();

og så i funktionen fjerner du 'str' og bruger document.getElementById('timesearch').value i stedet for.
i din query...
Avatar billede andersasp Nybegynder
03. august 2010 - 10:01 #8
Hejsa nu tror jeg at jeg har fået det til at virke, tusinde tak for hjælpen :)

jeg har dog lige et sidste spørgsmål..

jeg har 3 checkbokse som alle har samme ID (dette er dynamisk så dette vil hele tiden blive ændret)

<input name="HCID" type="checkbox" id="HCID" value="1" onFocus="showHint(document.getElementById('HCID').value)"/>
<input name="HCID" type="checkbox" id="HCID" value="2" onFocus="showHint(document.getElementById('HCID').value)"/>
<input name="HCID" type="checkbox" id="HCID" value="3" onFocus="showHint(document.getElementById('HCID').value)"/>

men når jeg klikker på denne viser den altid den første værdi som er "1" og hvis jeg klikker på nogle af de andre ændres den ikke..

det som den gerne skulle var at give mig denne værdi.

1,2,3

ligesom man får når man sender 3 ens checkbokse via GET ??
kan dette lade sig gøre?

ser således ud i js filen:
+document.getElementById('HCID').value+
Avatar billede majbom Novice
03. august 2010 - 16:45 #9
du kan jo ikke tage værdien fra 3 forskellige checkboxe når de har samme ID - hvis jeg har forstået dig ret...

jeg ville dog kalde funktionen uden parameter, som jeg skrev tidligere:

showHint();

og så i din query-streng:

url=url+"?q="+document.getElementById('timesearch').value+"&q1="+document.getElementById('id_på_din_checkbox').checked+"&q2="+document.getElementById('id_på_din_dropdown').value+"&q3="+document.getElementById('id_på_dit_textfelt1').value+"&q4="+document.getElementById('id_på_dit_textfelt2').value;
Avatar billede mclemens Nybegynder
03. august 2010 - 23:30 #10
Prøv med:

function showHint()
{var str=document.getElementById('timesearch').value;
if (str.length==0)
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
  {
  alert ("Your browser does not support AJAX!");
  return;
  }
var url="http://www.version2.frisornet.dk/search/gethints/gethint.asp";

var tmp="";
var tmp2=document.getElementsByName("HCID");
for(var i=0;i<tmp2.length;i++)tmp+=tmp2[i].checked?((tmp!=""?",":"")+tmp2[i].value):"";

url=url+"?q="+str+"&q1="+tmp+"&q2="+document.getElementById('id_paa_din_dropdown').value+"&q3="+document.getElementById('id_paa_dit_textfelt1').value+"&q4="+document.getElementById('id_paa_dit_textfelt2').value;

url=url+"&sid="+Math.random();

alert(url);
/*
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);*/
}

... og så kald funktionen med uden parametre som foreslået af splazz.

Måske virker onchange bedre på checkboxen, tror måske der kan Hvis du oplever problemer med at ændringen af checked ikke træder i kræft allerede op focus ... så prøv at rette det til onchange på boxene.

Drop også de ens id på boxene. Det samme id må kun bruges en gang pr. side (samme name må godt bruges på flere elementer).

<input name="HCID" type="checkbox" value="1" onchange="showHint()"/>
<input name="HCID" type="checkbox" value="2" onchange="showHint()"/>
<input name="HCID" type="checkbox" value="3" onchange="showHint()"/>

Husk at slette alert samt /* */ efter test ;)
Avatar billede andersasp Nybegynder
04. august 2010 - 09:01 #11
Tusinde tak for hjælpen begge to, jeg er stadig lidt i tvivl om hvad det er jeg laver, men jeg lærer det forhåbentlig en dag :)

Jeg endte op med denne løsning, som sikkert er langt fra optimal.

// JavaScript Document
var xmlHttp

function showHint(str)
{

xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
  {
  alert ("Your browser does not support AJAX!");
  return;
  }
var url="http://www.version2.frisornet.dk/search/gethints/gethint.asp";
url=url+"?timesearch="+document.getElementById('timesearch').value+"&HCID_1="+document.getElementById('HCID_1').checked+"&HCID_1_value="+document.getElementById('HCID_2').value+"&HCID_2="+document.getElementById('HCID_2').checked+"&HCID_2_value="+document.getElementById('HCID_2').value+"&HCID_3="+document.getElementById('HCID_3').checked+"&HCID_3_value="+document.getElementById('HCID_3').value+"&HCID_4="+document.getElementById('HCID_4').checked+"&HCID_4_value="+document.getElementById('HCID_4').value+"&HCID_5="+document.getElementById('HCID_5').checked+"&HCID_5_value="+document.getElementById('HCID_5').value+"&HCID_6="+document.getElementById('HCID_6').checked+"&HCID_6_value="+document.getElementById('HCID_6').value+"&HCID_6="+document.getElementById('HCID_6').checked+"&HCID_6_value="+document.getElementById('HCID_6').value+"&HCID_7="+document.getElementById('HCID_7').checked+"&HCID_7_value="+document.getElementById('HCID_7').value+"&HCID_8="+document.getElementById('HCID_8').checked+"&HCID_8_value="+document.getElementById('HCID_8').value+"&HCID_9="+document.getElementById('HCID_9').checked+"&HCID_9_value="+document.getElementById('HCID_9').value+"&HCID_10="+document.getElementById('HCID_10').checked+"&HCID_10_value="+document.getElementById('HCID_10').value+"&whatday="+document.getElementById('whatday').value+"&timefrom="+document.getElementById('timefrom').value+"&timeto="+document.getElementById('timeto').value;

//url=url+"?q="+document.getElementById('timesearch').value+"&q1="+document.getElementById('HCID_1').checked+"&q2="+document.getElementById('whatday').value+"&q3="+document.getElementById('timefrom').value+"&q4="+document.getElementById('timeto').value;

url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}

function stateChanged()
{
if (xmlHttp.readyState==4)
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
}
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
return xmlHttp;
}
Avatar billede majbom Novice
04. august 2010 - 09:51 #12
det ser ikke helt tosset ud :)
Avatar billede andersasp Nybegynder
04. august 2010 - 10:03 #13
smid endelig nogle fortjente svar, så vi kan få lukket denne :)
Avatar billede mclemens Nybegynder
04. august 2010 - 13:30 #14
Det ser lidt langt ud (altså - url'en)

En forkortelse til kilde kunne se sådan her ud:

url=url+"?timesearch="+document.getElementById('timesearch').value+"&HCID_1="+document.getElementById('HCID_1').checked+"&HCID_1_value="+document.getElementById('HCID_2').value+"&HCID_2="+document.getElementById('HCID_2').checked+"&HCID_2_value="+document.getElementById('HCID_2').value+"&HCID_3="+document.getElementById('HCID_3').checked+"&HCID_3_value="+document.getElementById('HCID_3').value+"&HCID_4="+document.getElementById('HCID_4').checked+"&HCID_4_value="+document.getElementById('HCID_4').value+"&HCID_5="+document.getElementById('HCID_5').checked+"&HCID_5_value="+document.getElementById('HCID_5').value+"&HCID_6="+document.getElementById('HCID_6').checked+"&HCID_6_value="+document.getElementById('HCID_6').value+"&HCID_6="+document.getElementById('HCID_6').checked+"&HCID_6_value="+document.getElementById('HCID_6').value+"&HCID_7="+document.getElementById('HCID_7').checked+"&HCID_7_value="+document.getElementById('HCID_7').value+"&HCID_8="+document.getElementById('HCID_8').checked+"&HCID_8_value="+document.getElementById('HCID_8').value+"&HCID_9="+document.getElementById('HCID_9').checked+"&HCID_9_value="+document.getElementById('HCID_9').value+"&HCID_10="+document.getElementById('HCID_10').checked+"&HCID_10_value="+document.getElementById('HCID_10').value+"&whatday="+document.getElementById('whatday').value+"&timefrom="+document.getElementById('timefrom').value+"&timeto="+document.getElementById('timeto').value;


rettet til:

var tmp=["timesearch","whatday","timefrom","timeto"];
for(var i=0;i<tmp.length;i++)url+=tmp[i]+"="+document.getElementById(tmp[i]).value+"&";
for(var i=1;i<11;i++)url+="HCID_"+i+"="+document.getElementById("HCID_"+i).checked+
"&HCID_"+i+"_value="+document.getElementById("HCID_"+i).value+(i<10?"&":"");


...

Hvis du skrev dette istedet:

var tmp=["timesearch","whatday","timefrom","timeto"];
for(var i=0;i<tmp.length;i++)url+=tmp[i]+"="+document.getElementById(tmp[i]).value+"&";
for(var i=1;i<11;i++)url+=document.getElementById("HCID_"+i).checked?("HCID_"+i+"_value="+document.getElementById("HCID_"+i).value+(i<10?"&":"")):"";

Ville du ikke få HCID_1 - 10 med, men du ville få alle HCID_1 - 10 _value med, såfremt den pågældende HCID var afkrydset.
Avatar billede mclemens Nybegynder
04. august 2010 - 13:45 #15
Hmm, det kunne godt være at der skulle lidt tekst til forslaget om forkortelsen ...


var tmp=["timesearch","whatday","timefrom","timeto"];
/* Opretter et array med tekststrenge */


for(var i=0;i<tmp.length;i++)
/* Gennemløber array med tekststrenge, med i variabel ved at øge i, indtil i er større eller lig antal tekststrenge i tmp array ... bemærk array's første plads er 0 og ikke 1 */

url+=tmp[i]+"="+document.getElementById(tmp[i]).value+"&";
/* Idet at i er nål og øges med en ved hvert gennemløb, fanger vi hver tekststreng, da tmp[0], tmp[1], tmp[2], tmp[3] er de 4 tekststrenge ... dem bruger vi så som navn, efter fulgt af = og da id er ens med navn i url, kan vi benytte den til at fange id samt value til url strengen. */


for(var i=1;i<11;++)
/* Foretager et gennemløb af talrække 1-10 (da der er 1-10 af hcid)*/

url+="HCID_"+i+"="+document.getElementById("HCID_"+i).checked+
"&HCID_"+i+"_value="+document.getElementById("HCID_"+i).value+(i<10?"&":"");
/* da i øges med 1 hver gang kan den sammensat med en teksstreng ("HCID_") benyttes til navn i url, at fange elementet med samt tilføje værdi af elementet til url'en */


... egentlig det samme som du lavede i din - det er mere kompakt, men mindre overskueligt til tider)
Avatar billede andersasp Nybegynder
04. august 2010 - 14:19 #16
hej Mclemens, den blev godt nok lidt lang min url :)

Tusinde tak for forklaringen, det har hjulpet rigtig meget! det gør det også lettere hvis jeg skal have flere tekstbokse, så kan jeg bare ændre én værdi!

Javascript er skide smart, men svært :)
Avatar billede majbom Novice
04. august 2010 - 14:37 #17
ja det var nok ikke så ringe en ide, når der skal så mange values med :)

her kommer et svar osse...
Avatar billede mclemens Nybegynder
04. august 2010 - 18:34 #18
Velbekomme og tak for point :)
Avatar billede majbom Novice
04. august 2010 - 22:24 #19
tfp :)
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
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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