CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

steen_hansen Forsker

04. juni 2015 - 16:56 Der er 5 kommentarer og
1 løsning

Overfør vædi fra <select> til <textbox>

Jeg har brug for, at værdi fra selectbox overføres til textbox, forstået på den måde, at når værdi fra selct er foretaget, udskrives det automatisk i textbox med det samme:

<body onload="document.frmSendMail.ChooseCustomer.focus();"

<form name="frmSendMail">

<select name="ChooseCustomer" id="ChooseCustomer" tabindex="1">
<option>Foretag valg</option>
<option value="mailaddress1@domain1.dk">Kunde1</option>
<option value="mailaddress2@domain2.dk">Kunde2</option>
<option value="mailaddress3@domain3.dk">Kunde3</option>
<option value="mailaddress4@domain4.dk">Kunde4</option>
<option value="Andet">Andet</option>
</select>

<input type="textbox" name="chosenCustomer" id="chosenCustomer" value="......?">
<input type="textbox" name="ditten1" id="datten1" value="SomethingGood1" tabindex="2">
<input type="textbox" name="ditten2" id="datten2" value="SomethingGood2" tabindex="3">
Osv osv
</form>

</body>

Når man vælger "Kunde 1", "Kunde 2", "Kunde 3" eller "Kunde 4", skal den respektive e-mailadresse automatisk udskrives i textbox "chosenCustomer" med det samme. Når det er gjort, flyttes fokus til næste tabindex, som i det viste eksemperl er tabindex 2.

Hvis "Andet" er valgt, er det meningen, at "chosenCustomer" får fokus, er blank, og man indtaster så den ny e-mailadresse manuelt (mailadressen kan så altid tilføjes til selectboksen "ChooseCustomer" på et senere tidspunkt).

Sammenfattet:

1. "Kunde 2" vælges i selectbox. "mailaddress2@domain2.dk" bliver automatisk skrevet ud textbox "chosenCustomer". fokus flyttes til næste tabindex. (tabindex 2)

2. "Andet" vælges. "chosenCustomer" vil være blank, og "chosenCustomer" har fokus, så man manuelt kan indtaste den nye e-mailadresse. Ved tryk på TAB, får næste tabindex fokus. I dette tilfælde tabindex 2, så man kan fortsætte og færdiggøre udfyldelsen af sin formular.

Håber på hurtig hjælp.

Synes godt om

bas Forsker

04. juni 2015 - 17:23 #1

Jeg tænker lige, om ikke der der skal noget PHP ind over?
Det indtastede kan så hentes enten fra en database eller fra en tekst-fil.

Det er godt nok længe siden jeg har rodet med PHP og Javascript.

Synes godt om

steen_hansen Forsker

05. juni 2015 - 07:14 #2

Hej bas. Nej, der skal ikke PHP ind over, det er et JavaScript, der skal til. Desuden benytter jeg ASP :)

Synes godt om

bas Forsker

05. juni 2015 - 08:13 #3

Hej

Nå ok ;-)
Er det mon noget i stil med funktionen på nedenstående side
du er ude efter?

http://stackoverflow.com/questions/15447889/display-html-form-values-in-same-page-after-submit

Synes godt om

olsensweb.dk Ekspert

05. juni 2015 - 17:12 #4

er det noget ala dette du søger ??


<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
    <title></title>

    <style type="text/css">
    </style>
    <script type="text/javascript">    
    function CustomerChange(obj){    
        var val = obj.value;
        if(val == "Andet"){
            document.getElementById("chosenCustomer").value="";    
            document.getElementById("chosenCustomer").focus();
        }
        else{        
            document.getElementById("chosenCustomer").value=val;    
            document.getElementById("datten1").focus();
        }
    }    
    </script>
</head>
<body onload="document.frmSendMail.ChooseCustomer.focus();">

<form name="frmSendMail">

    <select name="ChooseCustomer" id="ChooseCustomer" tabindex="1" onchange="CustomerChange(this)">
        <option>Foretag valg</option>
        <option value="mailaddress1@domain1.dk">Kunde1</option>
        <option value="mailaddress2@domain2.dk">Kunde2</option>
        <option value="mailaddress3@domain3.dk">Kunde3</option>
        <option value="mailaddress4@domain4.dk">Kunde4</option>
        <option value="Andet">Andet</option>
    </select>

    <input type="textbox" name="chosenCustomer" id="chosenCustomer" value="......?">
    <input type="textbox" name="ditten1" id="datten1" value="SomethingGood1" tabindex="2">
    <input type="textbox" name="ditten2" id="datten2" value="SomethingGood2" tabindex="3">
    Osv osv
</form>

</body>
</html>

Synes godt om

steen_hansen Forsker

06. juni 2015 - 19:35 #5

