Vinnaren i pepparkakshustävlingen!
  • 1
  • 2
2017-05-29, 19:07
  #1
Medlem
Decentralizeds avatar
Hej! Jag lyckades inte riktigt beskriva mitt problem i rubriken då det blev för långt. I alla fall, jag har skapat en <form> i HTML, där användaren får fylla i uppgifter så som förnamn och efternamn. All info sparas med hjälp av JavaScript i variabler. Det jag vill ska hända när användaren klickar på "submit-knappen" är att informationen dels sparas, men även att användaren slussas vidare till en sida där den inskrivna informationen visas. Jag vet att detta knappast är användbart, men jag gör det som en övning för att lära mig, så inget tjat om att detta är efterblivet eller att man aldrig skulle göra detta på riktigt, tack.

Min kod:
HTML-kod:
<!DOCTYPE html>

<html>

<head>
<title>Form</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="Form.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>

<body>

<div class="formcontainer">

<h1>Registration form</h1>

<form>
  <input type="text" id="firstname" placeholder="First name">
  <input type="text" id="lastname" placeholder="Last name">
  <input type="text" id="adress" placeholder="Adress">
  <input type="password" id="password1" placeholder="Password">
  <input type="password" id="password2" placeholder="Confirm password">
  <button type="button" onclick="getInfo()">Submit</button>
</form>

<script>

function getInfo(){
	var firstname = document.getElementById("firstname").value
	var lastname = document.getElementById("lastname").value
	var adress = document.getElementById("adress").value
	var password1 = document.getElementById("password1").value
	var password2 = document.getElementById("password2").value
}

</script>

</div>

</body>

</html>

För att sammanfatta. Jag vill att, när användaren klickar på knappen, att dels informationen sparas i dessa variabler som ni kan se innanför <script>-taggarna, men även att användaren slussas vidare till en ny .html-sida där jag kommer använda typ document.write för att till exempel skriva "Hej Claes Andersson, en Glock 9 är påväg till Exempelvägen 7, där du bor!"

Andra funktioner jag skulle vilja implementera efter att problemet är löst:

- Att alla fält måste vara ifyllda innan användaren kan trycka på "submit"-knappen.
- Att "password1" och "password2" måste matcha för att användaren ska kunna trycka på "submit"-knappen. Jag tror att jag är nära när jag misstänker att jag borde använda ett if/else-statement för detta men vet inte riktigt hur jag ska koda för att få sidan att visa ett felmeddelande när detta inte stämmer.

Tack på förhand.
Citera
2017-05-29, 19:53
  #2
Medlem
studioxswes avatar
Vill du ha hjälp med en uppgift?

Du kan lösa det på tre sätt:

1.) URL parametrar
2.) Kakor
3.) Lokal DB (HTML5)
Citera
2017-05-29, 22:34
  #3
Medlem
Decentralizeds avatar
Citat:
Ursprungligen postat av studioxswe
Vill du ha hjälp med en uppgift?

Du kan lösa det på tre sätt:

1.) URL parametrar
2.) Kakor
3.) Lokal DB (HTML5)

Ja, det vill jag. Skulle du kunna förklara lite mer ingående hur jag ska gå tillväga? Jag efterfrågar alltså ett sätt att få en knapp (<button>) att slussa vidare användaren till en ny sida, samtidigt som den sparar den inskrivna informationen som jag har sett till att den gör med funktionen getInfo() vilket sparar informationen med .value i variabler.
Citera
2017-06-03, 09:32
  #4
Medlem
TexasSwedes avatar
Citat:
Ursprungligen postat av Decentralized
Ja, det vill jag. Skulle du kunna förklara lite mer ingående hur jag ska gå tillväga? Jag efterfrågar alltså ett sätt att få en knapp (<button>) att slussa vidare användaren till en ny sida, samtidigt som den sparar den inskrivna informationen som jag har sett till att den gör med funktionen getInfo() vilket sparar informationen med .value i variabler.

