Permalänk

HTML problem

Hej

Jag är i princip novis på Html därför hoppas jag att någon vänlig själ kan hjälpa mej med mitt lilla bekymmer. Jag har gett mig på att skapa en webshop via Hemsida24 som ger dummies som mig möjligheten att själv bygga en hemsida. Problemen uppstår nu när jag behöver skapa en lösning på sidan för att kunderna ska kunna se om vi kan leverera till kundens område eller inte? Jag tänker att man skapar ett fält där kunden matar in ett postnummer, trycker på en knapp, sedan jämförs postnummret med fördefinerade postnummer och levererar ett svar på skärm, typ "ja, vi kan leverera till ditt område" eller "nej, vi kan tyvär inte leverera till ditt område.".

Eftersom jag använder hemsida24 är jag ganska begränsad i vad man kan göra för lösningar. Däremot kan man på sidor "lägga till egen HTML" vilket jag hoppas kan hjälpa mig att lösa det här dilemmat.

Jag hoppas någon där ute kan hjälpa mig med en kodsnutt eller åtminstone lotsa mig i rätt riktning.

/peter

Permalänk
Medlem

Inte HTML, snarare PHP.

Visa signatur

AMD Ryzen 9 3900x - MSI Tomahawk x570 Wi-Fi - 32GB Corsair Vengence @ 3200Mhz - MSI GeForce GTX 1070 8GB Gaming X - Corsair Hydro H100x - Några HDD's

Permalänk

Då det inte går att använda if-satser i HTML så måste du som tidigare nämnt använda PHP.

Visa signatur

Insert funny joke here

Permalänk
99:e percentilen

Du skulle helst ha ett server-side-språk för det. PHP är väl det enklaste. Men det går att göra med JavaScript också. Glöm inte att lägga script-taggen i slutet av body.

EDIT: Den här koden är trasig, tror jag. Se inlägg #9 för fungerande kod.

<form action="" method="post" id="zipform"> <input type="number" id="zip" /> <input type="submit" value="Submit" /> </form>

// array med alla postnummer ni KAN leverera till var zipcodes = [ 51180, 51181, 51182, 51184, 51190 // osv ]; function canWeDeliverTo(zip) { return zipcodes.indexOf(zip) >= 0); // returnerar true eller false } function canWeDeliver() { var e = window.event; e.preventDefault(); // förhindrar standardbeteendet (som innebär att sidan laddas om) var inputZip = document.getElementById('zip').value; // det inmatade postnumret if (canWeDeliverTo(inputZip)) { alert('Vi kan leverera.'); // valfri kod här, inte nödvändigt att alerta ut texten } else { alert('Vi kan tyvärr inte leverera.'); // valfri kod här också } } // skapa en event listener för formuläret document.getElementById('zipform').addEventListener('submit', canWeDeliver, false);

Visa signatur

Skrivet med hjälp av Better SweClockers

Permalänk

Tack!

Tack ska ni ha!

Jag känner kanske att jag tagit mig lite vatten över huvudet.
Jag förstår inte riktigt om de koder du skrev åt mig "hur mycket" ska in i ett html dokument eller om de ska ligga någon annanstans....som du förstår har jag inte ens grundkunskaperna för detta...jag ska testa ikväll om jag kan få det att funka genom att klistra in koden i ett html dokument.....är jag helt fel ute så får ni gärna skriva nån rad.....oavsett så tack alla för att ni tog er tid!

Permalänk
Medlem

Nu har inte jag hållit på med Javascript nånting över huvud taget, men jag TROR dom ska in i HTML dokumentet mellan en sådan tag

<script type="text/javascript">Kod här</script> tag

Visa signatur

AMD Ryzen 9 3900x - MSI Tomahawk x570 Wi-Fi - 32GB Corsair Vengence @ 3200Mhz - MSI GeForce GTX 1070 8GB Gaming X - Corsair Hydro H100x - Några HDD's

