Avatar billede circadian Nybegynder
08. november 2009 - 02:24 Der er 8 kommentarer og
1 løsning

Opdatere felt / kopiere-sætte ind

Hej,

Jeg er løbet ind i et problem.

Jeg har et felt med flg. kode:

<input type="text" id="BI2" onClick="SelectAll('BI2');" style="border: none; width:900px" class="font" class="gul" value="http://www..."/>

I head har jeg:

<script type="text/javascript">
function SelectAll(id)
{
document.getElementById(id).focus();
document.getElementById(id).select();
}
</script>

----

Koden viser et felt, med "http://www..." sat ind som standard. Man kan så rette i det felt som man vil. Desuden er det muligt at highlighte hele feltets indhold vha. den script-kode (det er dog uden for sammenhæng her).

Jeg har behov for at det, man skriver i dette felt, skal kopieres til et andet, tilsvarende felt (dog et tomt et). Altså kopiere fra det man selv skrev noget i, og så kopiere det ind i et andet felt, der kommer længere nede i koden.

Er det muligt?
Avatar billede Slettet bruger
08. november 2009 - 09:16 #1
Det kan man sagtens: form.feltX.value = form.B12.value

Kræver blot at du benytter name="B12" i stedet for id="B12" (evt. begge dele)

Men hvornår skal det ske ?
- onclick bliver jo ikke nødvendigvis aktiveret...
08. november 2009 - 10:50 #2
circadian (og T4NK3R):

Jeg proever at laere mig selv php/css/mysql og paa det sidste ogsaa javascript.  Jeg har fundet at det giver god oevelse at laese spoergsmaalene paa eksperten og proeve at arbejde mig frem til en loesning ved hjaelp af tutorials og god gammeldags "trial and error".  Men det tager tid.  Saa mens jeg arbejdede med dette spoergsmaal har T4NK3R postet et indlaeg.  Det er ikke for at ignorere dette indlaeg, men jeg vil gerne vise hvad jeg er naaet frem til.  Hvis det virker saa ved jeg at jeg har laert noget.  Hvis ikke saa kan jeg laere af det ogsaa.

For test formaal har jeg lavet denne hjemmeside:  http://christianjorgensen.be/circadian.php.  Der har jeg, udover den kode som du gav i dit spoergsmaal, lavet tre elementer, en form input, en div, og en td i en table og saa en ny funktion: copyText.  Jeg gaar saa ud fra at den tekst du vil have kopieret skal kopieres efter at du har skrevet den og forladt feltet, det vil sige onchange.  Men det virker ogsaa med andre events saasom onblur (jeg har ikke haft tid til at teste med andre events.)

Koden til hjemmesiden foelger nedenfor.  Proev at aabne siden, skriv en text hvor der staar "http://www..." og klik saa nedenfor det felt.  saa kopieres teksten til de andre elementer.

Jeg fandt ud af at for at kopiere tekst til en form-input bruger man "document.getElementById('inputid').value=y" hvorimod for at kopiere tekst til td eller div maa man bruge "document.getElementById('divid').innerHTML=y"


Har jeg forstaaet dig rigtigt, var det saadan noget du var ude efter.  Kommentarer meget gerne.

Her er koden:

<html>
<head>
<script type="text/javascript">

function SelectAll(id)
{
document.getElementById(id).focus();
document.getElementById(id).select();
}

function copyText(id)
{
var y=document.getElementById(id).value
document.getElementById('divid').innerHTML=y
document.getElementById('tdid').innerHTML=y
document.getElementById('inputid').value=y
}

</script>
</head>
<body>

<input type="text" id="BI2" onClick="SelectAll('BI2');"  onchange="copyText(this.id)" style="border: none; width:900px" class="font" class="gul" value="http://www..."/>

Enter your name:
<input type="text" id="inputid"
onchange="copyText(this.id)">
<div id="divid">text</div>
<table><tr><td id="tdid">input</td></tr></table>

</body>
</html>
Avatar billede circadian Nybegynder
08. november 2009 - 12:17 #3
Hej Christian, mange tak!

Det virker perfekt på din side, og det er sådan det skal være.

Jeg har prøvet at implementere det i min egen kode, men det vil ikke virke.

Min head ser ud som din, så paster ikke her. Min kode er:

------------
1) Indsæt link her:
<table cellpadding="5" cellspacing="0" class="gul" style="width: 100%">
<tr>
  <td>
  <p class="tab">
    <input type="text" id="BI1" onClick="SelectAll('BI1');" onchange="copyText(this.id)" style="border: none; width:900px" class="font" class="gul"
    value="http://www..."/>
  </p> 
  </td>
</tr>
</table>
<br/>

1.1) Kopieret ind her:
<table cellpadding="5" cellspacing="0" class="gul" style="width: 100%">
<tr>
  <td>
  <p class="tab">
    <input type="text" id="inputid"
onchange="copyText(this.id)">
  </p> 
  </td>
</tr>
</table>
<br/>
-------------

(De to felter skal faktisk være 100% ens udseendemæssigt, men det kan jeg jo altid ændre i stylen og klasserne.
Klasserne "gul" og "font" justerer såmænd bare farven og fonten).




T4NK3R - forstod ikke særlig meget af dit svar :)
08. november 2009 - 13:17 #4
Det var ikke meget forandring der skulle til.  Jeg fjernede de overfloedige linier i function copyText og i din input felt hvor der skulle kopieres til fjernede jeg "onchange="copyText(this.id).  Det sidste vil jeg gaette paa var problemet fordi feltet starter med en tom tekst som den saa kopierer tilbage "onchange."

Hvis du vil have de to tables til at se ens ud skal du nok fjerne "border: none" i stylen i den foerste table.

Her er koden.  For test formaal lavede jeg hjemmesiden http://christianjorgensen.be/circadian1.php.  Haaber det stadig virker naar du proever det af.

<html>
<head>
<script type="text/javascript">

function SelectAll(id)
{
document.getElementById(id).focus();
document.getElementById(id).select();
}

function copyText(id)
{
  var y=document.getElementById(id).value
  document.getElementById('inputid').value=y
}

</script>
</head>
<body>

<table cellpadding="5" cellspacing="0" class="gul" style="width: 100%">
  <tr><td><p class="tab">
    <input type="text" id="BI1" onClick="SelectAll('BI1');" onchange="copyText(this.id)" style="border: none; width:900px" class="font" class="gul"
    value="http://www..."/>
  </p></td></tr>
</table>
<br/><br/>

<table cellpadding="5" cellspacing="0" class="gul" style="width: 100%">
<tr>
  <td>
  <p class="tab">
    <input type="text" id="inputid">
  </p> 
  </td>
</tr>
</table>
<br/>
</body>
</html>
Avatar billede circadian Nybegynder
08. november 2009 - 14:09 #5
Smukt :) - det virker!

En sidste ting; hvordan får jeg det til at virke, når der er flere af disse slags "tilfælde" i koden? Altså der er flere bokse, der skal kopieres bestemte steder hen.

Lige nu har jeg prøvet følgende:

------------
<head>
    function SelectAll(id)
    {
    document.getElementById(id).focus();
    document.getElementById(id).select();
    }

    function copyText(id)
    {
    var y=document.getElementById(id).value
    var z=document.getElementById(id).value
    document.getElementById('BI1c').value=y
    document.getElementById('BI2c').value=z
    }
</head>

<body>
1) Indsæt link 1 her:
<table cellpadding="5" cellspacing="0" class="gul" style="width: 100%">
<tr>
  <td>
  <p class="tab">
    <input type="text" id="BI1" onClick="SelectAll('BI1');" onchange="copyText(this.id)" style="border: none; width:900px" class="font" class="gul"
    value="http://www..."/>
  </p> 
  </td>
</tr>
</table>
<br/>

1.1) Kopieret ind her:
<table cellpadding="5" cellspacing="0" class="gul" style="width: 100%">
<tr>
  <td>
  <p class="tab">
    <input type="text" id="BI1c" onClick="SelectAll('BI1c');" style="border: none; width:900px" class="font" class="gul"/>
  </p> 
  </td>
</tr>
</table>
<br/>

2) Indsæt link 2 her:
<table cellpadding="5" cellspacing="0" class="gul" style="width: 100%">
<tr>
  <td>
  <p class="tab">
    <input type="text" id="BI2" onClick="SelectAll('BI2');" onchange="copyText(this.id)" style="border: none; width:900px" class="font" class="gul"
    value="http://www..."/>
  </p> 
  </td>
</tr>
</table>
<br/>

