Versandkosten Kalkulator

Yendor · 11. April 2016

Hallo beisammen,

ich scheitere daran, ein Script so zu ändern, dass es dem Benutzer Versandkosten anzeigt.

Im Grunde habe ich keine Ahnung von JS. Zugegeben, im Nachinein war es naiv zu glauben, dass man ein "select" in ein "display" ändern kann und alles funktioniert.

Offenbar braucht es deutlich mehr Fähigkeiten, die ich nicht habe. Könnte mir bitte jemand bei folgendem Script helfen?

Es handelt sich um eine dynamische Übergabe der vorherigen Auswahlen.

In der 4. Ebene hätte ich dann aber eben gern keine Auswahl mehr, sondern eine eindeutige Anzeige. In dem Fall der Preis.

Ich würde mich tierischst freuen, wenn hier jemand die Zeit aufwenden könnte, mir dieses Script zu vervollständigen.

herzlichen Dank

Code:

<script language="JavaScript" type="text/javascript">
<!--

/*
*** Multiple dynamic combo boxes
*** by Mirko Elviro, 9 Mar 2005
*** Script featured and available on JavaScript Kit (http://www.javascriptkit.com)
***
***Please do not remove this comment
*/

// This script supports an unlimited number of linked combo boxed
// Their id must be "combo_0", "combo_1", "combo_2" etc.
// Here you have to put the data that will fill the combo boxes
// ie. data_2_1 will be the first option in the second combo box
// when the first combo box has the second option selected


// first combo box

   data_1 = new Option("Haargummis", "$");
   data_2 = new Option("Haarbürsten", "$$");
   data_3 = new Option("Haarreifen", "$$$");
   data_4 = new Option("Zopfbänder", "$$$$");
   data_5 = new Option("Ponytails", "$$$$$");
   

   
// second combo box

   data_1_1 = new Option("Unter 50 Stk", "-");
   data_1_2 = new Option("Über 50 Stk", "-");
   
   data_2_1 = new Option("bis 60cm Breite", "--");
   data_2_2 = new Option("bis 100cm Breite", "--");
   data_2_3 = new Option("über 100cm Breite", "--");
   
   data_3_1 = new Option("Bis 60cm Breite", "---");
   data_3_2 = new Option("Bis 100cm Breite", "---");
   data_3_3 = new Option("Bis 150cm Breite", "---");
   data_3_4 = new Option("Über 150cm Breite", "---");

   data_4_1 = new Option("Bis 60cm Breite", "----");
   data_4_2 = new Option("Bis 100cm Breite", "----");
   data_4_3 = new Option("Bis 150cm Breite", "----");
   data_4_4 = new Option("Über 150cm Breite", "----");
   
   data_5_1 = new Option("1 Stk", "-----");
   data_5_2 = new Option("2 Stk", "-----");
   data_5_3 = new Option("3 Stk", "-----");
   data_5_4 = new Option("4 Stk", "-----");
   

   
// third combo box

   data_1_1_1 = new Option("Versand per DHL", "*");
   data_1_1_2 = new Option("Versand per EuroCourier", "*");
   data_1_2_1 = new Option("Versand per DHL", "*");
   data_1_2_2 = new Option("Versand per EuroCourier", "*");
   
   data_2_1_1 = new Option("Versand per DHL", "*");
   data_2_1_2 = new Option("Versand per EuroCourier", "**");
   data_2_2_1 = new Option("Versand per DHL", "*");
   data_2_2_2 = new Option("Versand per EuroCourier", "**");
   data_2_3_1 = new Option("Versand per DHL", "**");
   data_2_3_2 = new Option("Versand per EuroCourier", "**");
   
   data_3_1_1 = new Option("Versand per DHL", "**");
   data_3_1_2 = new Option("Versand per EuroCourier", "***");
   data_3_2_1 = new Option("Versand per DHL", "***");
   data_3_2_2 = new Option("Versand per EuroCourier", "***");
   data_3_3_1 = new Option("Versand per DHL", "***");
   data_3_3_2 = new Option("Versand per EuroCourier", "***");
   data_3_4_1 = new Option("Versand per DHL", "**");
   data_3_4_2 = new Option("Versand per EuroCourier", "***");

   data_4_1_1 = new Option("Versand per DHL", "**");
   data_4_1_2 = new Option("Versand per EuroCourier", "****");
   data_4_2_1 = new Option("Versand per DHL", "***");
   data_4_2_2 = new Option("Versand per EuroCourier", "****");
   data_4_3_1 = new Option("Versand per DHL", "***");
   data_4_3_2 = new Option("Versand per EuroCourier", "****");
   data_4_4_1 = new Option("Versand per DHL", "**");
   data_4_4_2 = new Option("Versand per EuroCourier", "****");
   
   data_5_1_1 = new Option("Versand per DHL", "**");
   data_5_1_2 = new Option("Versand per EuroCourier", "*****");
   data_5_2_1 = new Option("Versand per DHL", "***");
   data_5_2_2 = new Option("Versand per EuroCourier", "*****");
   data_5_3_1 = new Option("Versand per DHL", "***");
   data_5_3_2 = new Option("Versand per EuroCourier", "*****");
   data_5_4_1 = new Option("Versand per DHL", "**");
   data_5_4_2 = new Option("Versand per EuroCourier", "*****");

