Alert on submit the page

[yammaski]

Als de ingegeven tekst tè hoog of tè laag is, verschijnt er een popup.
bvb.: typ een "e" en kies een breedte van 100 cm, popup : de tekst is te smal ...
bvb.: typ een "eeeee" en kies een breedte van 5 cm, popup : de tekst is te breed ...

De popup (alert) zou moeten verschijnen (àls de tekst té hoog of té laag is) als je op "in winkelwagen" klikt.

TESTPAGINA
SCRIPT : alerts op line 40 & 44 zouden vervangen moeten worden door 1 alert als men op "in winkelwagen" klikt.

 

[Snorvisable]

Dag Yammaski,

Misschien is het iets om te valideren m.b.v. een input pattern: http://www.w3schools.com/tags/att_input_pattern.asp
Als je het attribute 'type' van de button vervolgens op 'submit' zet, wordt er gevalideerd op de input in de form. Indien nodig wordt er dan een browserspecifieke waarschuwing gegeven.

Vriendelijke groet,

Bart

 

[yammaski]

De alert mag enkel verschijnen als de tekst niet binnen de afmetingen van het script valt (1,3 - 58 cm).
Ik denk niet dat dit mogelijk is met je voorbeeld (pattern) !?

 

[Snorvisable]

Nee, je hebt gelijk, dat is niet mogelijk met standaard HTML5 validatie.
Kun je niet het script pas afvuren in de onclick van de button?

onclick="updateText();"

 

[yammaski]

Dan zie je de afmetingen van de tekst (onder het tekstkader) niet meer denk ik.
Deze kan je nu direct aflezen bij elke aanpassing van de tekst.
Van programmeren zelf ken ik niet veel of zeer weinig.

 

[Snorvisable]

Deze zou je i.p.v. je oude updateText() kunnen gebruiken:
[JS]function updateText() {
// Update text in example element
if (exampleElement.firstChild)
exampleElement.firstChild.nodeValue = textElement.value;
else
exampleElement.appendChild(document.createTextNode(textElement.value));

if (textElement.value.length) {
// Measure text size
var measurement = measureText(textElement.value, fontElement.value);

// Adjust height proportionally to selected length
var width = parseInt(lengthElement.value, 10);
var ratio = width / measurement.width;
var height = measurement.height * ratio * 1.1; // ratio * 1.12 = 12% meer aanpassen verschil hoogte

measurementElement.innerHTML = "De sticker is <b>" + width + " cm</b> breed en ongeveer <b>" + height.toFixed(1) + " cm</b> hoog.";
} else
measurementElement.innerHTML = "Geef je eigen tekst in";
}[/JS]

Voor bij de button dan de volledige functie die je al had:
[JS]function updateTextOnButton() {
// Update text in example element
if (exampleElement.firstChild)
exampleElement.firstChild.nodeValue = textElement.value;
else
exampleElement.appendChild(document.createTextNode(textElement.value));

if (textElement.value.length) {
// Measure text size
var measurement = measureText(textElement.value, fontElement.value);

// Adjust height proportionally to selected length
var width = parseInt(lengthElement.value, 10);
var ratio = width / measurement.width;
var height = measurement.height * ratio * 1.1; // ratio * 1.12 = 12% meer aanpassen verschil hoogte

if (height < MINIMUM_HEIGHT) { // Check minimum height
measurementElement.innerHTML = "<b>De tekst is lager dan 1,3 cm !</b> Gelieve je tekst of de breedte aan te passen.";
alert("De tekst is te breed voor de geselecteerde breedte.");
}
else if (height > MAXIMUM_HEIGHT) { // Check maximum height
measurementElement.innerHTML = "<b>De tekst is hoger dan 58 cm !</b> Gelieve je tekst of de breedte aan te passen.";
alert("De tekst is te smal voor de geselecteerde breedte.");
}
else
measurementElement.innerHTML = "De sticker is <b>" + width + " cm</b> breed en ongeveer <b>" + height.toFixed(1) + " cm</b> hoog.";
} else
measurementElement.innerHTML = "Geef je eigen tekst in";
}[/JS]

ps. Ik heb het niet getest, maar zou moeten werken

 

[yammaski]

Als ik het goed begrijp ...

function updateText() heb ik aangepast zoals in je bovenste kader.

function updateTextOnButton() heb ik toegevoegd aan het script en in de html onsubmit="updateTextOnButton()"
bijgevoegd bij de button type.
Maar dit werkt blijkbaar niet. Ook niet met onclick="updateTextOnButton()".

 

[Snorvisable]

Had je al een onclick of iets dergelijks aan jouw button hangen? Zo ja, op welke manier had je deze toegevoegd?

 

[yammaski]

Nee.

<input name="stickersBE_1_ATC" type="image" class="CartButtons" title="Plaats sticker in winkelwagentje." value="Add To Cart" src="images/Winkelwagen_In.png" alt="Sticker in winkelwagen" onclick="updateTextOnButton()" />

 

[Snorvisable]

Ziet er goed uit, kun je je JavaScript debuggen in je browser en kijken m.b.v. een breakpoint in de updateTextOnButton functie of het script daadwerkelijk wordt aangeroepen?

 

[yammaski]

 

[Snorvisable]

Yup, door middel van zo'n breakpoint in de code van die functie en het klikken op de knop, kun je zien of de code wel wordt uitgevoerd.

 

[yammaski]

Opgelost.