Forum Mjukvara Programmering och digitalt skapande Tråd

HTML problem

1
Skriv svar
Permalänk
Medlem
●

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

Redigera
Citera flera Citera
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

Redigera
Citera flera Citera
Permalänk
Medlem
●

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

Redigera
Citera flera Citera
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);
Senast redigerat
Visa signatur

Skrivet med hjälp av Better SweClockers

Redigera
Citera flera Citera
Permalänk
Medlem
●

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!

Redigera
Citera flera Citera
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

Redigera
Citera flera Citera
Permalänk
Medlem
●

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

Redigera
Citera flera Citera
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

Gå till inlägget

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

Redigera
Citera flera Citera
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.

Senast redigerat
Visa signatur

Skrivet med hjälp av Better SweClockers

Redigera
Citera flera Citera
Permalänk
Inaktiv
●

Borde bli en ordentlig lista med postnummer

Redigera
Citera flera Citera
Permalänk
99:e percentilen ★
●
Skrivet av anon146897:

Borde bli en ordentlig lista med postnummer

Gå till inlägget

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

Visa signatur

Skrivet med hjälp av Better SweClockers

Redigera
Citera flera Citera
Permalänk
Medlem
●

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

Redigera
Citera flera Citera
Permalänk
Medlem
●

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

Redigera
Citera flera Citera
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

Gå till inlägget

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

Redigera
Citera flera Citera
Permalänk
Medlem
●

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

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara