Avatar billede pstidsen Novice
27. februar 2011 - 15:59 Der er 18 kommentarer og
1 løsning

JavaScript problem

Jeg har haft dette spørgsmål til at køre lidt og har da også fået svar på noget, men mangler lige lidt, så nu opretter jeg et nyt spm i den rigtige kategori ;) I kan gå ind på linke og læse hvad der er foreslået ;)

Problem 1: Jeg har det her js:
<script type="text/javascript">
var total = 0;
for (i = 1; i < 6; i++) {
    total += document.getElementById('ialt'+i).value;
}
document.getElementById('total').value = total;
</script>

og det her html:
<td>I alt:</td><td><input type="text" style="width:100px;" name="ialt1" id="ialt1" readonly="readonly" /></td>
<td>Total:</td><td><input name="total" style="width:100px;" type="text" id="total" readonly="yes" />

Det er så meningen at den skal tage i alt feltet (der kommer nok flere) og smide summen i total feltet. Hvordan??


Problem 2: Jeg har det her java script:
<script type="text/javascript">
function showVal( val ){

    document.getElementById("pris1").value=val;
}

window.onload = function () {

    var SelectData = {
        "Ting 1":"111",
        "Ting 2":"222",
        "Ting 3":"333",
    };

    for(var key in SelectData){
        var op = document.createElement('option');
        op.value=SelectData[key];
        op.text=key;
        document.getElementById("SelectID").add(op, null);
    }
}
</script>

og det her html:
<td rowspan="2">Vare:</td><td rowspan="2"><select id="SelectID" onchange="showVal(this.value)" name="vare1" type="text">
<option size="10" value="vaelg_vare">Vælg vare</option></td>

Det virker fint med at hvis man tager "Ting 1" i dropdown kommer "111" ud i pris felt. Jeg vil gerne have et (måske to) felt(er) mere og måske også et billede. Altså når man vælger "Ting 1" skal der komme et billede af Ting 1. Hvordan?

Siden jeg laver på er: http://runescapenews.dk/Pstidsen/webshopprojekt/kontakt.php

Vil lige sige: Jeg kan absolut intet js, så det skal helst være en færdig kode jeg får.
Avatar billede pstidsen Novice
27. februar 2011 - 18:37 #1
UPDATE: Læs det her spørgsmål. Hvor der står hvad mit problem er. Det er ændret lidt. Er der please nogen som vil hjælpe??
Avatar billede olsensweb.dk Ekspert
27. februar 2011 - 22:24 #2
Avatar billede pstidsen Novice
28. februar 2011 - 10:31 #3
Skal lige kigge på den, men smid svar, så får jakob den anden;)
Avatar billede pstidsen Novice
28. februar 2011 - 10:41 #4
Kan man få i ialt name lavet om så der kommer et tal på?? ialt1 ialt2 osv.
Avatar billede olsensweb.dk Ekspert
28. februar 2011 - 13:47 #5
du får lige svaret her

>Kan man få i ialt name lavet om så der kommer et tal på?? ialt1 ialt2 osv.
ikke umildbart, årsagen er at jeg bruger ialt som et array, som jeg finder længden på (var lng = document.formular.ialt.length), i changed(), så jeg ved hvor mange felter der er der skal lægges sammen, samt i ResetImg(), så jeg kan resette alle billederne
alternativet er du havde hardcodet de 150 ind stedet for lng, men hvad så hvis du ombestemmer dig og finder der kun skal være 50, får du så husket at rette det de steder der er afh af længden ?? ( jeg er ikke sikker )
men hvorfor vil du have "name taget" ialt som ialt1, ialt2, ialt3.. osv, du har det jo som "id taget", hvilke er nemmere at arbejde på, men bare ikke har array function

dvs du får det over i php som
[ialt] => Array
(
[0] => 5085    // ialt1
[1] => 0        // ialt2
[2] => 2390    // ialt3
[3] => 0
    .....
[149] => 0
)