Permalänk

Gissar att jag gjort alla fel man bara kan....

Jag har nu lagt in denna kod i ett sk "html block" som man kan lägga till vid hemsidesbyggandet hosH24. Jag gjorde så här..... Och det funkar inte?....skratta inte men här klistrar jag in koden som jag skapat med hjälp av er:

<html>
<body>

<form action="" method="post" id="zipform">
<input type="number" id="zip" />
<input type="submit" value="Submit" />
</form>

<script> type="text/javascript">

// array med alla postnummer ni KAN leverera till
var zipcodes = [
51180,
51181,
51182,
51184,
51190
// osv
];

function canWeDeliverTo(zip) {
return zipcodes.indexOf(zip) >= 0); // returnerar true eller false
}

function canWeDeliver() {
var e = window.event;
e.preventDefault(); // förhindrar standardbeteendet (som innebär att sidan laddas om)
var inputZip = document.getElementById('zip').value; // det inmatade postnumret
if (canWeDeliverTo(inputZip)) {
alert('Vi kan leverera.'); // valfri kod här, inte nödvändigt att alerta ut texten
}
else {
alert('Vi kan tyvärr inte leverera.'); // valfri kod här också
}
}

// skapa en event listener för formuläret
document.getElementById('zipform').addEventListener('submit', canWeDeliver, false);

</script>
</body>
</html>

Vad gör jag galet.....någon som kan ledsaga en blind.....

Tack

/peter

Permalänk
99:e percentilen
Skrivet av meanpete1971:

Jag har nu lagt in denna kod i ett sk "html block" som man kan lägga till vid hemsidesbyggandet hosH24. Jag gjorde så här..... Och det funkar inte?....skratta inte men här klistrar jag in koden som jag skapat med hjälp av er:

<html>
<body>

<script> type="text/javascript">

Vad gör jag galet.....någon som kan ledsaga en blind.....

Tack

/peter

Du har gjort ett helt normalt misstag här:

<script> type="text/javascript">

<script type="text/javascript">

Den översta koden är din. Den understa är rättad. Du har ett ">" på fel ställe.

När du klistrar in kod kan jag tipsa om att omsluta den med [HTML], [PHP] eller [CODE] (beroende på om det är HTML, PHP eller något annat språk), så här:

[HTML]<div><p>Hej</p></div>[/HTML] [PHP]<?php echo 'Hej'; ?>[/PHP] [CODE]if (foo === true) { alert('Hej'); }[/CODE]

Det underlättar för oss att läsa och analysera koden. Om det är ett långt stycke kod kan du också omsluta den med [SPOILER], så här:

[SPOILER]Lång text här[/SPOILER]

Då tar den inte upp så mycket plats.

Visa signatur

Skrivet med hjälp av Better SweClockers

Permalänk
99:e percentilen

Min egen kod hade flera fel som gjorde att den inte fungerade. Nu har jag debuggat den och följande fungerar out of the box:

<html> <body> <form action="" method="post" id="zipform"> <input type="number" id="zip" /> <input type="submit" value="Submit" /> </form> <script type="text/javascript"> // array med alla postnummer ni KAN leverera till var zipcodes = [ 51180, 51181, 51184, 51190 ]; function canWeDeliverTo(zip) { return (zipcodes.indexOf(zip) > -1); // returnerar true eller false } function canWeDeliver() { var e = window.event; var inputZip = document.getElementById('zip').value; // det inmatade postnumret inputZip = parseInt(inputZip); // konvertera input från en sträng till ett tal if (canWeDeliverTo(inputZip)) { alert('Vi kan leverera.'); // valfri kod här, inte nödvändigt att alerta ut texten } else { alert('Vi kan tyvärr inte leverera.'); // valfri kod här också } e.preventDefault(); // förhindrar standardbeteendet (som innebär att sidan laddas om) } // skapa en event listener för formuläret document.getElementById('zipform').addEventListener('submit', canWeDeliver, false); </script> </body> </html>

