Oprettet søn. d. 07. marts 2010 kl. 00:28:14

hollow
hollow (10.280 point. Point ude: 0)
www.olde86.dk

Hente en værdi ind i mit formular felt

Hey jeg sidder med et lille problem med en skole opgave jeg er igang med..

Jeg har en formular som skal kunne regne et resultat ud fra nogle værdier som er fast definerede..

Problemet er at jeg ikke aner hvordan jeg får resultatet vist i et af mine formular felter..

Min kode: "den korte version"

<form id="calc" method="post" action="#" onsumbit="return calc()">

<input type="text" id="value_1" name="value_1"/>
<input type="text" id="value_2" name="value_2"/>
<input type="text" id="result" name="result"/>
<input type="submit" name="calculate" value="Calculate"/>

</form



// Mit Javascript

function calc(){
var value_1 = document.getElementById("value_1");
var value_2 = document.getElementById("value_2");

var result = value_1 * value_2;

////**** Det er så her jeg ikke aner hvad jeg skal gøre..
////**** Jeg vil gerne have den til at smide resultatet tilbage
////**** i det formular felt som jeg har kaldt result??
////**** Lidt hjælp ville være super.. På forhånd tak

}

Skrevet søn. d. 07. marts 2010 kl. 00:31:06| #1

document.getElementById('result').innerHTML = result;
Smides ind efter var result = value_1 * value_2;

Quite simple.

Skrevet søn. d. 07. marts 2010 kl. 00:40:43| #2

Desuden har du også en anden fejl.

var value_1 = document.getElementById("value_1");
var value_2 = document.getElementById("value_2");

Er vist ikke helt det du ønsker. Som det er nu er value_1 og value_2 objekter, som indeholder alt info om de to inputs (CSS oplysninger, indhold m.m.). Så husk lige at kald den ønskede værdi fra objektet.

Skrevet søn. d. 07. marts 2010 kl. 00:41:45| #3

hollow
hollow (10.280 point)
www.olde86.dk
Det ser ikke ud til at virke.. Jeg har skrevet det ind som du referer til, men det ser ikke ud til at virke.. hvis jeg skriver

alert(calc_result); // så får jeg resultatet

document.getElementById('total').innerHTML = calc_result;
// Så får jeg intet resultat.. bare et blankt felt?

Skrevet søn. d. 07. marts 2010 kl. 00:44:03| #4

Se ovenstående kommentar, hvis du ikke allerede har opdaget dén ;)

Skrevet søn. d. 07. marts 2010 kl. 00:48:39| #5

hollow
hollow (10.280 point)
www.olde86.dk
Har prøvet at ændre det til:

var value_1 = document.getElementById("value_1").value;
var value_2 = document.getElementById("value_2").value;

Men det virker stadig ikke..

Kan det have noget at gøre med at jeg har en masse if sætninger som validere min formular i den function jeg kalder?

Skrevet søn. d. 07. marts 2010 kl. 01:03:08| #6

Æh. Prøv at poste hele JS scriptet så.

Skrevet søn. d. 07. marts 2010 kl. 01:14:00| #7

hollow
hollow (10.280 point)
www.olde86.dk
Ret primitivt I know :P

function booking(){
var trip = document.getElementById("trip").value;
var date_day = document.getElementById("date_day").value;
var date_month = document.getElementById("date_month").value;
var date_year = document.getElementById("date_year").value;
var duration = document.getElementById("duration").value;
var travelers = document.getElementById("travelers").value;
var stars = document.getElementById("stars").value;
var rooms = document.getElementById("rooms").value;
   
var trip_alert = "Du skal v\u00E6lge en rejse";
var date_day_alert = "Du skal indtaste en dato";
var date_month_alert = "Du skal v\u00E6lge en m\u00E5ned";
var date_year_alert = "Du skal v\u00E6lge et \u00E5r";
var duration_alert = "Du skal v\u00E6lge rejsens varighed";
var travelers_alert = "Du skal v\u00E6lge et antal rejsende";
var stars_alert = "Du skal v\u00E6lge hvormange stjerner dit hotel skal have";
var rooms_alert = "Du skal v\u00E6lge et antal v\u00E6relser";
   
    if (trip == "0") {
        alert(trip_alert);
        document.getElementById("trip").focus();
        return false;
    } else if (date_day == "0") {
        alert(date_day_alert);
        document.getElementById("date_day").focus();
        return false;
    } else if (date_month == "0") {
        alert(date_month_alert);
        document.getElementById("date_month").focus();
        return false;
    } else if (date_year == "0") {
        alert(date_month_alert);
        document.getElementById("date_year").focus();
        return false;
    } else if (duration == "0") {
        alert(duration_alert);
        document.getElementById("duration").focus();
        return false;
    } else if (travelers == "0") {
        alert(travelers_alert);
        document.getElementById("travelers").focus();
        return false;
    } else if (stars == "0") {
        alert(stars_alert);
        document.getElementById("stars").focus();
        return false;
    } else if (rooms == "0") {
        alert(roomsalert);
        document.getElementById("rooms").focus();
        return false;
    } else {
       
var base = trip;
var multiply_duration = duration;
var multiply_travelers = travelers;
var base_hotel = stars;
var multiply_rooms = rooms;
       
var calc_1 = base * multiply_duration;
var calc_2 = calc_1 * multiply_travelers;
var calc_3 = base_hotel * multiply_rooms;
var calc_4 = calc_3 * multiply_duration;
var calc_result = calc_2 + calc_4;

       
       
// Mit alternativ til feedback fra min pris udregner
var message = "din rejse koster ";
var message2 = ",-";
alert(message + calc_result + message2);
return false;
    }
}