og i PHP
$ialt1=$_POST['ialt'][0];    // array variabel
$ialt2=$_POST['ialt'][1];   
$vare1=$_POST['vare1'];        // normal name variabel
$vare2=$_POST['vare2'];       

echo $ialt1;
echo $vare1;

echo $ialt2;
echo $vare2;
Avatar billede olsensweb.dk Ekspert
28. februar 2011 - 14:56 #6
>Kan man få i ialt name lavet om så der kommer et tal på?? ialt1 ialt2 osv.
og dog ved nærmerer eftertanke
du kan lave et skjult felt du skriver antallet i, og referarer til dette
[pre]
<input name="antalfelter" id="antalfelter" type="hidden" value="150"/>

var antallng=parseInt(document.getElementById('antalfelter').value);
[pre]
demo opdateret
Avatar billede pstidsen Novice
28. februar 2011 - 16:32 #7
hardcodet? Vil det sige at det virker hvis jeg skifter:
        for (i=1;i<=150;i++){
            document.write('<br/>');
            document.write('<tr>');
            document.write('<td>Vare:<\/td>');
            // modify by olsensweb.dk             
            document.write('<td><select id="vare'+i+'"><\/select><\/td>');
            SelectBoxImages(i);     // added by olsensweb.dk                         
            document.write('<td>Antal:<\/td>');
            document.write('<td><input type="text" style="width:100px;" name="antal'+i+'" id="antal'+i+'" onchange="changed('+i+')" /><\/td>');
            document.write('<td>Pris:<\/td>');
            document.write('<td><input type="text" style="width:100px;" name="pris'+i+'" id="pris'+i+'" onchange="changed('+i+')" readonly="readonly" /><\/td>');
            document.write('<td>I alt:<\/td>');
            document.write('<td><input type="text" style="width:100px;" value="0" name="ialt" id="ialt'+i+'" readonly="readonly" /><\/td>');
            document.write('<span id="img'+i+'"><\/span>');           
            document.write('<\/tr>')

Ud med:
<tr><td>Vare:</td><td><select id="SelectID1" onchange="showVal(this.value)" name="vare1"><option value="NaN">Vælg vare</option></select></td><td>Antal:</td><td><input type="text" style="width:100px;" name="antal1" id="antal1" onchange="changed(1)" /></td><td>Pris:</td><td><input type="text" style="width:100px;" name="pris1 " id="pris1" onchange="changed(1)" readonly="readonly" /></td><td>I alt:</td><td><input type="text" style="width:100px;" name="ialt1" id="ialt1" readonly="readonly" /></td></tr>

<tr><td>Vare:</td><td><select id="SelectID2" onchange="showVal(this.value)" name="vare2"><option value="NaN">Vælg vare</option></select></td><td>Antal:</td><td><input type="text" style="width:100px;" name="antal2" id="antal2" onchange="changed(2)" /></td><td>Pris:</td><td><input type="text" style="width:100px;" name="pris2 " id="pris2" onchange="changed(2)" readonly="readonly" /></td><td>I alt:</td><td><input type="text" style="width:100px;" name="ialt2" id="ialt2" readonly="readonly" /></td></tr>

<tr><td>Vare:</td><td><select id="SelectID3" onchange="showVal(this.value)" name="vare3"><option value="NaN">Vælg vare</option></select></td><td>Antal:</td><td><input type="text" style="width:100px;" name="antal3" id="antal3" onchange="changed(3)" /></td><td>Pris:</td><td><input type="text" style="width:100px;" name="pris3 " id="pris3" onchange="changed(3)" readonly="readonly" /></td><td>I alt:</td><td><input type="text" style="width:100px;" name="ialt3" id="ialt3" readonly="readonly" /></td></tr>
??? Det gør mig intet, har faktisk lavet 150 af dem ;)
Avatar billede pstidsen Novice
28. februar 2011 - 17:01 #8
Grunden til at jeg gerne vil have name med er fordi jeg skal bruge det i det php dokument der gør at formularen kan sendes ;)
Avatar billede olsensweb.dk Ekspert
28. februar 2011 - 17:10 #9
>hardcodet? Vil det sige at det virker hvis jeg skifter:
delvist, jeg bruger det flerer steder i JS, som jeg skrev i #5
jeg kan se det ikke er den sidste opdaterede code du anvender se #6, der får du ialt1, ialt2, osv
hvis du skifter det ud, skal du huske at lave 150 af disse <span id="img'+i+'"></span> også, da det er i denne span billedet vises.
jeg ville kun overveje at skifte det ud hvis, jeg lavede tilsvarende serverside.