// fourth combo box

   data_1_1_1_1 = new Option("6,60€","%")
   data_1_1_2_1 = new Option("19,90€","%%")
   data_1_2_1_1 = new Option("Versandkostenfrei","%")
   data_1_2_2_1 = new Option("19,90€","%%")
   
   data_2_1_1_1 = new Option("6,60€","%")
   data_2_1_2_1 = new Option("6,60€","%%")
   data_2_2_1_1 = new Option("6,60€","%")
   data_2_2_2_1 = new Option("6,60€","%%")
   data_2_3_1_1 = new Option("6,60€","%")
   data_2_3_2_1 = new Option("6,60€","%%")
   
   data_3_1_1_1 = new Option("6,60€","%")
   data_3_1_2_1 = new Option("6,60€","%")
   data_3_2_1_1 = new Option("6,60€","%")
   data_3_2_2_1 = new Option("6,60€","%")
   data_3_3_1_1 = new Option("6,60€","%")
   data_3_3_2_1 = new Option("6,60€","%")
   data_3_4_1_1 = new Option("6,60€","%")
   data_3_4_2_1 = new Option("6,60€","%")

   data_4_1_1_1 = new Option("6,60€","%")
   data_4_1_2_1 = new Option("6,60€","%")
   data_4_2_1_1 = new Option("6,60€","%")
   data_4_2_2_1 = new Option("6,60€","%")
   data_4_3_1_1 = new Option("6,60€","%")
   data_4_3_2_1 = new Option("6,60€","%")
   data_4_4_1_1 = new Option("6,60€","%")
   data_4_4_2_1 = new Option("6,60€","%")
   
   data_5_1_1_1 = new Option("6,60€","%")
   data_5_1_2_1 = new Option("6,60€","%")
   data_5_2_1_1 = new Option("6,60€","%")
   data_5_2_2_1 = new Option("6,60€","%")
   data_5_3_1_1 = new Option("6,60€","%")
   data_5_3_2_1 = new Option("6,60€","%")
   data_5_4_1_1 = new Option("6,60€","%")
   data_5_4_2_1 = new Option("6,60€","%")



// other parameters

  displaywhenempty=""
  valuewhenempty=-1

  displaywhennotempty="-select-"
  valuewhennotempty=0


function change(currentbox) {
   numb = currentbox.id.split("_");
   currentbox = numb[1];

  i=parseInt(currentbox)+1

// I empty all combo boxes following the current one

  while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
  (document.getElementById("combo_"+i)!=null)) {
  son = document.getElementById("combo_"+i);
    // I empty all options except the first one (it isn't allowed)
    for (m=son.options.length-1;m>0;m--) son.options[m]=null;
    // I reset the first option
    son.options[0]=new Option(displaywhenempty,valuewhenempty)
    i=i+1
  }


// now I create the string with the "base" name ("stringa"), ie. "data_1_0"
// to which I'll add _0,_1,_2,_3 etc to obtain the name of the combo box to fill

  stringa='data'
  i=0
  while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
  (document.getElementById("combo_"+i)!=null)) {
  eval("stringa=stringa+'_'+document.getElementById(\"combo_"+i+"\").selectedIndex")
  if (i==currentbox) break;
  i=i+1
  }


