Forum Mjukvara Programmering och digitalt skapande Tråd

Javascript, skriva ut inmatning från formulär

1
Skriv svar
Permalänk
Medlem
●

Javascript, skriva ut inmatning från formulär

Hej!

Jag försöker skapa ett formulär där användaren matar in namn, epost etc, och det som matats in skrivs ut i exempelvis en <div>.
Det ska göras med HTML DOM.

Har läst och läst men just nu snurrar det bara av information. Är osäker på om jag ska använda mig av innerHTML.

Det här är vad jag har, inte mycket:

<script type="text/javascript">

   var frm_element = document.getElementById("subscribe_frm");
   return true;
    
    </script>

 <form name ="subscribe" id="subscribe_frm" action="#">
   Name: <input type="text" name="name" id="txt_name" /> <br />
   Email: <input type="text" name="email" id="txt_email" />

Alla tips, förklaringar eller länkar tas gladeligen emot!

Redigera
Citera flera Citera
Permalänk
Medlem
●

Jag testade innerHTML och fick det att fungera. Vet dock inte om man kan göra det på något enklare sätt?

Det jag nu har problem med är hur jag skriver ut inmatning från fler än ett textfält, har försökt massa varianter men får det inte att fungera!

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av coka:

Jag testade innerHTML och fick det att fungera. Vet dock inte om man kan göra det på något enklare sätt?

Det jag nu har problem med är hur jag skriver ut inmatning från fler än ett textfält, har försökt massa varianter men får det inte att fungera!

Gå till inlägget

Hur skriver du ut från det första textfältet?

Visa signatur

ηλί, ηλί, λαμά σαβαχθανί!?

Redigera
Citera flera Citera
Permalänk
Medlem
●

Såhär ser min kod ut nu:

<script type="text/javascript">
function showMsg(){
  var userInput = document.getElementById('userInput').value;
  
  document.getElementById('showMsg').innerHTML = userInput;
}
</script>

Namn <input type="input" id="userInput" /> <br/>
<button type="button" onclick="showMsg()">Skriv</button>
<p id="showMsg"></p>
</form>
Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av coka:

Såhär ser min kod ut nu:

<script type="text/javascript">
function showMsg(){
  var userInput = document.getElementById('userInput').value;
  
  document.getElementById('showMsg').innerHTML = userInput;
}
</script>

Namn <input type="input" id="userInput" /> <br/>
<button type="button" onclick="showMsg()">Skriv</button>
<p id="showMsg"></p>
</form>
Gå till inlägget

Utan att krångla till det för mycket så kan du ju bara lägga till ett till input-element och ta hänsyn till detta i javascript koden.
Ex:

<script type="text/javascript">
function showMsg(){
  var userInput = document.getElementById('userInput').value;
  var userMail = document.getElementById('userMail').value;
  var showMessageDiv = document.getElementById('showMsg');

  showMessageDiv.innerHTML = "Namn:" + userInput+ " Email: " + userMail;

}
</script>

<form>
   Namn <input type="input" id="userInput" /> <br/>
   Email <input type="input" id="userMail" /> <br/>
   <button type="button" onclick="showMsg()">Skriv</button>
   <p id="showMsg"></p>
</form>
Visa signatur

ηλί, ηλί, λαμά σαβαχθανί!?

Redigera
Citera flera Citera
Permalänk
Medlem
●

Hm, vet att jag försökte det, måste ha missat något.

Det var i alla fall vad jag var ute efter. Det är en bit kvar till målet, men nu kan jag komma vidare.

Tack så jättemycket för hjälpen!

Redigera
Citera flera Citera
Permalänk
Medlem
●

Kalla mig tråkig men jag hade använt jQuery för detta.

Jag vet att det blir extra kod som laddas ner bla bla bla.

Visa signatur

Fractal Design Arc Svart | MSI Z68A-GD55 G3 REV B3 | Intel® Core i7 2600K, 3.4GHz, 8MB | Corsair 16GB (4x4096MB) CL9 1600Mhz VENGEANCE LP | MSI GeForce GTX 670 | Phanteks PH-TC14PE CPU Cooler (vit) | Corsair Power Supply 650W TX M, Modular, ATX, PS/2 | SSD (okänd tillverkare) + 2 äldre SATA2 diskar på 750 Gb, 350 gb. | OS: Microsoft Windows 10 home.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Har precis börjat läsa JavaScript och har inte hunnit läsa något om jQuery, så därför fick det bli såhär, tills jag kommit längre

