sending entered information to a table in MySQL

Question

GraficRegret 0 Junior Poster

13 Years Ago

I know that this forum is for HTML and CSS, but I have a problem and I am not sure where to take it, so here it is.
I am using this code:

<div class="edit">
        <input type="button" id="bold" style="height:21px; width:21px; font-weight:bold;" value="B" onClick="fontEdit('bold')" />
        <input type="button" id="italic" style="height:21px; width:21px; font-style:italic;" value="I" onClick="fontEdit('italic')" />
        <input type="button" id="underline" style="height:21px; width:21px; text-decoration:underline;" value="U" onClick="fontEdit('underline')" /> | 
        <input type="button" style="height:21px; width:21px;"value="L" onClick="fontEdit('justifyleft')" title="align left" />
        <input type="button" style="height:21px; width:21px;"value="C" onClick="fontEdit('justifycenter')" title="center" />
        <input type="button" style="height:21px; width:21px;"value="R" onClick="fontEdit('justifyright')" title="align right" /> | 

        <input type="button" style="height:21px; width:21px;"value="1" onClick="fontEdit('insertorderedlist')" title="Numbered List" />
        <input type="button" style="height:21px; width:21px;"value="●" onClick="fontEdit('insertunorderedlist')" title="Bullets List" />
    </div>

    <iframe id="textEditor" style="width:690px; height:275px;">
    </iframe>


    <script type="text/javascript">
    <!--
    textEditor.document.designMode="on";
    textEditor.document.open();
    textEditor.document.write('<head><style type="text/css">body{ font-family:arial; font-size:12px;}</style></head>');
    textEditor.document.close();

    function def()
    {
       document.getElementById("fonts").selectedIndex=0;
       document.getElementById("size").selectedIndex=1;
       document.getElementById("color").selectedIndex=0;
    }

    function fontEdit(x,y)
    {
        textEditor.document.execCommand(x,"",y);
        textEditor.focus();
    }
    -->
</script></td>

to create a rich text editor on my web page, however I am not sure how to take the information that is entered into the editor and store it in the table that I have created on my server, I have the buttons made for the submition and the code for the insertion created in PHP, however I am stuck on how to pass the information to the PHP code in order to insert it into the table. Can anyone help?

mysql php web-design

3 Contributors
10 Replies
120 Views
4 Days Discussion Span
Latest Post 13 Years Ago Latest Post by GraficRegret

Dani AI

Generated 9 Months Ago

— the cleanest fix is to keep the submit form in the parent page and copy the editable iframe content into a hidden field before submitting. That avoids the layout problems you saw when adding a form inside the iframe, and it implements what suggested without changing the iframe document structure. was right that AJAX is an option too; both approaches are shown below.

Example: parent HTML + JS (copies iframe HTML into a hidden input on submit)

<form id="editorForm" method="post" action="save.php" onsubmit="return prepareSubmit();">
  <input type="hidden" name="content" id="contentField" />
  <input type="submit" value="Save" />
</form>

<iframe id="editorFrame"></iframe>

<script>
function prepareSubmit() {
  var iframe = document.getElementById('editorFrame');
  var doc = iframe.contentDocument || iframe.contentWindow.document;
  document.getElementById('contentField').value = doc.body.innerHTML;
  return true;
}
</script>

Server side (safe, minimal PDO example). Use utf8mb4, prepared statements and store in TEXT/MEDIUMTEXT:

<?php
$content = $_POST['content'] ?? '';
if ($content === '') { exit('No content'); }

$pdo = new PDO(
  'mysql:host=localhost;dbname=yourdb;charset=utf8mb4',
  'dbuser','dbpass',
  [PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION, PDO::ATTR_EMULATE_PREPARES => false]
);

$stmt = $pdo->prepare('INSERT INTO posts (html_content) VALUES (:html)');
$stmt->execute([':html' => $content]);
?>

Security and practical notes: never trust client HTML. Sanitize on input or on output (use an allowlist sanitizer such as HTML Purifier or equivalent) to prevent XSS. Ensure your DB column uses utf8mb4 to avoid character corruption. If you prefer AJAX (no reload), POST the same doc.body.innerHTML to an endpoint and handle the response; include CSRF protection for either method.

All 10 Replies

Member #949455

13 Years Ago

yes the div refers to a class I have created in a .css file, however that is just for making the buttons apear the way I want them to, if you need it I can post the class info as well.

May I ask you this question what is the textEditor product?

however I am stuck on how to pass the information to the PHP code in order to insert it into the table.

You can just used AJAX without a database. Since you are using javascript.

Member #949455

13 Years Ago

I need the information to go into my database so I can call it for the front end of my web page and so it can be edited and changed later as well, and the text editor is just the field that is typed in.

This is just a basic query to fetch the data from the database.

Member #949455

13 Years Ago

right, I have that part done I am trying to figure out how to pass the information typed into the text field into the PHP code that I have set up to insert the data into the table so that I can extract it later.

What text editor are you using?

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

GraficRegret 0 Junior Poster · Answer 1 · 2012-12-14T22:46:08+00:00

yes the div refers to a class I have created in a .css file, however that is just for making the buttons apear the way I want them to, if you need it I can post the class info as well.

GraficRegret 0 Junior Poster · Answer 2 · 2012-12-14T22:58:58+00:00

I need the information to go into my database so I can call it for the front end of my web page and so it can be edited and changed later as well, and the text editor is just the field that is typed in.

GraficRegret 0 Junior Poster · Answer 3 · 2012-12-14T23:10:17+00:00

right, I have that part done I am trying to figure out how to pass the information typed into the text field into the PHP code that I have set up to insert the data into the table so that I can extract it later.

GraficRegret 0 Junior Poster · Answer 4 · 2012-12-14T23:51:29+00:00

GraficRegret 0 Junior Poster

13 Years Ago

I created it myself using a tutorial to assist

drjohn 56 Posting Pro in Training · Answer 5 · 2012-12-15T20:19:14+00:00

To take data entered on a web page and put it in a database, you use a form and give the form and action - tell it to run a script when the submit button is clicked.

The script then takes the data, connects to the database and runs an sql query which inserts the data into a table in the database, and into the appropriate fields in that table.

You currently don't have a form, a submit button, an action or a script for us to look at..

The form should probably be in your iframe, with a textarea input field, named and ided, and the script uses that to know what data it has to handle.

GraficRegret 0 Junior Poster · Answer 6 · 2012-12-16T01:04:12+00:00

Yeah I thought that to but when I added the form script to the iframe it chanved and distorted both boxes. I will post the other scripts on Monday when I have access to them.

GraficRegret 0 Junior Poster · Answer 7 · 2012-12-19T00:03:50+00:00

GraficRegret 0 Junior Poster

13 Years Ago

ok so it would seem that noone has any answers then?

sending entered information to a table in MySQL

Dani AI

Recommended Answers Collapse Answers

All 10 Replies

Recommended Answers