Avatar billede yuksel Nybegynder
01. december 2003 - 16:10 Der er 2 kommentarer og
1 løsning

javacript og db

hej til alle.


jeg har en side her hvor jeg har hardcodet de forskellige ting ind i listboksne(optionsvalue), men hvordan kan jeg istedet for den til at hente tingene fra databasn istedet for?










<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Ny side 2</title>
</head>

<body>

<div class="slinks" id="sponsorlinks">
    <div class="colorbox">
        <div class="content" style="margin-bottom:0px;">
        <span class="bottomleft"></span>
        <span class="bottomright"></span>
        <div class="breaker"></div>               
    </div>   
</div>


   
<script language="javascript">
var initsubmittedseektypeID="";
var initsubmittedseekmakeID="";
var initsubmittedseekmodelID="";   
var initsubmittedseekfreestyle="";   
var initsubmittedseekyearLow="";   
var initsubmittedseekyearHigh="";   
var initsubmittedseekpriceLow="";   
var initsubmittedseekpriceHigh="";   
var initsubmittedseekkmLow="";   
var initsubmittedseekkmHigh="";   
var initsubmittedseekrangeKM="";   

function orderby(orderby,nextitem,orderbyorigo){

    document.kviksoegform.orderby.value=orderby;
    document.kviksoegform.orderbyorigo.value=orderbyorigo;
    document.kviksoegform.nextitem.value=nextitem;
    document.kviksoegform.submit();
}
function showdetails(dafcarid){
    document.kviksoegform.action="/koebogsalg/mereinfo.asp?dafcarid="+dafcarid;
    document.kviksoegform.dafcarid.value=dafcarid;
    document.kviksoegform.submit();
}
function make_changed(f){
    var i;
    var j;
    var seekmakeID;
    f.seekmodelID.length=2;
    f.seekmodelID[0].value="All";
    f.seekmodelID[0].text="Vælg model";
    f.seekmodelID[0].selected=true;
    f.seekmodelID[1].value="All";
    f.seekmodelID[1].text="Alle modeller";
    seekmakeID=f.seekmakeID.options[f.seekmakeID.selectedIndex].value;
    if (seekmakeID!='All'){
        for (i=0;i<modelArr.length;i++){
            if (modelArr[i][0]==seekmakeID){
                for (j=1;j<modelArr[i].length;j+=2){
                    f.seekmodelID.length++;
                    f.seekmodelID[f.seekmodelID.length-1].value=modelArr[i][j];
                    f.seekmodelID[f.seekmodelID.length-1].text=modelArr[i][j+1];
                }
                i=modelArr.length;
            }
        }
    }
}
function initseekform(f,fieldname){
    var field=eval("f."+fieldname);
    var holderfield=eval("f."+fieldname+"_holder");
    var initvalue=eval("initsubmitted"+fieldname);
    if(field.type=='text'){
        if (holderfield.value!=""){
            field.value=holderfield.value
        }else{
            if(initvalue!=""){
                field.value=initvalue
            }else{
                field.value="Evt. søgeord"
            }
        }
    }else{
        if (holderfield.value!=""){
            for(i=0;i<field.length;i++){
                if(holderfield.value==field[i].value){
                    field[i].selected=true;
                    i=field.length;
                }
            }
        }else{
            if(initvalue!=""){
                for(i=0;i<field.length;i++){
                    if(initvalue==field[i].value){
                        field[i].selected=true;
                        i=field.length;
                    }
                }
            }else{
                field[0].selected=true;
            }
        }
    }
}

function add_special_option(f,fieldname,prefix){
    var field=eval("f."+fieldname);
    var initvalue=eval("initsubmitted"+fieldname);
    if(initvalue!=""){
        for(i=0;i<field.length;i++){
            if(field[i].value==initvalue){
                return true
            }
        }
        field.length++;
        field[field.length-1].value=initvalue;
        field[field.length-1].text=prefix + " " + initvalue
    }
}

function putthepointer(f){
    if(f.x.value!=""&&f.y.value!=""){
        insertPreviouspointer(f.x.value,f.y.value,f.mapw.value)
    }
}

function init(f){
    initseekform(f,"seektypeID");
    initseekform(f,"seekmakeID");
    make_changed(f);
    initseekform(f,"seekmodelID");
    initseekform(f,"seekfreestyle");
    add_special_option(f,"seekyearLow","Fra årgang");
    initseekform(f,"seekyearLow");
    add_special_option(f,"seekyearHigh","til årgang");
    initseekform(f,"seekyearHigh");
    add_special_option(f,"seekkmLow","Fra");
    initseekform(f,"seekkmLow");
    add_special_option(f,"seekkmHigh","til");
    initseekform(f,"seekkmHigh");
    add_special_option(f,"seekpriceLow","Fra");
    initseekform(f,"seekpriceLow");
    add_special_option(f,"seekpriceHigh","til");
    initseekform(f,"seekpriceHigh");
    initseekform(f,"seekrangeKM");
    putthepointer(f);
    return true;
}

