[Javascript] appending html code to form

[Verwijderd]

Ik ben bezig met een formulier waarbij de gebruiker een set enquete vragen kan invullen en vervolgens doorgaan.
Omdat de hoeveelheid vragen kan verschillen wil ik deze met javascript toevoegen.
innerHTML herlaad de string waardoor alle ingevulde veld waardes verdwijnen.
Nu is het stukje formulier wat groter dan 1 div met 1 input field, dus om het te schrijven met create Element wil ik liever voorkomen.

Ik heb het nieuwe block in een javascript variable:

JavaScript:

var nextQuestion = "<div id=\"formBlock\">  <table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">  <tr>    <td colspan=\"2\" ><h2>Question {questionCounter}</h2></td>    </tr>  <tr>    <td width=\"100\" valign=\"top\">Question:</td>    <td><textarea name=\"question_{questionCounter}\" cols=\"30\" rows=\"3\" wrap=\"physical\" id=\"question_{questionCounter}\" onKeyDown=\"countCharacters('{questionCounter}')\"></textarea>     <sup> <span id=\"charleftq_{questionCounter}\">255</span> characters left!</sup></td>    </tr>  <tr>    <td>&nbsp;</td>    <td>&nbsp;</td>    </tr>  <tr>    <td>Answer 1: </td>    <td><input name=\"answer_{questionCounter}-1\" type=\"text\" id=\"answer_{questionCounter}-1\" size=\"30\" maxlength=\"100\">      <input name=\"answercorrect_{questionCounter}\" type=\"radio\"  value=\"1\" checked=\"checked\" /></td>    </tr>  <tr>    <td>Answer 2: </td>    <td><input name=\"answer_{questionCounter}-2\" type=\"text\" id=\"answer_{questionCounter}-2\" size=\"30\" maxlength=\"100\">      <input name=\"answercorrect_{questionCounter}\"  type=\"radio\" value=\"2\" /></td>  </tr>  <tr>    <td>Answer 3: </td>    <td><input name=\"answer_{questionCounter}-3\" type=\"text\" id=\"answer_{questionCounter}-3\" size=\"30\" maxlength=\"100\">      <input name=\"answercorrect_{questionCounter}\"  type=\"radio\" value=\"3\" /></td>  </tr>  <tr>    <td>Answer 4: </td>    <td><input name=\"answer_{questionCounter}-4\" type=\"text\" id=\"answer_{questionCounter}-4\" size=\"30\" maxlength=\"100\">      <input name=\"answercorrect_{questionCounter}\"  type=\"radio\" value=\"4\" /></td>  </tr>  <tr>    <td>&nbsp;</td>    <td>&nbsp;</td>  </tr>  <tr>    <td colspan=\"2\"><strong>Additional options </strong></td>    </tr>  <tr>    <td>Display randomly: </td>    <td><input name=\"random_{questionCounter}\" type=\"checkbox\" id=\"random_{questionCounter}\" value=\"1\"></td>  </tr>  <tr>    <td>&nbsp;</td>    <td>&nbsp;</td>  </tr>  <tr>    <td>&nbsp;</td>    <td><a onClick=\"moveDown();\" id=\"moveBox\">&laquo;&laquo;</a><a  id=\"moveBox\">[Done]</a><a onClick=\"CheckQuestion('{questionCounter}');\" id=\"moveBox\">&raquo;&raquo;</a></td>  </tr></table>   </div>";

Als ik de code direct aanroep met appendChild dan krijg ik geen fouten maar de code verschijnt niet. De code dient eerst een node te worden. Nu heeft Javascript wel een createTextNode, deze geeft de code weer en de veld waardes blijven bewaard.
echter wordt de code letterlijk weergegeven: <div id="formBlock">
Een str.replace werkt niet als de text in de node zit en deze functie converteer nu juist de < en >.

Is er een methode om de code toe te voegen zonder alle element apart te schrijven in Javascript?

[Luqq]

Wat nou als je alle divs alvast in de HTML zet, maar op display: none? Zo krijg je geen rare errors/laadtijden midden in je form, en het is een stuk makkelijker om te showen

[Verwijderd]

Luqq schreef op dinsdag 09 maart 2010 @ 23:19:
Wat nou als je alle divs alvast in de HTML zet, maar op display: none? Zo krijg je geen rare errors/laadtijden midden in je form, en het is een stuk makkelijker om te showen

Als ik zou weten hoeveel ik er nodig zou hebben ja, maar dat weet ik niet.

[crisp]

Je kan met een documentfragment werken:

JavaScript:

var q = document.createDocumentFragment();
q.innerHTML = nextQuestion;
form.appendChild(q);

[Verwijderd]

crisp schreef op dinsdag 09 maart 2010 @ 23:26:
Je kan met een documentfragment werken:

JavaScript:

var q = document.createDocumentFragment();
q.innerHTML = nextQuestion;
form.appendChild(q);

Als ik dat probeer gebeurd er niets, geen fouten in firebug maar ook niet onscreen.

JavaScript:

var q = document.createDocumentFragment(); 
        q.innerHTML = nextQuestion.replace(/{questionCounter}/g, questionCounter); 
        document.getElementById("FormScroller").appendChild(q);

[ Voor 23% gewijzigd door Verwijderd op 09-03-2010 23:34 ]

[crisp]

My Bad, innerHTML werkt niet met fragments

Dit kan je natuurlijk ook doen:

HTML:

<script>

var questionCounter = 1;
function next()
{
    var nextQuestion = "<table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">  <tr>    <td colspan=\"2\" ><h2>Question {questionCounter}</h2></td>    </tr>  <tr>    <td width=\"100\" valign=\"top\">Question:</td>    <td><textarea name=\"question_{questionCounter}\" cols=\"30\" rows=\"3\" wrap=\"physical\" id=\"question_{questionCounter}\" onKeyDown=\"countCharacters('{questionCounter}')\"></textarea>     <sup> <span id=\"charleftq_{questionCounter}\">255</span> characters left!</sup></td>    </tr>  <tr>    <td>&nbsp;</td>    <td>&nbsp;</td>    </tr>  <tr>    <td>Answer 1: </td>    <td><input name=\"answer_{questionCounter}-1\" type=\"text\" id=\"answer_{questionCounter}-1\" size=\"30\" maxlength=\"100\">      <input name=\"answercorrect_{questionCounter}\" type=\"radio\"  value=\"1\" checked=\"checked\" /></td>    </tr>  <tr>    <td>Answer 2: </td>    <td><input name=\"answer_{questionCounter}-2\" type=\"text\" id=\"answer_{questionCounter}-2\" size=\"30\" maxlength=\"100\">      <input name=\"answercorrect_{questionCounter}\"  type=\"radio\" value=\"2\" /></td>  </tr>  <tr>    <td>Answer 3: </td>    <td><input name=\"answer_{questionCounter}-3\" type=\"text\" id=\"answer_{questionCounter}-3\" size=\"30\" maxlength=\"100\">      <input name=\"answercorrect_{questionCounter}\"  type=\"radio\" value=\"3\" /></td>  </tr>  <tr>    <td>Answer 4: </td>    <td><input name=\"answer_{questionCounter}-4\" type=\"text\" id=\"answer_{questionCounter}-4\" size=\"30\" maxlength=\"100\">      <input name=\"answercorrect_{questionCounter}\"  type=\"radio\" value=\"4\" /></td>  </tr>  <tr>    <td>&nbsp;</td>    <td>&nbsp;</td>  </tr>  <tr>    <td colspan=\"2\"><strong>Additional options </strong></td>    </tr>  <tr>    <td>Display randomly: </td>    <td><input name=\"random_{questionCounter}\" type=\"checkbox\" id=\"random_{questionCounter}\" value=\"1\"></td>  </tr>  <tr>    <td>&nbsp;</td>    <td>&nbsp;</td>  </tr>  <tr>    <td>&nbsp;</td>    <td><a onClick=\"moveDown();\" id=\"moveBox\">&laquo;&laquo;</a><a  id=\"moveBox\">[Done]</a><a onClick=\"CheckQuestion('{questionCounter}');\" id=\"moveBox\">&raquo;&raquo;</a></td>  </tr></table>";

    var div = document.createElement('div');
    div.className = 'formBlock'; // beter class gebruiken, id's horen uniek te zijn ;)
    div.innerHTML = nextQuestion.replace(/{questionCounter}/g, questionCounter); 
    document.getElementById("FormScroller").appendChild(div);
    questionCounter++;
}

</script>

<form id="FormScroller">
    <input type="button" onclick="next()" value="next">
</form>

[Wolfboy]