Jag har dock stött på problem igen, jag vill kunna välja bakgrundsfärg, typsnitt etc m.h.a. dropdown-listan. Jag lyckades byta färg på hela sidan, men jag vill att bara innehållet i "showMsg" ändras. Har letat men inte hittat någon bra förklaring.

Det här är min kod:

function showMsg(){
       
        var userCompany = document.getElementById('userCompany').value;
        var userLname = document.getElementById('userLname').value;
        var userSname = document.getElementById('userSname').value;
        var userTitle = document.getElementById('userTitle').value;
        var userPhone = document.getElementById('userPhone').value;
        var userMail = document.getElementById('userMail').value;

        var showMessageDiv = document.getElementById('showMsg');

         showMessageDiv.innerHTML = "<div id=company>" + userCompany + "</div>" + "<br />" + userSname + 
         " " + userLname + "<br />" + userTitle + "<p> Tfn " + userPhone + "<br />E–post: " + userMail;"</p>"}
         
     </script>

<div id="form1">
    <form id="inputform" action="send" method="get"> 
    <fieldset>
      <legend>Beställ ditt visitkort här</legend>      
      Företag <input type="input" id="userCompany" /> <br/>
      Efternamn <input type="input" id="userLname" /> <br/>
      Förnamn <input type="input" id="userSname" /> <br/>
      Titel <input type="input" id="userTitle" /> <br/>
      Telefon <input type="input" id="userPhone" /> <br/>
      E–post <input type="input" id="userMail" /> <br/>
      
      Bakgrundsfärg
     <select name="bgcolor" id="bgcolor" onChange="">
      <option selected="selected">Ljusblå</option>
      <option value="yellow">Ljusgul</option>
      <option value="white">Vit</option>
      <option value="magenta">Turkos</option>
     </select> <br />  
     Textfärg
     <select name="fontcolor" id="fontcolor">
      <option>Svart</option>
      <option value="fontblue">Blå</option>
      <option value="fontred">Röd</option>
      <option value="fontdarkgreen">Mörkgrön</option>
     </select> <br />   
     <button type="button" onclick="showMsg()">Skriv</button>
     </fieldset>
     </form>
  </div>
  <p>
   <div id="showMsg"></div>
   </p>

Tacksam för all hjälp!

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av coka:

Tacksam för all hjälp!

Gå till inlägget

För att ändra färg och liknande på ett element använder du showMessageDiv.style, exempelvis

showMessageDiv.style['backgroundColor'] = '#fa0'; // brandguligt
showMessageDiv.style['color'] = '#f0f'; // lila

Du behöver inte lägga in ett extra div-element inuti showMsg men det kan vara passande att använda ett p-element runt det hela. Det är fel att sätta Id utan att ha citationstecken runt namnet, så div id=company är fel.
En annan grej som jag alltid stör mig på — för det är helt meningslöst och onödigt krångligt — är när exempelvis svenska tecken är omkodade till å och liknande. Byt ut det skräpet till normala å, ä, ö!
( du kan även ersätta – med – )

Senast redigerat
Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem
●

Hm, är inte säker på att jag förstod det där helt. Var anger jag showMessageDiv.style? Jag vill att färgen ändras efter vad användaren anger i dropdown-listan.

Vad det gäller – och å så är det så vi lärt oss att göra

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av coka:

Hm, är inte säker på att jag förstod det där helt. Var anger jag showMessageDiv.style? Jag vill att färgen ändras efter vad användaren anger i dropdown-listan.

Vad det gäller – och å så är det så vi lärt oss att göra

Gå till inlägget

Då har er lärare lärt er helt fel, ett fenomen som dessvärre verkar vara ganska vanligt. Stilen kan du ändra när som helst, antingen lägger du ett "onchange"-event på dina dropdowns, eller så lägger du till stiländringarna i funktionen showMsg.

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem
●

Är det något sånt här du menar:

var showMessageDiv = document.getElementById('showMsg').style['backgroundColor'] = '#fa0';

Då ändras bakgrundsfärgen på div showMsg, när man klickar på knappen "skicka", vilket i och för sig är närmare lösningen
men den ska ju ändras efter det att man valt en färg i dropdown-listen. Nu skrivs heller ingen text ut.
Det är första gången jag håller på med js så det kan förklara om jag verkar aningen trög i ämnet

Ang. svenska tecken, är det inte för att webbläsarna inte visar alla tecken korrekt som man använder – osv.?

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av coka:

Är det något sånt här du menar:

var showMessageDiv = document.getElementById('showMsg').style['backgroundColor'] = '#fa0';
Gå till inlägget

