Skicka formulär-input till annan sida för display (jQuery, JavaScript, PHP eller annat)

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Mar 2015

Skicka formulär-input till annan sida för display (jQuery, JavaScript, PHP eller annat)

Halloj,

Blir inte klok på hur jag skall få mitt formulär att ta det användaren skrivit in och visa på en ny sida när man klickar på "submit".

Hur hade ni löst det? Har snurrat in mig på detta så pass hårt att ingenting verkar vettigt längre.

Testar detta lokalt och inte på någon server. Har WAMP men det funkar inte så bra, därför är väl en lösning i JavaScript eller annat att föredra över PHP.

Här är "index.html" med formuläret:

<div class="container"> <form action="display.html" method="post"> <ul class="flex-outer"> <li> <label for="first-name">First Name</label> <input type="text" id="first-name" placeholder="Enter your first name here"> </li> <li> <label for="last-name">Last Name</label> <input type="text" id="last-name" placeholder="Enter your last name here"> </li> <li> <label for="email">Email</label> <input type="email" id="email" placeholder="Enter your email here"> </li> <li> <label for="message">Message</label> <textarea rows="6" id="message" placeholder="Enter your message here"></textarea> </li> <li> <button id="button" type="submit" onlick="store()">Submit</button> </li> </ul> </form> </div>

Det man fyller i där skall alltså visas på denna sida (display.html) efter paragraferna. Behöver inte vara paragrafer men ni förstår nog syftet:

<p>Your first name is:</p> <p>Your last name is:</p> <p>Your email is:</p><div id="showEmail"></div> <p>Message is:</p>

Lite JS/jQuery som jag testat nu senast (ger inga fel i console men printar inte text):

function store(){ var inputEmail = document.getElementById("email"); localStorage.setItem("email", inputEmail.value); }; var storedValue = localStorage.getItem("email"); $(document).ready(function() { $('#showEmail').html(localStorage['email']) });

I'm not having a glass of wine, I'm having six! It's called a tasting and it's classy!

Trädvy Permalänk
Medlem
Plats
Piteå
Registrerad
Okt 2004

Om du använder php skulle det iaf se ut ungefär såhär:

<p>Your first name is:<?php echo $_POST['first-name']; ?></p>
<p>Your last name is:<?php echo $_POST['last-name']; ?></p>
<p>Your email is:</p><?php echo $_POST['email']; ?></div>
<p>Message is:<?php echo $_POST['message']; ?></p>

Kan hända jag glömt nån dubbelsnuff eller liknande nånstans... kanske hjälper dig på traven iaf

CPU: AMD Ryzen 1700x @ 3.8GHz || Mem: 16GB Corsair LPX 3000mhz || Mobo: Asus x370 Prime || GPU: EVGA Geforce GTX1070 SC || SSD: WD black 500GB m2 || OS: Linux Mint/Win 10 || Monitor: Dell 43" 4K P4317Q

Citera om du vill ha svar :)

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Mar 2015

@pellski87:

Tackar för tipset. Skall harva vidare med JS ett tag till och gå över till PHP när jag verkligen inte orkar pula mer

Edit:

Styrde upp WAMP och körde via PHP. Visade sig att man behövde använda ett namn-attribut också. Men nu funkar det!

Frågan är dock hur man gör det bättre, då det verkar som om att POST inte är speciellt säkert (enligt the internet).

I'm not having a glass of wine, I'm having six! It's called a tasting and it's classy!

Trädvy Permalänk
Medlem
Plats
KLAX
Registrerad
Jan 2004
Skrivet av drwlz:

Frågan är dock hur man gör det bättre, då det verkar som om att POST inte är speciellt säkert (enligt the internet).

Vad tänker du på? Du måste såklart köra HTTPS

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Mar 2015
Skrivet av CloX:

Vad tänker du på? Du måste såklart köra HTTPS

Har aldrig hostat eller byggt en hemsida "live" så jag har faktiskt noll koll, men när jag rotade runt efter sätt att fixa formuläret på så stod det ofta att GET/POST är "osäkert" (lätt att hacka?).

Om det inte är något att oroa sig för så länge man kör HTTPS kan man väl vara lugn antar jag.

Funderade bara på om det kanske är säkrare att lagra i cookies eller liknande.

I'm not having a glass of wine, I'm having six! It's called a tasting and it's classy!

Trädvy Permalänk
Medlem
Registrerad
Aug 2011
Skrivet av drwlz:

Har aldrig hostat eller byggt en hemsida "live" så jag har faktiskt noll koll, men när jag rotade runt efter sätt att fixa formuläret på så stod det ofta att GET/POST är "osäkert" (lätt att hacka?).

Om det inte är något att oroa sig för så länge man kör HTTPS kan man väl vara lugn antar jag.

Funderade bara på om det kanske är säkrare att lagra i cookies eller liknande.

Det beror väl främst på om du faktiskt behöver lagra datan i en databas? Osäker exakt vad du syftar på, men lokalt är väl alltid "säkrare".

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Mar 2015

@kronwalled:

Blev mest nyfiken på vad "best practice" skulle vara om man någon gång kastar upp en liknande funktion på en hemsida. Att lagra användarens input i cookies och sedan läsa från dessa verkade många rekommendera.

Tanken var från början att mitt formulär skulle maila uppgifterna till någon, men det blev struligt (gick inte trots WAMP och förmodligen på grund utav brandväggar på jobbet) och jag nöjde mig med en simpel "display" utav input på en ny sida.

Nu behövde jag bara något snabbt och simpelt som gjorde jobbet, men jag tycker att det är intressant att veta hur man löser det på bästa och säkraste sätt i skarpt läge också (om man t.ex skall maila uppgifter).

I'm not having a glass of wine, I'm having six! It's called a tasting and it's classy!

Trädvy Permalänk
Medlem
Plats
Uppsala
Registrerad
Apr 2003

Best practice är att aldrig lita på användar input. Validera allt som en användare matar in och om det inte uppfyller dina krav och injection-krav så neka det.

Sen är det ju lite beroende på vad man ska använda datan till. Ska den sparas i en databas så bör ju valideringen och kraven vara lite högre än om man bara ska visa det på en sida och sen försvinna så fort man uppdaterar sidan.

Trädvy Permalänk
Medlem
Plats
Knivsta
Registrerad
Nov 2002

Ett annat sätt är att använda Vue.js + Vue.js router + PHP för att bygga en mini SPA sida med två routes, en med formuläret och en för data presentationen.

Webb -och apputvecklare på Greater Than AB
Min hemsida | Frilansutvecklaren | LinkedIn profil.
Hemdator: Thinkpad T410S | Jobbdator: Microsoft Surface Pro 4 | Mobil: Samsung S7 Edge.