function init_reduced(f){
    initseekform(f,"seekmakeID");
    make_changed(f);
    initseekform(f,"seekmodelID");
    add_special_option(f,"seekyearLow","Fra årgang");
    initseekform(f,"seekyearLow");
    add_special_option(f,"seekyearHigh","til årgang");
    initseekform(f,"seekyearHigh");
    add_special_option(f,"seekkmLow","Fra");
    initseekform(f,"seekkmLow");
    add_special_option(f,"seekkmHigh","til");
    initseekform(f,"seekkmHigh");
    add_special_option(f,"seekpriceLow","Fra");
    initseekform(f,"seekpriceLow");
    add_special_option(f,"seekpriceHigh","til");
    initseekform(f,"seekpriceHigh");
    return true;
}

function resetkviksoegform(f){
    removepointer(f);
    f.seektypeID[0].selected=true;
    f.seekmakeID[0].selected=true;
    make_changed(f);
    f.seekfreestyle.value="Evt. søgeord";
    f.seekyearLow[0].selected=true;
    f.seekyearHigh[0].selected=true;
    f.seekpriceLow[0].selected=true;
    f.seekpriceHigh[0].selected=true;
    f.seekkmLow[0].selected=true;
    f.seekkmHigh[0].selected=true;
    f.seekrangeKM[0].selected=true;
    for(i=0;i<f.length;i++){
        if(f[i].type=="hidden"){
            f[i].value=""
        }
    }
}
function seekrangeKM_changed(f){
    f.seekrangeKM_holder.value=f.seekrangeKM[f.seekrangeKM.selectedIndex].value;
    if(f.seekrangeKM.selectedIndex==0){removepointer(f)}
}
function FromToChanged(f,whatGroup,LowHigh){
    if(LowHigh!="Low"&&LowHigh!="High"){return false}
    var oppositeLowHigh="";
    var LowElement;
    var HighElement;
    var HolderElement;
    if(LowHigh=="Low"){opppositeLowHigh="High"}
    if(LowHigh=="High"){opppositeLowHigh="Low"}
    LowElement=eval("f."+whatGroup+"Low");
    HighElement=eval("f."+whatGroup+"High");
    HolderElement=eval("f."+whatGroup+opppositeLowHigh+"_holder");
    if(LowHigh=="Low"){
        if(parseInt(HighElement[HighElement.selectedIndex].value,10)>=parseInt(LowElement.value,10))
        {
            return true //vi bevarer indstillingen i "til"-feltet
        }else{
            //vi beder brugeren foretage nyt valg i "til"-feltet ved at markere sidste element på listen.
            HighElement[HighElement.length-1].selected=true;
            HolderElement.value=HighElement[HighElement.length-1].value;
        }
    }
    if(LowHigh=="High"){
        if(parseInt(LowElement[LowElement.selectedIndex].value,10)<=parseInt(HighElement.value,10))
        {
            //vi bevarer indstillingen i "fra"-feltet
        }else{
            //vi beder brugeren foretage nyt valg i "fra"-feltet ved at markere første element på listen.
            LowElement[0].selected=true;
            HolderElement.value=LowElement[0].value;
        }
    }   
    return true;
}
</script>
<script language="javascript" src="http://www.biltorvet.dk/koebogsalg/seek_options2.js"></script>


        <form name="kviksoegform" method="post" action="/biler/searchusedcar.asp">
     
       
        <div class="columns1" style="width: 481px; height: 415px">
        <h2>&nbsp;</h2>
            <div class="colorbox">
               
                <span class="topleft"></span>
                    <span class="topright"></span>
               
               
               
               
    <table id="table1" border="0" cellspacing="10" cellpadding="1" align="center" width="100%">
        <tr>
            <td colspan="3" width="50%" style="padding:0px;">
                Vælg Mærke
               
                <select name="seekmakeID"  onChange="this.form.seekmakeID_holder.value=this[this.selectedIndex].value;make_changed(this.form)" style="width:100%;">
                        <option selected value="All">Vælg mærke</option>
                <option value="1">Alfa Romeo</option><option value="3">Audi</option><option value="4">
                        Austin</option><option value="5">Bentley</option><option value="6">
                        BMW</option><option value="7">Buick</option><option value="8">
                        Cadillac</option><option value="9">Chevrolet</option><option value="10">
                        Chrysler</option><option value="12">Citroën</option><option value="14">
                        Daewoo</option><option value="15">Daihatsu</option><option value="65">
                        Dodge</option><option value="16">Ferrari</option><option value="17">
                        Fiat</option><option value="18">Ford</option><option value="20">
                        Honda</option><option value="21">Hyundai</option><option value="75">
                        Iveco</option><option value="23">Jaguar</option><option value="24">
                        Jeep</option><option value="26">Kia</option><option value="27">
                        Lada</option><option value="29">Lancia</option><option value="30">
                        Land-Rover</option><option value="84">LDV</option><option value="31">
                        Lexus</option><option value="33">Maserati</option><option value="34">
                        Mazda</option><option value="35">Mercedes-Benz</option><option value="36">
                        MG</option><option value="37">Mitsubishi</option><option value="38">
                        Morgan</option><option value="39">Nissan</option><option value="40">
                        Opel</option><option value="41">Peugeot</option><option value="44">
                        Pontiac</option><option value="45">Porsche</option><option value="46">
                        Renault</option><option value="47">Rolls-Royce</option><option value="48">
                        Rover</option><option value="49">Seat</option><option value="50">
                        Skoda</option><option value="83">Smart</option><option value="72">
                        Ssang Yong</option><option value="51">Subaru</option><option value="52">
                        Suzuki</option><option value="53">Saab</option><option value="55">
                        Toyota</option><option value="57">Volvo</option><option value="58">
                        VW</option><option value="60">Yugo</option>
                </select>
            </td>
            <td colspan="3" width="50%" style="padding:0px;">Vælg Model<br />
           
                <select name="seekmodelID"  onChange="this.form.seekmodelID_holder.value=this[this.selectedIndex].value" style="width:100%;">
                      <option value="All">Vælg model</option>
                  </select>
              </td>
        </tr>
        <tr>
              <td style="padding:0px;">
            Årgang fra:&nbsp;<br />
            <select name="seekyearLow"  onChange="this.form.seekyearLow_holder.value=this[this.selectedIndex].value;FromToChanged(this.form,'seekyear','Low') " style="width: 80px;">
                <option selected value="-1">årgang</option>
                <option value="0">før 1982</option>
                      <option value="1982">1982</option><option value="1983">
                1983</option><option value="1984">1984</option><option value="1985">
                1985</option><option value="1986">1986</option><option value="1987">
                1987</option><option value="1988">1988</option><option value="1989">
                1989</option><option value="1990">1990</option><option value="1991">
                1991</option><option value="1992">1992</option><option value="1993">
                1993</option><option value="1994">1994</option><option value="1995">
                1995</option><option value="1996">1996</option><option value="1997">
                1997</option><option value="1998">1998</option><option value="1999">
                1999</option><option value="2000">2000</option><option value="2001">
                2001</option><option value="2002">2002</option><option value="2003">
                2003</option>
        </select>
        </td>
          <td  align="center" width="30" style="padding:0px;"><br /><strong>til:</strong></td>
        <td  style="padding:0px;"><br />
            <select name="seekyearHigh"  onChange="this.form.seekyearHigh_holder.value=this[this.selectedIndex].value;FromToChanged(this.form,'seekyear','High')" style="width: 80px;">
            <option selected value="2004">årgang</option>
            <option value="1982">1982</option><option value="1983">1983</option><option value="1984">
            1984</option><option value="1985">1985</option><option value="1986">
            1986</option><option value="1987">1987</option><option value="1988">
            1988</option><option value="1989">1989</option><option value="1990">
            1990</option><option value="1991">1991</option><option value="1992">
            1992</option><option value="1993">1993</option><option value="1994">
            1994</option><option value="1995">1995</option><option value="1996">
            1996</option><option value="1997">1997</option><option value="1998">
            1998</option><option value="1999">1999</option><option value="2000">
            2000</option><option value="2001">2001</option><option value="2002">
            2002</option><option value="2003">2003</option>
           
        </select>
        </td>

              <td style="padding:0px;">
            Kilometer fra:&nbsp;<br />
           
            <select name="seekkmLow"  onChange="this.form.seekkmLow_holder.value=this[this.selectedIndex].value;FromToChanged(this.form,'seekkm','Low')" style="width:80px;">
                <option selected value="-1">0 km.</option>
                <option  value="0">0</option>
                <option value="25000">25.000 km.</option>
                <option value="50000">50.000 km.</option>
                <option value="75000">75.000 km.</option>
                <option value="100000">100.000 km.</option>
                <option value="125000">125.000 km.</option>
                <option value="150000">150.000 km.</option>
                <option value="175000">175.000 km.</option>
                <option value="200000">200.000 km.</option>
            </select>
        </td>
              <td align="center" width="20" style="padding:0px;"><br /><strong>
                til:</strong></td>
        <td style="padding:0px;"><br />
            <select  name="seekkmHigh"  onChange="this.form.seekkmHigh_holder.value=this[this.selectedIndex].value;FromToChanged(this.form,'seekkm','High')" style="width:90px;">
                <option selected value="99999999">&gt; 200.000 km.</option>
                  <option value="25000">25.000 km.</option>
                <option value="50000">50.000 km.</option>
                <option value="75000">75.000 km.</option>
                <option value="100000">100.000 km.</option>
                <option value="125000">125.000 km.</option>
                <option value="150000">150.000 km.</option>
                <option value="175000">175.000 km.</option>
                <option value="200000">200.000 km.</option>
                  <option value="99999998">&gt; 200.000</option>
            </select>
        </td>
      </tr>
      <tr>
              <td style="padding:0px;">Pris fra:&nbsp;<br />
                <select name="seekpriceLow"  onChange="this.form.seekpriceLow_holder.value=this[this.selectedIndex].value;FromToChanged(this.form,'seekprice','Low')">
                    <option selected value="-1">0 kr.</option>
                      <option value="0">0</option>
                      <option value="25000">25.000 kr.</option>
                    <option value="50000">50.000 kr.</option>
                    <option value="75000">75.000 kr.</option>
                    <option value="100000">100.000 kr.</option>
                    <option value="150000">150.000 kr.</option>
                    <option value="200000">200.000 kr.</option>
                    <option value="250000">250.000 kr.</option>
                    <option value="300000">300.000 kr.</option>
                </select></td>

        <td  align="center" width="20" style="padding:0px;"><br /><strong>til:</strong></td>
        <td style="padding:0px;"><br />
            <select name="seekpriceHigh" onChange="this.form.seekpriceHigh_holder.value=this[this.selectedIndex].value;FromToChanged(this.form,'seekprice','High')" style="width:100%;">
                <option selected value="99999999">&gt; 300.000</option>
                <option value="25000">25.000</option>
                <option value="50000">50.000</option>
                <option value="75000">75.000</option>
                <option value="100000">100.000</option>
                <option value="150000">150.000</option>
                <option value="200000">200.000</option>
                <option value="250000">250.000</option>
                <option value="300000">300.000</option>
                <option value="99999998">&gt; 300.000</option>
            </select>
        </td>

          <td align="right" style="padding:0px;"><br />
            brugte
        <input type="Radio" id="old" name="old1" checked value="V1" onclick="changeBox(1);"><br />
            nye
        <input type="Radio" id="old" name="old" value="V1" onclick="changeBox(1);" checked>
        </td>
        <td  align="center" valign="middle" style="padding:0px;"></td>
        <td  style="padding:0px;"><br />
        &nbsp;<div class="button">
            <div class="btnleft"></div>
                <div class="btncenter">
                    <input type="submit" value="S&oslash;g  &gt;&gt;" name="search1" id="search" /></div>
            <div class="btnright"></div>
        </div>
        </td>
      </tr>
      <tr><td colspan="6" style="padding:0px;"><strong>Der er pt. 20593 brugte
        biler i databasen!</strong></td></tr>
      </form>
    </table>
       
    <!--------- nye biler søg------------------->
   
   

