Note that there are some explanatory texts on larger screens.

plurals
  1. POInput validation on a dynamically created table/form question
    primarykey
    data
    text
    <p>How do I change this so that the validation is working well with the dynamically created rows too?</p> <pre><code>&lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8" /&gt; &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="jquery-validation-1.8.1/jquery.validate.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $( document ).ready( function() { $( "Form" ).validate(); } ); function add_row() { var data = { menge : { class : 'required' }, bezeichnung : { class : 'required' }, euro_stueck : { class : 'required' } }; var table = document.getElementById( 'product' ); var rows = table.getElementsByTagName( 'tr' ).length; var tr = table.insertRow( rows ); tr.id = 'tr_' + rows; for ( var name in data ) { if ( data.hasOwnProperty( name ) ) { var td = document.createElement( 'td' ); var input = document.createElement( 'input' ); for ( var attr in data[name] ) { if ( data[name].hasOwnProperty( attr ) ) { input[attr] = data[name][attr]; } } input.name = name + '_' + rows; td.appendChild( input ); tr.appendChild( td ); } } window.scrollTo( 0, document.body.scrollHeight ); // $( "Form" ).validate(); } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;form action=""&gt; &lt;table id="product"&gt; &lt;tr id="tr_0"&gt;&lt;th&gt;Menge&lt;/th&gt;&lt;th&gt;Ware&lt;/th&gt;&lt;th&gt;Euro/Stück&lt;/th&gt;&lt;/tr&gt; &lt;tr id="tr_1"&gt; &lt;td&gt;&lt;input name="menge_1" class="required" /&gt;&lt;/td&gt; &lt;td&gt;&lt;input name="bezeichnung_1" class="required" /&gt;&lt;/td&gt; &lt;td&gt;&lt;input name="euro_stueck_1" class="required" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;br /&gt; &lt;input type="button" value="Hinzufügen" onclick="add_row()" /&gt; &lt;br /&gt;&lt;br /&gt; &lt;input type="submit" value="OK"/&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload