Textareas uitlezen

Pieter Arntz · 24 dec 2007

Iemand enig idee hoe ik deze textareas kan uitlezen?
(Onderstaand script werkt alleen in IE, sorry)

http://www.pieter-arntz.info/infodo...ode=5953&plaatsnaam=Reuver&opties=4&havens=15

Ik dacht met document.getElementById() maar op de één of andere manier werkt dat niet. De eerste drie worden als null uitgelezen en de laatste als [object]

Alvast bedankt voor enige nuttige tips.

Tha Devil · 24 dec 2007

en het textarea een naam geven en dan vervolgens {naam}.value?

Pieter Arntz · 24 dec 2007

Hoi Tha Devil,

Misschien begrijp ik je verkeerd, maar in principe mag het toch geen verschil maken of ik id=antw gebruik of naam=antw ?

Tha Devil · 24 dec 2007

Zo veel verstand van JS heb ik nou ook weer niet maar ik denk dat je inderdaad gelijk hebt.

Ik heb even een simpel sciptje gemaakt welke het wel doet, waarschijnlijk kun je het gebruik zo implementeren

HTML:

<html>
<head>
<script type="text/javascript">
function getValue()
{
var x=document.getElementById("myHeader");
alert(x.innerHTML);
}
</script>
</head>
<body>
<form>
<textarea id="myHeader">extra</textarea>
<input type="button" value="Klik" onclick="getValue()"/>
</body>
</html>

Pieter Arntz · 24 dec 2007

Ik heb onze scripts als volgt gecombineerd:

PHP:

<script type="text/javascript">
function invullen(){
        var x=document.getElementById("whvn");
        alert(x.innerHTML);

//        whvn = document.getElementById('whvn');
//        antw = document.getElementById('antw');
//        adam = document.getElementById('adam');
//        mrdk = document.getElementById('mrdk');
//        open('afstandenoud.php?opties=4&havens=15&postcode=5953&plaatsnaam=Reuver&Waalhaven=' + whvn + '&Antwerpen=' + antw + '&Moerdijk=' + mrdk + '&Amsterdam=' + adam + '');
  }
</script>

Ik neem aan dat dat de bedoeling was?
Bij de onClick krijg ik nu echter deze foutmelding:
Line 229 Char 9 Object required.
Regel 229 is de alert(x.innerHTML);

Is er geen manier om een textarea uit te lezen onafhankelijk van zijn naam?
Ik heb al document.getElementById(1); geprobeerd en om een formulier te bouwen met de innerHTML

Kom geen steek verder.

PS net geprobeerd met var x=document.getElementById("antw");
en dan krijg ik wel een message box (leeg)

Tha Devil · 24 dec 2007

Hmm oke, ik was in de veronderstelling dat je ook daadwerkelijk <textarea> gebruikt...

Je schijnt dus gewoon <input type="text" /> (En niet textarea) te gebruiken.

Dan zul je dus in plaats van .innerHTML .value moeten gebruiken.

HTML:

<html>
<head>
<script type="text/javascript">
function getValue()
{
var x=document.getElementById("myHeader");
alert(x.value);
}
</script>
</head>
<body>

<form>
<input type="text" id="myHeader" value="Blaat" />
<input type="submit" onclick="getValue()">

</body>
</html>

Pieter Arntz · 24 dec 2007

Zoals dit?

http://www.pieter-arntz.info/infodo...ode=5953&plaatsnaam=Reuver&opties=4&havens=15

PHP:

function invullen(){
        var x= document.getElementById("antw");
        alert(x.value);
}

html += '<input type=text id=antw size=6 value=' + Math.floor(kms4/1000) + '>'

Tha Devil · 24 dec 2007

Hmm Safari here

Live voorbeeld heb ik niet zoveel aan behalve de bron.

De manier van implementeren klopt inderdaad, zo staat het ook in het voorbeeldje van mij.
Ik vermoed dat hij het niet doet aangezien ik aan neem dat jij het al getest hebt.

Hmm blijkbaar doet hij het toch wel, als ik nu op "Verstuur" klik dan krijg ik een alert met 208. Is dat niet het resultaat dat je wilde?

Pieter Arntz · 24 dec 2007

Jawel. Hij leest de eerste box uit, maar daarna krijg ik weer net zo hard een Object required foutmelding als ik ook de tweede probeer te lezen.

Ik ga nog eens die Google Maps API doorspitten. Volgens mij zit daar de oorzaak van dit raadsel.
In ieder geval bedankt voor het meedenken. :thumb:

Tha Devil · 25 dec 2007

Vreemd script trouwens, als ik hem in een nieuw venster open dan krijg ik een f'ed up layout en geen routes. Laad ik hem echter in een nieuw tabblad dan laad hij wel de routes...

