CODEWITHSUNDEEP
javascript
Alvin Mok
Alvin Mok

Reputation: 323

Cannot call the second javascript function (differently named) on the same page

I'm trying to implement an extend form function in two places on the same page. The first place works fine, but the second place does not even call the function apparently.

The html and js of the first place:

<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">
    <!-- Content not displayed for simplicity purpose -->
</div>
</span>
<span id="writeroot"></span>        
<input class="btn btn-default" type="button" onclick="moreFields()" value="Give me more fields!" />
<script>
    var counter = 1;
    function moreFields() {
        counter++;
        var newField = document.getElementById('readroot').cloneNode(true);
        newField.id = '';
        newField.style.display = 'block';
        var newFields = newField.querySelectorAll('[name], [id], [for]');
            for (var i=0;i<newFields.length;i++) {
                var theNames = newFields[i].name
                if (theNames)
                    newFields[i].name = "data[Student][" + counter + "][" + theNames + "]";
                var theNames2 = newFields[i].id;
                if (theNames2)
                    newFields[i].id = theNames2 + counter;
                var theNames3 = newFields[i].htmlFor;
                if (theNames3)
                    newFields[i].htmlFor = theNames3 + counter;
                    //console.log(newFields[i].htmlFor);    
            }           
    var insertHere = document.getElementById('writeroot');
    insertHere.parentNode.insertBefore(newField,insertHere);
}
</script>

The second:

<span id="readroot2" 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">
    <!-- Content not displayed for simplicity purpose -->
</div>  
</span>
<span id="writeroot2"></span>       
<input class="btn btn-default" type="button" onChange="moreFields2()" value="Give me more fields!" />
<script>
    var counter = 1;
    function moreFields2() {
        counter++;
        var newField = document.getElementById('readroot2').cloneNode(true);
        newField.id = '';
        newField.style.display = 'block';
        var newFields = newField.querySelectorAll('[name], [id], [for]');
            for (var i=0;i<newFields.length;i++) {
                var theNames = newFields[i].name
                if (theNames)
                    newFields[i].name = "data[Condition][" + counter + "][" + theNames + "]";
                var theNames2 = newFields[i].id;
                if (theNames2)
                    newFields[i].id = theNames2 + counter;
                var theNames3 = newFields[i].htmlFor;
                if (theNames3)
                    newFields[i].htmlFor = theNames3 + counter;
            }           
        var insertHere = document.getElementById('writeroot2');
        insertHere.parentNode.insertBefore(newField,insertHere);
    }
</script>

I have tried by naming all the variables in the second function differently. But it seems irrelevant..

Upvotes: 0

Views: 122

Answers (3)

Akhil
Akhil

Reputation: 443

<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">
    <!-- Content not displayed for simplicity purpose -->
</div>
</span>
    <span id="writeroot"></span>
    <input class="btn btn-default" type="button" onclick="moreFields('readroot','writeroot')" value="Give me more fields!" />

    <span id="readroot2" 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">
    <!-- Content not displayed for simplicity purpose -->
</div>  
</span>
    <span id="writeroot2"></span>
    <input class="btn btn-default" type="button" onClick="moreFields('readroot2','writeroot2')" value="Give me more fields!" />


<script>
    var counter = 1;

    function moreFields(node, insertNode) {

        counter++;
        var newField = document.getElementById(node).cloneNode(true);
        newField.id = '';
        newField.style.display = 'block';
        var newFields = newField.querySelectorAll('[name], [id], [for]');
        for (var i = 0; i < newFields.length; i++) {
            var theNames = newFields[i].name
            if (theNames)
                newFields[i].name = "data[Condition][" + counter + "][" + theNames + "]";
            var theNames2 = newFields[i].id;
            if (theNames2)
                newFields[i].id = theNames2 + counter;
            var theNames3 = newFields[i].htmlFor;
            if (theNames3)
                newFields[i].htmlFor = theNames3 + counter;
        }
        var insertHere = document.getElementById(insertNode);
        insertHere.parentNode.insertBefore(newField, insertHere);


    }
</script>

Please counter check it again for the functionality. And you may please optimize the code.

Upvotes: 1

Akhil
Akhil

Reputation: 443

The second function is not firing on onChange event. If you try to design the function accordingly you could have to reduce the effort to writing too many java script.

Upvotes: 1

Amit Rana
Amit Rana

Reputation: 1117

First you have use two different events on both input

<input class="btn btn-default" type="button" onclick="moreFields()"

<input class="btn btn-default" type="button" onChange="moreFields2()"

So make sure that you are looking for same functionality on both than they will not..

onChange will fire after element change not while you type here check for code so be clear what you wanted. Because onChange will fire on blur in this case

Upvotes: 3

Related Questions