Som alltid när det gäller programmering så bryter du ner din uppgift i mindre delar. Sedan löser du varje del för sig, oftast genom att bryta ner dem i ytterligare mindre delar. Du har även fördelen där att du redan nu strukturerar koden på ett vettigt sätt.

Låt oss nu titta på vad du vill göra:
1) Användaren klickar på en knapp
a) Kontrollera att alla fält är ifyllda
b) Kontrollera att de två fälten för lösenord är identiska
c) Spara innehållet i fälten i variabler
d) Visa en ny sida där den inmatade informationen bekräftas

I c) så skulle jag lagra informationen någonstans där den inte försvinner, lämpligen i en databas på servern.
När det gäller d) så är ett alternativ att du istället för att skicka användaren till en nya sida istället visar informationen på samma sida, efter att du gömt inmatningsfälten. Slutresultatet blir detsamma, en "ny" sida visas för användaren.

Jag kommer använda jQuery i min kod, jag rekommenderar att du lär dig det när du lärt dig traditionell Javascript. Med jQuery är det enkelt att skilja all kod från din HTML. Jag rekommenderar att du alltid skiljer på presentation och logik/kod.

Jag har inte optimerat min kod , det finns säkert massor av saker som kan skrivas mer effektivt. Jag försöker istället skriva den så att den är lätt att följa, med mycket kommentarer så det är lätt att följa med i koden.

Låt oss titta på varje del för sig själv.

A. Kontrollera att alla fält är ifyllda
Jag kommer dela upp det här steget i två separata delar. Först läser jag in innehållet i alla fält och lagrar i en lokal variabel (ett objekt). Jag kommer nämligen att använda dessa värden senare igen.

Kod:
function getFieldValues() {
    // Get all input fields with a data-variable attribute 
    var fields = $('input[data-variable'));
    // Loop through all fields and store value in object
    var obj = {};
    $.each(fields, function() {
        var field = $(this).data("variable");
        var value = $(this).val();
        obj[field] = value;
    });
    // Return object with field content
    return obj;
}

Sedan kontrollerar jag att alla fält innehåller värden, och returnerar en array med namnet på de fält som är tomma.

Kod:
function checkFieldContent(fields) {
    var array = [];
    $.each(fields, function(name, value) {
        if(value=="") {
            array.push(name);  // Add field name to array
        }
    });
    // Return array with fields
    return array;
}

B. Kontrollera att de två fälten för lösenord är identiska
Skapa en funktion som jämför lösenordsfälten, returnera en boolean (true för att de är identiuska, false om de inte är det).

Kod:
function verifyPassword() {
    if($("#password1").val()==$("#password2").val()) {
        return true;
    } else {
        return false;
    }
}

Eller en mer kompakt version:
Kod:
function verifyPassword() {
    return ($("#password1").val()==$("#password2").val()) ? true : false;
}

C. Lagra värdena i fälten i en variabel
Det här har vi redan gjort i det första steget. Men jag skulle skriva en funktion där värdena lagras i en databas eller någon annanstans. Jag kommer visa hur du skíckar värdena till en server med ett Ajax-anrop. Servern kan sedan lagra värdena. Detta sker till exempel med hjälp av PHP.
Eftersom fältnamnen och värdena redan är lagrade i ett objekt är det mycket enkelt att skicka det i ett Ajax-anrop.

Kod:
function saveFieldValues(fields) {
    $.ajax({
        url: "/example/saveFields.php",
        data: fields
    }).success(function() {
        alert("Fields saved.");
        return true;
    }).error(function(xhr,status,error) {
        alert(status + ": " + error);
        return false;
    })
}

D. Visa sida med bekräftelse
Det är enkelt att ersätta en sida med nytt innehåll utan att skicka användaren till en ny sida.
Jag gömmer helt enkelt formuläret och visar istället en div där jag har lite text samt några span-element där jag stoppar in de olika värdena du vill visa för användaren.

Kod:
function displayConfirmationPage(fields) {
    $("#entryForm").hide();
    $("#confirmationScreen").show();
    // Loop through object and populate span 
    $.each(fields, function(name,value) {
        // Replace the content of the matching span
        // with the value of the field
        $("#fld_"+name).html(value);
    });
}