// filling the "son" combo (if exists)

  following=parseInt(currentbox)+1

  if ((eval("typeof(document.getElementById(\"combo_"+following+"\"))!='undefined'")) &&
  (document.getElementById("combo_"+following)!=null)) {
  son = document.getElementById("combo_"+following);
  stringa=stringa+"_"
  i=0
  while ((eval("typeof("+stringa+i+")!='undefined'")) || (i==0)) {

  // if there are no options, I empty the first option of the "son" combo
    // otherwise I put "-select-" in it

        if ((i==0) && eval("typeof("+stringa+"0)=='undefined'"))
        if (eval("typeof("+stringa+"1)=='undefined'"))
        eval("son.options[0]=new Option(displaywhenempty,valuewhenempty)")
        else
    eval("son.options[0]=new Option(displaywhennotempty,valuewhennotempty)")
    else
  eval("son.options["+i+"]=new Option("+stringa+i+".text,"+stringa+i+".value)")
    i=i+1
    }
  //son.focus()
  i=1
  combostatus=''
  cstatus=stringa.split("_")
  while (cstatus[i]!=null) {
  combostatus=combostatus+cstatus[i]
  i=i+1
  }
  return combostatus;
  }
}

//-->
</script>

<form method="post">
<select name="combo0" id="combo_0" onChange="change(this);" style="width:400px;">
     <option value="value1">- auswählen -</option>
   <option value="value2">Fotos</option>
   <option value="value3">Poster/FineArt</option>
   <option value="value4">Leinwände/Schaumplatten</option>
   <option value="value5">Acryl/AluDibond</option>
   <option value="value6">Fotobücher</option>

</select>
<BR><BR>
<select name="combo1" id="combo_1" onChange="change(this)" style="width:400px;">
   <option value="value1">  </option>
</select>
<BR><BR>
<select name="combo2" id="combo_2" onChange="change(this);" style="width:400px;">
   <option value="value1">  </option>
</select>
<BR><BR>
<display name="combo3" id="combo_3" onChange="change(this);" style="width:400px;">
   <option value="value1">  </option>

</select>

</form>

Yendor · 11. April 2016

Ich versuche seit 2h, dieses Script hier: Edit fiddle - JSFiddle

mit einzubauen, denn es tut im Grunde genau, was ich will .. sobald eine Option im letzten Select ausgewählt ist, zeigt es den vorher angegebenen Wert an.

Leider auch Erfolglos.

vfl_freak · 11. April 2016

Moin,

Java != JavaScript

Gruß Klaus

Yendor · 11. April 2016

Dann bitte entsprechend verschieben. Ich dachte, hier wäre ich richtig.

vfl_freak · 11. April 2016

Sorry, Du hast recht - ich meinte "Java Grundlagen" gelesen zu haben ...

Aber Du solltest Dein Problem genauer beschrieben - ich glaube kaum, dass sich jemand die Zeit nimmt, um zu versuchen den Inhalt des Scripts so zu verstehen!

Gruß Klaus

Yendor · 11. April 2016

Nun, im Grunde tut es ja schon fast 90% von dem, was es tun soll.

Man hat 4 Ebenen. Die ersten 3 sollen ein Dropdown Menü bleiben, in welchem man entsprechend angebotene Auswahlen trifft. Art der Ware, Menge und Versandtyp.

Aktuell ist es dann in der 4. Ebene so, dass man dort wieder ein Dropdown erhält, welches die errechneten Versandkosten als Auswahl anbietet.

Das ist natürlich sehr verwirrend. Viel besser wäre es, wenn diese letzte Option einfach angezeigt würde.

Ich hoffe das ist verständlich.

sheel · 11. April 2016

vfl_freak hat gesagt.:
ich meinte "Java Grundlagen" gelesen zu haben

Das "war" richtig

@Yendor (sorry, noch immer keine wirkliche Antwort):

Es ist sehr fraglich, ob dieses Script überhaupt verwendet werden soll.
Der Autor hat offensichtlich keine Arrays gekannt, auch keine Semikolons, dafür wird eval verwendet...

Später hab ich etwas mehr Zeit, dann kann ich dir das neuschreiben
(bin auch nicht so der JS-Profi, aber besser als das gehts trotzdem)

vfl_freak · 11. April 2016

sheel hat gesagt.:
Das "war" richtig

Puuh ... ich hatte schon an meinem Verstand gezweifelt

Yendor · 11. April 2016

@sheel
Ja mei

... ich war mir dessen bewusst, dass das Script eher ein Pflasterwerk ist. Mir persönlich ist das egal. So lang es funktioniert, passt das. Und so dreist nach einem kompletten Neu-schreiben zu fragen, wollt ich nicht sein. Ich dachte, dass das mit dem Ändern von z.B. select in display vielleicht schon getan wäre. Oder ähnlichem.

