I wouldn't expect anything to happen, though, with the code you have there. You have a function you never call. You don't have a click handler for the button.

This works:

https://jsfiddle.net/h13a8hmz/

Visit the jQuery Learning Center. It's the best place to learn the basics!

https://learn.jquery.com/

watusiware

Re: check for 2 actions user makes on submit

6 years ago

I removed a stray <script> tag from your HTML:

https://jsfiddle.net/h13a8hmz/1/

jakecigar

Re: check for 2 actions user makes on submit

6 years ago

You still have to use .text(), not .html(), and you need some CSS to make it work in firefox.

Always start with the previous version of your code… https://jsfiddle.net/jakecigar/v4qL77e1/10/ adds a button.

JΛ̊KE

watusiware

Re: check for 2 actions user makes on submit

6 years ago

You still have to use .text(), not .html(),

contenteditable can contain HTML, though... The many WYSIWYG editors that use contenteditable create HTML content.

I use my own modified version of bootstrap-expandable-input.js which makes a textarea-like input that expands. It makes a paragraph when you type a newline. (It extends .val(), which returns a string, and turns the paragraphs back into newlines...)

osherdo1

Re: check for 2 actions user makes on submit

6 years ago

ok first of all thank you. code is now working.

I don't know what css code I need here to make it work in firefox. can you point me what I should focus on now?

So I understand I should use html method in the script and not text right? and I don't want a text box that extends.

about the var created

$.trim($('.test').html()).length === 0;

let me check if I understand correctly:

I remove whitespace from the end and beginning from an html contenteditable div called test. it sees the number of elements in the jquery objects as even to zero. Am I correct?

jakecigar

Re: check for 2 actions user makes on submit

6 years ago

If you try running Jon’s fiddle in firefox, assuming you got your firefox to work, the contenteditable div is invisible. It needs some CSS like mine.

$.trim on HTML doesn’t do much. If I type a return into the contenteditable I get something like "<div><br></div><div><br></div>", which when trimmed is the same, and does not come back as "empty"

The big question is, do you want formatted HTML in the contenteditable or just simple text? Formatted HTML needs to be massaged with a lot of code, as different browser will give you different HTML for the simplest input!

JΛ̊KE

watusiware

Re: check for 2 actions user makes on submit

6 years ago

I don't know what css code I need here to make it work in firefox

Jake's Fiddle has some CSS. Look at the CSS!

So I understand I should use html method in the script and not text right? and I don't want a text box that extends.

No, I would use .text() as Jake suggests. Since you didn't say what you are trying to make, I assumed you had a good reason for using .html() rather than .text() .

When the user types in a contenteditable , it goes in as text. If the user writes some HTML, actually, it will be escaped. But your Javascript code can insert some HTML. It's how the little WYSIWYG editor controls work. So, if you want to know if it's truly empty (no text, and no HTML nodes) use .html() . If it will never contain HTML nodes, just use .text() .

I remove whitespace from the end and beginning from an html contenteditable div called test. it sees the number of elements in the jquery objects as even to zero. Am I correct?

No, both .text() and .html() return strings. It's testing if the string length is zero. Your way would work as well, as well as taking the logical not of the length. Testing for zero length just seems more clear to me.

If you are uncertain what a jQuery function returns, LOOK IT UP:

http://api.jquery.com/html/

and I don't want a text box that extends.

You've got one, whether you like it or not. Try it!

Why did you use contenteditable , rather than a simple <input type='text'> ? I assumed you had a reason.

jakecigar

Re: Re: check for 2 actions user makes on submit

6 years ago

Wrong.

When I type a return into a contenteditable, I get HTML.

JΛ̊KE

osherdo1

Re: Re: check for 2 actions user makes on submit

6 years ago

I will need the user to choose elements from this text box in the future. let's say he could pick icons from a dropdown that will be contained in that contenteditable div. That would be added to the text in the contenteditable.

I have just noiticed the textbox is expanding and it look really ugly because it's goes out of border. I need something like the section for status upload in facebook. where I can also add emoticons and such elements. and also a bordered one so whenever text is being filled - the box is not being extended no matter what happens . That's also the reason I was using contenteditable.