Känn av om användaren klickar på "Submit"
Det enklaste är att använda jQuery för att binda en funktion till klick-eventet på knappen. I den funktionen anropar du funktionerna du tidigare skapat. I mitt exempel har jag gett submit-knappen id "btnSubmit".

Kod:
$('#btnSubmit').on('click', function(event) {
    // Prevent default action on button, i.e. form submit
    event.preventDefault();

    // Put all field values in an object
    var fields = getFieldValues();

    // Check field content, return an array of
    // empty fields or empty array if no empty fields
    var emptyfields = checkFieldContent(fields);
    // If there are empty fields, display message to user
    if(emptyfields.length>0) {
        alert(emptyfields.length + " fields are empty: " + emptyfields.toString());
        return false;
    }

    // Verify that the two password fields match
    var match = verifyPassword(fields);
    if(match==false) {
        alert("Passwords do not match.");
        return false;
    }
    saveFieldValues(fields);
    displayConfirmationPage(fields);
});


Du kan hitta min kod här: https://jsfiddle.net/texasswede/frm0u222/

Lycka till!
Citera
2017-06-03, 14:31
  #5
Medlem
Brunbeverns avatar
Citat:
Ursprungligen postat av Decentralized
Hej! Jag lyckades inte riktigt beskriva mitt problem i rubriken då det blev för långt. I alla fall, jag har skapat en <form> i HTML, där användaren får fylla i uppgifter så som förnamn och efternamn. All info sparas med hjälp av JavaScript i variabler. Det jag vill ska hända när användaren klickar på "submit-knappen" är att informationen dels sparas, men även att användaren slussas vidare till en sida där den inskrivna informationen visas. Jag vet att detta knappast är användbart, men jag gör det som en övning för att lära mig, så inget tjat om att detta är efterblivet eller att man aldrig skulle göra detta på riktigt, tack.

Min kod:
HTML-kod:
<!DOCTYPE html>

<html>

<head>
<title>Form</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="Form.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>

<body>

<div class="formcontainer">

<h1>Registration form</h1>

<form>
  <input type="text" id="firstname" placeholder="First name">
  <input type="text" id="lastname" placeholder="Last name">
  <input type="text" id="adress" placeholder="Adress">
  <input type="password" id="password1" placeholder="Password">
  <input type="password" id="password2" placeholder="Confirm password">
  <button type="button" onclick="getInfo()">Submit</button>
</form>

<script>

function getInfo(){
	var firstname = document.getElementById("firstname").value
	var lastname = document.getElementById("lastname").value
	var adress = document.getElementById("adress").value
	var password1 = document.getElementById("password1").value
	var password2 = document.getElementById("password2").value
}

</script>

</div>

</body>

</html>

För att sammanfatta. Jag vill att, när användaren klickar på knappen, att dels informationen sparas i dessa variabler som ni kan se innanför <script>-taggarna, men även att användaren slussas vidare till en ny .html-sida där jag kommer använda typ document.write för att till exempel skriva "Hej Claes Andersson, en Glock 9 är påväg till Exempelvägen 7, där du bor!"

Andra funktioner jag skulle vilja implementera efter att problemet är löst:

- Att alla fält måste vara ifyllda innan användaren kan trycka på "submit"-knappen.
- Att "password1" och "password2" måste matcha för att användaren ska kunna trycka på "submit"-knappen. Jag tror att jag är nära när jag misstänker att jag borde använda ett if/else-statement för detta men vet inte riktigt hur jag ska koda för att få sidan att visa ett felmeddelande när detta inte stämmer.

Tack på förhand.

Så du vill att det du skriver in ska visas på nästa sida helt enkelt?

För att beta vidare på din kod du har postat så kan man väl göra såhär...

Kod:
function getInfo(){
	const firstname = document.getElementById("firstname").value
	const lastname = document.getElementById("lastname").value
	const adress = document.getElementById("adress").value
	const password1 = document.getElementById("password1").value
	const password2 = document.getElementById("password2").value

        if (firstname === "" || lastname === "" || adress === "" || password1 === "") {
                return;
        }

        if (password1 !== password2) { 
                return;
        }

        const query = "?firstname" = + firstname + "&lastname=" + lastname + "&adress=" + adress;
        const URL = "nysidan.html" + query;

        window.location = URL;
}

