[JS] Hoe value halen uit dynamische textbox?

[Verwijderd]

Beste tweaks, ik heb in javascript een soort van 'datagrid' gemaakt. Er worden dus automatisch of door klikken op een button een nieuwe row ingevoegd met textboxes. Nu heb ik een loop gemaakt die de hele table doorloopt. Overal vind ik voorbeelden om de "innerHTML" eruit te halen, maar de innerHTML is natuurlijk de tag voor het invoegen van een textbox. Nu wil ik natuurlijk de inhoud van de tekstbox eruit halen, ben al uren aan het googlen maar vind daar helemaal niks over.

code:

    var tr = document.getElementById('myTable').rows;
    var td = new Array();
    
    for(i = 0, n = tr.length; i < n; i++) {
     
     for(j = 0, m = tr[i].cells.length; j < m; j++) {
        td.push(tr[i].cells[j]);
      }
    }
    
    for(k = 0, p = td.length; k < p; k++) {
        alert(td[k].innerHTML);
    }

De inhoud van die cellen is dus een tekstbox, hoe haal ik de value uit die tekstboxen?

Alvast bedankt..

[Gurbe de n00b]

Goeiedag,

Volgens mij zoek je het volgende:

HTML:

<input type="textbox" value="Gurbe" id="foo" />

JavaScript:

alert(document.getElementById('foo').value);
// Alert: Gurbe

[Verwijderd]

Nee, dat snap ik. Misschien ben ik niet duidelijk genoeg geweest. Maar het is een invoer formulier als het ware, de gebruiker kan rows toevoegen en ook verwijderen. Eerst gaf ik alle textboxen een naam, dus textbox op regel 1 had naam: 'name1' enz. maar als je dan een regel verwijdert krijg je een tabel met textboxen als: "name1", "name3". Dan mis je dus "name2" dus dan kan je geen loop nemen omdat uit te lezen.

Ik zoek dus een loop die of kijkt hoe de tekstbox heet, of in de desbetreffende cell de inhoud uit een textbox haalt zonder de naam te weten.

[Verwijderd]

Wrap een <form name="formnaam"> om je grid heen en loop erdoorheen met formnaam.elements.

[moozzuzz]

of

HTML:

<input type="text" value="rij 5, kol 7" name="r5k7">
of
<input type="text" value="rij 7, kol 2" name="grid[7][2]">

JavaScript:

// principe //
alert(document.getElementByName('r5k7').value);
// Alert: rij 5, kol 7

// of in een geneste forloop met i en j:
       ...
       alert(document.getElementByName('r'+i+'k'+j).value);
       ...
// Alert: rij 5, kol 7

of

alert(document.getElementByName("grid[7][2]").value);
// Alert: rij 7, kol 2

// of in een geneste forloop met i en j:
       ...
       alert(document.getElementByName("grid["+i+"]["+j+"]").value);
       ...
// Alert: rij 7, kol 2

ByName is vaak wel trager dan ById, zover ik weet.

[Verwijderd]

Ik denk dat ik nu de snelste manier heb en het werkt, zeer hartelijk bedankt

code:

    for(i=0; i<document.form.elements.length; i++){
    
        alert(document.form.elements[i].value);
    }

Thanks, dat brengt me weer dichter bij het halen van een target!

[Gurbe de n00b]

Om even onduidelijkheden te voorkomen.

JavaScript:

alert(document.getElementByName.("grid[7][2]").value);
// Geeft een error! Want getElementByName bestaat niet.

// De functie getElementsByName bestaat daarintegen wel. Het geeft alleen een array terug
alert(document.getElementsByName[0].("grid[7][2]").value);

[SchizoDuckie]

Gurbe de n00b schreef op maandag 21 januari 2008 @ 14:56:
Om even onduidelijkheden te voorkomen.

JavaScript:

alert(document.getElementByName.("grid[7][2]").value);
// Geeft een error! Want getElementByName bestaat niet.

// De functie getElementsByName bestaat daarintegen wel. Het geeft alleen een array terug
alert(document.getElementsByName[0].("grid[7][2]").value);

Wel goed je eigen code quoten dan he?

JavaScript:

alert(document.getElementsByName("grid[7][2]")[0].value);

[Verwijderd]

Het is toch een beetje te globaal om elk element door te zoeken, wat je dan krijgt in m'n huidige form is dat op positie 22 pas de array gaat beginnen van de tabel, dat werkt natuurlijk niet.

Is er echt geen manier om uit een cell waar een textbox in staat de waarde uit te halen zonder dat je da naam weet?

In mijn voorbeeld kan je dus regels verwijderen uit een tabel. Als je een naamgeving als dit gebruikt "grid[7][2]" ga je er dus vanuit dat die textbox bestaat. Als je dus regel grid[5][2] verwijderd hebt en je gaat door je loop lopen, en dan bij i=5 gaat hij over ze nek omdat die textbox niet bestaat. Echter nog die hele regel bestaat niet meer.

Mijn vraag is dus hoe kom je daar achter in je loop?

[orf]

natuurlijk wel, je kunt ook de inhoud van een td doorzoeken naar een input field:

html:

HTML:

...
<tr>
  <td><button onclick="doeIets(this.parentNode)"><input type="text">
</tr>
...

JavaScript:

function doeIets(td){
   var aInputs =  td.getElementsByTagName('input');
   // doe dingen met je inputs:
   var i = aInputs.length;
   while(i--){
       alert(aInputs[i].value);
   } 
}

[f.v.b]

orf schreef op maandag 21 januari 2008 @ 16:08:

JavaScript:

   // doe dingen met je inputs:
   var i = aInputs.length;
   while(i--){
       alert(aInputs[i].value);
   } 

Bovenstaande code zal niet gaan werken. Bij een array met drie elementen vraagt het de indexen 3, 2 en 1 op. Omdat een array in javascript met index 0 begint, zit je er net een naast. Beter is het gebruik van een for loop:

JavaScript:

   // doe dingen met je inputs:
   for (var i = 0; i < aInputs.length; i++) {
       alert(aInputs[i].value);
   } 

[ Voor 2% gewijzigd door f.v.b op 22-01-2008 05:53 . Reden: In quote zitten typen... ]

[Verwijderd]

Het werkt allemaal niet netjes en het is iets te omslachtig. Door de cellen heenlopen kan wel, is er dan geen mogelijkheid om als je een cel doorloopt waar alleen een textbox instaat, het id van de textbox uit te lezen zodat je in de loop het textveld na het uitlezen bij zijn id kan benaderen??

[orf]

Ik snap je vraag niet helemaal. Natuurlijk kun je in de cel kijken of er een input staat. Van die input kun je dan ook de id opvragen (net zoals ik hierboven de value opvraag).

Wat is er niet netjes en omslachtig?

[Verwijderd]

Ik ben toch genoodzaakt om de hele code even te plaatsen

code:

<script type="text/javascript">
function insRow(){
    var x=document.getElementById('myTable').insertRow(0);
    var name =x.insertCell(0);
    var surname =x.insertCell(1);
    var msisdn =x.insertCell(2);
    var barcode =x.insertCell(3);
    var del = x.insertCell(4);
    
    mytb = document.getElementById("myTable");
    row = mytb.rows.length;
    
    name.innerHTML      ="<input type='text' id='name"+row+"[s][/s]' size='12'>";
    surname.innerHTML   ="<input type='text' id='surname"+row+"' size='12'>";
    msisdn.innerHTML    ="<input type='text' id='msisdn"+row+"' size='10'>";
    barcode.innerHTML   ="<input type='text' id='barcode"+row+"' size='10'>";
    del.innerHTML       ="<input type='button' name='button' value='DEL' onclick='deleteRow(this)'>";
}

function deleteRow(r){
    var i=r.parentNode.parentNode.rowIndex;
    document.getElementById('myTable').deleteRow(i);
}



function save(){
        
    var tr = document.getElementById('myTable').rows;
    var td = new Array();
    
    for(i = 0, n = tr.length; i < n; i++) {
    
         for(j = 0, m = tr[i].cells.length; j < m; j++) {
            
            alert(tr[i].cells[j].getElementsByTagName('input'));  
            
          }
    }
    
}
</script>
[s][/s]
<form name='form'>
<table>
<tr>
    <td>Name</td>
    <td>Surname</td>
    <td>MSISDN</td>
    <td>Barcode</td>
    <td></td>
</tr>
</table>

<table id="myTable" border="0">

</table>
</form>

<br />
<input type="button" onclick="insRow()" value="Insert row"><input type='button' onclick='save()' value='Save data'>

Zie bovenstaande code, het is mogelijk om regels in te voegen en regels te verwijderen. Als er op de button "Save data" geklikt wordt dan word de save() function aangeroepen. Deze doorloopt de tabel nu wil ik de input box die in elke cel staat uitlezen en het liefst ook nog het ID van die box uitlezen. Het moet niet zo ingewikkelt zijn denk ik? Maar ik kom er echt niet uit.

[Cartman!]

Gebruik Firefox met de Firebug plugin en dan kun je debuggen met console.log(); ipv. alert Verder krijg ik uit je laatste post dat je ook weinig moeite doet om het op te zoeken

[Verwijderd]

Cartman! schreef op dinsdag 22 januari 2008 @ 11:23:
Gebruik Firefox met de Firebug plugin en dan kun je debuggen met console.log(); ipv. alert Verder krijg ik uit je laatste post dat je ook weinig moeite doet om het op te zoeken

Haha, nou geloof me dat valt wel mee, heb elke pagina onderhand al eens onder de vingers gezien maar weinig resultaat. Misschien zoek ik wel verkeerd, Firebug geeft weinig aan.

Mocht je het zelf weten zou je misschien een duwtje in de goede richting kunnen geven.... of een functie kunnen noemen die een groot deel oplost.

[Cartman!]

Als Firebug weinig aangeeft dan console.log() je niet het goede dus. Sowieso zou ik uitwijken naar een JS framework zoals MooTools (http://www.mootools.net/), kun je gewoon dit doen:

code:

$$('#myTable input').each(function(objInput)
{
console.log(objInput);
});

krijg je netjes alle inputs terug die je hebt. Hoe id, value en name kunt uitlezen moet je zelf kunnen vinden imo.

[orf]

f.v.b schreef op dinsdag 22 januari 2008 @ 03:44
Bovenstaande code zal niet gaan werken. Bij een array met drie elementen vraagt het de indexen 3, 2 en 1 op. Omdat een array in javascript met index 0 begint, zit je er net een naast. Beter is het gebruik van een for loop:

Heb je het wel eens getest?
Die code werkt prima (omdat er in de while-- wordt gedaan kom je bij een array met 3 waarden uit op 2,1,0). Het is een stukje sneller dan een for loop. Zeker als je in je for loop voor elke iteratie gaat kijken hoe lang je array is.

[ Voor 16% gewijzigd door orf op 22-01-2008 12:09 ]

[Verwijderd]

Het is dus niet mogelijk om een elements te doorzoeken in een tabel, normaal zoek je dan de hele form door naar elements, maar dat kan je niet specificeren op alleen een tabel?

[moozzuzz]

Je zou ook met DOM-functies kunnen werken maar daar ben ik niet zo thuis in om je meteen intelligente voorbeelden te geven.

[Cartman!]

Verwijderd schreef op dinsdag 22 januari 2008 @ 12:36:
Het is dus niet mogelijk om een elements te doorzoeken in een tabel, normaal zoek je dan de hele form door naar elements, maar dat kan je niet specificeren op alleen een tabel?

Wel lezen, in mn eerdere post beschrijf ik exact wat je wilt als je mootools even download.

[Verwijderd]

Cartman! schreef op dinsdag 22 januari 2008 @ 15:29:
[...]

Wel lezen, in mn eerdere post beschrijf ik exact wat je wilt als je mootools even download.

Sorry vergeten erbij te zetten, graag zonder Mootools

[Cartman!]

Verwijderd schreef op dinsdag 22 januari 2008 @ 15:40:
[...]

Sorry vergeten erbij te zetten, graag zonder Mootools

Waarom? Omdat je liever het wiel opnieuw wilt uitvinden?

[Verwijderd]

Nee, er moet een manier zijn om dat voor elkaar te krijgen zonder dat platform. Het is een vrij complexe website en dit platform mag ik er niet in gebruiken. Als er geen andere manier is dan houdt het inderdaad op, wel includen we nu jQuery.

[Cartman!]

Waarom kijk je dan niet of dat met jQuery kan? Ik neem aan dat zij een soortgelijk systeem hebben zoals ik net schreef in mootools syntax. Ik ging er van uit dat je geen framework gebruikte namelijk.

edit:
zoiets zou moeten werken in jQuery volgens de manual.

code:

$("table#myTable input").each(function (objInput) {
        console.log(objInput);
      });

Ik vind overigens dat je dit best zelf had kunnen vinden.

[ Voor 37% gewijzigd door Cartman! op 22-01-2008 21:15 ]

[Bozozo]

Omdat je toch al in een tabel werkt kun je die net zo goed uitbuiten:

JavaScript:

var table = document.getElementById("mytable");
var rows = table.rows;
for (var r=0; r<rows.length;r++) {
  var cells = rows[r].cells;
  for (var c=0; c<cells.length;c++) {
    var field = //uw favorite methode om het inputveld te bemachtigen. Denk aan getElementsByTagName of firstChild of firstChild.nextSibling etc etc
  }
}

Met als voordeel dat je ook alleen bepaalde rijen of kolommen kan benaderen oid.

[ Voor 9% gewijzigd door Bozozo op 22-01-2008 17:30 ]

[f.v.b]

orf schreef op dinsdag 22 januari 2008 @ 12:08:

Heb je het wel eens getest?
Die code werkt prima (omdat er in de while-- wordt gedaan kom je bij een array met 3 waarden uit op 2,1,0). Het is een stukje sneller dan een for loop. Zeker als je in je for loop voor elke iteratie gaat kijken hoe lang je array is.

Oempf. Nu dus wel. Ik was verrast door de i-- aan het begin.

Ok, nieuwe coding regel voor mezelf: Gebruik consequent een for of een while loop. Als je ze door elkaar gaat gebruiken, dan wordt je code een stuk moelijker leesbaar.

[Verwijderd]

Iedereen bedankt voor alle replays, ik heb het uit eindelijk voor elkaar in een klein stukje code zonder jQuery.

code:

function save(){

    inputs = document.getElementById('myTable').getElementsByTagName("input");
    buffer = "";
    for (i = 0; i < inputs.length; i++){
        
        buffer = inputs[i].value;
        console.log(buffer);
    }
}

[MichielioZ]

Fijn dat je eruit bent... Ik lees echter net deze topic door en kom er dan achter dat de oplossing die jij uiteindelijk vindt al (while-loop ipv for-loop of form.elements ipv getElementsByTagName) meteen in het begin werd voorgesteld eigenlijk. Had je die niet goed gelezen of was er een reden waarom je die code niet goed vond ?