The Problem:

We want easy to use forms, but Rock only gives us 2 options to clue people into how to fill out the forms.

• the tooltip info
• default value

we don't like the tooltip because it clutters up the page with multiple sections forms, and we don't like the default value because it can be deleted out of the box, and forgotten by the user.

The Solution:

Place holder text using javaScript.

let's get started!

First we need to find every text area on the page we do this with the following code:

     const tArea =  document.querySelectorAll("textarea");

 Now that we have that we can go ahead and log the tArea to make sure the code is working, type console.log(tArea); in the console

then you should click the arrow so that you expand out the object by clicking the little triangle on the console here:

you should see a list of every text area starting from 0 and ending on N-1:

Now we can move on to looping through these the tArea array. paste this code below.

    for(let i = 0; i < tArea.length; i++){
    // find this object's default value (text that started in the field) and make it's make that it's placeholder text;
        tArea[0].placeholder= tArea[0].defaultValue;
    }

 if you delete out what's in the first <textarea>,  the default text should now be replaced with placeholder text.

We can now set the value of each text area to blank. Add the following code inside your for loop:

    tArea[0].value = "";

Once you refresh your page, you won't need to delete out the first text box to see the placeholder text.

Now all you need to do is replace all of the tArea[0] to tArea[i] within your loop. You can also add this to the <input> tags by following the same steps. Here is the finished code:

<script>
    // find all the text areas, and inputs (as objects) and put them into an array
    const tArea =  document.querySelectorAll("textarea");
    const inputs = document.querySelectorAll("input");
    // loop through the text areas
    for(let i = 0; i < tArea.length; i++){
    // find this object's default value (text that started in the field) and make it's make that it's placeholder text;
        tArea[i].placeholder = tArea[i].defaultValue;
    // clear out the default text
        tArea[i].value = "";
    }
    // loop through the inputs
    for(let i = 0; i < inputs.length; i++){
    // find this object's default value (text that started in the field) and make it's make that it's placeholder text;
        inputs[i].placeholder= inputs[i].defaultValue;
    // clear out the default text
        inputs[i].value = "";
    }
</script>

And There you have it! with every form you can now just type your default values and run this code below your form block and you will replace your default text to place holder text. ENJOY!