CODEWITHSUNDEEP
javascript
Sireini
Sireini

Reputation: 4262

Replace placeholder of an input in a dynamic form

What I am trying to achieve is to set the placeholder of an input field dynamically. I have an input where I say how many inputs I want to render in the form. On that created inputs I set an onchange event:

function inputOnchange (){
    setTimeout(function(){

        var createdInputs = document.querySelectorAll("*[class^='createInput']");

        createdInputs.forEach( function(item){
            item.onchange = function() {
                changeFormPlaceholder();
            }
        })

    }, 200);
}

As you see it runs an function when the onchange event is triggered below the function:

function changeFormPlaceholder(){

    var inputs = document.querySelector('.formFieldInputs');
    var num = 0;
    var valueArray = {};

    inputs.childNodes.forEach( function(input){
        var inputValue = input.value;
        var name = 'value' + num++;
        valueArray[name] = inputValue;
    })

    for( var newPlaceholder in valueArray ){

        if(valueArray.hasOwnProperty(newPlaceholder)){

            console.log("newPLH", newPlaceholder, valueArray[newPlaceholder])

            var form = document.querySelectorAll("*[class^='exitIntentInput']");

            for(var i = 0; i < form.length; ++i){
                    // console.log("aaraay", form[i].placeholder);
                form[i].placeholder = valueArray[newPlaceholder];
            }
        }
    }
}

Now It changes only on the last input field and sets all input field to the second value.

So how can I change them individually?

Here is an FIDDLE

Type in something in the inputs on the sidebar you will see them appear on the right and now change the input value on the left you see my issue

Upvotes: 0

Views: 212

Answers (1)

Guest
Guest

Reputation: 111

You run a for loop in the other for loop, 

for( var newPlaceholder in valueArray ){
    if(valueArray.hasOwnProperty(newPlaceholder)){
        console.log("newPLH", newPlaceholder, valueArray[newPlaceholder])
        var form = document.querySelectorAll("*[class^='exitIntentInput']");
        for(var i = 0; i < form.length; ++i){
                // console.log("aaraay", form[i].placeholder);
            form[i].placeholder = valueArray[newPlaceholder];
        }
    }
}

and when the second time of the outer for loop, the new Placeholdee="value1",

for(var i = 0; i < form.length; ++i)
  // console.log("aaraay", form[i].placeholder);
  form[i].placeholder = valueArray[newPlaceholder];
}

then the inner loop will set placeholder of all indexes of form to valueArray["value1"], the last value of inputs.

The simplest way to solve this problem is that declarie var valueArray as an array but object. Thus no need to run twice for loops. Code as follows:

function changeFormPlaceholder(){
    var inputs = document.querySelector('.formFieldInputs');
    var num = 0;
    var valueArray = [];

    inputs.childNodes.forEach( function(input){
        var inputValue = input.value;
        var name = 'value' + num++;
        valueArray.push(inputValue);
    })

    var form = document.querySelectorAll("*[class^='exitIntentInput']");
    for(var i = 0; i < form.length; ++i){
        // console.log("aaraay", form[i].placeholder);
        form[i].placeholder = valueArray[i];
    }
}

Upvotes: 1

Related Questions