Here, I have a <div contenteditable="true">，which behaves the same as a <textarea> when clicked for edit. Users can type and edit text in it.
<label for="text_box" class="label">
Body:
</label>
<div class="text_box" name="text_box" id="text_box" contenteditable="true">
<br />
</div>
I have also a servlet. How can I get the value of <div> in my servlet?
You'd need to create a form with a hidden <textarea> and a piece of JavaScript which copies the div's inner HTML content into the textarea's value on submit of the form.
Here's a kickoff example:
<form action="servletURL" method="post" onsubmit="this.content.value=document.getElementById('text_box').innerHTML;">
<div id="text_box" contenteditable="true"><br /></div>
<textarea name="content" style="display:none;" />
<input type="submit" />
</form>
(note: using onsubmit and style attributes are a poor practice; use respectively jQuery's way of binding event handlers and a CSS file instead)
This way it's in the servlet available the usual way as if <textarea> wasn't hidden:
String content = request.getParameter("content");
Related
This question already has answers here:
onclick or inline script isn't working in extension
(5 answers)
Closed 5 years ago.
I'm trying to get some simply things going but can't seem to get a JS function to run following a click event.
Relevant HTML and JS:
function addSite() {
alert("DO SOMETHING");
}
<div id="whitelist" class="row-fluid">
<div class="span12">
<p>Enter the sites you use to work:</p>
<form action="">
<input class="input-mini" type="text" id="add-site" />
<input type="submit" onclick="addSite" />
</form>
<p>Your Whitelist:</p>
<div id="show-sites"></div>
</div>
</div>
Full HTML and JS here and here.
function addSite()
{
alert("DO SOMETHING");
}
<div id="whitelist" class="row-fluid">
<div class="span12">
<p>Enter the sites you use to work:</p>
<form action="">
<input class="input-mini" type="text" id="add-site" />
<input type="submit" onclick="addSite()" />
</form>
<p>Your Whitelist:</p>
<div id="show-sites"></div>
</div>
</div>
you need to include the parenthesis when you call the function, which is missing in your html.
It should be
onclick="addSite()"
instead of
onclick="addSite"
EDIT:
As #wOxxOm pointed out, you should not use not onclick attribute to fire a event when working with chrome extension. Instead bind event listener to that particular DOM element using addEventListener.
function addSite() {
alert("DO SOMETHING");
}
<div id="whitelist" class="row-fluid">
<div class="span12">
<p>Enter the sites you use to work:</p>
<form>
<input class="input-mini" type="text" id="add-site" />
<input type="submit" onclick="addSite()" />
</form>
<p>Your Whitelist:</p>
<div id="show-sites"></div>
</div>
</div>
Since you have set action attribute to empty string, do read this:
In HTML5, you can actually specify an action on the submit button itself. If there isn't one, it uses the form's action and if that is not set, it defaults to the empty string (note you cannot explicitly set the action to an empty string in HTML5).
Ref.: Is action really required on forms?
As I am pretty new to Web Development this might be an easy question.
In my HTML file I use the form method GET to parse data with the URL (it must be done this way, cannot be changed).
In this html there is a Text Field.
<div class="form-group {*if $ERROR_BEMERKUNG*has-error*/if*}">
<label for="text-comment">Bemerkung</label>
<textarea name="text-comment" id="text-comment" class="form-control" rows="3" placeholder="{$TRANSLATE.USERDATA.BEMERKUNG|default:'USERDATA.BEMERKUNG'}">{$COMMENT}</textarea>
</div>
How can I get the inside of this textfield, whatever is written in it afterwards, into my GET method? Hardcoded it works that way, but I don't know how I can get the value out of the div.
<input type="hidden" id="bemerkungen" name="bemerkungen" value= "TEST" />
EDIT: I didn't have to do anything for the textarea, it got parsed correctly.
But I have another div with a number field.
<div class="width115 left form-group has-feedback">
<span id="personen"> Anzahl Personen </span>
<input class="btn-input-wrapper" id="personen" type="number" min="1" value="1"/>
</div>
The value out of there is never parsed.
If by textfield you mean textarea, here's your answer:
All details you have in w3schools:
https://www.w3schools.com/tags/att_textarea_form.asp
Example:
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_textarea_form
When you send example, it will show you generated GET link with textarea value.
You missing form="usrform" part tho, but it should work if you keep everything between <form> tags.
I am adding some dynamic input controls via Jquery, I append them in the form, its working fine.
But these input controls are part of popup which I show using LightBox_me.js and when ever I open the hidden div with lihgtbox_me.js it puts these controls at the end of body tag and out of the form. Due to which data in these input controls are not being submitted with from.
Here is the html
<div id="attach" style="display:none" class="srpopup">
<input type="text" name="attach_name" id="sr1_name" />
<input type="text" name="attach_serial" id="sr1_serial" />
</div>
here is how i am showing the div as popup using lightbox_me.js
function showAttachment(){
$('#attach').lightbox_me({
centered: true,
onLoad: function() {
}
});
}
Your question is not clear enough. Any way I can't figure out where is your form start! Try to push your form inside the hidden div like below.
<div id="attach" style="display:none" class="srpopup">
<form>
<input type="text" name="attach_name" id="sr1_name" />
<input type="text" name="attach_serial" id="sr1_serial" />
</form>
</div>
same behavior to multiple elements.
// html
<div id="">
<input type="hidden" value="1258" /> value of user id to make friend
</div>
<div id="">
<input type="hidden" value="2595" />
</div>
<div id="">
<input type="hidden" value="2563" />
</div>
now i want to check which div to clicked to add friend and to take the hidden value and send it to server using this code
$().click(function(){
$x=$("hidden").value(); // the value is friendID
//then send $x to the server using Ajax
});
I'v tried using it like this
$("#div1,#div2,#div3").click(function(){
$x=$("hidden").value(); // the value is friendID
//then send $x to the server using Ajax
});
but i had more element the code grow and it's not dynamic, also the same thing if i want to make behavior to like button ,i have multiple like button how should i know which post and which like
Your selectors are all wrong. The div elements do not have any id attributes, so selecting them as you are will not work. Secondly, you want to use :hidden or input[type="hidden"] to select the hidden inputs. Finally, to get the value of a form element, use val(), not value().
If you want to make this dynamic, so the code will work for x number of div elements, use a class to identify them and then this within the handler to access the element that raised the event, like this:
<div class="foo">
<input type="hidden" value="1258" /> value of user id to make friend
</div>
<div class="foo">
<input type="hidden" value="2595" />
</div>
<div class="foo">
<input type="hidden" value="2563" />
</div>
$('.foo').click(function(){
x = $(this).find('input[type="hidden"]').val();
alert(x)
});
Example fiddle
try
<div id="div1">
<input type="hidden" value="1258" /> value of user id to make friend
</div>
$("[id^=div]").click(function() {
$x=$(this).find("[type=hidden]").val();
});
or
<div class="classSelector">
<input type="hidden" value="1258" /> value of user id to make friend
</div>
$(".classSelector").click(function() {
$x=$(this).find("[type=hidden]").val();
});
I have nested form tags like this
<form>
<h5>Main Form</h5>
<input type="text" />
<!-- Don't Show This Form -->
<form style="display:none">
<input type="text" />
<input type="text" />
</form>
<!-- Don't Show This Form -->
<form style="display:none">
<input type="text" />
<input type="text" />
</form>
</form>
The problem is the first form displaying although It's display none css inline
See the code in action http://jsfiddle.net/fZMKB/
I know I know, nested forms is against the rules But I have to use it this way for this reason
I need to reset bunch of inputs and form elements before jQuery event and I'm using this code
$('form').get(0).reset();
From this my earlier question How to reset forms elements (input,select,textarea,etc.) on events using jQuery
So the only reason I use form tag is I need to reset inputs and textarea, etc..
There's never a good reason to have nested forms. Instead, use proper HTML syntax and adjust your jQuery code accordingly. Here's some valid HTML markup:
HTML
<form>
<h5>Main Form</h5>
<input type="text">
<div class="one" style="display:none">
<input type="text">
<input type="text">
</div>
<div class="two" style="display:none">
<input type="text">
<input type="text">
</div>
</form>
Let's say you want to reset all text inputs, checkboxes, radio buttons, and select menus in the first subsection. This would only take two simple lines of jQuery:
$(".one input, .one select").val("");
$(".one textarea").html("");
If you want to restore default values, you should store the values in the HTML markup using the data attribute. Here's an example: http://jsfiddle.net/pgNrF/3/
You cannot have nested forms in HTML , you can have different forms but not nested
See this http://www.w3.org/TR/2011/WD-html5-20110525/forms.html#the-form-element
Content model
Flow content, but with no form element descendants.
No, nested forms are forbidden.
This is expressed in the HTML 4.01 DTDs as:
<!ELEMENT FORM - - (%block;|SCRIPT)+ -(FORM) -- interactive form -->
— http://www.w3.org/TR/html4/interact/forms.html#h-17.3
A FORM has a mandatory start tag, mandatory end tag and can contain anything in %block or SCRIPT, except other FORMs.
XML DTDs aren't as expressive as SGML DTDs so in XHTML this rule is specified only in the human readable text of the specification:
form must not contain other form elements.
— http://www.w3.org/TR/xhtml1/#prohibitions
HTML 5 isn't an SGML application and doesn't have an official machine readable description of the language. It also expresses this rule in text:
Content model:
Flow content, but with no form element descendants.
— http://www.w3.org/TR/html5/forms.html#the-form-element
Reference