Skrevet søn. d. 07. marts 2010 kl. 01:18:39| #8

hollow
hollow (10.280 point)
www.olde86.dk
Her kommer så min HTML form..

<form id="booking" method="post" action="#" onsubmit="return booking()">
                       
<div class="form_input">
<label>V&aelig;lg din rejse:</label><br/>
<select name="trip" size="1" id="trip">
<option value="0">V&aelig;lg venligst</option>
<option value="5000">Rejse 1 - Eventyret</option>
<option value="9000">Rejse 2 - Kultur oplevelsen</option>
<option value="12000">Rejse 3 - Den fulde oplevelse</option>
</select>
</div><!-- form_input END -->

                     
<div class="form_input">
<label>Afrejse dato:</label><br/>
<input type="text" id="date_day" name="date_day" value="<?=date("d")?>" size="2" maxlength="2"/>
                             
<select name="date_month" size="1" id="date_month">
<option>Januar</option>
<option>Februar</option>
<option>Marts</option>
<option>April</option>
<option>Maj</option>
<option>Juni</option>
<option>Juli</option>
<option>August</option>
<option>September</option>
<option>Oktober</option>
<option>November</option>
<option>December</option>
</select>

                             
<select name="date_year" size="1" id="date_year">
<option><?=date("Y")?></option>
<option><?=date("Y"+1)?></option>
<option><?=date("Y"+2)?></option>
<option><?=date("Y"+3)?></option>
</select>
                             
</div><!-- form_input END -->
                         
<div class="form_input">
<label>Hvorl&aelig;nge &oslash;nsker du at v&aelig;re afsted:</label><br/>
<select name="duration" size="1" id="duration">
<option value="0">V&aelig;lg venligst</option>
<option value="1">1 uge</option>
<option value="2">2 uger</option>
<option value="3">3 uger</option>
<option value="4">4 uger</option>
<option value="5">5 uger</option>
<option value="6">6 uger</option>
<option value="7">7 uger</option>
<option value="8">8 uger</option>
<option value="9">9 uger</option>
<option value="10">10 uger</option>
<option value="11">11 uger</option>
<option value="12">12 uger</option>
</select>
</div><!-- form_input END -->
                         
<div class="form_input">
<label>Antal personer:</label><br/>
<select name="travelers" size="1" id="travelers">
<option value="0">V&aelig;lg venligst</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div><!-- form_input END -->
                           
                         
<div class="form_input">
<label>Antal stjerner:</label><br/>
<select name="stars" size="1" id="stars">
<option value="0">V&aelig;lg venligst</option>
<option value="1500">3 stjerner</option>
<option value="2000">4 stjerner</option>
<option value="2500">5 stjerner</option>
</select> 
</div><!-- form_input END -->

<div class="form_input">
<label>Antal v&aelig;relser:</label><br/>
<select name="rooms" size="1" id="rooms">
<option value="0">V&aelig;lg venligst</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div><!-- form_input END -->

<div class="form_input">
<input type="submit" name="calculate" id="calculate" value="Calculate"/>
<input type="reset" value="Reset" />
</div><!-- form_input END -->

</form>

Skrevet søn. d. 07. marts 2010 kl. 01:20:05| #9

hollow
hollow (10.280 point)
www.olde86.dk
Hvis du vil se det in action så prøv det her link

http://olde86.dk/ (...)

Skrevet søn. d. 07. marts 2010 kl. 01:26:51| #10

Øh. Virker det ikke som det skal?

Skrevet søn. d. 07. marts 2010 kl. 01:43:36| #11