husk at rette

function ResetImg(){       
    for(i=1; i<=150; i++){
        document.getElementById('img'+i).innerHTML = "";   
    }
}

function changed(number) {
    var stk = Number(document.getElementById('antal'+number).value);
    var p = Number(document.getElementById('pris'+number).value);       
    document.getElementById('ialt'+number).value = stk * p;
    var total = 0;               
    for (i = 1; i <= 150; i++) {
        total += parseInt(document.getElementById('ialt'+i).value); // modify by olsensweb.dk   
    }
    document.getElementById('total').value = total;       
}
Avatar billede pstidsen Novice
28. februar 2011 - 17:23 #10
Altså der SKAL være ialt1 ialt2 ialt3 osv. Hvad vil du så anbefale?
Avatar billede olsensweb.dk Ekspert
28. februar 2011 - 17:48 #11
>Altså der SKAL være ialt1 ialt2 ialt3 osv. Hvad vil du så anbefale?
gør som jeg har lavet i den opdaterede demo http://olsensweb.dk/test/experten/spm/932751/ der har du ialt1 ialt2 ialt3 osv.

eller lav det i PHP, og behold

    function changed(number) {
        var stk = Number(document.getElementById('antal'+number).value);
        var p = Number(document.getElementById('pris'+number).value);       
        document.getElementById('ialt'+number).value = stk * p;
        var total = 0;               
        for (i = 1; i <= 150; i++) { // modify by olsensweb.dk             
            total += parseInt(document.getElementById('ialt'+i).value); // modify by olsensweb.dk   
        }
        document.getElementById('total').value = total;       
    }   
    function showVal(elm, i){
        var val = elm.value;
        var selindex = elm.selectedIndex;
        document.getElementById("pris"+i).value=val;       
        ShowImg(i, selindex); // added by olsensweb.dk           
        changed(i);    // added by olsensweb.dk           
    }       
    function ShowImg(num, index){       
        var elm = document.getElementById('img'+num);
        var fil = ItemObjArray[index].File;       
        var img = '<img src="images/'+ fil +'" height="50" width="50" alt="Teaser billede" title="" />';       
        elm.innerHTML = img;
    }   
    function ResetImg(){       
        for(i=1; i<=150; i++){
            document.getElementById('img'+i).innerHTML = "";   
        }
    }


man kan så agumentere for du sender flere data over til brugeren hvis du laver det i PHP, men hvis det er nemmere for dig at lave det serverside, så gør dette, men jeg ville ALDRIG lave det i HTML som du viste
Avatar billede pstidsen Novice
28. februar 2011 - 18:49 #12
Nu har jeg slettet
        // added by olsensweb.dk                         
        var antallng=parseInt(document.getElementById('antalfelter').value);
        for (i=1;i<=antallng;i++){
            document.write('<br/>');
            document.write('<tr>');
            document.write('<td>Vare:<\/td>');
            // modify by olsensweb.dk             
            document.write('<td><select id="vare'+i+'"><\/select><\/td>');
            SelectBoxImages(i);     // added by olsensweb.dk                         
            document.write('<td>Antal:<\/td>');
            document.write('<td><input type="text" style="width:100px;" name="antal'+i+'" id="antal'+i+'" onchange="changed('+i+')" /><\/td>');
            document.write('<td>Pris:<\/td>');
            document.write('<td><input type="text" style="width:100px;" name="pris'+i+'" id="pris'+i+'" onchange="changed('+i+')" readonly="readonly" /><\/td>');
            document.write('<td>I alt:<\/td>');           
            document.write('<td><input type="text" style="width:100px;" value="0" name="ialt'+i+'" id="ialt'+i+'" readonly="readonly" /><\/td>');
            document.write('<span id="img'+i+'"><\/span>');           
            document.write('<\/tr>')                       
        }


