How can I pass a data from iframe to database?

Question

1.00/5 (1 vote)

See more:

I designed a text editor using the following code. now I wish to save the content I write in Iframe will be saved inside my database table. How can I make my editor work?

What I have tried:

<pre><!DOCTYPE html>
<html>
<head>
  <script src="https://kit.fontawesome.com/889d5ab78b.js" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript"></script>
<body onload="enableEditMode();" style="margin-top: 100px; margin-left: 200px;">
  <div>
   <select onclick="execCommandWithArg('fontName',this.value);">
  		<option value="Arial">Arial</option>
  		<option value="Comic Sans Ms">Comic Sans Ms</option>
  		<option value="Courier">Courier</option>
  		<option value="Georgia">Georgia</option>
  		<option value="Times New Roman">Times New Roman</option>
  	</select>
    <button onclick="execCmd('bold');">class="fas fa-bold"__^</button>
    <button onclick="execCmd('underline')">^__i class="fas fa-underline"__^</i__^</button>
  
  	<select onclick="execCommandWithArg('formatBlock',this.value);">
  		<option value=H1>H1</option>
  		<option value=H2>H2</option>
  		<option value=H3>H3</option>
  		<option value=H4>H4</option>
  		<option value=H5>H5</option>
  	</select>
  
Size <select onclick="execCommandWithArg('fontSize',this.value);">
  		<option value=1>1</option>
  		<option value=2>2</option>
  		<option value=3>3</option>
  		<option value=4>4</option>
  		<option value=5>5</option>
  	</select>

  	<button onclick="execCmd('justifyFull')">^__i class="fas fa-align-justify"__^</button>
  	<button onclick="execCmd('justifyRight')">^__i class="fas fa-align-right"__^</button>
  	<button onclick="execCmd('justifyCenter')">^__i class="fas fa-align-center"__^</button>
  	<button onclick="execCmd('justifyLeft')">^__i class="fas fa-align-left"__^</button>
  	<br><br>
  	<button onclick="execCmd('subscript')">^__i class="fas fa-subscript"></button>
  	<button onclick="execCmd('superscript')">^__i class="fas fa-superscript"></button>

  	
  	<button onclick="execCmd('insertOrderedList')">^__i class="fas fa-list-ol"></button>
  	Font Color <input type="color" onchange="execCommandWithArg('foreColor', this.value);">
    Highlighter <input type="color" onchange="execCommandWithArg('hiliteColor', this.value);">
  	<button onclick="execCommandWithArg('insertImage', prompt('Enter URL:', ''));">^__i class="fas fa-image"></button>
    


  </div><br>
<form action="api.php" method="post">
   <div class="form form-control">
   <label for="course_id">Course Id</label> 
<input type="number" name="course_id">
</div>
 <div class="form form-control"> 
  <label for="question"></label>
<input type="text" name="question" id="question" value="">
</div>
 <div class="form form-control"> 
  <label form="exam_date"></label>
<input type="date" name="exam_date">
</div>


 <div class="form form-control"> 
<input type="submit" value="post" >
</div>
</form>

  <iframe name="uzma" id="uzma" style="width: 500px; height: 250px;"></iframe>

  <script type="text/javascript">
  	function enableEditMode(){
  		uzma.document.designMode ='On';


  	}
function execCmd(command){

	uzma.document.execCommand(command, false, null);
}
function execCommandWithArg(command, arg){

	uzma.document.execCommand(command, false, arg);
}

var x = document.getElementByClass('uzma');
document.getElementByClass('question').value = x;
  </script>
</body>
</html>

Posted 7-Mar-21 20:52pm
Amatul Uzma

Updated 9-Mar-21 1:26am

Add a Solution

Comments

[no name] 8-Mar-21 14:06pm

Should have thought of that first, not last.

1 solution

Please Sign up or sign in to vote.

Solution 1

Accept Solution Reject Solution

Basic Principle: the <iframe> behaves like just another tab in your browser for most purposes (not quite all). If you treat it as such then all you need to do is send the data to the server (<form> or AJAX). You apparently have chosen to use a <form>

Now this requires that you know how to send data to a database (which is on the server) from your page (on the client).

In either case you will need server side code do actually access the database. I use PHP. Your form will target this page as its action attribute. That means that the submit button needs to be on the form (easiest way) and INSIDE your <iframe> = again, it's easiest to treat it as a separate tab.

You possibly have a lot to learn and here's the place I learned it:
W3Schools Online Web Tutorials[^]

Since I don't know what you actually know I didn't pre-set the link to the appropriate sections. You shouldn't have much trouble filling in the gaps.

Permalink

Share this answer

Posted 9-Mar-21 1:26am
W∴ Balboos, GHB

Add a Solution

Add your solution here

Plain Text
ASM
ASP
ASP.NET
BASIC
BAT
C#
C++
COBOL
CoffeeScript
CSS
Dart
dbase
F#
FORTRAN
HTML
Java
Javascript
Kotlin
Lua
MIDL
MSIL
ObjectiveC
Pascal
PERL
PHP
PowerShell
Python
Razor
Ruby
Scala
Shell
SLN
SQL
Swift
T4
Terminal
TypeScript
VB
VBScript
XML
YAML

OKPaste as

Strip HTML
Encode HTML
Paste as-is
Code block
Quoted Text
Best guess

To display as

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email

Password

Forgot your password?

Your Email

This email is in use. Do you need your password?

Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

Submit your solution

When answering a question please:

Read the question carefully.

Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.

If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.

Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.
Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

W∴ Balboos, *GHB* · Answer 1 · 2021-03-09T01:26:00

Basic Principle: the <iframe> behaves like just another tab in your browser for most purposes (not quite all). If you treat it as such then all you need to do is send the data to the server (<form> or AJAX). You apparently have chosen to use a <form>

Now this requires that you know how to send data to a database (which is on the server) from your page (on the client).

In either case you will need server side code do actually access the database. I use PHP. Your form will target this page as its action attribute. That means that the submit button needs to be on the form (easiest way) and INSIDE your <iframe> = again, it's easiest to treat it as a separate tab.

You possibly have a lot to learn and here's the place I learned it:
W3Schools Online Web Tutorials[^]

Since I don't know what you actually know I didn't pre-set the link to the appropriate sections. You shouldn't have much trouble filling in the gaps.