Jump to content
Sign in to follow this  
imgrooot

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

Recommended Posts

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>

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

 

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 by Ch0cu3r

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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());

Share this post


Link to post
Share on other sites

 

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!

Share this post


Link to post
Share on other sites

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? 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.