og erstattet med (bare to linjer i første omgang):
<tr><td>Vare:</td><td><select id="SelectID1" onchange="showVal(this.value)" name="vare1"><option value="NaN">Vælg vare</option></select></td><td>Antal:</td><td><input type="text" style="width:100px;" name="antal1" id="antal1" onchange="changed(1)" /></td><td>Pris:</td><td><input type="text" style="width:100px;" name="pris1 " id="pris1" onchange="changed(1)" readonly="readonly" /></td><td>I alt:</td><td><input type="text" style="width:100px;" name="ialt1" id="ialt1" readonly="readonly" /></td><td><span id="img1"></span></td></tr>

<tr><td>Vare:</td><td><select id="SelectID2" onchange="showVal(this.value)" name="vare2"><option value="NaN">Vælg vare</option></select></td><td>Antal:</td><td><input type="text" style="width:100px;" name="antal2" id="antal2" onchange="changed(2)" /></td><td>Pris:</td><td><input type="text" style="width:100px;" name="pris2 " id="pris2" onchange="changed(2)" readonly="readonly" /></td><td>I alt:</td><td><input type="text" style="width:100px;" name="ialt2" id="ialt2" readonly="readonly" /></td><td><span id="img2"></span></td></tr>
Den kode som står lige over her, er selvfølgelig indsat i table tag'et.

Nå, men det virker stadig ikke. Der er ingen valgmuligheder i dropdown. Der må lige mangle en lille ting et sted?? Se: http://runescapenews.dk/Pstidsen/webshopprojekt/ny%2018.46.html. Det er somom den mangler forbindelse med det nederste script
var ItemObjArray = Array();
    var Item = new Object();       
    Item = {Name: "Vælg ",        File: "placeholder.gif",                val: "-"        };    ItemObjArray[0]=Item;
    Item = {Name: "jakobdo",    File: "33549_jakobdo__jpg.png",     val: "1195.00"    };    ItemObjArray[1]=Item;
    Item = {Name: "aaberg_cc",    File: "129409_aaberg_cc__png.png",     val: "1695.00"    };    ItemObjArray[2]=Item;
    Item = {Name: "ronols",        File: "178965_ronols__gif.png",     val: "600.00"    };    ItemObjArray[3]=Item;
    Item = {Name: "splazz",        File: "92820_splazz__png.png",         val: "600.00"    };    ItemObjArray[4]=Item;
Avatar billede olsensweb.dk Ekspert
28. februar 2011 - 19:58 #13
det er pga du aldrig ligger noget i options felterne

du kan udfylde alle select boxene ved dette:

var antallng=parseInt(document.getElementById('antalfelter').value);
    for (i=1;i<=antallng;i++){
        SelectBoxImages(i);
    }

demo opdateret

dette SKAL gøres EFTER, select boxen er lavet, jeg har rykket udfyldning af boxen helt ned i bunden
jeg har rettet lidt på din kontaktformular her
http://olsensweb.dk/test/experten/spm/932751/kontaktformular.php
Avatar billede pstidsen Novice
28. februar 2011 - 20:11 #14
Aaaah super!!! Så er der kun en fejl :) Total boksen.

Og så:
Hvis jeg laver et ekstra felt som hedder beskrivelse og vil udvide det her script:
    Item = {Name: "Vælg ",        File: "placeholder.gif",                val: "-"        };    ItemObjArray[0]=Item;
    Item = {Name: "jakobdo",    File: "33549_jakobdo__jpg.png",     val: "1195.00"    };    ItemObjArray[1]=Item;
    Item = {Name: "aaberg_cc",    File: "129409_aaberg_cc__png.png",     val: "1695.00"    };    ItemObjArray[2]=Item;
    Item = {Name: "ronols",        File: "178965_ronols__gif.png",     val: "600.00"    };    ItemObjArray[3]=Item;
    Item = {Name: "splazz",        File: "92820_splazz__png.png",         val: "600.00"    };    ItemObjArray[4]=Item;