<table cellpadding="0" cellspacing="10" border="0" id="table2" style="display: none;>
<tr><td colspan="2"></td></tr>
    <tr>
        <td style="padding:0px;"><strong>1.</strong> Vælg mærke:</td>
        <td style="padding:0px;"><strong>2.</strong> Vælg model:</td>
    </tr>
    <tr>
        <td style="padding:0px;"><Form method="post" name="soeg" onsubmit="return tjekform(this.form);" style="margin: 0px;" action="newcars.asp">
            <select name="Maerke" onchange="skift(this.form)">
                  <option value="all">Vælg Mærke</option>
                <option value="Alfa Romeo">Alfa Romeo</option><option value="Aston Martin">
                Aston Martin</option><option value="Audi">Audi</option><option value="BMW">
                BMW</option><option value="Chevrolet">Chevrolet</option><option value="Chrysler">
                Chrysler</option><option value="Citroën">Citroën</option><option value="Daewoo">
                Daewoo</option><option value="Fiat">Fiat</option><option value="Ford">
                Ford</option><option value="Honda">Honda</option><option value="Hyundai">
                Hyundai</option><option value="Jaguar">Jaguar</option><option value="Jeep">
                Jeep</option><option value="Kia">Kia</option><option value="Land-Rover">
                Land-Rover</option><option value="Lexus">Lexus</option><option value="Lotus">
                Lotus</option><option value="Mazda">Mazda</option><option value="Mercedes-Benz">
                Mercedes-Benz</option><option value="Mini">Mini</option><option value="Mitsubishi">
                Mitsubishi</option><option value="Nissan">Nissan</option><option value="Opel">
                Opel</option><option value="Peugeot">Peugeot</option><option value="Porsche">
                Porsche</option><option value="Renault">Renault</option><option value="Rover">
                Rover</option><option value="Seat">Seat</option><option value="Skoda">
                Skoda</option><option value="Smart">Smart</option><option value="Subaru">
                Subaru</option><option value="Suzuki">Suzuki</option><option value="Saab">
                Saab</option><option value="Toyota">Toyota</option><option value="Volvo">
                Volvo</option><option value="VW">VW</option>
            </select>
        </td>
        <td style="padding:0px;" valign="bottom">
            <select name="model">
                <option value="all">Vælg Mærke</option>
            </select>
        </td>
    </tr>
    <tr>
        <td><strong>Der er pt. 2174 nye biler i databasen!</strong></td>
        <td style="padding:0px;">    brugte
        <input type="Radio" id="newto" name="new" onclick="changeBox(2);" value="V1" checked><br />
            nye <input type="Radio" name="newto" id="new" checked value="V1">
        <div class="button">
            <div class="btnleft"></div>
                <div class="btncenter"><input type="submit" value="S&oslash;g  &gt;&gt;" name="search" id="search" /></div>
            <div class="btnright"></div>
        </div></FORM></td>
    </tr>
   