Dold text

Koden har ingen felhantering. Om användaren matar in något som inte är ett tal kommer samma sak hända som om hen matar in ett postnummer som inte finns i whitelisten. Det är lätt att skriva kod som talar om för användaren att det måste vara ett tal, men jag orkar inte det just nu.

Den nuvarande koden använder en whitelist, en lista med postnummer som ni KAN leverera till. Om ni kan leverera till de flesta postnummer i Sverige kan det vara värt att fundera på att använda en blacklist istället, dvs en lista med postnummer som ni INTE kan leverera till.

Visa signatur

Skrivet med hjälp av Better SweClockers

Permalänk
Inaktiv

Borde bli en ordentlig lista med postnummer

Permalänk
99:e percentilen
Skrivet av anon146897:

Borde bli en ordentlig lista med postnummer

Precis, därför kan en blacklist kanske fungera bättre.

Visa signatur

Skrivet med hjälp av Better SweClockers

Permalänk

Wohooo, nu funkar det!
Verkligen verkligen supertack HurMycket. Grymt bra jobbat. Det här hade jag aldrig kunnat läsa mej till inom överskådlig tid.

Må gott och ha en bra fortsatt helg....(det som är kvar av den)

Peter

Permalänk

Gissar att det finns olika sätt att lösa problemet att kunden kan skriva "12345" och få träff, medans "123 45" inte ger träff. Är det helt fel att lägga in dubbla värden i listan som är det ända jag kan hantera själv, ett med mellanslag och ett utan. Eller är det lätt att sätta nån mask på fältet? Begränsa till 5 tecken? Gissar att det finns flera vägar att gå här...
Oavsett om det går att lösa eller ej är jag jättenöjd med funktionen som den blev.....Tack igen HurMycket och ni andra.

/Peter

Permalänk
99:e percentilen
Skrivet av meanpete1971:

Gissar att det finns olika sätt att lösa problemet att kunden kan skriva "12345" och få träff, medans "123 45" inte ger träff. Är det helt fel att lägga in dubbla värden i listan som är det ända jag kan hantera själv, ett med mellanslag och ett utan. Eller är det lätt att sätta nån mask på fältet? Begränsa till 5 tecken? Gissar att det finns flera vägar att gå här...
Oavsett om det går att lösa eller ej är jag jättenöjd med funktionen som den blev.....Tack igen HurMycket och ni andra.

/Peter

Du bör inte manuellt lägga in ett värde med mellanslag och ett utan. För att svara på din fråga: Ja, det är fel.

Det finns flera sätt att lösa detta. Optimalt är att validera det inmatade värdet och ta bort alla mellanslag. Man bör också ha felhantering som underrättar användaren om denne har skrivit in ett felaktigt postnummer, t ex att det finns bokstäver i det. Men det kräver lite JavaScript. Det lättaste sättet (som fungerar hyfsat, men inte är semantiskt korrekt och ej heller validerar inputen) är att sätta en maxlängd på input-elementet:

<input type="number" id="zip" maxlength="5" />

Detta är dock inte valid HTML5. Vi blir tvungna att ändra type till text istället för number:

<input type="text" id="zip" maxlength="5" />

Och detta är inte speciellt semantiskt då det är just ett nummer som ska matas in. Men besökaren lär inte tänka på det och det är den enklaste lösningen för dig.

EDIT: När jag tänker efter är det inte så viktigt att ha type="number" på input-elementet. Det finns för ett postnummer inget större värde i de funktioner man erhåller genom att använda type="number".

Visa signatur

Skrivet med hjälp av Better SweClockers

Permalänk

Tusen tack igen HurMycket! Verkligen jättetacksam för att du orkade ta dig tid. Det funkade perfekt och jag har nu fått en lösning på det jag efterfrågade!

Må gott!

/Peter