2.1) Kopieret ind her:
<table cellpadding="5" cellspacing="0" class="gul" style="width: 100%">
<tr>
  <td>
  <p class="tab">
    <input type="text" id="BI2c" onClick="SelectAll('BI2c');" style="border: none; width:900px" class="font" class="gul"/>
  </p> 
  </td>
</tr>
</table>
<br/>
</body>
----------

Det den gør nu, er at ændre BÅDE felt BI1c og BI2c hver gang, jeg ændrer i enten BI1 eller BI2.

BI1c skal være kopien af BI1, og BI2c skal være kopien af BI2.

Et eller andet sted tror jeg, at det er dette der er galt:
    var y=document.getElementById(id).value
    var z=document.getElementById(id).value

For der står jo y=z. Kan bare ikke lige se, hvordan jeg kan ændre det (er ikke en script-haj).
08. november 2009 - 22:28 #6
Det skal jeg kikke paa i morgen tidlig (for meget at drikke her til aften.)  MEN - det maa vaere paa betingelse af at vi saa slutter det her spoergsmaal.  Du stilliede et spoergsmaal og lovede 100 points.  Det spoergsmaal mener jeg at jeg har besvaret, og som "kvittering" vil jeg gerne se pointene.  Det er muligt at du vil finde flere problemer eftersom du udvikler dit projekt, men ideen er at du opretter nye spoergsmaal for disse.  Paa den maade faar du opmaerksomheden fra alle ekspert-medlemmerne hvoraf nogen maaske har bedre ideere end mig.

Med andre ord - jeg kikker paa det ovenstaaende i morgen, men saa vil jeg gerne at vi lukker det her spoergsmaal.  Er det i orden?
Avatar billede circadian Nybegynder
08. november 2009 - 22:42 #7
Helt sikkert - skal huske det til en anden gang.
Tak.
09. november 2009 - 05:38 #8
Hvis du i hvert felt hvorfra du vil kopiere kender id paa det felt hvortil du vil kopiere saa er det smarteste nok at lave funktionen med to parametre, sourceid og targetid.  I feltet hvorfra du vil kopiere siger du saa: 'onchange="copyText(this.id, 'BI1c')" ' (hvis det er til BI1c du vil kopiere.

By the way, jeg synes ogsaa det er smartere at sige: 'onclick="SelectAll(this.id)" ' i stedet for: 'onclick="SelectAll('BI1')" ' fordi du saa kan bruge den samme kode uanset fra hvilket felt du vil kopiere.

Hjemmesiden der demonstrerer det er http://christianjorgensen.be/circadian2.php og koden er her:

<html>
<head>
<script type="text/javascript">

function SelectAll(id)
{
document.getElementById(id).focus();
document.getElementById(id).select();
}

function copyText(sourceid, targetid)
{
  var y=document.getElementById(sourceid).value
  document.getElementById(targetid).value=y
}

</script>
</head>
<body>

<table cellpadding="5" cellspacing="0" class="gul" style="width: 100%">
  <tr><td><p class="tab">
    <input type="text" id="BI1" onClick="SelectAll(this.id);" onchange="copyText(this.id, 'BI1c')" style="border: none; width:900px" class="font" class="gul"
    value="http://www..."/>
  </p></td></tr>
</table>
<br/><br/>

<table cellpadding="5" cellspacing="0" class="gul" style="width: 100%">
<tr>
  <td>
  <p class="tab">
    <input type="text" id="BI1c" onClick="SelectAll('BI1c');" style="border: none; width:900px" class="font" class="gul"/>
  </p> 
  </td>
</tr>
</table>
<br/><br/>

<table cellpadding="5" cellspacing="0" class="gul" style="width: 100%">
<tr>
  <td>
  <p class="tab">
    <input type="text" id="BI2" onClick="SelectAll(this.id);" onchange="copyText(this.id, 'BI2c')" style="border: none; width:900px" class="font" class="gul"
    value="http://www..."/>
  </p> 
  </td>
</tr>
</table>
<br/><br/>

<table cellpadding="5" cellspacing="0" class="gul" style="width: 100%">
<tr>
  <td>
  <p class="tab">
    <input type="text" id="BI2c" onClick="SelectAll('BI2c');" style="border: none; width:900px" class="font" class="gul"/>
  </p> 
  </td>
</tr>
</table>
<br/>
</body>
</html>
Avatar billede circadian Nybegynder
09. november 2009 - 09:10 #9
Virker perfekt, mange tak skal du have :)
Avatar billede 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.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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