Javascript / HTML - Rensa "required" input vid knapptryck

Permalänk
Medlem

Javascript / HTML - Rensa "required" input vid knapptryck

Har än en gång fastnat med mina experiment och behöver lite hjälp.

Det jag försöker göra är att rensa all input från ett formulär när man klickar på "submit"-knappen.

Problemet är att input-taggen har "required"-attribut och att scriptet då verkar rensa bort det man skrivit in innan det skickas iväg och gör att fälten töms och får den här lilla varningsrutan om att man skall fylla i fälten.

<input id="firstName" type="text" required /> <input id="lastName" type="text" required /> <input id="email" type="text" required />

På min "submit"-knapp kör jag denna JS-snutt (lade dit lite kommentarer för att underlätta, eller försvåra...)

<button value="Submit" onclick="insert()">Submit</button>

// Stoppar in div-taggarna i variabler var inputFirstname = document.getElementById("input_value_firstname"); var inputLastname = document.getElementById("input_value_lastname"); var inputEmail = document.getElementById("input_value_email"); function insert(){ // Rensar div-taggar så att input inte ligger kvar om man fyller i formuläret igen inputFirstname.innerHTML = ""; inputLastname.innerHTML = ""; inputEmail.innerHTML = ""; // Plockar upp input som anges i formulär var firstName = document.getElementById("firstName").value; var lastName = document.getElementById("lastName").value; var email = document.getElementById("email").value; // Petar in input till div-taggar inputFirstname.innerHTML += firstName; inputLastname.innerHTML += lastName; inputEmail.innerHTML += email; // Kör funktion för rensning utav input clearInput(); } function clearInput(){ // Nollar input-värdet firstName.value = ""; lastName.value = ""; email.value = ""; }

Kan ju snyggas till med jQuery men nu ser det ut som det gör och det fungerar, förutom problemet att fälten raderas och inte vill skickas vidare.

Någon som kan komma på en lösning? Vill helst ha kvar required-attributet.

Visa signatur

Grubblare

Permalänk
Medlem

Din clearinput funktion tömmer ju inputfälten, då finns det ju inte någon data i dem att skicka.

Formuläret kommer ändå att rensas efter postningen, såvida du inte gör det med ajax, och i så fall bör du köra rensning efter ajaxfunktionen är färdig.

Skickades från m.sweclockers.com

Visa signatur

Intel Core i7 6700K | Gigabyte Z170X-UD3 | Corsair Vengeance LPX 16GB DDR4 2400Mhz | EVGA GTX 980Ti Hybrid | Samsung 950 PRO 256GB | Noctua NH-D15 | EVGA G2 750 | Fractal Design Define R5

Permalänk
Medlem
Skrivet av Zajin:

Din clearinput funktion tömmer ju inputfälten, då finns det ju inte någon data i dem att skicka.

Formuläret kommer ändå att rensas efter postningen, såvida du inte gör det med ajax, och i så fall bör du köra rensning efter ajaxfunktionen är färdig.

Skickades från m.sweclockers.com

Jo, jag förstår att det är problemet (fattade bara inte hur jag skulle komma runt det), men jag hittade en lösning (det verkar rassla till i skallen när man skapar en tråd på sweclockers).

setTimeout(clearInput, 1000);

Fördröjer bara rensningen utav inputen helt enkelt

Visa signatur

Grubblare

Permalänk
Medlem
Skrivet av drwlz:

Jo, jag förstår att det är problemet, men jag hittade en lösning (det verkar rassla till i skallen när man skapar en tråd på sweclockers).

setTimeout(clearInput, 1000);

Fördröjer bara rensningen utav inputen helt enkelt

Ska du mot förmodan rensa manuellt lagra värdena i variabler istället för att joxa med timeouts.

Permalänk
Medlem
Skrivet av drwlz:

Jo, jag förstår att det är problemet (fattade bara inte hur jag skulle komma runt det), men jag hittade en lösning (det verkar rassla till i skallen när man skapar en tråd på sweclockers).

setTimeout(clearInput, 1000);

Fördröjer bara rensningen utav inputen helt enkelt

Det är bättre att rensa formuläret när du vet att det gått iväg. Om användaren har seg lina eller tillfälligt tappar kopplingen med sin router eller liknande kan du komma att rensa formuläret innan det hunnit skickas ändå. En bättre lösning är att lägga på en callback på ditt AJAX-request.

Visa signatur

Kom-pa-TI-bilitet

Permalänk
Medlem
Skrivet av kronwalled:

Ska du mot förmodan rensa manuellt lagra värdena i variabler istället för att joxa med timeouts.

Skrivet av Teknocide:

Det är bättre att rensa formuläret när du vet att det gått iväg. Om användaren har seg lina eller tillfälligt tappar kopplingen med sin router eller liknande kan du komma att rensa formuläret innan det hunnit skickas ändå. En bättre lösning är att lägga på en callback på ditt AJAX-request.

Jag kände också att det förmodligen inte är det bästa alternativet. Nästa steg får bli att hitta en snyggare lösning.

AJAX har jag aldrig gett mig in på, men det låter ju som om att det är ett bra sätt att lösa det på.

Tack för tipsen!

Visa signatur

Grubblare

Permalänk
Medlem

Verkade även fungera med detta (skriver ut det i fall någon med liknande problem läser):

$("#myForm")[0].reset();

Visa signatur

Grubblare

Permalänk
99:e percentilen
Skrivet av drwlz:

Verkade även fungera med detta (skriver ut det i fall någon med liknande problem läser):

$("#myForm")[0].reset();

Om det inte är uppenbart fungerar ovanstående rad så här:

  1. $("#myForm") betyder "en lista av alla element som matchar CSS-selektorn #myForm".

  2. $("#myForm")[0] betyder "det första elementet i den listan".

  3. .reset() är uppenbar.

Det bör även noteras att $("#myForm") inte är native JavaScript, utan jQuery. Följande native rad är likvärdig med din:

document.querySelector("#myForm").reset();

Jag hade också velat göra en nullcheck.

Visa signatur

Skrivet med hjälp av Better SweClockers

Permalänk
Medlem

@Alling:

Borde kanske ha lagt till att jQuery-lösningar också fungerar (använder det mer än gärna).

Bra förklaring i alla fall!

Något som jag inte förstår är varför det inte fungerade när jag tog bort "[0]", eftersom jag bara har ett ID som heter "myForm" så borde man väl inte behöva specificera att den skall ta det första?

Vad är en nullcheck och varför vill man köra en sån?

Visa signatur

Grubblare

Permalänk
Medlem

Den returnerar en array oavsett, har du bara ett element returnerar den en array med ett element, därför måste du ändå specifiera [0].

Permalänk
99:e percentilen
Skrivet av drwlz:

@Alling:

Borde kanske ha lagt till att jQuery-lösningar också fungerar (använder det mer än gärna).

Bra förklaring i alla fall!

Något som jag inte förstår är varför det inte fungerade när jag tog bort "[0]", eftersom jag bara har ett ID som heter "myForm" så borde man väl inte behöva specificera att den skall ta det första?

Vad är en nullcheck och varför vill man köra en sån?

$("#myForm") är en lista (antingen Array eller HTMLCollection; vet inte vad som används i jQuery). Den listan har inte metoden reset().

$("#myForm")[0] är det första elementet i listan, ett HTMLElement. Vi får hoppas att det är ett HTMLFormElement, annars får vi ett exception för att metoden reset() inte finns. Vi får också hoppas att #myForm finns, för annars får vi också ett exception: $("#someWeirdIDThatDefinitelyDoesNotExist") är till exempel en tom lista, och vi kan inte ta det första elementet av en tom lista.

Jag hade vid närmare eftertanke gjort inte bara en nullcheck utan en "riktig" typcheck:

const form = document.getElementById("myForm"); if (form instanceof HTMLFormElement) { form.reset(); }

Visa signatur

Skrivet med hjälp av Better SweClockers

Permalänk
Medlem
Skrivet av Tazavoo:

Den returnerar en array oavsett, har du bara ett element returnerar den en array med ett element, därför måste du ändå specifiera [0].

Skrivet av Alling:

$("#myForm") är en lista (antingen Array eller HTMLCollection; vet inte vad som används i jQuery). Den listan har inte metoden reset().

$("#myForm")[0] är det första elementet i listan, ett HTMLElement. Vi får hoppas att det är ett HTMLFormElement, annars får vi ett exception för att metoden reset() inte finns. Vi får också hoppas att #myForm finns, för annars får vi också ett exception: $("#someWeirdIDThatDefinitelyDoesNotExist") är till exempel en tom lista, och vi kan inte ta det första elementet av en tom lista.

Jag hade vid närmare eftertanke gjort inte bara en nullcheck utan en "riktig" typcheck:

const form = document.getElementById("myForm"); if (form instanceof HTMLFormElement) { form.reset(); }

Skapas det alltid en array när man använder "element selector" i jQuery?

Varför vill man använda en nullcheck eller typcheck?

Experimenterar mest med detta för skojs skull, så min kunskap om hur man skriver "bra" kod är väldigt begränsad än så länge.

Visa signatur

Grubblare

Permalänk
99:e percentilen
Skrivet av drwlz:

Skapas det alltid en array när man använder "element selector" i jQuery?

Jag har aldrig använt jQuery, men det finns andra som har det.

