Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

In Place Editing CMS Development HTML JavaScript Tutorial

Learn the logic behind building in-place content editing systems. We allow the user to edit content directly on the front-end where it displays. A good scenario to use this is granting a privileged user the right to edit some content in-place, save it to database when they finish editing, and restore the content container to its normal state.

<script> function makeEditable(div){ div.style.border = "1px solid #000"; div.style.padding = "20px"; div.contentEditable = true; } function makeReadOnly(div){ div.style.border = "none"; div.style.padding = "0px"; div.contentEditable = false; alert("Run Ajax POST request here to save the div.innerHTML \ or div.textContent to the database."); } </script> <h2>This is a web page</h2> <div onclick="makeEditable(this)" onblur="makeReadOnly(this)"> div containing content to be managed by the user... </div>
thumb

JavaScript Videos

Form Programming

Contact Form Web Application Tutorial Ajax HTML5 PHPCheckbox Toggle Tutorial Select Deselect All ElementsIn Place Editing CMS Development HTML JavaScript TutorialCustom Progress Bar Meter Development For File Upload FormsMultiphase Form Programming Tutorial Multi StepRestrict Text Input Characters HTML JavaScript TutorialMonthly Payment Loan Calculator Form Programming TutorialDynamic Select Year List Script HTML Form ElementsTip Calculator Application Form Programming Tutorialtextarea Form Field Character Counting and LimitingBuilding a WYSIWYG Rich Text Editor Textarea Replacement Part 1Building a WYSIWYG Rich Text Editor Textarea Replacement Part 2Div contenteditable Click Select All Text execCommand selectAllToggle Password Security Form Input Characters TutorialTrap User Check for Unsaved Written Work TutorialReal Time Text Input or Textarea Filter TutorialForm Select Change Dynamic List Option Elements Tutorial