[JS] FireFox & Dynamisch Input boxes toevoegen

[Verwijderd]

Beste tweakers,

Ik zit met een (ja hoor, alwéér een cross-browser) probleempje.

Ik heb een <FORM METHOD="POST"> met daartussen een tabel met daarin één tekstveld (<INPUT TYPE="TEXT" NAME="theAnswer0">). Wanneer een gebruiker iets in deze box tikt wordt er automatisch via JavaScript een rij aan de tabel toegevoegd met eenzelfde tekstbox erin, maar dan met de NAME="theAnswer1", en daarin gebeurt hetzelfde, wanneer daarin wat wordt ingetikt, komt er weer een bij enz. enz.

Werkt allemaal perfect In IE en zelfs in FireFox geen problemen!

Nu het volgende:

Wanneer ik de FORM submit, en ik lees via PHP de geposte waarden uit, krijg ik alleen die van m'n eerste tekstbox (theAnswer0 dus) in FireFox. Die andere tekstvelden stuurt ie gewoonweg niet mee!

In IE werkt het wel perfect en krijg ik netjes alle tekstvelden! Enig idee waar dat aan ligt en hoe ik dat op kan lossen?

hier de code:

code:

<TABLE ID="antwoorden">
  <tbody>
    <TR>
      <TD>
        <INPUT TYPE="TEXT" ONKEYUP="DoType(0);" ID="theAnswer0" NAME="frmAnswer0" STYLE="width: 500px; border: #000000 1px solid; font-weight: bold;">
      </TD>
    </TR>
  </tbody>
</TABLE>

en de javascript:

code:

<SCRIPT>
      var tbody = document.getElementById("antwoorden").getElementsByTagName("tbody")[0]; 
      var tcount = tbody.rows.length;
      function DoAnswer(what) {
        if (what == "add") {
          tcount = tbody.rows.length;
          theRow = document.createElement("TR");
          theCol = document.createElement("TD");
          theCol.innerHTML = "<INPUT TYPE=\"TEXT\" ID=\"theAnswer"+tcount+"\" ONKEYUP=\"DoType("+tcount+");\" NAME=\"frmAnswer"+tcount+"\" STYLE=\"width: 500px; border: #000000 1px solid; font-weight: bold; background-color: #F5FFFC;\">";
          theRow.appendChild(theCol);
          tbody.appendChild(theRow);
        } else {
          theRow = tbody.rows[tcount-1];
          tbody.removeChild(theRow);
        }
      }
      function DoType(theid) {
        tcount = tbody.rows.length;
        theBox = document.getElementById("theAnswer"+theid);
        if (theBox.value != "") {
          theBox.style.backgroundColor = "#FFFFFF";
        } else {
          theBox.style.backgroundColor = "#F5FFFC";
        }
        try {
        if (theBox.value != "" && tcount == (theid+1)) {
          DoAnswer('add');
        } else if (document.getElementById("theAnswer"+(tcount-2)).value == "" && tcount == (theid+2)) {
          DoAnswer('remove');
        }
        } catch (err) {
        }
      }
    </SCRIPT>

Thanx in advance!
- m0rdex

[Michali]

Probeer de input box ook eens via de DOM methode op te bouwen. Je mixt het ineens met innerHTML, dat is niet zo netjes. Mischien dat het daar fout gaat.

Trouwens, als je een naam in de vorm van name="theAnswer[0]" toewijst aan de input velden, dan krijg je in php netjes een array terug. Wel zo handig

[Verwijderd]

Okee ik ga het even proberen, hopelijk dat dat werkt

En is dat zo joh?! PHP zit vol mooie dingen, en naarmate je 't langer gebruikt wordt 't alleen maar mooier!!

Bedankt voor je reactie in ieder geval, laat 't zo wel ff weten als 't is gelukt!

[Verwijderd]

Ik heb 't al FireFox pakt ze wel mooi mee, maar is wat strenger in z'n plaatsing van de <FORM> tags. Ik zet die <FORM> tags altijd tussen een <TR> en een <TD> zodat heel die opbouw niet verneukt wordt (een <FORM> tag laat altijd een stukje tussen de content open naar mijn ervaring).

Maar in ieder geval bedankt

-m0rdex out

[Michali]

Het form element heeft standaard een margin (en mischien soms een padding). Als je dus dit doet:

code:

<form style="margin: 0; padding: 0;">

of gewoon ergens in je css

Cascading Stylesheet:

form
{
  margin: 0;
  padding: 0;
}

Dan moet dat probleem opgelost zijn Ik geloof dat padding gewoon geheel overbodig is, moet je maar ff kijken.

Waarom gebruik je eigenlijk een try catch block in je DoType (naam zegt een beetje weinig over de intentie/doel van je functie trouwens) functie? Als je even kijkt naar waar de error vandaan komt en daarop controleert, dat is imo heel wat netter.

[ Voor 47% gewijzigd door Michali op 02-08-2005 11:16 ]

[Verwijderd]

Verwijderd schreef op dinsdag 02 augustus 2005 @ 10:59:
Ik heb 't al FireFox pakt ze wel mooi mee, maar is wat strenger in z'n plaatsing van de <FORM> tags. Ik zet die <FORM> tags altijd tussen een <TR> en een <TD> zodat heel die opbouw niet verneukt wordt (een <FORM> tag laat altijd een stukje tussen de content open naar mijn ervaring).

Maar in ieder geval bedankt

-m0rdex out

Tnx! Dat was wat ik nodig had

[Michali]

Verwijderd schreef op maandag 16 januari 2006 @ 11:11:
[...]


Tnx! Dat was wat ik nodig had

Dat is geen valide oplossing. Beter is om de margin van het form element expliciet op 0 te zetten, zoals in mijn post hierboven. Een form tag tussen tr en td zetten is misbruik en tevens fout.