Avatar billede dustbunny Nybegynder
24. november 2004 - 00:42 Der er 10 kommentarer og
1 løsning

list box med stigende vægt værdi

Jeg er igang med at lave et porto system hvor jeg ud fra en list box(select med size=5) bestemmer min vægt og pris på portoen.

Det jeg forstiller mig er følgende:

<select name="selectName" size="5">
<option value="500,25">0-500 gram</option>
<option value="1000,45">500-1000 gram</option>
<option value="5000,50">1000-5000 gram</option>
<option value="10000,60">5000-10000 gram</option>
<option value="15000,85">10000-15000 gram</option>
<option value="20000,95">15000-20000 gram</option>
</select>
<br><input type="text" name="weight" size="24">
<input type="text" name="price" size="24">
<input type="submit" name="submitButtonName"><input type="reset">

Listen skal fra starten være tom hvis den ingen data får fra databasen. Hvis den er tom skal vægten altid starte ved 0 kan derefter kun have en stigende værdi felt for felt nedefter. Prisen skal også være stigende felt for felt nedefter.

Det vil sige at hvis jeg næste gang jeg vil indskrive en værdi i feltet skal udfylde weight feltet med en værdi der er over 20000 og price feltet skal være over 95. Hvis værdierne er lavere end det felt der står sidst i rækken skal den komme med en alert. Ved tryk på reset knap skal hele listen tømmes.

Eksempel 1:

Mit felt er tomt
Jeg indtaster 1500 i weight feltet og 25 i price og trykker send
Det skal give følgende resultat:
<select name="selectName" size="5">
<option value="1500,25">0-1500 gram</option>
</select>

Eksempel 2:
Jeg har en liste der ser sådan ud
<select name="selectName" size="5">
<option value="500,25">0-500 gram</option>
<option value="1000,45">500-1000 gram</option>
<option value="5000,50">1000-5000 gram</option>
<option value="10000,60">5000-10000 gram</option>
<option value="15000,85">10000-15000 gram</option>
<option value="20000,95">15000-20000 gram</option>
</select>
Jeg taster 25000 i weight og 120 i price og får følgende resultat:
<select name="selectName" size="5">
<option value="500,25">0-500 gram</option>
<option value="1000,45">500-1000 gram</option>
<option value="5000,50">1000-5000 gram</option>
<option value="10000,60">5000-10000 gram</option>
<option value="15000,85">10000-15000 gram</option>
<option value="20000,95">15000-20000 gram</option>
<option value="25000,120">20000-25000 gram</option>
</select>

Havde jeg skrevet en værdi under 20000 i weight og 95 i price skal der komme en alert.

Tror i har forstået det nu :)
Avatar billede skovenborg Nybegynder
24. november 2004 - 01:00 #1
måske. Du kan jo prøve:
<script type="text/javascript">
function addOption(val1,val2,selbox) {
    var max_weight = 0;
    for (i=0;i<selbox.length;i++) {
        temp_val = selbox.options[i].value.split(",");
        if (temp_val.length == 2) {
            if (+temp_val[0] >= val1 || +temp_val[1] >= val2) {
                alert("Du skal skrive en højere vægt og/eller pris");
                return;
            }
            max_weight = Math.max(max_weight,+temp_val[0]);
        }
       
    }
    opt = new Option(max_weight + " - "+ val1+ " gram",val1+","+val2);
    selbox.options[selbox.length] = opt;
}
</script>

