Text area and Save Button

Technical Details

Forum version : phpBB3
Position : Founder
Concerned browser(s) : Google Chrome
Who the problem concerns : Yourself
Forum link : http://helpgr.forumgreek.com/

Description of problem

Hello,

I would like to know how to design a text area where whoever has access to that page can edit the text area and save the text.

For example,

This is the text area

and a save button below that.
I want if i want to change it, the text to stay the same and simply add information below and when i click save to simply save the updates.

Something like the block in the admin panel but have the editor style.

Could someone help me on this please?

Thanks,
Luffy

Hello @Luffy ,
Do you want to auto-save the contents of the text area of a post?

Hello @Black-Shadow,

No this will be in a html page and i want it to save the content of the text area if you leave the window. I am doing some tests and i don't get what i want.

Luffy

Have you try this tutorial? I have tested and when accidentally leave the post/page when I am return back to the forum and I am pressing New Post it is restoring the data back.

This is not a post i want this. This is a html page i want to add this.. There is no place to post something. It's just a text area as the profile fields that are editable and then by clicking save it should save the content.

Have you check this http://www.avacweb.com/t2355p15-request-user-forum-notepad#22551 ?

Doesn't Seem to work. @Ange Tuteur could you please tell me what i can do?

I figured to do this but it doesn't save anything:

Code:

 <div id="notesFg" class="mods_main" style="display:none">
            <h2>Σημειώσεις Διαχείρισης</h2>
                  <blockquote class="block_left">
                    <p class="explain">Οι σημειώσεις διαχείρισης είναι για να σημειώνετε ότι πιστεύετε ότι είναι απαραίτητο για τους υπόλοιπους συντονιστές/διαχειριστές.</p>
                  </blockquote>
                    <fieldset class="notepad-pa">
                      <legend class="field_title">Σημειωματάριο Διαχείρισης</legend>
                      <form method="post" name="post" action="">
                     
                           
                        <center><u><strong><center>Εδώ σημειώνετε ότι θέλετε να δουν οι υπόλοιποι γράφοντας πάντα στην αρχή το όνομά σας!
                          </center></strong></u>
                                       
                          <div class="field_editable" style="margin-top:5px;"><textarea class="inputbox" id="profile_field_2_5" name="profile_field_2_5" rows="12" cols="50"></textarea><img src="http://i.imgur.com/oNIG52p.png" class="ajax-profil_valid" alt="Επικύρωση" title="Επικύρωση" style="margin-top:5px;" /></div>
                      </center> 
                        </form>
                  </fieldset>
               
                </div>


Luffy

Here's an example I can give you. Go to Administration Panel > Modules > HTML pages management

Use your forum header : Yes
Paste the following code :

Code:

<h1 class="page-title">Notepad</h1>
<textarea class="inputbox" id="note-text" style="height:250px;width:99%;"></textarea>
<div style="text-align:center;margin:3px 0">
  <input id="note-save" class="button1" type="button" value="Save"/> <input id="note-reset" class="button1" type="button" value="Reset"/>
</div>

<script type="text/javascript">//<![CDATA[
(function() {
  var post = 6,
      text = '', area = getId('note-text'), save = getId('note-save'), reset = getId('note-reset'); 
 
  $.get('/post?p='+post+'&mode=editpost', function(d) {
    text = $('#text_editor_textarea',d)[0].value;
    area.value = text;
  });
 
  reset.onclick = function() {
    var c = confirm('Are you sure you want to reset the notepad ?');
    if (c) area.value = text;
  };
 
  save.onclick = function() {
    save.style.opacity = 0.3;
    $.post('/post?p='+post+'&mode=editpost', {
      subject : 'Notepad',
      message : area.value,
      post : 1
    },function() {
      text = area.value;
      save.style.opacity = 1;
    });
  };
 
  function getId(i) { return document.getElementById(i) };
})();
//]]></script>

Now make a topic where you allow the members you want to moderate. Once it's posted, click the edit button and copy the ID from the URL. /post?p=951443&mode=editpost

Now in the HTML above, replace the 6 in var post = 6, with the ID you copied. One other thing you need to make sure is that the following option is disabled :
Administration Panel > General > Security > Unauthorize unofficial forms to post messages and private messages on the forum : NO

Hello @Ange Tuteur,

Yes now it's solved and works perfectly!

Thanks,
Luffy

No problem.

Topic archived