edit:
Tidigare skribents lösning är såklart snyggare och mer modulärt gjort, även om JQuery används. Detta var en approach för att visa hur du så enkelt som möjligt kunde göra det.
__________________
Senast redigerad av Brunbevern 2017-06-03 kl. 14:34.
Citera
2017-06-03, 21:07
  #6
Medlem
Decentralizeds avatar
Citat:
Ursprungligen postat av TexasSwede
Som alltid när det gäller programmering så bryter du ner din uppgift i mindre delar. Sedan löser du varje del för sig, oftast genom att bryta ner dem i ytterligare mindre delar. Du har även fördelen där att du redan nu strukturerar koden på ett vettigt sätt.

Låt oss nu titta på vad du vill göra:
1) Användaren klickar på en knapp
a) Kontrollera att alla fält är ifyllda
b) Kontrollera att de två fälten för lösenord är identiska
c) Spara innehållet i fälten i variabler
d) Visa en ny sida där den inmatade informationen bekräftas

I c) så skulle jag lagra informationen någonstans där den inte försvinner, lämpligen i en databas på servern.
När det gäller d) så är ett alternativ att du istället för att skicka användaren till en nya sida istället visar informationen på samma sida, efter att du gömt inmatningsfälten. Slutresultatet blir detsamma, en "ny" sida visas för användaren.

Jag kommer använda jQuery i min kod, jag rekommenderar att du lär dig det när du lärt dig traditionell Javascript. Med jQuery är det enkelt att skilja all kod från din HTML. Jag rekommenderar att du alltid skiljer på presentation och logik/kod.

Jag har inte optimerat min kod , det finns säkert massor av saker som kan skrivas mer effektivt. Jag försöker istället skriva den så att den är lätt att följa, med mycket kommentarer så det är lätt att följa med i koden.

Låt oss titta på varje del för sig själv.

A. Kontrollera att alla fält är ifyllda
Jag kommer dela upp det här steget i två separata delar. Först läser jag in innehållet i alla fält och lagrar i en lokal variabel (ett objekt). Jag kommer nämligen att använda dessa värden senare igen.

Kod:
function getFieldValues() {
    // Get all input fields with a data-variable attribute 
    var fields = $('input[data-variable'));
    // Loop through all fields and store value in object
    var obj = {};
    $.each(fields, function() {
        var field = $(this).data("variable");
        var value = $(this).val();
        obj[field] = value;
    });
    // Return object with field content
    return obj;
}

Sedan kontrollerar jag att alla fält innehåller värden, och returnerar en array med namnet på de fält som är tomma.

Kod:
function checkFieldContent(fields) {
    var array = [];
    $.each(fields, function(name, value) {
        if(value=="") {
            array.push(name);  // Add field name to array
        }
    });
    // Return array with fields
    return array;
}

B. Kontrollera att de två fälten för lösenord är identiska
Skapa en funktion som jämför lösenordsfälten, returnera en boolean (true för att de är identiuska, false om de inte är det).

Kod:
function verifyPassword() {
    if($("#password1").val()==$("#password2").val()) {
        return true;
    } else {
        return false;
    }
}

Eller en mer kompakt version:
Kod:
function verifyPassword() {
    return ($("#password1").val()==$("#password2").val()) ? true : false;
}

C. Lagra värdena i fälten i en variabel
Det här har vi redan gjort i det första steget. Men jag skulle skriva en funktion där värdena lagras i en databas eller någon annanstans. Jag kommer visa hur du skíckar värdena till en server med ett Ajax-anrop. Servern kan sedan lagra värdena. Detta sker till exempel med hjälp av PHP.
Eftersom fältnamnen och värdena redan är lagrade i ett objekt är det mycket enkelt att skicka det i ett Ajax-anrop.