Nästan! Så här skulle jag ha gjort:

var showMessageDiv = document.getElementById('showMsg'); (denna raden har du redan)
showMessageDiv.style['backgroundColor'] = din färg här
Skrivet av coka:

Då ändras bakgrundsfärgen på div showMsg, när man klickar på knappen "skicka", vilket i och för sig är närmare lösningen
men den ska ju ändras efter det att man valt en färg i dropdown-listen. Nu skrivs heller ingen text ut.
Det är första gången jag håller på med js så det kan förklara om jag verkar aningen trög i ämnet

Ang. svenska tecken, är det inte för att webbläsarna inte visar alla tecken korrekt som man använder – osv.?

Gå till inlägget

För att ändra färg direkt får du lägga till en funktion som knyts mot onchange-attributet på din dropdown-lista. Du har redan skrivit in det men det är satt till "" just nu.

Alla webbläsare som jag känner till visar svenska tecken (och ndash) utan problem när man anger rätt encoding. Det finns ingen ursäkt för göra på något annat sätt.

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem
●

Insåg nu att jag beskrivit vad jag vill lite fel. När användaren väljer färg i dropdown-listen ska ingenting hända. Först när man klickar på knappen ska bakgrundsfärgen i den angivna showMsg ändras till det som valts i dropdown-listen. Då borde jag väl använda knappens onclick i stället? Måste jag ändå ange showMessageDiv.style eller kan jag sätta den till något "allmänt"? Börjar bli lite rörigt nu

Tack för all hjälp hittills!

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av coka:

Insåg nu att jag beskrivit vad jag vill lite fel. När användaren väljer färg i dropdown-listen ska ingenting hända. Först när man klickar på knappen ska bakgrundsfärgen i den angivna showMsg ändras till det som valts i dropdown-listen. Då borde jag väl använda knappens onclick i stället? Måste jag ändå ange showMessageDiv.style eller kan jag sätta den till något "allmänt"? Börjar bli lite rörigt nu

Tack för all hjälp hittills!

Gå till inlägget

Knappens onclick är knuten till funktionen showMsg så vill du att färgen ska ändras blir det i den funktionen du ska göra det. Jag förstår inte vad du menar med att ange showMessageDiv.style, det är där du ska sätta in värdet ifrån din dropdown. Det blir något i stil med

var userBgColor = document.getElementById('bgcolor').value;
showMessageDialog.style['backgroundColor'] = userBgColor;
Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem
●

Jag löste det såhär:

   document.getElementById("showMsg").style.backgroundColor = bgcolor.value;                      
     var showMessageDiv = document.getElementById('showMsg');

Förstår inte riktigt hur det funkar än, men det gör det jag ville!

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av coka:

Jag löste det såhär:

   document.getElementById("showMsg").style.backgroundColor = bgcolor.value;                      
     var showMessageDiv = document.getElementById('showMsg');

Förstår inte riktigt hur det funkar än, men det gör det jag ville!

Gå till inlägget

Jo det fungerar men det är lite bakvänt. Om du kör var showMessageDiv innan så slipper du hämta ut elementet två gånger med getElementById

Skickades från m.sweclockers.com

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem
●

Tror jag förstår vad du menar.

Min kod fungerar nu, men den vill inte validera. Det jag får fel på i huvudsak är:

showMessageDiv.innerHTML = "<h1>" + userCompany + "</h1>" + "<br />" + userSname + 
         " " + userLname + "<br />" + userTitle + "<p> Tfn " + userPhone + "<br />E-post: " + userMail;"</p>"}

där <h1>, <br /> och <p> inte är tillåtna. Jag vill att resultatet ska skrivas ut med det första ordet "förstorat"
och inmatningarna ska hamna under varandra. Hur kan jag göra detta utan att ändra helt på den kod jag har?

Ber om ursäkt för att tråden kanske tappar fokus från huvudämnet, men det kändes onödigt att starta en ny.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Det enda jag kan se är att du har skrivit ; istället för + mellan userMail och "</p>"

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem
●

Ja, det var ett misstag som jag ändrat men det validerar ändå inte. Har testa både Strict och Transitional. Jag förstår inte vad som är fel?

Redigera
Citera flera Citera
Permalänk
Medlem
●

Jag kan säga att innan jag började med jQuery så var jag väldigt dåligt insatt i JavaScript och hur det fungerade.

Men genom att läsa guider om jQuery och testa mig fram och även läsa denna guide:
https://developer.mozilla.org/en/JavaScript/Guide