Ik zal zelf ook wat proberen aangezien ik toevalligerwijs zelf ook sinds een paar dagen met de Google Maps API aan het experimenteren ben

Egel · 25 dec 2007

Lukt dit niet?

PHP:

function invullen() {
 whvn = document.getElementById('whvn').value;
 antw = document.getElementById('antw').value;
 adam = document.getElementById('adam').value;
 mrdk = document.getElementById('mrdk').value;
 window.open('afstandenoud.php?opties=4&havens=15&postcode=5953&plaatsnaam=Reuver&Waalhaven=' + whvn + '&Antwerpen=' + antw + '&Moerdijk=' + mrdk + '&Amsterdam=' + adam,'','');
 };

Maar ik denk dat het hiet misgaat:

PHP:

<div id="div1"><script type="text/javascript">
document.all.div1.innerHTML = '<LABEL for="Waalhaven">Waalhaven</LABEL>';
</script></div>

document.all ipv document.getElementById(), je roept het script aan voordat de div gesloten is en het script wil zichzelf vervangen met de .innerHTML. Zo is beter:

PHP:

<div id="div1"></div>
<script type="text/javascript"> 
 document.getElementById('div1').innerHTML = '<LABEL for="Waalhaven">Waalhaven</LABEL>';
</script>

Maar waarom niet meteen:

PHP:

<div id="div1">
<LABEL for="Waalhaven">Waalhaven</LABEL>
</div>

?

Vr.Gr. Egel.

Tha Devil · 25 dec 2007

Dat heb ik bij de mijne ook al geprobeerd maar dan werkt het nog niet...

Ik heb ook de kaarten via een load()-functie geladen, dan verschijnen ze wel gewoon wanneer ik een venster open en heb ik dus geen f'ed up indeling

Probleem is dan wel dat ik geen input-velden onderaan krijg. Daar ben ik nu dus wat mee bezig, ook een veld gewoon in HTML er neer zetten en dan zorgen dat de waardes er in komen krijg ik ook niet voor elkaar...

Pieter Arntz · 25 dec 2007

Na de wijzigingen voorgesteld door Egel :thumb:

http://www.pieter-arntz.info/infodo...ode=5953&plaatsnaam=Reuver&opties=4&havens=15

Wat onnodige code weggewerkt, maar nog steeds niet het gewenste resultaat.

Pieter Arntz · 25 dec 2007

Iets beter, omdat deze wel de juiste kilometers voor antw doorgeeft:

http://www.pieter-arntz.info/infodomein/phptest/afstanden2.html

Een andere manier om de variablelen door te geven.

PHP:

           antw = Math.floor(kms4/1000);
           form.innerHTML += '<input type=text id=antw size=6 value=' + antw + '>';

Vreemd genoeg werkt het voor deze wel dat hij doorgegeven wordt aan de invullen() functie, maar voor de andere drie niet. Terwijl ze wel de goede waarde krijgen, zoals blijkt uit het invullen van de velden.

Egel · 25 dec 2007

Ik kom even tot zover:

PHP:

<!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" xmlns:v="urn:schemas-microsoft-com:vml">
<head>

<!-- test! -->
 <base href="http://www.pieter-arntz.info/infodomein/phptest/">
<!-- /test -->

    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
    <title>Track & Trace Afstanden</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=ABQIAAAAZr0nZY752GnOsTQ7cAHKKBRic4tksi-f5bxS1_ZIcibjShYb_BRXfD2FCaVy82nywCPV591QNkPEow" type="text/javascript"></script>
    <link href="afstanden1.css" rel="stylesheet" type="text/css" />
  </head>
  <body bgcolor="99ccff"  LINK="white" ALINK="white" VLINK="white" onunload="GUnload()">

  <div id="path">
  </div>

<div id="div1"> 
<LABEL for="Waalhaven">Waalhaven</LABEL> 
</div>
<div id="div2">
<LABEL for="Antwerpen">Antwerpen</LABEL>
</div>
<div id="div3">
<LABEL for="Moerdijk">Moerdijk</LABEL>
</div>
<div id="div4">
<LABEL for="Amsterdam">Amsterdam</LABEL>
</div>
<div id="form">
<span class=DefMenuText>(klik pas op Versturen als alle routes getekend zijn)</span><BR>
<input type="button" value="Versturen" onclick="invullen()"><br>
<input type=text id=whvn size=6 value=0>
<input type=text id=antw size=6 value=0>
<input type=text id=mrdk size=6 value=0>
<input type=text id=adam size=6 value=0>
</div>

