textarea – This is the content that the user enters. HTML tags are naturally supported.

Add content button – This buttons calls our addContent() function which passes the div id of where the content is to be entered and the actual content itself from the textarea.

myDiv – This is the id of blank div where the content will be inserted.

Here is the JavaScript code for the addContent() function:

function addContent(divName, content){

document.getElementById(divName).innerHTML= content;

}

That’s it! All it does it retrieve the DOM element, which in this case, is just an empty div and sets the innerHTML attribute to the content that is passed over to this function from the form.

This demo is in response to a request that saves the content that the user has entered.

Demo

Enter your name below and click the button. Your name will be saved to a cookie that expires in 7 days. When you refresh the page or come back to visit you will see a heartwarming message welcoming you back.

Your name will be saved below:

Here is the HTML code:

<form name="myForm2">

Enter your name below and click the button. Your name will be saved to a cookie that expires in 7 days. When you refresh the page or come back to visit you will see a heartwarming message welcoming you back.

Please refer to W3 Schools for a detailed description of these JavaScript functions. The only edit I have made is with the getCookie function in lines 13-14 where it retrieves the cookie value and inserts the content into a div. Also, line 18 is very important as it calls the getCookie function and looks for the content cookie. If the cookie exists, the content will be displayed in the myDiv2 div.

When using these JavaScripts, make sure you load them after all your HTML is loaded. Otherwise, the function would have no place to insert the cookie content.

Although using cookies is a great way to store information, there are a couple of caveats:

Size limitation – This depends on the browser but keeping your cookies to a maximum size of 4000 bytes will keep you in the safe zone.

Cookie limit per domain – This also depends on the browser but the general rule is 20 cookies per domain.

Published by

Allen Liu

Building websites is a passion of mine. During the course of my work, I have created some snippets of code that I hope will prove useful to other developers.
View all posts by Allen Liu

Sorry but I couldn’t reply to the other thread, don’t know why. I’m not sure I know what you mean. I’ve used your function on the link:
addContent(‘texto_01’, get(“texto_01”,1,1,1,$page->ID) )
The value is fetched using get from a custom field.
The script is placed on my header file and functions.php should be able to find it like I did with the Showhide script, right?

I think I know the issue you are having now. The addContent() function is a JavaScript function and you are using it as a PHP function which leads to the fatal error that you see. You will need to add the following JavaScript function to your WordPress:

Very strange issue indeed. One would assume that if JavaScript code makes it into the header.php file in WordPress, that it should be available on all pages. Your issue sounds like it did not make it though. Did you confirm that the JavaScript code is not in your raw HTML? Can you give me a link to a sample page that illustrates this problem?

It looks like the issue you are having is separate from your edit to the header.php file. I can see that your JavaScript code is there. This is a PHP issue where you are calling addContent() function but it has not been defined or loaded. Have you confirmed that your addContent() function is there? Is this a custom function or a WordPress function?

While making specific use of it I stumbled into a problem that I hope someone can help on. This may not be the best/only way to skin this cat, but we have a PHP/MySQL page that has to be modified to ADD rows for data entry when needed. I have abandoned the traditional DOM object methods of adding a single row, since in this case the addition would be a whole block of rows. I don’t think I’m smart enough to do that…

Anyway, an idea hit me to make use of our MySQL dB and store the rows in there, and retrieve them using your method.

Skipping an ultimate requirement that the content of the addition needs to be invisible and inaccessible, I tried the above out. It works, but the variable ($_value) has form elements in it, including . The close of the tag, interrupts the value and throws the remaining code to the page, not awaiting insertion by the Submit Button.