</table>
        </div></div>
       
       
       
   

       
            </body>

</html>
Avatar billede yuksel Nybegynder
01. december 2003 - 16:20 #1
det her er bare en eks. jeg har fundet, men det noget med event handler og textboke
Avatar billede o-zone Nybegynder
05. december 2003 - 18:38 #2
Det svar du ikke så gerne vil høre, er at clientside javascript af sikkerhedsmæssige grunde er forkøblet, så det blandt andet ikke har mulighed for at koble op til databaser.

Hvad du derimod kan gøre er at få et serverside script til at koble op til databasen for dig, og så danne siden (og/eller javascriptet) ud fra data i DB'en.

Hvis jeg skal give javascript adgang til en masse data fra en database, så gør jeg gerne det at jeg lader et serverside script generere en hel scriptblok som jeg placerer øverst i dokumentet (evt. i head). Her opretter jeg en række arrays, som indeholder alle dataene, og senere i dokumentet (i senere scriptblokke) kan jeg så tilgå de dynamiske data via de oprettede arrays. På den måde prøver jeg at holde skæg for sig og snot for sig. Men det kommer selvfølgelig an på hvad du skal bruge de dynamiske data til. For hvis det bare er til at liste som f.eks. options i selects, så kan du ligeså godt lade dit serverside script ordne det hele med det samme - så vil det kun være spild af tid at gå omkring javascript!
Den dynamisk genererede scriptblok kunne f.eks. se således ud:
---8<----------
<script language="javascript" type="text/javascript">
// DENNE SCRIPTBLOK ER AUTOMATISK GENERERET SERVERSIDE. DET NYTTER IKKE AT ÆNDRE NOGET HER!
var biler = new Array('Austin','Bentley','BMW','Buick','Cadillac'...'Volvo','VW','Yugo');
var kmTal = new Array('25000','50000','75000'...'150000','175000','200000');
osv.
</script>
---8<----------
efterfølgende vil andre scriptblokke kunne tilgå bilerne f.eks. således:
---8<----------
<script language="javascript" type="text/javascript">
for (var i=0;i<biler.length;i++){
  document.write("<option value='"+i+"'>"+biler[i]+"</option>\n");
}
</script>
---8<----------
... dette script vil generere en option liste med alle bilerne hentet fra databasen (men som sagt, hvis du ikke skal andet end at liste dem, så kan du ligeså godt få dit serverside script til at gøre det direkte)

(-:H@zze
Avatar billede yuksel Nybegynder
10. april 2005 - 23:09 #3
denne lukkes pga. manglende løsning og tid
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