<div id="frame3">
<script type="text/javascript">
var mrdk=0;
//<![CDATA[
     if (GBrowserIsCompatible()) {
        var frame3 = new GMap2(document.getElementById("frame3"));
        var dirn3 = new GDirections(frame3);

        GEvent.addListener(dirn3,"error", function() {
           alert("Directions Failed: "+dirn3.getStatus().code);
           });
        dirn3.load("from: 51.68324,4.60469 to: 5953 Reuver ", {getSteps:true});
        function customPanel(frame3,mapname,dirn3,div) {
          var html = ' ';
          function routeDistance(dist) {
//         html += '<div style="text-align: right; padding-bottom: 0.3em;">' + dist + '</div>';
           }
          function detail(point, num, description, dist) {
           var target = '"' + mapname+".showMapBlowup(new GLatLng("+point.toUrlValue(6)+"))"  +'"';
           }
          var kms3=0;
          for (var i=0; i<dirn3.getNumRoutes(); i++) {
           if (i==0) {
               var type="play";
               } else {
               var type="pause";
             }
             var route3 = dirn3.getRoute(i);
             routeDistance(route3.getDistance().meters);
             kms3 = kms3 + route3.getDistance().meters;
             for (var j=0; j<route3.getNumSteps(); j++) {
                var step3 = route3.getStep(j);
             detail(step3.getLatLng(), j+1, step3.getDescriptionHtml(), step3.getDistance().html);
             }
           }
           mrdk = Math.floor(kms3/1000);
           document.getElementById('mrdk').value = mrdk;
           }

           GEvent.addListener(dirn3,"load", function() {
           setTimeout('customPanel(frame3,"frame3",dirn3,document.getElementById("path"))', 1000);
           });
}

//]]> 
</script>
</div>
<div id="frame2">
<script type="text/javascript">
var adam=0;
//<![CDATA[
     if (GBrowserIsCompatible()) {
        var frame2 = new GMap2(document.getElementById("frame2"));
        var dirn2 = new GDirections(frame2);

        GEvent.addListener(dirn2,"error", function() {
           alert("Directions Failed: "+dirn2.getStatus().code);
           });
        dirn2.load("from: 52.41633,4.75526 to: 5953 Reuver ", {getSteps:true});
        function customPanel(frame2,mapname,dirn2,div) {
          var html = ' ';
          function routeDistance(dist) {
//         html += '<div style="text-align: right; padding-bottom: 0.3em;">' + dist + '</div>';
           }
          function detail(point, num, description, dist) {
           var target = '"' + mapname+".showMapBlowup(new GLatLng("+point.toUrlValue(6)+"))"  +'"';
           }
          var kms2=0;
          for (var i=0; i<dirn2.getNumRoutes(); i++) {
           if (i==0) {
               var type="play";
               } else {
               var type="pause";
             }
             var route2 = dirn2.getRoute(i);
             routeDistance(route2.getDistance().meters);
             kms2 = kms2 + route2.getDistance().meters;
             for (var j=0; j<route2.getNumSteps(); j++) {
                var step2 = route2.getStep(j);
             detail(step2.getLatLng(), j+1, step2.getDescriptionHtml(), step2.getDistance().html);
             }
           }
           adam = Math.floor(kms2/1000);
           document.getElementById('adam').value = adam;
           }

           GEvent.addListener(dirn2,"load", function() {
           setTimeout('customPanel(frame2,"frame2",dirn2,document.getElementById("path"))', 1000);
           });
}

