Clever Geek Handbook

ChildNodes method cannot find my field names

http://www.quirksmode.org/dom/domform.html

I am trying to implement this advanced form in my project. But the field names cannot be found (console log returns "undefined") until I lay out the input field from the div and directly below the parent span tag. I'm not sure how the field names can be positioned and named accordingly, as I intend to keep the divs.

HTML:

<span id="readroot" style="display: none">
  <input class="btn btn-default" type="button" value="Remove review"
   onclick="this.parentNode.parentNode.removeChild(this.parentNode);">
  <br><br>
  <div class="row">
    <div class="col-lg-3">
      <div class="form-group required">
        <label for="Student1Age">Age</label>
        <input name="age" class="form-control" placeholder="Age"
         maxlength="11" type="text" id="Student1Age" required="required">
      </div> 
    </div>
    <div class="col-lg-3">  
      <div class="form-group required">
        <label for="Student1Grade">Grade</label>
        <select name="grade" class="form-control" id="Student1Grade" required="required">
          <option value="">Please Select</option>
          <option value="1">Grade 1</option>
          <option value="2">Grade 2</option>
        </select>
      </div>  
    </div>
  </div>
</span>
<span id="writeroot"></span>
<input class="btn btn-default" type="button" onclick="moreFields()"
 value="Give me more fields!">

JavaScript:

var counter = 0;
function moreFields() {
    counter++;
    var newFields = document.getElementById('readroot').cloneNode(true);
    newFields.id = '';
    newFields.style.display = 'block';
    var newField = newFields.childNodes;
    for (var i=0;i<newField.length;i++) {
        var theName = newField[i].name;
        if (theName)
            newField[i].name = "data[Student][" + counter + "][" + theName + "]";
            console.log(newField[i].name);
    }
    var insertHere = document.getElementById('writeroot');
    insertHere.parentNode.insertBefore(newFields,insertHere);
}
+3


source to share


1 answer


childNodes

only returns direct children. It will only find elements with top-name

level attributes . To find all named descendant elements as you see fit, try

var newField = newFields.querySelectorAll('[name]');


Minor points:

  • While in this case you also don't need to use either, you should use .children

    instead .childNodes

    . The latter will visit the nodes of white space, which won't hurt anything, but not what you want.

  • There are no parentheses around the body of the statement if (theName)

    , meaning the console.log is executed every time through the loop, even when a whitespace node is visited. To avoid such problems, set your editor to the indent property and / or run linter from your code.

    if (theName) {
    newField[i].name = "data[Student][" + counter + "][" + theName + "]";
    console.log(newField[i].name);
}

  • I would suggest naming your variables more correctly. You have a named variable newFields

    that is a single range, and you have a named variable newField

    that is a collection of fields.

+1


source






More articles:


All Articles