We Keep Coding

jQuery attribute filter to get textbox based on a value

I am trying to get all empty text boxes on my page using jQuery. Somehow I am not able to get all the text boxes that are empty.
I have three text boxes like this
<input type="text" class="test" />
<input type="text" class="test" />
<input type="text" class="test" />
$(".test[value='']") -- this does not returns anything.
if i have this
<input type="text" class="test" value="a" />
<input type="text" class="test" />
<input type="text" class="test" />
$(".test[value='a']") -- this returns one control which is correct.
$(".test[value='']") -- this still returns nothing.
if I type "a" in the second textbox then
$(".test[value='a']") -- this still returns only one control.
What wrong am I doing here?

You should be searching where there is no value attribute, like this:
$('.test:not([value])')
or
$('.test'):not('[value]')
Based on your comments it seems that you want not to get the initial list of elements, but also be able to re-run the selector when someone inputs the value. The issue here is that if you enter the text to input, it does not add value attribute to the DOM. In this case you can use approach similar to what is described in this answer:
$('input:text').filter(function() { return this.value == ""; })
This approach checks the value of the input, not the DOM.

How to retrieve value from <div contenteditable="true"> in Servlet

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

jQuery.val() doesn't work on an <input> tag

After typing something in an input, and clicking on the button, ".val()" return an empty value, any idea why?
HTML CODE:
<div class="mainClass">
<div class="class1" >
<div class="class2">
<h3>Settings 1</h3>
<label>
<span>Text 1:</span>
<input type="text" name="text">
</label>
<label>
<span>Text 2:</span>
<input type="text" name="text2">
</label>
</div>
</div>
<div class="class3" >
<div class="class4">
<h3>Settings 2</h3>
<label>
<span>Text 1:</span>
<input type="text" name="text">
</label>
<label>
<span>Text 2:</span>
<input type="text" name="text2">
</label>
</div>
</div>
</div>
<button id="Go" class="go" >GO </button>
JAVASCRIPT CODE:
$('#Go').on('click', function() {
alert($('.class1 input').val()); //return an empty value
$('.class1 input').val("test");
alert($('.class1 input').val()); //return test
});
EDIT:
Even this doesnt work, and here i have only one input so I can't type in the wrong one:
<div class="mainClass">
<div class="class1" >
<div class="class2">
<h3>Settings 1</h3>
<label>
<span>Text 1:</span>
<input type="text" name="text">
</label>
</div>
</div>
</div>
<button id="Go" class="go" >GO </button>
EDIT 2: I found a beginning of the problem...
When I am doing that:
$('.class1 input').each(function () {
alert($(this).attr('name') + " value:" +$(this).val() );
});
I get two "alert" like this:
text value:
text value:myinputText
So two created for one in my HTML, the first one is empty and the second one work well!
Looking closely to my page, i found that all element are duplicated( <select,field, input...)
Any idea how is that possible? Am i calling two time my html file?
And all my code is in a popup( I don't know if it can help)
(I am new in Javascript and jQuery)
Thanks

There's more than one element matching '.class1 input'. You probably didn't fill the first one of the set.
From the documentation :
Get the current value of the first element in the set of matched
elements.
While val('text') fills all matching elements :
Set the value of each element in the set of matched elements
Which is why you see something in your second alert.
You'd better use a more selective selector. Usually we use an id, or a name if a form is used to send the values to a server.

$('.class1 input').val()
refers to two elements
<input type="text" name="text">
and
<input type="text" name="text2">

You have more than one element that matches.
From the jQuery docs
.val()
Get the current value of the first element in the set of
matched elements or set the value of every matched element.
You are only getting the first element of the matched set as the docs state. If you want all the values, you need to loop over the set.

Wrap your Jquery code around a Document-ready block:
$('document').ready(function(){});
like so:
$('document').ready(function(){
$('#Go').on('click', function() {
alert($('.class1 input').val()); //return an empty value
$('.class1 input').val("test");
alert($('.class1 input').val()); //return test
});
});
Even with so much help from google search and Stackoverflow, it took us 1 hour to identify this issue.

I had a similar problem Chrome repeatedly told me .val() is not a function, instead of using .val() I had to use .value That got the job done for me hope it works for you.

Is it possible to show a html element already on a page a second time without copying it?

I have a page with a hidden form containing several divs.
<form action="...">
<div>
<input id="menubar_open_article_bid" name="bid" onfocus="this.select();" onkeyup="do_v(); type="text">
<a href="#" onclick="return do_h();">
Beitrag öffnen </a>
</div>
<div>
<input id="menubar_open_article_cid" name="cid" onfocus="this.select();" onkeyup="do_a();" type="text">
<a href="#" onclick="return do_y();">
Container öffnen </a>
</div>
<div>
<input id="menubar_open_article_iid" name="iid" onfocus="this.select();" onkeyup="do_b();" type="text">
<a href="#" onclick="return do_x();">
Inhalt öffnen </a>
</div>
</form>
As a first try i copied one of the divs using jQuery to another form in order to show it there (visible).
That worked great, but now the html element id is there twice.
I do not want to change that id. So a solution where i could only reffer to the div with id "menubar_open_article_iid" to show the html-element would solve my problem. Is that possible? (though i never heard of something like this)

As far as I am aware, this is not possible.
I think the main problem here is that you want one input shown twice, but still being the same input. That is going to be problematic, and it is also bad interface design. The user is likely to be confused by having two separate but different inputs in a form.
I'd recommend you to not do this.

Maybe you can leverage this approach:
I'd use jQuery and jQuery metadata:
http://plugins.jquery.com/project/metadata
In your hidden form, don't specify any id's. Instead, specify what you want the ids to be via class metadata:
<form class="hide form-to-clone">
<div>
<input class="setId {id:'id1'}" />
</div>
<div>
<input class="setId {id:'id2'}" />
</div>
<div>
<input class="setId {id:'id3'}" />
</div>
</form>
In jQuery, clone the hidden form:
var clone = $('.form-to-clone').clone();
Then, loop through the elements in the clone and set the ids:
clone.find('.setId').each(function() {
var $this = $(this);
$this.attr('id', $this.metadata().id);
});
Then, append your cloned form to the page somewhere:
clone.show().appendTo('body');

ONLY Visible Div form elements will get submitted

I have used JavaScript to hide the divs containing form elements:
<script type="text/javascript">
<!--
function showMe (it, box) {
var vis = (box.checked) ? "block" : "none";
document.getElementById(it).style.display = vis;
}
//-->
</script>
When certain checkbox(es) are selected the respective div(s) are shown or get visible:
<form>
<input type="checkbox" name="modtype" value="value1" onclick="showMe('div1', this)" />value1
<input type="checkbox" name="modtype" value="value2" onclick="showMe('div2', this)" />value2
<input type="checkbox" name="modtype" value="value3" onclick="showMe('div3', this)" />value3
<input type="checkbox" name="modtype" value="value4" onclick="showMe('div4', this)" />value4
<input type="checkbox" name="modtype" value="value5" onclick="showMe('div5', this)" />value5
<div class="row" id="div1" style="display:none">Show Div 1 <input type="text" name="valueone" id="valueone" /></div>
<div class="row" id="div2" style="display:none">Show Div 2 <input type="text" name="valuetwo" id="valueone" /></div>
<div class="row" id="div3" style="display:none">Show Div 3 <input type="text" name="valuethree" id="valueone" /></div>
<div class="row" id="div4" style="display:none">Show Div 4 <input type="text" name="valuefour" id="valueone" /></div>
<div class="row" id="div5" style="display:none">Show Div 5 <input type="text" name="valuefive" id="valueone" /></div>
<br />
<input type="submit" name="button" id="button" value="Submit" />
</form>
In the above case I have used 5 divs with five inputs, if a user selects two checkboxes and submits the form, I don't want the other 3 input fields to get submitted with empty fields. Rather ONLY selected 2 input field's value should get submitted.

You can try disabling the blank fields as disabled fields do not submit with the form.

This is not the way forms work. You need to either:
modify the value of the inputs (usually bad) or...
manipulate the DOM elements to modify what is part of the form and what is not at a structural (and not styling) level (very bad) or...
break this into multiple forms and submit the one you're interested in only or...
disregard the information you're not interested in at the server side or...
change your form design.
Without further evidence I'd go with one of the latter two.

I can think of only two ways to solve this:
Check the values of checkboxes on server and ignore the textbox values (but the values will still be sent to server)
When unchecked, completely remove the divs (or just inputs) from the form using JavaScript and add them back when checkbox is checked
Slightly modified version of the previous one would be to have another hidden form, where you can move the divs when unchecked. You need to remove the elements from current form and move them back when checkbox is checked - this way, you could preserve the values user already filled into the textboxes, but when unchecked, the values won't be submitted with current form.