I also submit the data right after into the server database. so I have changed .on('click' ) to .on('submit') . I also will write php code inside the function true condition.

What do you suggest me to do in order to improve it according to my needs specified above?

Thanks.

jakecigar

Re: check for 2 actions user makes on submit

6 years ago

https://jsfiddle.net/jakecigar/v4qL77e1/15/ has several tricks.

The contenteditable is wrapped in another div that does not grow.

I made an icon bar (one icon) that allows you to click and add it to the text.

JΛ̊KE

osherdo1

Re: Re: check for 2 actions user makes on submit

6 years ago

Jake thanks for the extra help. It is really late here in my place so I a going to sleep. I will be checking your suggestion in the morning and let you know what's up here. thanks for the icons in the fiddle. saved me some time with this. !!

jakecigar

Re: Re: check for 2 actions user makes on submit

6 years ago

I may use something like that myself someday!

JΛ̊KE

osherdo1

Re: check for 2 actions user makes on submit

6 years ago

Okay I have gone through the code. Few questions please:

console.log(test.length, test,element.html())

Can I remove console.log ? does it tests only the length? I didn't understand what this does:

test,element.html())

//What's this? didn't understand what value is retrieved here.
[name=content]").val(element.html())

in here:

console.log ($("form").serialize())
return false

why does it return false value?

Also in the js function you've there's this:

```
"undefined"
```

what's the undefined in this case?

Honestly this js function is really overwhelming . And I tried to google and understand what caret does in the context of this function and I still don't get it :(

Can you essentially tell me what does this function do? does it prevents from the textarea to expand?

jakecigar

Re: check for 2 actions user makes on submit

6 years ago

console.log writes debugging info to the dev tools. remove or read.

[name=content] searches by name.

return false prevents a default action, like a form submit.

As you type a vertical bar moves along. It lets you know where the next character is going to be added. You have to do all sorts of tricks to move it with javaScript.

The div that surrounds the contenteditable div prevents the expanding from messing up the layout.

JΛ̊KE

osherdo1

Re: check for 2 actions user makes on submit

6 years ago

Okay thank you for that.

Something weird is happening in my code:

i am including external code found in the fiddle you gave me:

https://jsfiddle.net/jakecigar/v4qL77e1/15/

It does not throw an alert in my code. it does in the fiddle.. the html is just the same .

https://jsfiddle.net/2ngwxm9j/ - that's my code. I feel really messed up.

osherdo1

Re: Re: check for 2 actions user makes on submit

6 years ago

this script work though (but isn't as functional as yours):

https://jsfiddle.net/ohhw39ng/

jakecigar

Re: check for 2 actions user makes on submit

6 years ago

Your non-functioning fiddle did not have jQuery added,

JΛ̊KE

osherdo1

Re: Re: check for 2 actions user makes on submit

6 years ago

sorry.

https://jsfiddle.net/2ngwxm9j/2/

I should say I need to insert the text inserted in the div to the database. The alert is just to make sure the button action is working. Maybe I should change something because of this?

That's basically where I need to go.

jakecigar

Re: Re: check for 2 actions user makes on submit

6 years ago

And Now, it works!

JΛ̊KE

jakecigar

Re: check for 2 actions user makes on submit

6 years ago

You don’t have a <button> anymore, and you have no click or submit hander to handle the submit.

JΛ̊KE

osherdo1

Re: Re: check for 2 actions user makes on submit

6 years ago

I am sorry I might have misunderstood you.

I actually do have a submit button in the fiddle I posted here:

<input class="button button-rounded button-post-to-profile" type="submit" value="Post to profile">

It does not return anything now when I press submit button. Not even the alert (which I honestly don't need. it's for demo only).

jakecigar

Re: check for 2 actions user makes on submit

6 years ago

A <button> is not an <input type=submit>.

You have to catch the submission and put the HTML into the hidden <input>.

JΛ̊KE

osherdo1

Re: Re: check for 2 actions user makes on submit

6 years ago

humbly asking why do I need to puth the html into the hidden input

jakecigar

Re: check for 2 actions user makes on submit

6 years ago

contenteditable content is not submitted to the server. You need to pass it along in a hidden field.

It’s just

var element = $(".test");
$("[name=content]").val(element.html())

JΛ̊KE

osherdo1

Re: Re: check for 2 actions user makes on submit

6 years ago

so (element.html()) in this case is the hidden input that I will create to get the data from the contenteditable?

By the way - is it optimal to store many .png files on a database? because a user can insert many icons to his status and he will have also many statuses.

jakecigar

Re: check for 2 actions user makes on submit

6 years ago

You are just storing html <img> tags. It's quite little data.

JΛ̊KE

osherdo1

Re: Re: check for 2 actions user makes on submit

6 years ago

Okay thanks.

Was I correct about this?

so (element.html()) in this case is the hidden input that I will create to get the data from the contenteditable?

jakecigar

Re: check for 2 actions user makes on submit

6 years ago

pretty much so.

JΛ̊KE

osherdo1

Re: Re: check for 2 actions user makes on submit

6 years ago

thanks!

I have created input type hidden:

<input name="getPost" type="hidden">

Next in the script you've given me I've changed the particular section to this:

$("[name=content]").val(getPost.html())

Am I ready to uploading a text & image status to the server yet? or there's fixes yet to be made? I still need to make sure the user is typing something. first section of the script seems to not catch it:

jQuery(function($) {
$("button").click(function() {
var element = $(".test");
var test = $.trim(element.text())
console.log(test.length, test,element.html())
if ($('#element').is(':empty')){
$("[name=content]").val(getPost.html())
// if (!test) return false

Can I also track if the text & img tag are passed into the hidden input field somehow?

Thanks - as always. really appreciate your constant help.

jakecigar

Re: check for 2 actions user makes on submit

6 years ago

Update the fiddle! I hate to read snippets out of context.

If you want

<input name =" getPost " type =" hidden ">

you need

$("[name=getPost]").val(getPost.html())

What is

if ($('#element').is(':empty')){

?

JΛ̊KE

osherdo1

Re: Re: check for 2 actions user makes on submit

6 years ago

about this:

if ($('#element').is(':empty')){

I found it here:

http://stackoverflow.com/questions/6813227/how-do-i-check-if-an-html-element-is-empty-using-jquery

Updated fiddle:

https://jsfiddle.net/v5Lk3qz6/1/

I think I will pivot to <textarea> with BBcode implemented. then I by that add emoticons (.png files stored locally) with the bbcode and store is as well into the database . This way I will remove the need to sanitize html inputted to the textarea.

jakecigar

Re: check for 2 actions user makes on submit

6 years ago

Wow BBcode. So retro. Just like the 1980’s!

if ($('#element').is(':empty')){

assumes you have an element with id="element". You don’t.

JΛ̊KE

osherdo1

Re: Re: check for 2 actions user makes on submit

6 years ago

LOL..

I think I should restart this. I am rolling back my code based on the fiddle you gave me at first:

Yours:

https://jsfiddle.net/jakecigar/v4qL77e1/15/

Mine (updated to the current state):

https://jsfiddle.net/auvyLntc/1/

(side note: this fiddle you have pasted here is not available:

http://jsfiddle.net/jakecigar/v4qL77e1/24/

)

I am trying to debug the function since it's always returning 'empty' no matter if there's an input or not.

jakecigar

Re: check for 2 actions user makes on submit

6 years ago

http://jsfiddle.net/jakecigar/v4qL77e1/24/

JΛ̊KE

jakecigar

Re: check for 2 actions user makes on submit

6 years ago

http://jsfiddle.net/jakecigar/v4qL77e1/24/

JΛ̊KE

This forum has the annoying habit of adding   to the end of links. I fixed it.

osherdo1

Re: Re: check for 2 actions user makes on submit

6 years ago

Thanks for that.

the situation now is like this:

When I submit empty status (nor chars at all) - 'a post is required' . Great!

When I submit only an icon - 'a post is required' . It's good since I want to get some words from the user.

When I submit at least one character - returns:

Forbidden (403)

CSRF verification failed. Request aborted.

this is basically where I need to add server side code?

And should I still add hidden field to get the data?

jakecigar

Re: check for 2 actions user makes on submit

6 years ago

fiddle does not provide any place to submit the form. If you have a place to send it, try it!

JΛ̊KE

osherdo1

Re: Re: check for 2 actions user makes on submit

6 years ago

sure I will!

But basically I could do it only tomorrow. No need for contenteditable. that's a relief!

It maybe out of the scope of Jquery - but how do I saves the icons so they could be shown again at other section/page?

jakecigar

Re: check for 2 actions user makes on submit

6 years ago

Without contenteditable, you can’t mix images in with text. The latest version removes all tags, except <img>s.

JΛ̊KE

osherdo1

Re: Re: check for 2 actions user makes on submit

6 years ago

didn't had the time today to copy it to my codebase. I will do it tomorrow and let you know what's up. thanks!

I might also have (surprisingly) questions about the javascript code (I will google the functions first of course to cover the most of it)

osherdo1

Re: check for 2 actions user makes on submit

6 years ago

I am going through the code of js. Questions are popping also and would love to hear your answers:

$(".errors", this).empty()

What does empty method does to the errors div? it's already empty.

--

Here:

if (!text) { // If there is no content in the "test" element.
$(".errors", this).append("<p>a post is required!</p>") //return this error.
return false

Why do I return false value?

--

}).on("keydown click", function() {
$(".icons img")

Are those just names?

--

$(this).html(function(i,html){

what's the i parameter?

--

In this function:

$(".icons img").click(function() {
$(".test").append($(this).clone())
placeCaretAtEnd($(".test")[0])
})

2 questions please:

1) What's does it clone exactly? couldn't figure out.

2) placeCaretAtEnd -what's that function? No good answer on Google.

I honestly don't understand what caret means ( I know it's this: ^. but what does it do?)

appreciate your help!

jakecigar

Re: check for 2 actions user makes on submit

6 years ago

What does empty method does to the errors div? it’s already empty.

If it is empty it does nothing. If there is an error there, it removes it.

Are those just names?

No those are 2 events where I felt is would be good to clear out the errors.

what's the i parameter?

It is a placeholder, and not used. I need it because I want the second parameter.

1) What's does it clone exactly? couldn't figure out.

2) placeCaretAtEnd -what's that function? No good answer on Google.

I clone the Image, so it can stay in the icons div.
If you don’t use that function to move the caret (try not calling it), the caret would be before the image. As I type this answer, the caret is a vertical bar the is almost always where I am typing. I’ve written code to move the caret, but this version I found in a stack overflow answer. It’s at the bottom of the fiddle.

JΛ̊KE

osherdo1

Re: check for 2 actions user makes on submit

6 years ago

Thanks for replying.

About those two:

}).on("keydown click", function() {
$(".icons img")

Can you explain simpler what keydown click and icons img are? are they just names? otherwise I couldn't understand good enough.

--

About the i parameter placeholding - can I do it in any other jquery function for the same reason you're doing now?

--

replace(/ |\uA0/g,"")

could you tell me what's the replacement? I cannot cipher what's that regex.

--

Cloning the image means store it somewhere on the server? I mean where the copy of it stays?

--

Unfortunately there's no jsfiddle in the post:

http://stackoverflow.com/questions/4233265/contenteditable-set-caret-at-the-end-of-the-text-cross-browser

although I remember there was.

About strip_tags function:

does it accept only img tag ? what does it do generally?

jakecigar

Re: check for 2 actions user makes on submit

6 years ago

.click() | jQuery API Documentation
.keydown() | jQuery API Documentation

the regex gets rid of non breaking spaces that the browser may insert,

Cloning is used to copy an element somewhere and still leave it where it was.

I pass the img tag to keep them, only!

JΛ̊KE

osherdo1

Re: Re: check for 2 actions user makes on submit

6 years ago

Oh so only when a user click on submit and type something the function is fire. I got it right?

--

Why do I need cloning in this case?

--

Now check this out:

this is how it shows in my browser:

http://4.1m.yt/4HNLGr-.png

1)Where's the caret exactly?

2) https://jsfiddle.net/bbao34o8/ - Here's the code in my side. When I submit empty form - it return an alert notifying either it's empty or not - and not like in the fiddle ( a message : 'a post is required')

jakecigar