Als je appendChild wil gebruiken dan zal je createElement moeten gebruiken om eerst een element te maken.

Ik zie alleen niet in waarom je geen createElement zou willen gebruiken? Is het om performance redenen of iets anders?

edit:
Hmm... wat laat, ik had moeten reloaden voor het reageren

[ Voor 13% gewijzigd door Wolfboy op 10-03-2010 00:41 ]

[Verwijderd]

Het is niet dat ik het niet wil gebruiken, het was meer dat ik het niet wou gebruiken voor iedere element. Dat zijn er nogal wat .

Ik ga de code van Crips vanavond even uit proberen, als het werk post ik het eind resultaat hier.

[Verwijderd]

crisp schreef op dinsdag 09 maart 2010 @ 23:59:

HTML:

<script>

var questionCounter = 1;
function next()
{
    var nextQuestion = "<table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">  <tr>    <td colspan=\"2\" ><h2>Question {questionCounter}</h2></td>    </tr>  <tr>    <td width=\"100\" valign=\"top\">Question:</td>    <td><textarea name=\"question_{questionCounter}\" cols=\"30\" rows=\"3\" wrap=\"physical\" id=\"question_{questionCounter}\" onKeyDown=\"countCharacters('{questionCounter}')\"></textarea>     <sup> <span id=\"charleftq_{questionCounter}\">255</span> characters left!</sup></td>    </tr>  <tr>    <td>&nbsp;</td>    <td>&nbsp;</td>    </tr>  <tr>    <td>Answer 1: </td>    <td><input name=\"answer_{questionCounter}-1\" type=\"text\" id=\"answer_{questionCounter}-1\" size=\"30\" maxlength=\"100\">      <input name=\"answercorrect_{questionCounter}\" type=\"radio\"  value=\"1\" checked=\"checked\" /></td>    </tr>  <tr>    <td>Answer 2: </td>    <td><input name=\"answer_{questionCounter}-2\" type=\"text\" id=\"answer_{questionCounter}-2\" size=\"30\" maxlength=\"100\">      <input name=\"answercorrect_{questionCounter}\"  type=\"radio\" value=\"2\" /></td>  </tr>  <tr>    <td>Answer 3: </td>    <td><input name=\"answer_{questionCounter}-3\" type=\"text\" id=\"answer_{questionCounter}-3\" size=\"30\" maxlength=\"100\">      <input name=\"answercorrect_{questionCounter}\"  type=\"radio\" value=\"3\" /></td>  </tr>  <tr>    <td>Answer 4: </td>    <td><input name=\"answer_{questionCounter}-4\" type=\"text\" id=\"answer_{questionCounter}-4\" size=\"30\" maxlength=\"100\">      <input name=\"answercorrect_{questionCounter}\"  type=\"radio\" value=\"4\" /></td>  </tr>  <tr>    <td>&nbsp;</td>    <td>&nbsp;</td>  </tr>  <tr>    <td colspan=\"2\"><strong>Additional options </strong></td>    </tr>  <tr>    <td>Display randomly: </td>    <td><input name=\"random_{questionCounter}\" type=\"checkbox\" id=\"random_{questionCounter}\" value=\"1\"></td>  </tr>  <tr>    <td>&nbsp;</td>    <td>&nbsp;</td>  </tr>  <tr>    <td>&nbsp;</td>    <td><a onClick=\"moveDown();\" id=\"moveBox\">&laquo;&laquo;</a><a  id=\"moveBox\">[Done]</a><a onClick=\"CheckQuestion('{questionCounter}');\" id=\"moveBox\">&raquo;&raquo;</a></td>  </tr></table>";

    var div = document.createElement('div');
    div.className = 'formBlock'; // beter class gebruiken, id's horen uniek te zijn ;)
    div.innerHTML = nextQuestion.replace(/{questionCounter}/g, questionCounter); 
    document.getElementById("FormScroller").appendChild(div);
    questionCounter++;
}

</script>

Eigenlijk niets hoeven aan te passen, copy, paste en gaan.
Je hebt gelijkt over de classes, het is een slechte gewoonte van me om ID's te gebruiken, heb dit aangepast.

Thanks.

[Wolfboy]

Niets mis met ID's gebruiken hoor, maar hou ze wel uniek
Al zou je in dit geval misschien alleen de container een ID willen geven en niet de elementen zelf.