<form>
<select name="selectName" size="5">
</select>
<br><input type="text" name="weight" size="24">
<input type="text" name="price" size="24">
<input type="button" onclick="addOption(this.form.weight.value,this.form.price.value,this.form.selectName);" />
</form>
Avatar billede skovenborg Nybegynder
24. november 2004 - 01:01 #2
det kan være man godt må skrive den samme pris som før. Hvis det er tilfældet skal du bare skrive:
if (+temp_val[0] >= val1 || +temp_val[1] > val2) { istedet
Avatar billede dustbunny Nybegynder
24. november 2004 - 13:36 #3
Jah noget i den stil. Så skal det bare ikke være muligt at skrive andet end tal i felterne, men det er jo bare en validerings sag.
Så har jeg gået og tænkt lidt over det. Den måtte egentlig gerne tilføje den nye værdi efter et evt. markeret felt. Der skal den jo så stadig finde ud af om pris og vægt er højere end feltet før, men også om den er lavere end feltet efter. Hvis der ikke er markeret noget skal den bare gøre som nu.
Så mangler der en nulstil liste, altså fjern alle værdier. Der ville det igen være smart hvis man kunne slette et markeret felt med en 3. knap. Hvis der ikke er markeret noget skal den ikke slette noget, eller knappen skal være disabled.
Men ehmm...jeg kigger også lige selv lidt på det engang når jeg har tid.
Avatar billede skovenborg Nybegynder
24. november 2004 - 17:04 #4
Okay dette bliver et noget større script end man måske skulle tro var nødvendigt. Det er  muligt noget af det kan skrives lidt om, men det her burde virke i hvert fald:

  <script type="text/javascript">
function addOption(val1,val2,selbox) {
    val1 = +val1;
    val2 = +val2;
    if (val1 <= 0  || val2 <= 0) {alert("Du skal skrive en ordentlig pris og vægt, tak");return;}
    var max_weight = min_weight = max_price = min_price = 0;
    var idx = 0;
    var temp;
    if (selbox.selectedIndex != -1) {
          idx = selbox.selectedIndex;
          temp = findWeightAndPrice(selbox.options[idx].value);
          if (temp) {
                min_weight = temp.weight;
                min_price = temp.price;
          }
          if (selbox.options[idx +1]) {
                temp = findWeightAndPrice(selbox.options[idx +1].value);
                if (temp) {
                    max_weight = temp.weight;
                    max_price = temp.price;
                }
          }
          selbox.selectedIndex = -1;
    }
    else {

        idx = selbox.length-1;
        if (idx > -1) {temp = findWeightAndPrice(selbox.options[idx].value);}
        else {temp = findWeightAndPrice("0,0");}
        if (temp) {
                min_weight = temp.weight;
                min_price = temp.price;
        }

    }
    idx++;

    if (max_weight > 0 && min_weight > 0) {
          if (val1 <= min_weight || val1 >= max_weight || val2 <= min_price || val2 >= max_price) {
                alert("Din vægt skal være højere end "+min_weight+" og mindre end "+max_weight+" og din pris skal være højere end "+min_price+" samt højere end "+max_price);
                return;
          }
    }
    else {
        if (val1 <= min_weight || val2 <= min_price) {
              alert("Din vægt skal være større end "+min_weight+" og din pris skal være højere end "+min_price);
              return;
        }
    }
    var i=selbox.length-1;
    while (selbox[i] && i>=idx) {
        temp_opt = selbox.options[i];
        if (i==idx) {temp_opt.text = val1+" - "+max_weight+" gram";}
        opt = new Option(temp_opt.text,temp_opt.value);
        selbox.options[i+1] = opt;
        i--;
    }
    opt = new Option(min_weight + " - "+ val1+ " gram",val1+","+val2);
    selbox.options[idx] = opt;
}

function findWeightAndPrice(str) {
      var temp_val = str.split(",");
      if (temp_val.length == 2) {
          return {weight:+temp_val[0],price:+temp_val[1]}
      }
      else {return false;}
}

function removeSelectedOptions(selbox) {
      if (selbox.selectedIndex != -1) {
            idx = selbox.selectedIndex;
            var opt;
            if (selbox.options[idx+1]) {
                    opt = selbox.options[idx+1];
                    if (idx-1 > -1) {temp1 = findWeightAndPrice(selbox.options[idx-1].value);}
                    else {temp1 = findWeightAndPrice("0,0");}
                    temp2 = findWeightAndPrice(selbox.options[idx+1].value);
                    opt.text = temp1.weight + " - " + temp2.weight + " gram";
            }
            selbox.options[idx] = (opt) ? opt: null;
      }
}

function removeAllOptions(selbox) {
    selbox.length = 0;
}
</script>

<form>
<select name="selectName" size="5">
</select>
<input type="button" value="Slet valgte" onclick="removeSelectedOptions(this.form.selectName);" />
<input type="button" value="Slet alle" onclick="removeAllOptions(this.form.selectName);" />
<br><input type="text" name="weight" size="24">
<input type="text" name="price" size="24">
<input type="button" value="Tilføj halløj" onclick="addOption(this.form.weight.value,this.form.price.value,this.form.selectName);" />
</form>
Avatar billede dustbunny Nybegynder
24. november 2004 - 17:21 #5
Den skriver der er en fejl
Avatar billede skovenborg Nybegynder
24. november 2004 - 17:33 #6
Ja, mindsandten. Havde ikke lige tænkt på at IE ikke kunne klare den slags, men nu burde det virke:
  <script type="text/javascript">
function addOption(val1,val2,selbox) {
    val1 = +val1;
    val2 = +val2;
    if (val1 <= 0  || val2 <= 0) {alert("Du skal skrive en ordentlig pris og vægt, tak");return;}
    var max_weight = min_weight = max_price = min_price = 0;
    var idx = 0;
    var temp;
    if (selbox.selectedIndex != -1) {
          idx = selbox.selectedIndex;
          temp = findWeightAndPrice(selbox.options[idx].value);
          if (temp) {
                min_weight = temp.weight;
                min_price = temp.price;
          }
          if (selbox.options[idx +1]) {
                temp = findWeightAndPrice(selbox.options[idx +1].value);
                if (temp) {
                    max_weight = temp.weight;
                    max_price = temp.price;
                }
          }
    }
    else {

        idx = selbox.length-1;
        if (idx > -1) {temp = findWeightAndPrice(selbox.options[idx].value);}
        else {temp = findWeightAndPrice("0,0");}
        if (temp) {
                min_weight = temp.weight;
                min_price = temp.price;
        }

    }
    idx++;

    if (max_weight > 0 && min_weight > 0) {
          if (val1 <= min_weight || val1 >= max_weight || val2 <= min_price || val2 >= max_price) {
                alert("Din vægt skal være højere end "+min_weight+" og mindre end "+max_weight+" og din pris skal være højere end "+min_price+" samt lavere end "+max_price);
                return;
          }
    }
    else {
        if (val1 <= min_weight || val2 <= min_price) {
              alert("Din vægt skal være større end "+min_weight+" og din pris skal være højere end "+min_price);
              return;
        }
    }
    var i=selbox.length-1;
    selbox.selectedIndex = -1;
    while (i > -1 && selbox[i] && i>=idx) {
        temp_opt = selbox.options[i];
        if (i==idx) {temp_opt.text = val1+" - "+max_weight+" gram";}
        opt = new Option(temp_opt.text,temp_opt.value);
        selbox.options[i+1] = opt;
        i--;
    }
    opt = new Option(min_weight + " - "+ val1+ " gram",val1+","+val2);
    selbox.options[idx] = opt;
}

function findWeightAndPrice(str) {
      var temp_val = str.split(",");
      if (temp_val.length == 2) {
          return {weight:+temp_val[0],price:+temp_val[1]}
      }
      else {return false;}
}

function removeSelectedOptions(selbox) {
      if (selbox.selectedIndex != -1) {
            idx = selbox.selectedIndex;
            var opt;
            if (selbox.options[idx+1]) {
                    opt = selbox.options[idx+1];
                    if (idx-1 > -1) {temp1 = findWeightAndPrice(selbox.options[idx-1].value);}
                    else {temp1 = findWeightAndPrice("0,0");}
                    temp2 = findWeightAndPrice(selbox.options[idx+1].value);
                    opt.text = temp1.weight + " - " + temp2.weight + " gram";
            }
            selbox.options[idx] = null;
            if (opt) {
                    selbox.options[idx].value = opt.value;
                    selbox.options[idx].text = opt.text;
            }
      }
}

function removeAllOptions(selbox) {
    selbox.length = 0;
}
</script>
Avatar billede dustbunny Nybegynder
24. november 2004 - 17:46 #7
Var ellers lige igang med at lave noget selv :) Men det virker ikke helt...

Se lige her hihi jeg er ikke nogen javascript ekspert !

<script type="text/javascript">
function keyCheck(eventObj, obj) {
    var keyCode;
    if (document.all) {
        keyCode=eventObj.keyCode;
    } else {
        keyCode=eventObj.which;
    }
    var str=obj.value;
    if(keyCode<48 || keyCode>58) {
        return false;
    }
    return true;
}

function addOption(selbox) {
    val1 = document.myform.weight.value;
    val2 = document.myform.price.value;
    var max_weight = 0;

    if (!val1.match(/^[0-9\+ ]+$/) || !val2.match(/^[0-9\+ ]+$/)) {
        alert("Du kan kun anvende hele tal");
        return false;
    }
    if (val1 <= max_weight || val2 <= max_weight) {
        alert("Din vægt og/eller pris skal være større end "+max_weight);
        return false;
    }

if (selbox.selectedIndex>=0) {
    for (i=selbox.length;i>selbox.selectedIndex;i--) {
        if (selbox.selectedIndex+2==i){
            temp_val = selbox.options[i-1].value.split(",");
            temp_txt = val1+" - "+temp_val[0]+" gram";
        } else {
            temp_val = selbox.options[i-1].value.split(",");
            temp_txt = selbox.options[i-1].text;       
        }
        temp_opt = new Option(temp_txt,val1+","+temp_val[1]);
        selbox.options[i] = temp_opt;
    }
    temp_val = selbox.options[selbox.selectedIndex].value.split(",");
    max_weight = Math.max(max_weight,+temp_val[0]);
    opt = new Option(temp_val[0] + " - "+val1+" gram",val1+","+val2);
    selbox.options[selbox.selectedIndex+1] = opt;
} else {
    for (i=0;i<selbox.length;i++) {
        temp_val = selbox.options[i].value.split(",");
        if (temp_val.length == 2) {
            if (+temp_val[0] >= val1 || +temp_val[1] >= val2) {
                alert("Du skal skrive en højere vægt og/eller pris");
                return false;
            }
            max_weight = Math.max(max_weight,+temp_val[0]);
      }
    }
    opt = new Option(max_weight + " - "+ val1+ " gram",val1+","+val2);
    selbox.options[selbox.length] = opt;
}
    document.myform.weight.value = '';
    document.myform.price.value = '';
    return true;
}