hollow
hollow (10.280 point)
www.olde86.dk
Nu har jeg lige uploaded igen :) Hvis du vil kan du jo lige se igen.. jeg får ikke den værdi i Feltet som jeg gerne vil have..

Skrevet søn. d. 07. marts 2010 kl. 01:58:38| #12

hollow
hollow (10.280 point)
www.olde86.dk
Tror sgu bare jeg dropper det.. Jeg laver bare en alert box istedet og så må man ski nøjs :P Men ellers tak for hjælpen... du kan evt smide svar så får du for ulejligheden :)

Skrevet søn. d. 07. marts 2010 kl. 12:53:25| #13

intenz
intenz (43.900 point)
underenplov.dk
Hvis det her ikke virker

document.getElementById('total').innerHTML = calc_result;

er det fordi du enten ikke har et felt med id=total (jeg kan heller ikke se det i din html kode) eller fordi calc_result ikke noget indhold (hvilket det ser ud som om det gør i din alert).

Har du tilføjet det tag hvor total skal vises?
f.eks.
<div id="total"></div>

Skrevet søn. d. 07. marts 2010 kl. 16:02:11| #14

Og så tag også lige en kigger i din JS fil:

{
       
        var base = trip;
        var multiply_duration = duration;
        var multiply_travelers = travelers;
        var base_hotel = stars;
        var multiply_rooms = rooms;
       
        var calc_1 = base * multiply_duration;
        var calc_2 = calc_1 * multiply_travelers;
        var calc_3 = base_hotel * multiply_rooms;
        var calc_4 = calc_3 * multiply_duration;
        var calc_result = calc_2 + calc_4;
       
        var message = "din rejse koster ";
        var message2 = ",-";
        alert(message + calc_result + message2);
        return false;
    }

Du beder den jo ikke om at gøre andet end en alert. Men som intenz skriver. Hvis du skriver document.getElementById('total').innerHTML = calc_result; i din JS fil samt tilføjer <div id='total'></div> i din html kode, vil det virke. Det vil i hvert fald være uden fejl.

Skrevet tir. d. 22. juni 2010 kl. 16:00:49| #15

hollow
hollow (10.280 point)
www.olde86.dk
nice smid svar.. sorry forsinkelsen.. mener jeg fik det til at virke selv

Skrevet tir. d. 22. juni 2010 kl. 17:57:52| #16


Skriv et indlæg




Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] [img]link til billede[/img]
Web- og emailadresser omdannes automatisk til links

Log ind

   

   

Seneste spørgsmål

Tabindex!

Oprettet den 11. februar 2012 kl. 11.37
thomasfricke giver 30 point for svar | Giv et svar »

skal frem brugernavn ned og sige om den har eller ej

Oprettet den 11. februar 2012 kl. 02.44
tobrukDk giver 20 point for svar | Giv et svar »

Muligvis script-konfllikt i jquery. Min slider vises...

Oprettet den 9. februar 2012 kl. 23.00
Peterjakobsen giver 30 point for svar | Giv et svar »

Seneste guides

Installer win 7
Den gode bruger


   




Tips & Tricks fra PC World

Teaser billede

Her er fem sjove danske websider du skal kende

Trænger dine lattermuskler til en omgang fitness på dansk? Vi viser vej til fem websider fyldt med humor og vanvittig satire.


Anmeldelser fra PC World

Teaser billede

Test: Denne super-tablet er iPads hårdeste konkurrent

Eee Pad Transformer Prime er frygtindgydende med sin quadcore processor og evne til at trylle sig om til bærbar. Apple bør kigge i bagspejlet, for Asus' tablet-pc kommer buldrende - og gør det...


Seneste blogindlæg

Teaser billede

Tvangslukke spørgsmål: Hvad er den bedste løsning?

Hej Vi har mange åbne spørgsmål på Eksperten. Vi ville gerne tvangslukke dem - så et spørgsmål efter f.eks. 6 måneder lukkes. Men der er et par uklarheder som ville være gode at få lidt input til:...


Nyheder fra PC World

Teaser billede

Nu kan du snart hente Windows 8

Den nye offentlige betaversion af Windows 8 er klar i denne måned.


Nyheder fra Computerworld

Teaser billede

Måske snart slut med Androids helt store problem

Android-platformen har længe været plaget af et særligt problem. Men måske er problemet nu ved at være elimineret.


Kurser
Samarbejdspartnere

Udgiver · © 2012 IDG Danmark A/S · Hørkær 18 · 2730 Herlev · Tlf.: 77 300 300 · Fax: 77 300 301 · Brug af personoplysninger