Wenn es dir aber danach ist, dieses Script neu zu verfassen ... ich wäre sehr dankbar.

sheel · 12. April 2016

Sorry, hat etwas langer gedauert

Yendor hat gesagt.:
Wenn es dir aber danach ist, dieses Script neu zu verfassen

Kann nicht zuschauen, wenn sowas (wie das alte Script) verwendet wird

Code:

<!DOCTYPE html>
<html>
<head>
	<title>Test</title>
	<meta charset="UTF-8">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
	<script>
		var jsdata = {};
		jsdata["formid"] = "priceform";
		jsdata["prefix"] = "combo";
		jsdata["selectcount"] = 3;
		jsdata["emptyvaluename"] = "empty";
		
		function changeevent(obj)
		{
			var i;
			var combocount = jsdata["selectcount"];
			var comboid = $(obj).attr("name").substring(jsdata["prefix"].length);
			if(comboid < 1) return;
			if(comboid > combocount) return;
			var comboselection = {};
			for(i = 1; i <= combocount; i++)
			{
				comboselection[""+i] = $("#" + jsdata["formid"] + " > select").eq(i - 1).val();
				if(comboselection[""+i] == jsdata["emptyvaluename"]) comboselection[""+i] = -1;
			}
			if(comboselection[""+comboid] > 0)
			{
				$("#" + jsdata["formid"] + " > select:eq(" + (comboid-1)
					+ ") option[value='" + jsdata["emptyvaluename"] + "']").remove();
			}
			var prefix = "";
			for(i = 1; i <= comboid; i++) prefix += comboselection[""+i] + ".";
			if(comboid < combocount)
			{
				i = comboid;
				while(i < combocount)
				{
					$("#" + jsdata["formid"] + " > select:eq(" + i + ")").find("option").remove();
					$("#" + jsdata["formid"] + " > select:eq(" + i + ")").append($('<option>', {
						value: jsdata["emptyvaluename"],
						text: ""
					}));
					i++;
				}
				$("#" + jsdata["formid"] + " > span").first().text("");
				i = 1;
				while(namedata.hasOwnProperty(prefix+i))
				{
					$("#" + jsdata["formid"] + " > select:eq(" + comboid + ")").append($('<option>', {
						value: i,
						text: namedata[prefix+i]
					}));
					i++;
				}
			}
			else
			{
				$("#" + jsdata["formid"] + " > span").first().text
					(pricedata[prefix.substring(0, prefix.length - 1)]);
			}
		}

		$(document).ready(function(){
			$("#" + jsdata["formid"] + " > span").first().text("");
			var i = 1;
			while(namedata.hasOwnProperty(""+i))
			{
				$("#" + jsdata["formid"] + " > select").first().append($('<option>', {
					value: i,
					text: namedata[""+i]
				}));
				i++;
			}
			$("#" + jsdata["formid"] + " > select").on("change", function() { changeevent(this); });
		});
	</script>
	<script>
		//Daten-IDs werden nicht geprüft, müssen passen
		var namedata = {};
		var pricedata = {};
		namedata["1"] = "Fotos";
		namedata["2"] = "Poster/FineArt";
		namedata["3"] = "Leinwände/Schaumplatten";
		namedata["4"] = "Acryl/AluDibond";
		namedata["5"] = "Fotobücher";
		namedata["1.1"] = "Unter 50 Stk";
		namedata["1.2"] = "Über 50 Stk";
		namedata["2.1"] = "bis 60cm Breite";
		namedata["2.2"] = "bis 100cm Breite";
		namedata["2.3"] = "über 100cm Breite";
		namedata["3.1"] = "Bis 60cm Breite";
		namedata["3.2"] = "Bis 100cm Breite";
		namedata["3.3"] = "Bis 150cm Breite";
		namedata["3.4"] = "Über 150cm Breite";
		namedata["4.1"] = "Bis 60cm Breite";
		namedata["4.2"] = "Bis 100cm Breite";
		namedata["4.3"] = "Bis 150cm Breite";
		namedata["4.4"] = "Über 150cm Breite";
		namedata["5.1"] = "1 Stk";
		namedata["5.2"] = "2 Stk";
		namedata["5.3"] = "3 Stk";
		namedata["5.4"] = "4 Stk";
		namedata["1.1.1"] = "Versand per DHL";
		namedata["1.1.2"] = "Versand per EuroCourier";
		namedata["1.2.1"] = "Versand per DHL";
		namedata["1.2.2"] = "Versand per EuroCourier";
		namedata["2.1.1"] = "Versand per DHL";
		namedata["2.1.2"] = "Versand per EuroCourier";
		namedata["2.2.1"] = "Versand per DHL";
		namedata["2.2.2"] = "Versand per EuroCourier";
		namedata["2.3.1"] = "Versand per DHL";
		namedata["2.3.2"] = "Versand per EuroCourier";
		namedata["3.1.1"] = "Versand per DHL";
		namedata["3.1.2"] = "Versand per EuroCourier";
		namedata["3.2.1"] = "Versand per DHL";
		namedata["3.2.2"] = "Versand per EuroCourier";
		namedata["3.3.1"] = "Versand per DHL";
		namedata["3.3.2"] = "Versand per EuroCourier";
		namedata["3.4.1"] = "Versand per DHL";
		namedata["3.4.2"] = "Versand per EuroCourier";
		namedata["4.1.1"] = "Versand per DHL";
		namedata["4.1.2"] = "Versand per EuroCourier";
		namedata["4.2.1"] = "Versand per DHL";
		namedata["4.2.2"] = "Versand per EuroCourier";
		namedata["4.3.1"] = "Versand per DHL";
		namedata["4.3.2"] = "Versand per EuroCourier";
		namedata["4.4.1"] = "Versand per DHL";
		namedata["4.4.2"] = "Versand per EuroCourier";
		namedata["5.1.1"] = "Versand per DHL";
		namedata["5.1.2"] = "Versand per EuroCourier";
		namedata["5.2.1"] = "Versand per DHL";
		namedata["5.2.2"] = "Versand per EuroCourier";
		namedata["5.3.1"] = "Versand per DHL";
		namedata["5.3.2"] = "Versand per EuroCourier";
		namedata["5.4.1"] = "Versand per DHL";
		namedata["5.4.2"] = "Versand per EuroCourier";
		pricedata["1.1.1"] = "6,60€";
		pricedata["1.1.2"] = "19,90€";
		pricedata["1.2.1"] = "Versandkostenfrei";
		pricedata["1.2.2"] = "19,90€";
		pricedata["2.1.1"] = "6,60€";
		pricedata["2.1.2"] = "6,60€";
		pricedata["2.2.1"] = "6,60€";
		pricedata["2.2.2"] = "6,60€";
		pricedata["2.3.1"] = "6,60€";
		pricedata["2.3.2"] = "6,60€";
		pricedata["3.1.1"] = "6,60€";
		pricedata["3.1.2"] = "6,60€";
		pricedata["3.2.1"] = "6,60€";
		pricedata["3.2.2"] = "6,60€";
		pricedata["3.3.1"] = "6,60€";
		pricedata["3.3.2"] = "6,60€";
		pricedata["3.4.1"] = "6,60€";
		pricedata["3.4.2"] = "6,60€";
		pricedata["4.1.1"] = "6,60€";
		pricedata["4.1.2"] = "6,60€";
		pricedata["4.2.1"] = "6,60€";
		pricedata["4.2.2"] = "6,60€";
		pricedata["4.3.1"] = "6,60€";
		pricedata["4.3.2"] = "6,60€";
		pricedata["4.4.1"] = "6,60€";
		pricedata["4.4.2"] = "6,60€";
		pricedata["5.1.1"] = "6,60€";
		pricedata["5.1.2"] = "6,60€";
		pricedata["5.2.1"] = "6,60€";
		pricedata["5.2.2"] = "6,60€";
		pricedata["5.3.1"] = "6,60€";
		pricedata["5.3.2"] = "6,60€";
		pricedata["5.4.1"] = "6,60€";
		pricedata["5.4.2"] = "6,60€";
	</script>
	<style>
		#priceform > select { width:400px; }
	</style>
</head>
<body>
	<form method="post" id="priceform">
		<select name="combo1"><option value="empty"></option></select><br>
		<select name="combo2"><option value="empty"></option></select><br>
		<select name="combo3"><option value="empty"></option></select><br>
		<span>-</span>
	</form>
</body>
</html>

Versandkosten Kalkulator

Yendor

Grünschnabel

Yendor

Grünschnabel

vfl_freak

Yendor

Grünschnabel

vfl_freak

Yendor

Grünschnabel

sheel

I love Asm

vfl_freak

Yendor

Grünschnabel

sheel

I love Asm

Neue Beiträge