Opened 12 years ago
Closed 12 years ago
#8590 closed Bug (invalid)
Form tags being removed on editor load in FF3.5 and Chrome 15
| Reported by: | Mike | Owned by: | |
|---|---|---|---|
| Priority: | Normal | Milestone: | |
| Component: | General | Version: | 3.0 |
| Keywords: | Cc: |
Description
Problem editing existing forms using CKEditor the following code replicates the problem I'm having with our intranet cms:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Form problem example</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<script type="text/javascript" src="../ckeditor.js"></script>
<script src="sample.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form action="sample_posteddata.php" method="post">
<h2 class="samples">Form problem example</h2>
<p>Works fine in IE6 - IE8, fails in FF3.5 & Chrome 15</p>
<p>
<div class="editorArea" style="min-height:400px;">
<div id="mainEditor" name="mainEditor" style="width: 100%; height: 400px; margin-bottom:26px;" class="mainEditor">
<form action="" class="form" method="post" name="frm_Comments">
<fieldset>
<legend>Your details</legend>
<table class="form">
<tbody>
<tr>
<td class="control">
<label for="SenderName">Your Name *</label>
</td>
<td>
<input class="singletextinput" name="SenderName" type="text"/>
</td>
</tr>
<tr>
<td class="control">
<label for="SenderDept">Your Department</label>
</td>
<td>
<input class="singletextinput" name="SenderDept" type="text"/>
</td>
</tr>
<tr>
<td class="control">
<label for="SenderEmail">Your E-mail address*</label>
</td>
<td>
<input class="singletextinput" name="SenderEmail" type="text"/>
</td>
</tr>
<tr>
<td class="control">
<label for="SenderPhone">Your Phone number</label>
</td>
<td>
<input class="singletextinput" name="SenderPhone" type="text"/>
</td>
</tr>
</tbody>
</table>
</fieldset>
<fieldset>
<legend>Your comments</legend>
<table class="form">
<tbody>
<tr>
<td class="control">
<label for="SenderComments">Enter your comments *</label>
</td>
<td>
<textarea class="multitextinput" name="SenderComments" type="text"></textarea>
</td>
</tr>
<tr>
<td colspan="2">
<input id="submit" type="submit" value="submit"/>
</td>
</tr>
</tbody>
</table>
</fieldset>
</form>
<p>some text</p>
</div>
</div>
<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace( 'mainEditor',
{
skin : 'kama'
});
//]]>
</script>
</p>
</body>
</html>
The form loads as expected in IE6 - IE8, but the form elements are stripped out in FF and Chrome.
Attachments (1)
Change History (8)
comment:1 Changed 12 years ago by
comment:2 Changed 12 years ago by
| Keywords: | forms firefox chrome removed |
|---|---|
| Status: | new → confirmed |
| Version: | 3.6.1 → 3.0 |
There are some errors in HTML but correcting them didn't change anything. Form tags are still stripped down.
This has been reproducible in Opera, Firefox, Webkit and IE9 from CKEditor 3.0. It works in IE6-8.
comment:3 follow-up: 4 Changed 12 years ago by
Missed the most obvious part. Nested forms are invalid HTML.
If you remove the upper form everything works as expected.
What is more browser itself (without any CKEditor logic) removes the inner form when it goes through the HTML.
comment:4 Changed 12 years ago by
Thanks for taking a look, I had a feeling that might be the case. I tried TinyMCE as well and was getting the same problems in the same places leaving the browser as the likely culprit. I'm upgrading a custom CMS which used FCK 1.0 and IE6, it utilised this quirk for it's form builder, has proved a massive pain to work around and get working with modern browsers.
In an attempt remove the invalid html, I have attempted using the div replacement method, but that results in a problem when using textareas, specifically when loading the editor anything after the closing textarea tag is rendered after the editor instance. This is limited to page loading and it all works fine when inserting a textarea and saving it.
So the solution I have settled on is using custom elements purely for editing purposes which get created on load of the page and removed when I save it. I've also made my main form conditional so it is only used to save the contents to the database and isn't present otherwise, which solves my problem.
Replying to j.swiderski:
Missed the most obvious part. Nested forms are invalid HTML.
If you remove the upper form everything works as expected.
What is more browser itself (without any CKEditor logic) removes the inner form when it goes through the HTML.
comment:5 Changed 12 years ago by
In an attempt remove the invalid html, I have attempted using the div replacement method, but that results in a problem when using textareas, specifically when loading the editor anything after the closing textarea tag
http://cksource.com/forums/viewtopic.php?t=17605 - is this the problem you are talking about?
comment:6 Changed 12 years ago by
That looks to be similar, been a couple of weeks since I tried it though so memory is a little vague following my christmas break.
comment:7 Changed 12 years ago by
| Resolution: | → invalid |
|---|---|
| Status: | confirmed → closed |
What is more browser itself (without any CKEditor logic) removes the inner form when it goes through the HTML.
If browser strips down the nested form then this means that CKEditor receives this reduced code. There is no way CKEditor can get to that code before the browser so it simply does not know about the missing form tag.
Could it be that <textarea ... type="text"></textarea> (there is no attribute type for textarea) or inputs that end without space before /> mess it up?
Just a guess.