Skal jeg så skrive:
Item = {Name: "ronols",        File: "178965_ronols__gif.png",     val: "600.00", val: "ronols har været en STOR hjælp til dette"    };    ItemObjArray[3]=Item;
?? Men hvor fortæller jeg den så at den skal putte det ind i beskrivelses feltet?
Avatar billede olsensweb.dk Ekspert
28. februar 2011 - 22:49 #15
>Hvis jeg laver et ekstra felt som hedder beskrivelse og vil udvide det her script:
Item = {Name: "Vælg ",        File: "placeholder.gif",                val: "-",         Beskrivelse:""};                                            ItemObjArray[0]=Item;
Item = {Name: "jakobdo",    File: "33549_jakobdo__jpg.png",     val: "1195.00", Beskrivelse:""};                                            ItemObjArray[1]=Item;
Item = {Name: "aaberg_cc",    File: "129409_aaberg_cc__png.png",     val: "1695.00", Beskrivelse:""    };                                            ItemObjArray[2]=Item;
Item = {Name: "ronols",        File: "178965_ronols__gif.png",     val: "600.00",     Beskrivelse:"ronols har været en STOR hjælp til dette"    };    ItemObjArray[3]=Item;
Item = {Name: "splazz",        File: "92820_splazz__png.png",         val: "600.00",     Beskrivelse:""    };


>Men hvor fortæller jeg den så at den skal putte det ind i beskrivelses feltet?
1) lav et felt det skal udlæsses i eks <td><span id="desc1"></span></td>
2) lav en function der udlæser til feltet
function ShowDecription(num, index){       
        var elm = document.getElementById('desc'+num);
        var desc = ItemObjArray[index].Beskrivelse;                       
        elm.innerHTML = desc;
}


3) kald functionen
// modify by olsensweb.dk             
    function showVal(elm, i){
        var val = elm.value;
        var selindex = elm.selectedIndex;
        document.getElementById("pris"+i).value=val;       
        ShowImg(i, selindex); // added by olsensweb.dk           
        ShowDecription(i, selindex);
        changed(i);    // added by olsensweb.dk           
}


>Aaaah super!!! Så er der kun en fejl :) Total boksen.
det skyldtes total beregningen løb for langt, derfor skal det IKKE hardcodes til feks 150, for når man tester med andet så går det galt

kontaktformular updateret http://olsensweb.dk/test/experten/spm/932751/kontaktformular.php
Avatar billede pstidsen Novice
01. marts 2011 - 17:24 #16
DING DING DING!!!! DET HELE VIRKER 10000000000 GANGE TAK FOR HJÆLPEN!!!
Avatar billede pstidsen Novice
01. marts 2011 - 18:31 #17
Nej det gør det ikke alligevel... Der er en fejl i names.

$vare1 $antal1 $pris1 $ialt1

Bliver til

1895 3  5685

i mailen. På siden har jeg indtastet:

Vare: Mobil Antal: 3 Pris: 1895 I alt: 5685

Altså: $vare1 bliver til prisen og $pris1 er der slet ikke. Hvad skal lige ændres? Jeg vil helst have at du lige siger hvor der er i stedet for at opdatere demo'en, da jeg har ændret en del i demo'en. Forresten er det meningen at der i mailen skal stå:

Mobil 3 1895 5685
Avatar billede pstidsen Novice
01. marts 2011 - 19:11 #18
eller vil det virke hvis jeg bruger id istedet for name?? Hvis ja, hvad skal jeg så ændre for at den bruger id istedet for name??
Avatar billede pstidsen Novice
02. marts 2011 - 20:59 #19
Ved du noget?? ellers laver jeg et nyt spm ;)
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