//]]> 
</script></div>
<div id="frame5">
<script type="text/javascript">
var whvn=0;
//<![CDATA[
     if (GBrowserIsCompatible()) {
        var frame5 = new GMap2(document.getElementById("frame5"));
        var dirn5 = new GDirections(frame5);

        GEvent.addListener(dirn5,"error", function() {
           alert("Directions Failed: "+dirn5.getStatus().code);
           });
        dirn5.load("from: 51.89556,4.41710 to: 5953 Reuver ", {getSteps:true});
        function customPanel(frame5,mapname,dirn5,div) {
          var html = ' ';
          function routeDistance(dist) {
//         html += '<div style="text-align: right; padding-bottom: 0.3em;">' + dist + '</div>';
           }
          function detail(point, num, description, dist) {
           var target = '"' + mapname+".showMapBlowup(new GLatLng("+point.toUrlValue(6)+"))"  +'"';
           }
          var kms5=0;
          for (var i=0; i<dirn5.getNumRoutes(); i++) {
           if (i==0) {
               var type="play";
               } else {
               var type="pause";
             }
             var route5 = dirn5.getRoute(i);
             routeDistance(route5.getDistance().meters);
             kms5 = kms5 + route5.getDistance().meters;
             for (var j=0; j<route5.getNumSteps(); j++) {
                var step5 = route5.getStep(j);
             detail(step5.getLatLng(), j+1, step5.getDescriptionHtml(), step5.getDistance().html);
             }
           }
           whvn =  Math.floor(kms5/1000);
           document.getElementById('whvn').value = whvn;
           }
           GEvent.addListener(dirn5,"load", function() {
           setTimeout('customPanel(frame5,"frame5",dirn5,document.getElementById("path"))', 1000);
           });
}
//]]>
</script></div>
<div id="frame4">
<script type="text/javascript">
var antw=0;
//<![CDATA[
     if (GBrowserIsCompatible()) {
        var frame4 = new GMap2(document.getElementById("frame4"));
        var dirn4 = new GDirections(frame4);

        GEvent.addListener(dirn4,"error", function() {
           alert("Directions Failed: "+dirn4.getStatus().code);
           });
        dirn4.load("from: 51.35767,4.25712 to: 5953 Reuver ", {getSteps:true});
        function customPanel(frame4,mapname,dirn4,div) {
          var html = ' ';
          function routeDistance(dist) {
//         html += '<div style="text-align: right; padding-bottom: 0.3em;">' + dist + '</div>';
           }
          function detail(point, num, description, dist) {
           var target = '"' + mapname+".showMapBlowup(new GLatLng("+point.toUrlValue(6)+"))"  +'"';
           }
          var kms4=0;
          for (var i=0; i<dirn4.getNumRoutes(); i++) {
           if (i==0) {
               var type="play";
               } else {
               var type="pause";
             }
             var route4 = dirn4.getRoute(i);
             routeDistance(route4.getDistance().meters);
             kms4 = kms4 + route4.getDistance().meters;
             for (var j=0; j<route4.getNumSteps(); j++) {
                var step4 = route4.getStep(j);
             detail(step4.getLatLng(), j+1, step4.getDescriptionHtml(), step4.getDistance().html);
             }
           }
           antw = Math.floor(kms4/1000);
           document.getElementById('antw').value = antw;
           }

           GEvent.addListener(dirn4,"load", function() {
           setTimeout('customPanel(frame4,"frame4",dirn4,document.getElementById("path"))', 1000);
           });
}

//]]> </script>
</div>

<script type="text/javascript">
function invullen() { 
// whvn = document.getElementById('whvn').value;
// antw = document.getElementById('antw').value;
// adam = document.getElementById('adam').value;
// mrdk = document.getElementById('mrdk').value;
var url = 'afstandenoud.php?opties=4&havens=15&postcode=5953&plaatsnaam=Reuver&Waalhaven=' + whvn + '&Antwerpen=' + antw + '&Moerdijk=' + mrdk + '&Amsterdam=' + adam;
alert(url); // test
// window.open(url,'','');
}</script>


</body>

</html>

Zie bijlage.

Ik krijg de kaartjes te zien en ook de afstanden ... behalve Moerdijk

Als het er alleen om gaat de afstanden tussen twee coördinaten uit te rekenen zou je ook een javascript zoals deze kunnen gebruiken:
http://williams.best.vwh.net/gccalc.htm
http://www.ga.gov.au/geodesy/datums/distance.jsp

Vr.Gr. Egel.

Pieter Arntz · 26 dec 2007

Deze lijkt iets beter te gaan maar blijkbaar heb ik weer de verkeerde methode om de gegevens op te halen:

http://www.pieter-arntz.info/infodomein/phptest/onebyone.html

Wel wat omslachtiger voor de gebruiker, maar de bedoeling is toch dat ze kijken of er ergens tolwegen gebruikt worden voor ze verder gaan.

PHP:

waalhaven = formulier.waalhaven.value;

Foutmelding: is null or not an object

PHP:

waalhaven = formulier.getElementById('waalhaven');

Foutmelding: Object doesn't support this property or method

Pieter Arntz · 26 dec 2007

Opgelost.

Bedankt voor het meedenken :thumb:

Mijn denkfout was de functie customPanel die in elke lus terugkwam (en daardoor ook allerlei variabelen doorgebruikte)
Nu ik deze functie ook volgnummers geef, werkt alles naar wens.

Textareas uitlezen

Pieter Arntz

Spywareslayer

Tha Devil

Moderator

Pieter Arntz

Spywareslayer

Tha Devil

Moderator

Pieter Arntz

Spywareslayer

Tha Devil

Moderator

Pieter Arntz

Spywareslayer

Tha Devil

Moderator

Pieter Arntz

Spywareslayer

Tha Devil

Moderator

Egel

Terugkerende gebruiker

Tha Devil

Moderator

Pieter Arntz

Spywareslayer

Pieter Arntz

Spywareslayer

Egel

Terugkerende gebruiker

Bijlagen

Pieter Arntz

Spywareslayer

Pieter Arntz

Spywareslayer

Nieuwste berichten

Wij waarderen jouw privacy