Kod:
function saveFieldValues(fields) {
    $.ajax({
        url: "/example/saveFields.php",
        data: fields
    }).success(function() {
        alert("Fields saved.");
        return true;
    }).error(function(xhr,status,error) {
        alert(status + ": " + error);
        return false;
    })
}

D. Visa sida med bekräftelse
Det är enkelt att ersätta en sida med nytt innehåll utan att skicka användaren till en ny sida.
Jag gömmer helt enkelt formuläret och visar istället en div där jag har lite text samt några span-element där jag stoppar in de olika värdena du vill visa för användaren.

Kod:
function displayConfirmationPage(fields) {
    $("#entryForm").hide();
    $("#confirmationScreen").show();
    // Loop through object and populate span 
    $.each(fields, function(name,value) {
        // Replace the content of the matching span
        // with the value of the field
        $("#fld_"+name).html(value);
    });
}



Känn av om användaren klickar på "Submit"
Det enklaste är att använda jQuery för att binda en funktion till klick-eventet på knappen. I den funktionen anropar du funktionerna du tidigare skapat. I mitt exempel har jag gett submit-knappen id "btnSubmit".

Kod:
$('#btnSubmit').on('click', function(event) {
    // Prevent default action on button, i.e. form submit
    event.preventDefault();

    // Put all field values in an object
    var fields = getFieldValues();

    // Check field content, return an array of
    // empty fields or empty array if no empty fields
    var emptyfields = checkFieldContent(fields);
    // If there are empty fields, display message to user
    if(emptyfields.length>0) {
        alert(emptyfields.length + " fields are empty: " + emptyfields.toString());
        return false;
    }

    // Verify that the two password fields match
    var match = verifyPassword(fields);
    if(match==false) {
        alert("Passwords do not match.");
        return false;
    }
    saveFieldValues(fields);
    displayConfirmationPage(fields);
});


Du kan hitta min kod här: https://jsfiddle.net/texasswede/frm0u222/

Lycka till!

Tack så hemskt mycket för ett mycket bra och utförligt svar! Min vän (som råkar arbeta med webbutveckling) har även förespråkat att jag bör lära mig jQuery.

Nåväl, en fråga bara. För att använda jQuery så måste jag alltså ladda ned det och så räcker det med att jag placerar den nedladdade filen i samma directory som min .html-fil samt eventuell .css-fil? Det finns många versioner verkar det som (efter att ha läst på jQuerys hemsida). Spelar det någon roll vilken jag väljer eller kan jag köra med till exempel den okomprimerade utvecklarversionen av jQuery (version 3.2.1)?
Citera
2017-06-03, 21:14
  #7
Medlem
Decentralizeds avatar
Citat:
Ursprungligen postat av Brunbevern
Så du vill att det du skriver in ska visas på nästa sida helt enkelt?

För att beta vidare på din kod du har postat så kan man väl göra såhär...

Kod:
function getInfo(){
	const firstname = document.getElementById("firstname").value
	const lastname = document.getElementById("lastname").value
	const adress = document.getElementById("adress").value
	const password1 = document.getElementById("password1").value
	const password2 = document.getElementById("password2").value

        if (firstname === "" || lastname === "" || adress === "" || password1 === "") {
                return;
        }

        if (password1 !== password2) { 
                return;
        }

        const query = "?firstname" = + firstname + "&lastname=" + lastname + "&adress=" + adress;
        const URL = "nysidan.html" + query;

        window.location = URL;
}

edit:
Tidigare skribents lösning är såklart snyggare och mer modulärt gjort, även om JQuery används. Detta var en approach för att visa hur du så enkelt som möjligt kunde göra det.

Tack Brunbevern för ditt svar! Jag borde fattat detta:

Kod:
if (password1 !== password2) {
return
}

Haha! Return gör så att funktionen stoppas, eller hur? I alla fall, är det rimligt att köra både return och även typ document.write("Your passwords does not match")?

Men om jag förstått det rätt så är din implementation mer för att visa hur man kan gå tillväga, men det bästa sättet är kanske att göra det som TexasSwede föreslog, eller vad tycker du?
Citera
2017-06-04, 00:01
  #8
