Problem While Getting All of Input Values

Question

I entered Jquery very fast and I m having trobule.I m trying to get all input value and alert them.But i get only first input.Also I need to put span because input should be draggable.Where I m doing.I hope you ll answer it

<label>Paragraph</label>
<span class="blue">
<div id="page"></div>
</span>
<script>
$("label").click(function(){
$("#page").append('<span class="blue"><input  type="text" /></input></div></span>');
$(".blue").draggable();
$("#page").droppable();
});
$("#page").dblclick(function(){
var panel= $("#page .blue");
var inputs = panel.find("input");
alert(inputs.val());
});
</script>

or the other style

<p></p>
<label>Paragraph</label>
<span class="blue">
<div id="page"></div>
</span>
<script>
$("label").click(function(){
$("#page").append('<span class="blue"><input  type="text" /></input></div></span>');
$(".blue").draggable();
$("#page").droppable();
});
$("#page").dblclick(function(){
alert($("#page input").val());
});
</script>

justis · Accepted Answer · 2011-06-15 18:40:37Z

2

Like Niklas said, you want to use each() here. Here's an example, based off of your original code:

$("label").click(function() {
    $("#page").append('<div><input type="text" value="foo" class="fooBox" /></div>');
});

$("#page").dblclick(function(){
    $('.fooBox').each(function() {
        alert($(this).val());
    });
});

Here is a jsFiddle where you can try it out.

answered Jun 15, 2011 at 18:40

justis

5044 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Niklas · Accepted Answer · 2011-06-15 18:31:45Z

1

Use .each() to loop through each input. Like this:

var inputs = panel.find("input");
$(inputs).each(function(i,e){
  alert($(e).val());
});

answered Jun 15, 2011 at 18:31

Niklas

30k5 gold badges54 silver badges74 bronze badges

1 Comment

justis Over a year ago

You answered while I was making a jsFiddle for it, so I upvoted you :)

daybreaker · Accepted Answer · 2011-06-15 18:49:28Z

1

Based on your previous post plus this one, you seem to have a misunderstanding of how jQuery selectors work.

alert($("#page input").val()); will not work, because $("#page input") returns a collection of every element that is an input inside of the page element.

There are some actions you can call on this that will apply to every item in the collection. Such as $("div.page").css('background-color','red'); - this will apply a red background color to every div with a class of page without the need to iterate over them individually.

But there are some actions that can not apply to the collection, and will only choose the last (or first, I cant remember which) item in the collection. For example, what you are trying to do: alert($("#page input").val()); will only alert one value. Because .val() must be applied only to one single element. Not an entire collection. So wehn you call it on the entire collection, it will only return the .val() for one of them. To alert every value, you need to iterate over the collection.

answered Jun 15, 2011 at 18:49

daybreaker

1,4401 gold badge11 silver badges18 bronze badges

1 Comment

justis Over a year ago

+1 thanks for trying to address the OP's underlying misunderstanding.

Collectives™ on Stack Overflow

Problem While Getting All of Input Values

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related