function resetOption(obj) {
    obj.length = 0;   
}
</script>

<form name="myform">
<select name="myselect" size="5">
</select>
<br><input type="text" name="weight" size="24" onkeypress="return keyCheck(event, this);">
<input type="text" name="price" size="24" onkeypress="return keyCheck(event, this);">
<input type="button" onclick="return addOption(this.form.myselect);" value="Tilf&oslash;j"><input type="button" onclick="resetOption(this.form.myselect);" value="T&oslash;m liste"><br>
</form>
Avatar billede dustbunny Nybegynder
24. november 2004 - 17:48 #8
Det er lækkert det du har lavet..og jeg takker mange gange!
Og du må hellere kaste et svar...
Avatar billede skovenborg Nybegynder
24. november 2004 - 17:54 #9
okay - men skal jeg rette i det du har lavet indtil videre eller er det ligemeget?
Avatar billede dustbunny Nybegynder
24. november 2004 - 17:58 #10
Nej behøver du ikke. Jeg skulle bare lige se om jeg selv kunne lave det færdig, men når du nu har lavet et der sikkert er bedre så...
De små ting jeg skal have rettet i dit script kan jeg godt selv klare :)
Avatar billede skovenborg Nybegynder
24. november 2004 - 18:04 #11
det er super - så takker jeg for points :-)
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