Medlem
Brunbeverns avatar
Citat:
Ursprungligen postat av Decentralized
Haha! Return gör så att funktionen stoppas, eller hur? I alla fall, är det rimligt att köra både return och även typ document.write("Your passwords does not match")?

Testa så får du se.

Jag vet inte vad folk brukar göra generellt, men att ändra något element på sidan som visar ett varningsmeddelande är väl snyggt.

Citat:
Ursprungligen postat av Decentralized
Men om jag förstått det rätt så är din implementation mer för att visa hur man kan gå tillväga, men det bästa sättet är kanske att göra det som TexasSwede föreslog, eller vad tycker du?

Svårt att säga vad som är bästa sätt och mindre bästa sätt. Är ingen front-end utvecklare heller i grunden.

Det jag syftade på däremot är faktum att det är utvecklat för att vara modulärt och enkelt att vidareutveckla. Anta exempelvis att du vill göra en mer komplex verifiering av lösenordet senare. Då lägger du bara till sådan logik i verifyPassword() och den behåller sitt syfte. Lägger man in det löst i koden så blir det godtyckliga ändringar i koden som kan påverka andra saker i koden beroende på hur man gör saker. Inte minst kanske man verifierar lösenord eller andra saker på flera ställen i koden.
Citera
2017-06-04, 01:19
  #9
Medlem
TexasSwedes avatar
Citat:
Ursprungligen postat av Decentralized
Tack så hemskt mycket för ett mycket bra och utförligt svar! Min vän (som råkar arbeta med webbutveckling) har även förespråkat att jag bör lära mig jQuery.

Nåväl, en fråga bara. För att använda jQuery så måste jag alltså ladda ned det och så räcker det med att jag placerar den nedladdade filen i samma directory som min .html-fil samt eventuell .css-fil? Det finns många versioner verkar det som (efter att ha läst på jQuerys hemsida). Spelar det någon roll vilken jag väljer eller kan jag köra med till exempel den okomprimerade utvecklarversionen av jQuery (version 3.2.1)?

Du behöver inte ladda ner något alls. Använd jQuery från ett CDN (Content Delivery Network).
Då behöver du inte bry dig om nerladdning, du länkar bara till .js-filen på en server.
Du kan faktiskt hitta den infoprmatione på Wikipedia: https://en.wikipedia.org/wiki/JQuery#Usage

Om du laddar ner jQuery till din server så lägger du den i en folder som du kan adressera. Unvik att lägga alla filer i en gemensam folder, strukturera istället upp filerna på ett snyggt sätt. Alla Javascript-filer i /js, alla CSS-filer i /css, alla bilder i /image, etc.

Ja, de olika versionerna (code stream) är olika. 1.x är för äldre webbläsare (Internet Explorer 6-8), 2.x och 3.x är enbart för de senaste webbläsarna och en version bakåt. Du ska använda antingen 1.x eller 3.x, vilken version du väljer beror på dina besökare och om du vill stödja äldre webbläsare. Läs mer på http://jquery.com/browser-support/
Citera
2017-06-05, 00:41
  #10
Medlem
Decentralizeds avatar
Citat:
Ursprungligen postat av TexasSwede

D. Visa sida med bekräftelse
Det är enkelt att ersätta en sida med nytt innehåll utan att skicka användaren till en ny sida.
Jag gömmer helt enkelt formuläret och visar istället en div där jag har lite text samt några span-element där jag stoppar in de olika värdena du vill visa för användaren.

Kod:
$("#fld_"+name).html(value);

Är det meningen att jag ska skriva in länken till min nya .html-sida här, eller ska man skriva in id:t av exempelvis en div här? Har kopierat all din kod men ingenting verkar hända när jag klickar på submit.
Citera
2017-06-05, 17:19
  #11
Medlem
TexasSwedes avatar
Citat:
Ursprungligen postat av Decentralized
Är det meningen att jag ska skriva in länken till min nya .html-sida här, eller ska man skriva in id:t av exempelvis en div här? Har kopierat all din kod men ingenting verkar hända när jag klickar på submit.

