Develop Reference

Copy Text from Input form into DIV

I want to create 1 input field and one Div.
When u write text in the Input and hit the button i want the text to be displayed in the DIV. Its so simple but it just won't work.. i hope someone can do this easy task for me.
I tried last:
<form>
Bearbeitungstext: <input id="textInput" type="text"><br>
<input type="button" value="text einbinden" onclick="$('texxxt').val($('#textInput').val())">
</form>
<div id="texxxt">
</div>

Try to use id selector properly,
$('#texxxt').text($('#textInput').val());
Also you have to use .text() instead of .val(), .val() is not a function for div elements. It is for form elements which are having value property.
And the best approach for your case would be binding an explicit event handler,
var div = $("#texxxt"),inp = $("#textInput");
$("form button").click(function(e){
e.preventDefault();
div.text(inp.val());
});

This can be done with php $_GET($whatever); also, to do this you will need the name="whatever" on the input field.

Bearbeitungstext:
<input id="textInput" type="text"/><br>
<input type="button" value="text einbinden" onclick="$('#texxxt').html($('#textInput').val())"/>
<div id="texxxt">
to change DIV content we use html() not val()

How to distiguish when to use .val() or .text() dynamically using jQuery?

I need to be able to know when to use val() and when to use text() with jQuery dynamically.
If I have a span and an input with the same class name, I need to apply val() on the inputs and text() on spans to set it's value/content.
Here is my HTML markup
<input class="att" name="some1" value="" type="text"><br>
<input class="att" name="some2" value="" type="text"><br>
<input class="att" name="some3" value="" type="text"><br>
<div class="att"></div><br>
<div id="test" class="att"></div><br><br>
<div id="cl">Click Me</div>
Here is what I tried which is not setting the value as expected
$(function(e){
$('#cl').click(function(e){
//Select any input that has the class "att" and apply the val() function
$('.att :input').val('123');
//Select any element that is not an input and apply the text() function
$('.att').not(':input').text('123');
//Search for an element with a known ID but apply `val()` if the element is input
$('#text .att :input').val('123');
//Search for an element with a known ID but apply `text()` if the element is not an input
$('#text .att').not(':input').text('123');
});
});
I also created a jfiddle with my code
How can I correctly apply the val() and text based on the element type?

You are using wrong selectors. Thats why you are not getting desired results. Use space between selectors when you need search further elements inside them, don't use them otherwise.
it should be .att:input
and
#text.att:input
and
#text.att
https://jsfiddle.net/gqxsdsyb/5/

Try the .is() function. You can do element detection with that. For example,
if ($(element).is("span")){/* set text */}
// or
if ($(element).is("input")){/* set val */}

How to select only textboxes from a bunch of dynamically created elements in jQuery?

I'm creating a bunch of form elements like textbox,textarea,checkbox and dropdownlists dynamically and i want to select only textboxes whose id ends with some value. How can we accomplish this in jQuery.
P.S. I know how to select an element whose id ends with by using
$( "[attribute$='value']" ) selector. But here i have apply some kind of filter to select only text boxes.Below is the final html output rendered after the element creation. Now how can i select only textbox with id txtFirstnamefeedback1.
<input type="text" id="txtFirstnamefeedback1">
<input type="text" id="txtLastnamefeedback1">
<input type="text" id="txtSurnamefeedback1">
<p id="pfavblogliteraltextfeedback1">Select your interested blog </p>
<input type="checkbox" id="chk1favBlogfeedback1" value="Bike">ASP.NET Web Forms</ br>
<input type="checkbox" name="chk2favBlogfeedback1" value="Car">ASP.NET MVC

Add type in selector, :text will filter out only the textboxes i.e. all html elemnent where input type is text
$(":text[attribute$='value']")
Your selector would be like
$(":text[id$='feedback1']")

This will select textbox as well as textarea
$('input[type=text], textarea')

Why does this input always remain clickable?

Basically i want the outer div to take all events, so the input and anything else in the div is not clickable:
<div id="div1">
<div id="div2">
<label>Input 1</label>
<input type="text" id="input1" />
</div>
</div>
$(document).ready(function() {
$(document).on('click', '#input1', function(e){
e.preventDefault();
};
});
Here's the non-working example http://jsfiddle.net/KFWmk/3/
Any help appreciated :)

In newer jQuery (1.6+):
$('div input').prop("readonly", true);
This sets the HTML readonly property to true for all inputs in a div.
Please note that using .attr() to set properties (attributes with boolean values of on or off) has been deprecated in jQuery.

First of all bacause you havn't included the jQuery library.
Second bacause you have a type-o.
Third because the the focus is emitted before the click event. (Prove)
If you want to make an input field not editable you can use:
$("input").prop("readonly", true);
or simply when you create the input field in html:
<input readonly type="number">
If you want to prevent focus on an input field you can use:
$("input").on("focus", function() {
$(this).blur();
});

$('div input').attr("readonly", "readonly");
you can make all input fields in the div as read only.

You can try like this
$(document).ready(function() {
$('div input').prop("readonly", true);
});

What is the most efficient jQuery selector in the following mark-up?

I currently have some third party client-side "magic widgets" library that I have to deal with... :) All I have to do really is to add some small amount of behavior to those things with jQuery to accommodate for some simple business rules. A lot of times, I find myself selecting a bunch of elements in the same way. Since "magic widgets" are already super heavy on JS, and I even notice it on my fast machine, I was trying to keep my own JS to an absolute minimum. So, given that the user clicks on one of the following inputs, what is the most efficient way to select all the inputs, including the clicked one, in the following structure with jQuery?
<div>
<label><input ... /></label>
<label><input ... /></label>
<label><input ... /></label>
</div>

First of all, your inputs shouldn't be wrapped in labels, but that's a different argument.
The fastest way is probably:
$('input').click(function(){
var siblings = $(this).closest('div').find('input');
});
This will select your clicked input again too, though. If that's a problem, try:
$('input').click(function(){
var siblings = $(this).closest('div').find('input').not($(this));
});
If you were using correct markup so that the label tags preceded each input element, then your HTML would look like
<div>
<label for="input1" /><input id="input1" ... />
<label for="input2" /><input ... />
<label for="input3" /><input ... />
</div>
Then your jQuery code becomes way easier:
$('input').click(function(){
var siblings = $(this).siblings('input');
});

Well, assuming none of the elements in that markup have unique id's or class names, the most efficient selector you can use is a combination of tag names and the >, or first-child selector:
$("div > label > input");

$("div>label>input") I presume. Although you could give each input a common class and do $("input.class").

it depends. if the markup only consists of your fragment than:
$('input');
All modern broswers have a cache to tags.
If your looking for the inputs in within the div add an id to the div:
<div id="input_fields">
<label><input ... /></label>
<label><input ... /></label>
<label><input ... /></label>
</div>
and use this selector:
$('#iput_fields > label > input');
The id is important since it is the fastest possible query a browser can perform.

Seems like using class name better than using tag names without any parent. Here is the test for it for test your self.
Maybe more complex html structure give different results.