Så har jag lärt mig en hel del och har en grundläggande uppfattning om hur det fungerar.
Kanske inte dom mest avancerade utvecklar mönstren osv men jag kan skapa det jag behöver för tillfället.

Ta en titt på länken ovan. Det finns mycket annat nyttigt på samma website.

Lycka till.

Visa signatur

Fractal Design Arc Svart | MSI Z68A-GD55 G3 REV B3 | Intel® Core i7 2600K, 3.4GHz, 8MB | Corsair 16GB (4x4096MB) CL9 1600Mhz VENGEANCE LP | MSI GeForce GTX 670 | Phanteks PH-TC14PE CPU Cooler (vit) | Corsair Power Supply 650W TX M, Modular, ATX, PS/2 | SSD (okänd tillverkare) + 2 äldre SATA2 diskar på 750 Gb, 350 gb. | OS: Microsoft Windows 10 home.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av coka:

Ja, det var ett misstag som jag ändrat men det validerar ändå inte. Har testa både Strict och Transitional. Jag förstår inte vad som är fel?

Gå till inlägget

De enda ställen du får ha < och > i ett XHTML-dokument, är som start och slut på en elementdeklaration, samt inuti CDATA-fält.

Testa att lägga ditt skript så här:

<script type="text/javascript">
<![CDATA[

ditt script här

]]>
</script>

Om det är er lärare som har sagt åt er att använda XHTML så är det ännu en sak han och jag har olika uppfattning om.

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem
●

Felmedd. försvinner när jag lägger till CDATA, men programmet fungerar inte alls då. Ingenting händer när jag trycker på knappen "Skicka".

Sidan måste valideras för riktighet med w3c valideringsverktyg, så jag antar att det är det enda sättet, eller är jag ute och cyklar?

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av coka:

Felmedd. försvinner när jag lägger till CDATA, men programmet fungerar inte alls då. Ingenting händer när jag trycker på knappen "Skicka".

Sidan måste valideras för riktighet med w3c valideringsverktyg, så jag antar att det är det enda sättet, eller är jag ute och cyklar?

Gå till inlägget

Visa gärna vad du har nu så blir det lättare att avgöra om det är något annat som krånglar. Hela koden med doctype och allt.

Skulle väl tro att det är ungefär 10 % av alla sidor som validerar enligt w3:s valideringsverktyg. Sweclockers gör exempelvis inte det.

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem
●

Det här är all kod jag har nu:

<?xml version="1.0" encoding="iso-8859-1"?>

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    	
    <title>Visitkort</title>
    
    <style type="text/css">
     #form1 fieldset 
    { 
     width: 400px; 
     padding: 20px 0px 20px 50px; 
     border: 1px solid #99cc00; 
     background-color: #e2ff8c;
    }

     #form1 legend 
    { 
     background-color: #e2ff8c; 
     padding: 2px 2px 2px 3px; 
     margin-left: -30px; 
     letter-spacing: 3px; 
     border: 1px solid #99cc00; 
    }

     #showMsg 
    {
     width: 400px; 
     height: 200px; 
     padding: 5px; 
     margin-top: 10px; 
     margin-bottom:10px;
    }
   </style>
     <script type="text/javascript">
    
       function showMsg(){
       
        var userCompany = document.getElementById('userCompany').value;
        var userLname = document.getElementById('userLname').value;
        var userSname = document.getElementById('userSname').value;
        var userTitle = document.getElementById('userTitle').value;
        var userPhone = document.getElementById('userPhone').value;
        var userMail = document.getElementById('userMail').value;
        var font = document.getElementById('font'); 
        document.getElementById("showMsg").style.fontFamily = font.value;
        var bgcolor = document.getElementById('bgcolor');
        document.getElementById("showMsg").style.backgroundColor = bgcolor.value;  
        var fontcolor = document.getElementById('fontcolor');
        document.getElementById("showMsg").style.color = fontcolor.value;
                                    
        var showMessageDiv = document.getElementById('showMsg');
       

         showMessageDiv.innerHTML = "<h1>" + userCompany + "</h1>" + "<br />" + userSname + 
         " " + userLname + "<br />" + userTitle + "<p>Tfn " + userPhone + "<br />E-post: " + userMail + "</p>"}
        
   