Nej. Om du tittar pa min kod sa ser funktionen ut sa har:

Kod:
function displayConfirmationPage(fields) {
    $("#entryForm").hide();
    $("#confirmationScreen").show();
    // Loop through object and populate span 
    $.each(fields, function(name,value) {
        // Replace the content of the matching span
        // with the value of the field
        $("#fld_"+name).html(value);
    });
}

Vad koden ovan gor ar att dolja den div dar formularet finns, och visa en annan div:
HTML-kod:
<div id="confirmationScreen">
<h5>
Hej <span id="fld_firstName"></span> <span id="fld_lastName"></span><span id="fld_address"></span> med lösenord <span id="fld_password"></span>.
</h5>
</div>

Sedan gar koden igenom alla varden i fields-objektet (dar du har lagrat vardena som anvandraren matat in) och ersatter innehallet i det element dar namnet matchar.

Om fields-objektet ser ut sa har:
{ "firstName":"Texas", "lastName":"Swede", "address":"Dallas, TX", "password":"bananas" }
sa kommer koden forsoka foljande:
Satt innehallet i det element som har id fld_firstName till "Texas".
Satt innehallet i det element som har id fld_lastName till "Swede".
Satt innehallet i det element som har id fld_addresstill "Dallas, TX".
Satt innehallet i det element som har id fld_passwordtill "bananas".

Om du verkligen vill skicka anvandaren till en ny sida sa maste du skriva en helt annan kod. Men som jag sagt tidigare sa skulle jag foresla att du istallet uppdaterar sidan dar anvandaren befinner sig.
Har du tittat pa min jsFiddle och testat dar? Om inte, ga till https://jsfiddle.net/texasswede/frm0u222/, klicka pa "run" och testa formularet pa hoger sida.
Citera
2017-06-06, 11:07
  #12
Medlem
Decentralizeds avatar
Citat:
Ursprungligen postat av TexasSwede
Nej. Om du tittar pa min kod sa ser funktionen ut sa har:

Kod:
function displayConfirmationPage(fields) {
    $("#entryForm").hide();
    $("#confirmationScreen").show();
    // Loop through object and populate span 
    $.each(fields, function(name,value) {
        // Replace the content of the matching span
        // with the value of the field
        $("#fld_"+name).html(value);
    });
}

Vad koden ovan gor ar att dolja den div dar formularet finns, och visa en annan div:
HTML-kod:
<div id="confirmationScreen">
<h5>
Hej <span id="fld_firstName"></span> <span id="fld_lastName"></span><span id="fld_address"></span> med lösenord <span id="fld_password"></span>.
</h5>
</div>

Sedan gar koden igenom alla varden i fields-objektet (dar du har lagrat vardena som anvandraren matat in) och ersatter innehallet i det element dar namnet matchar.

Om fields-objektet ser ut sa har:
{ "firstName":"Texas", "lastName":"Swede", "address":"Dallas, TX", "password":"bananas" }
sa kommer koden forsoka foljande:
Satt innehallet i det element som har id fld_firstName till "Texas".
Satt innehallet i det element som har id fld_lastName till "Swede".
Satt innehallet i det element som har id fld_addresstill "Dallas, TX".
Satt innehallet i det element som har id fld_passwordtill "bananas".

Om du verkligen vill skicka anvandaren till en ny sida sa maste du skriva en helt annan kod. Men som jag sagt tidigare sa skulle jag foresla att du istallet uppdaterar sidan dar anvandaren befinner sig.
Har du tittat pa min jsFiddle och testat dar? Om inte, ga till https://jsfiddle.net/texasswede/frm0u222/, klicka pa "run" och testa formularet pa hoger sida.

Ok, tack så mycket för ditt svar! Innan jag ställer mer dumma frågor ska jag analysera din jsFiddle och även plugga lite jQuery!
Citera
  • 1
  • 2

Stöd Flashback

Flashback finansieras genom donationer från våra medlemmar och besökare. Det är med hjälp av dig vi kan fortsätta erbjuda en fri samhällsdebatt. Tack för ditt stöd!

Stöd Flashback