Quick help regarding showing typed text from one input to another. Check out this code.

[imgrooot]

You know when you type text into a form input and it automatically types the same text in another div? Well I am trying to do the same thing but instead show the same text value from the div 1 to div 2. 

 

Here is my code.  It works with the input text field but not with the textarea.  Can you tell me why?

<input type="text" name="title" id="title" value="" maxlength="55" />
<textarea name="details" id="details" value="" maxlength="160" ></textarea>

<!-- Values show up in these inputs -->    
<input type="text" name="seo_page_title" id="seo_page_title" value="" maxlength="55" />
<textarea name="seo_page_description" id="seo_page_description" maxlength="160" ></textarea>


<script>
$('#title').on("input", function() {
    var dInput = this.value;
    console.log(dInput);
    $('#seo_page_title').val(dInput);
});
$('#details').on("input", function() {
    var dInput = this.value;
    console.log(dInput);
    $('#seo_page_description').val(dInput);
});
</script>

[Jacques1]

Works fine for me in Firefox 42 and Chromium: https://jsfiddle.net/mmm69xfo/

 

Which browser are you using?

[imgrooot]

Works fine for me in Firefox 42 and Chromium: https://jsfiddle.net/mmm69xfo/

 

Which browser are you using?

 

Oh I see why it wasn't working.  I am also using "ckeditor(http://ckeditor.com/)" in the textarea field.  Once I removed it, it worked.  Though I really need to use that editor.  How can I make it work with having that editor as well?

[Ch0cu3r]

You need to use CKEditors setData method in order set the value for the editor

[imgrooot]

You need to use CKEditors setData method in order set the value for the editor

 

Can you please show me how I would use the "setData method" within my code above?

[Ch0cu3r]

Modifying Jacques1 code example

 

https://jsfiddle.net/mmm69xfo/1/

[imgrooot]

Modifying Jacques1 code example

 

https://jsfiddle.net/mmm69xfo/1/

 

That works, but I think my original question might have been a bit misunderstood.  I already have the ckeditor in the details textarea.  I don't have the ckeditor in the seo description textarea and I don't need one either. 

 

Your example works, but it's the opposite of what I am looking to do.

[imgrooot]

Modifying Jacques1 code example

 

https://jsfiddle.net/mmm69xfo/1/

 

So can you show me the reverse of what you did? Like switch the "details" with "seo_page_description"?

[Ch0cu3r]

 

Your example works, but it's the opposite of what I am looking to do.

 

In that case you want to use CKEditors on change event. Then use editor.getData to get contents of the editor setting the the value for seo_page_description textarea using jquerys .val() method

 

Updated example

https://jsfiddle.net/mmm69xfo/2/

Edited November 27, 2015 by Ch0cu3r

[imgrooot]

In that case you want to use CKEditors on change event. Then use editor.getData to get contents of the editor setting the the value for seo_page_description textarea using jquerys .val() method

 

Updated example

https://jsfiddle.net/mmm69xfo/2/

 

Perfect! That's what I was looking for. 

 

One minor thing. Is it possible to remove/hide the "<p>" tag that shows up in the seo_page_description textarea?

[Ch0cu3r]

So you only want plain text to be inserted into seo_page_description textarea, stripping out all html tags returned by CKEditor? In that case use JQuery.text method

$('#seo_page_description').val($(evt.editor.getData()).text());

[imgrooot]

 

So you only want plain text to be inserted into seo_page_description textarea, stripping out all html tags returned by CKEditor? In that case use JQuery.text method

$('#seo_page_description').val($(evt.editor.getData()).text());

 

Yes since it's the meta title and description, I only require the plain text. 

 

Your method works perfectly now.

 

Thank you so much!

[Ch0cu3r]

So why the need for CKEditor if you only need plain text?

[imgrooot]

So why the need for CKEditor if you only need plain text?

 

Basically the "title" and "details" inputs are for showing text on a page. I need CKEditor  for the "details" input so that the user can modify the text.  That seo_description input is suppose to have the same value as the "details" input. So instead of making the user write the same text again in the seo_page_description textarea, I am having it so that it automatically adds to it from the "details" input. And since seo_page_description is only going to showing in the meta details in the header, I only need it in plain text.

 

One thing I noticed.  The textarea that has the CKeditor; it inserts the text(with tags) into the MySql database fine. I can also retrive it from the database fine.  It includes all the html tags.  However the text is not styled by default. I have to style the tags with css for the text to appear as the user has intended in the Ckeditor.   Is this normal? 

[Ch0cu3r]

CKEditor uses the contents.css file distributed by CKEditor for styling the contents in the editor. Make sure you are also including this stylesheet in your pages.

 

If you want the editor to use your stylesheet then use the stylesheet plugin

[imgrooot]

CKEditor uses the contents.css file distributed by CKEditor for styling the contents in the editor. Make sure you are also including this stylesheet in your pages.

 

If you want the editor to use your stylesheet then use the stylesheet plugin

 

Oh I see.  I will give it a shot.

 

Thanks again.