</script>
   </head>

   <body>
    <div id="form1">
    <form id="inputform" action="send" method="get"> 
    <fieldset>
      <legend>Beställ ditt visitkort här</legend>      
      <label for="userCompany">Företag</label>
      <input type="text" id="userCompany" /> <br/>
      <label for="userLname">Efternamn</label>
      <input type="text" id="userLname" /> <br/>
      <label for="userSname">Förnamn</label>
      <input type="text" id="userSname" /> <br/>
      <label for="userTitle">Titel</label>
      <input type="text" id="userTitle" /> <br/>
      <label for="userPhone">Telefon</label>
      <input type="text" id="userPhone" /> <br/>
      <label for="userMail">E-post</label>
      <input type="text" id="userMail" /> <br/>
      
      <label for="bgcolor">Bakgrundsfärg</label>
     <select name="bgcolor" id="bgcolor">
      <option value="#00CCFF">Ljusblå</option>
      <option value="#CCFF99">Ljusgul</option>
      <option value="#FFFFFF">Vit</option>
      <option value="#00FFFF">Turkos</option>
     </select> <br />  
      <label for="fontcolor">Textfärg</label>
     <select name="fontcolor" id="fontcolor">
      <option value="#000000">Svart</option>
      <option value="#0000FF">Blå</option>
      <option value="#FF0000">Röd</option>
      <option value="#003300">Mörkgrön</option>
     </select> <br />  
      <label for="font">Typsnitt</label>
      <select name="font" id="font">
      <option value="verdana">Verdana</option>
      <option value="arial">Arial</option>
      <option value="tahoma">Tahoma</option>
      <option value="impact">Impact</option>
     </select> <br />
      <input type="button" name="send" id="send" value="Skicka" onclick="showMsg()" />
      <input type="button" value="Återställ" onclick="reset()" />
     </fieldset>
     
  </form>
  </div>
  
   <div id="showMsg"></div>
   
  </body>
 </html>

De fel jag får är: document tyoe does not allow element "h1", "br", "p".

Känns ganska frustrerande, eftersom det i övrigt fungerar. Har testat XHTML 1.0 Strict och Transitional samt HTML 4.01 Strict och Transitional.
Får inte riktigt samma fel, men inget av de validerar.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Om du kan så skippa XHTML. Byt ut

<?xml version="1.0" encoding="iso-8859-1"?>

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

Mot:

<!doctype html>
<html>

Det är allt du behöver göra för att din kod ska validera. Inga konstiga grejer som <![CDATA[ ... ]]> behövs. Om du trots allt måste använda XHTML så kan du skriva din script-tag såhär:

<script type="text/javascript">
// <![CDATA[

javascript här

// ]]>
</script>

Det är inget fel på att ha CDATA i XHTML i vanliga fall. Problemet är att din webbläsare inte visar dokumentet som XHTML, utan vanlig HTML, och där finns inga CDATA-block. För att gå runt problemet, lura w3 till att validera samtidigt som vi lurar vår webbläsare att vi har normal HTML, så kommenteras CDATA-blocket ut med dubbla slash, så kallade single-line-comments.

Om du vill ha extra poäng i min bok så översätt de sista öarna till ö (fixa resten av bokstäverna också naturligtvis!). Vill du ha guldstjärna så byt encoding till utf-8, som tillåter allt mellan svenska bokstäver och egyptiska hieroglyfer på en och samma sida. Det kan knappt bli smidigare!

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem
●

Använde det andra alternativet, med CDATA... Det fungerade utmärkt! Det första validerade också, men för att vara på den säkra sidan så tog jag alternativ 2.

Ändrade också teckenkodningen till utf-8, och ändrade tillbaka till svenska tecken

Tack så hemskt mycket för din tid och tålamod! Tack också för att du har fått mig att öppna ögonen mer för teckenkodning, CDATA och mer. Känner att det är något jag vill läsa mer om, och bli säkrare på!

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av coka:

Använde det andra alternativet, med CDATA... Det fungerade utmärkt! Det första validerade också, men för att vara på den säkra sidan så tog jag alternativ 2.

Ändrade också teckenkodningen till utf-8, och ändrade tillbaka till svenska tecken

Tack så hemskt mycket för din tid och tålamod! Tack också för att du har fått mig att öppna ögonen mer för teckenkodning, CDATA och mer. Känner att det är något jag vill läsa mer om, och bli säkrare på!

Gå till inlägget

Det är kul att vara till hjälp när någon är genuint intresserad. Folk som vill ha en lösning utan att förstå vad det handlar om har jag mindre tålamod med. Lycka till i framtiden, var inte rädd för att fråga om det är något. Och slutligen, alternativ 1 är antagligen det du kommer vilja köra på i framtiden, men du får upptäcka varför själv

Visa signatur

Kom-pa-TI-bilitet

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