Citat:

Varför vill man använda en nullcheck eller typcheck?

För att man arbetar med ett objekt som kanske är null eller av en annan typ än man förväntar sig.

Prova att köra följande kodsnuttar (var för sig):

document.getElementById("sahluoghulsahgbulawe").innerHTML = "Hello world!";

$("#sahluoghulsahgbulawe")[0].reset();

document.body.reset();

Visa signatur

Skrivet med hjälp av Better SweClockers

Permalänk
Medlem

@Alling:

Ah, då är jag med. Skall testa dina snuttar och även kasta in lite ny kod.

Visa signatur

Grubblare

Permalänk
Medlem
Skrivet av Alling:

Jag har aldrig använt jQuery, men det finns andra som har det.

För att man arbetar med ett objekt som kanske är null eller av en annan typ än man förväntar sig.

Prova att köra följande kodsnuttar (var för sig):

document.getElementById("sahluoghulsahgbulawe").innerHTML = "Hello world!";

$("#sahluoghulsahgbulawe")[0].reset();

document.body.reset();

I just detta fall skulle jag avråda från att göra en nullcheck. Skriptets funktion är att rensa ett specifikt formulär. Om det inte går pga avsaknat id är det fel i sidans funktionalitet. En nullcheck resulterar i att felet tystas ned.

Visa signatur

Kom-pa-TI-bilitet

Permalänk
99:e percentilen
Skrivet av Teknocide:

I just detta fall skulle jag avråda från att göra en nullcheck. Skriptets funktion är att rensa ett specifikt formulär. Om det inte går pga avsaknat id är det fel i sidans funktionalitet. En nullcheck resulterar i att felet tystas ned.

Det är väldigt sant. Jag gjorde bedömningen att det var viktigare att undvika att scriptet kraschar än att kunna hitta buggar. Kan ha gjort en mindre bra bedömning.

Tycker du att man ska strunta helt i null-/typcheck eller göra något särskilt om en sådan bugg skulle uppstå (typ printa ett felmeddelande i konsolen)?

Visa signatur

Skrivet med hjälp av Better SweClockers

Permalänk
Medlem
Skrivet av Alling:

Det är väldigt sant. Jag gjorde bedömningen att det var viktigare att undvika att scriptet kraschar än att kunna hitta buggar. Kan ha gjort en mindre bra bedömning.

Tycker du att man ska strunta helt i null-/typcheck eller göra något särskilt om en sådan bugg skulle uppstå (typ printa ett felmeddelande i konsolen)?

I just detta fall hade jag skippat nullcheck. Det kan se skrämmande ut att få röd text i konsolen istället för en snäll console-log, men felmeddelandet har i moderna webbläsare intressant information som kan underlätta felsökning.

Användarinmatad data är däremot bra att validera. Om ett formulärfält måste innehålla ett primtal mellan 3 och 99, men användaren av någon anledning missat att mata in detta, är det god sed att rapportera problemet till användaren. Att fastställa att fältet innehåller ett numeriskt värde kan innebära att man gör en nullcheck och andra jämförelser för att undvika att koden kraschar.

Försök att separera på kod som validerar data och kod som utför beräkningar. I exemplet ovan skulle det innebära att en funktion isPrime(n) INTE kollar om värdet n är null eller en texten "hej", utan antar att den har blivit skickad ett faktiskt siffervärde. Valideringen görs i ett tidigare skede (förslagsvis en annan funktion) där man väljer att antingen omvandla det inmatade värdet till ett tal och testa det med isPrime, eller rapportera tillbaka ett fel till användaren.

Visa signatur

Kom-pa-TI-bilitet

Permalänk
Medlem
Skrivet av drwlz:

Skapas det alltid en array när man använder "element selector" i jQuery?

Ett "jQuery objekt" returneras som likt en array håller indexerade referenser till elementen.

Skrivet av Alling:

Jag har aldrig använt jQuery, men det finns andra som har det.

För att man arbetar med ett objekt som kanske är null eller av en annan typ än man förväntar sig.

Prova att köra följande kodsnuttar (var för sig):

document.getElementById("sahluoghulsahgbulawe").innerHTML = "Hello world!";

$("#sahluoghulsahgbulawe")[0].reset();

document.body.reset();

Skrivet av Teknocide:

I just detta fall skulle jag avråda från att göra en nullcheck. Skriptets funktion är att rensa ett specifikt formulär. Om det inte går pga avsaknat id är det fel i sidans funktionalitet. En nullcheck resulterar i att felet tystas ned.

Använder inte direkt jQuery heller men agerar inte jQuery lika oavsett om det finns matchande element eller inte?

Dvs

$('#myNonExistingForm').addClass('error'); // inga errors