ronols, 1000 tak. Lægger du et svar? :)

bas, du skal også have tak. Det er meget bugbare oplysninger du gav mig. Bare ikke i denne sammenhæng :)

Hvis nogen af Jer har mod på det, er der et nyt spørgsmål:http://www.eksperten.dk/spm/1004180

Synes godt om

olsensweb.dk Ekspert

07. juni 2015 - 15:49 #6

du får et svar her.

med ref til min code i #4, hvad sker der hvis man først vælger feks andet og derefter "Foretag valg" ??, det bør man også teste på.
man kunne lave en if sætning mere, men det nemmeste er at lave en switch.
jeg ville lave functionen CustomerChange om til dette:

     
function CustomerChange(obj){    
    var val = obj.value;
    switch(val){
        case "Foretag valg":
            document.getElementById("chosenCustomer").value="......?";                        
        break;
        case "Andet":
            document.getElementById("chosenCustomer").value="";    
            document.getElementById("chosenCustomer").focus();
        break;
        default:
            document.getElementById("chosenCustomer").value=val;    
            document.getElementById("datten1").focus();
        break;    
    }
}

nb: <input type="textbox" skal rettes til <input type="text"

du kunne også overveje at anvende en EventListener, så din HTML code bliver mere ren

     
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
    <title></title>

    <style type="text/css">
    </style>
    <script type="text/javascript">
    function CustomerChange(obj){    
        var val = obj.value;
        switch(val){
            case "Foretag valg":
            document.getElementById("chosenCustomer").value="......?";                        
            break;
            case "Andet":
                document.getElementById("chosenCustomer").value="";    
                document.getElementById("chosenCustomer").focus();
            break;
            default:
                document.getElementById("chosenCustomer").value=val;    
                document.getElementById("datten1").focus();
            break;        
        }
    }    
</script>
</head>
<body onload="document.frmSendMail.ChooseCustomer.focus();">
<form name="frmSendMail">
    <select name="ChooseCustomer" id="ChooseCustomer" tabindex="1">
        <option>Foretag valg</option>
        <option value="mailaddress1@domain1.dk">Kunde1</option>
        <option value="mailaddress2@domain2.dk">Kunde2</option>
        <option value="mailaddress3@domain3.dk">Kunde3</option>
        <option value="mailaddress4@domain4.dk">Kunde4</option>
        <option value="Andet">Andet</option>
    </select>
    <input type="text" name="chosenCustomer" id="chosenCustomer" value="......?">
    <input type="text" name="ditten1" id="datten1" value="SomethingGood1" tabindex="2">
    <input type="text" name="ditten2" id="datten2" value="SomethingGood2" tabindex="3">
    Osv osv
</form>
<script type="text/javascript">
    document.getElementById("ChooseCustomer").addEventListener("change", function(){CustomerChange(this); }); 
    // onchange="CustomerChange(this)"
</script>
</body>
</html>

hvis du taler jquery ´sk, kunne det se sådan ud


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#ChooseCustomer").change(function () {
                    var val = $("#ChooseCustomer").val();
                    switch (val) {
                        case "Foretag valg":
                            $("#chosenCustomer").val("......?");                        
                            break;
                        case "Andet":
                            $("#chosenCustomer").val("");
                            $("#chosenCustomer").focus();
                            break;
                        default:
                            $("#chosenCustomer").val(val);
                            $("#datten1").focus();
                            break;
                    }
                })
            });
        </script>
    </head>
    <body onload="document.frmSendMail.ChooseCustomer.focus();">
        <form name="frmSendMail">
            <select name="ChooseCustomer" id="ChooseCustomer" tabindex="1">
                <option>Foretag valg</option>
                <option value="mailaddress1@domain1.dk">Kunde1</option>
                <option value="mailaddress2@domain2.dk">Kunde2</option>
                <option value="mailaddress3@domain3.dk">Kunde3</option>
                <option value="mailaddress4@domain4.dk">Kunde4</option>
                <option value="Andet">Andet</option>
            </select>
            <input type="text" name="chosenCustomer" id="chosenCustomer" value="......?">
            <input type="text" name="ditten1" id="datten1" value="SomethingGood1" tabindex="2">
            <input type="text" name="ditten2" id="datten2" value="SomethingGood2" tabindex="3">
            Osv osv
        </form>
    </body>
</html>

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Returner ikke alt Af ingeman i JavaScript	13	26/06/202414:40	01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript	4	24/06/202422:50	26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript	6	04/06/202416:23	05/06/202414:23
Ajax - indlæs webside og derefter hente data Af nemlig i JavaScript	4	21/05/202417:19	22/06/202422:07
Disable button efter 1. klik Af nemlig i JavaScript	2	05/05/202415:37	05/05/202416:25

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS