View Full Version : Flera javascript-funktioner på submitknapp
Hej!
Har lite funderingar ang. Javascript på formulär.
Jag har gjort en liten testwebshop åt ett företag som säljer skor.
Jag har då en dropdownmeny (select-option pryl) där man väljer vilken storlek man vill ha.
Det översta valet är typ:
<option value="ej"> Välj storlek </option>
och sedan kommer alla storlekar
<option value="35"> 35 </option>
osv.
Jag vill att när jag trycker på submitknappen så skall den kolla så att inte värdet från dropdownmenyn är "ej" för då har man ju inte valt storlek. (då ska den alltså inte köra nån submit)
Efter att man valt storlek och tryckt på submit så har jag ett till javascript som typ bara meddelar för användaren att varan lagts i korgen.
Mitt problem nu är att om jag trycker på submit och inte har valt storlek så kommer det upp rutan
"varan har lagts i din korg"
och sedan får jag trycka på OK och då lägger den varan i korgen och sedan kommer rutan upp för storleken
"du har inte valt storlek"
Min fråga är nu om man vid submit kan köra flera javascript funktioner och om man kan bestämma ordningen på dem? isf. hur?
Samt vad är skillnaden på OnClick och OnSubmit om man har de på en submitknapp?
------------------
Ingenting är omöjligt, bara en utmaning.
Kolla nedastående kod. Innan funktionen ger en alert med "varan har lagts i din korg" kollar den så att selecten inte är "ej".
Om den är det skickas en alert med "Du måste välja storlek!" och där efter säger fukntionen return false; vilket betyder: Sluta med det du håller på med!!!
Alltså submitta inte formuläret. Dessutom kommmer inte alerten med "varan har lagts i din korg" att visas eftersom du satt den efter else.
<html>
<head>
<script language="JavaScript" type="text/javascript">
function kolla(){
if(document.foo.bar.value=="ej"){alert("Du måste välja storlek!"); return false;}
else{alert("varan har lagts i din korg");}
}
</script>
</head>
<body>
<form name="foo" onsubmit="return kolla();">
<Select name="bar">
<option value="ej">Välj storlek</option>
<option value="35">35</option>
<option value="36">36</option>
</select>
<input type="submit">
</form>
</body>
</html>
Om du sätter onsubmit i formelementet kommer funktionen att köras oavsätt hur formuläret submittas, exepmelvis om du trycker enter utan att trycka på submitt-knappen.
Sätter du däremot onclick på en submit-knapp, kommer funktionen bara köras när du trycker där.
------------------
- J-O-H-N-S-E-N -
------------------
Hej igen.
Har provat igen nu med den kod jag fick av dig.. har modifierat lite.. men kan någon se vad som är fel?
Den vill ha in ett semikolon vid Else och sen funkar den inte alls.
Klagar bara på ";"
Jag har alltså en funktion för varje produkt eftersom vissa produkter inte har storlekar.
Den fungerade förut men då som jag sagt i fel ordning.
Kommer detta att fungera i netscape?!? Har inte fått det att funka där ännu.
/brw
<script language="JavaScript" Type ="text/javascript">
<!--
function kollaFN2142452989090(){
var kollastorlek=document.FN2142452989090.Storlek.value;
var Korg_webartno=document.FN2142452989090.Artweb.value;
var Artstl=document.FN2142452989090.Stl.value;
if(kollastorlek == "0"){
alert("Du måste välja storlek!");
//document.FN2142452989090.Storlek.focus();
return false;}
Else {alert("Varan med artnr lagd i din korg!"); }
}
//-->
</script>
<FORM name="FN2142452989090" onclick="RETURN kollaFN2142452989090();" METHOD="POST" action="../pwbutkorginu.asp">
<Em>
<Input Type="hidden" name="artno" value="2142452989090">
<Input Type="hidden" name="artnoweb" value="2142452989">
<Input Type="hidden" name="ben" value="REEBOK DMXPLORER BEIGE/BLÅ/SVA">
<Input Type="hidden" name="Pris" value="799">
<Input Type="hidden" name="xpris" value="599">
<Input Type="hidden" name="paket" value="0">
<Input Type="hidden" name="netto" value="">
<Input Type="hidden" name="Rabatt" value="10">
<input type="tal" name="ant" value="1" size="1">
<select name="Storlek">
<option value="0">Storlek</option>
<option value="070">7,0</option>
<option value="075">7,5</option>
<option value="080">8,0</option>
<option value="085">8,5</option>
<option value="090">9,0</option>
<option value="095">9,5</option>
<option value="100">10,0</option>
<option value="105">10,5</option>
<option value="110">11,0</option>
<option value="115">11,5</option>
<option value="120">12,0</option>
</select>
<Input type="submit" value="Köp!" name="B1">
</Em>
<HR>
</TD>
</TR>
</FORM>
------------------
Ingenting är omöjligt, bara en utmaning.
För det första skall du ha onsubmit i formelementet och return med små bokstäver.
För det andra skall else inte ha stor bokstav i början.
Och för det tredje, var hittar du Artweb och Stl i var Korg_webartno=document.FN2142452989090.Artweb.value;
var Artstl=document.FN2142452989090.Stl.value;
och vad har de för funktion?
------------------
- J-O-H-N-S-E-N -
------------------
Dom där som inte användes var bara förberedelse för framtida prylar men jag har tagit bort de nu.. för det blev nå fel med dem.
Jag har fått allt att funka i explorer men i netscape kommer det fram att storleksvärdet är null.
Såhär ser koden ut nu:
<script language="JavaScript" Type ="text/javascript">
<!--
function kollaFN2142452989090(){
var kollastorlek=document.FN2142452989090.Storlek.value;
var korg_webartno=document.FN2142452989090.artnoweb.value;
var artstl=document.FN2142452989090.stl.value;
//document.write ("Storlek på art: " + artstl);
//if(artstl ==1 || artstl ==2 || artstl ==3|| artstl ==4 || ){
//alert("Varan med artnr " + korg_webartno + " har storlek!");
//}
if(kollastorlek == "0"){
alert("Du måste välja storlek!");
document.FN2142452989090.Storlek.focus();
return false;}
//}
//else {alert("Varan med artnr " + korg_webartno " lagd i din korg!"); }
else {alert("Varan med artnr " + korg_webartno + "och storlek " +kollastorlek + " lagd i din korg!"); }
//else {alert("Varan med artnr " + korg_webartno + artstl + " lagd i din korg!"); }
//else {alert("Varan med artnr " + korg_webartno + " lagd i din korg!"); }
}
//-->
</script>
<FORM name="FN2142452989090" METHOD="POST" action="../pwbutkorginu.asp">
<Em>
<Input Type="hidden" name="artno" value="2142452989090">
<Input Type="hidden" name="artnoweb" value="2142452989">
<Input Type="hidden" name="stl" value="3">
<Input Type="hidden" name="ben" value="REEBOK DMXPLORER BEIGE/BLÅ/SVA">
<Input Type="hidden" name="Pris" value="799">
<Input Type="hidden" name="xpris" value="599">
<Input Type="hidden" name="paket" value="0">
<Input Type="hidden" name="netto" value="">
<Input Type="hidden" name="Rabatt" value="10">
<input type="text" name="ant" value="1" size="1">
<select name='Storlek'><option value='0'>Storlek</option>
<option value="070">7,0</option>
<option value="075">7,5</option>
<option value="080">8,0</option>
<option value="085">8,5</option>
<option value="090">9,0</option>
<option value="095">9,5</option>
<option value="100">10,0</option>
<option value="105">10,5</option>
<option value="110">11,0</option>
<option value="115">11,5</option>
<option value="120">12,0</option>
</select>
<Input type="submit" value="Köp!" name="B1" onclick="return kollaFN2142452989090();">
</Em>
<HR>
</TD>
</TR>
</FORM>
Som sagt.. fungerar bra i explorer men i netscape så kommer rutan upp med där de står Varan med artnr 1515136456 och storlek null har lagts i din korg.
Null kommer upp oavsett om jag valt storlek eller inte.
------------------
Ingenting är omöjligt, bara en utmaning.
Ändra kollastorlek till: var kollastorlek=document.FN2142452989090.Storlek.options[document.FN2142452989090.Storlek.selectedIndex].value
------------------
- J-O-H-N-S-E-N -
------------------
vBulletin® v3.8.6, Copyright ©2000-2013, Jelsoft Enterprises Ltd.