We Keep Coding

get html element value after changing it

In a view, I'm trying to retrieve the value of an html input box AFTER I have changed it. In other words, the page loads with
<input id="input_one" type="text" value = "apple" />
When the page opens the input box has the word apple in it. I click on this input box, erase the word apple, and then write the word "orange" in instead. when I do the following:
$('#input_one').click(function() {
console.log($('#input_one').attr('value'));
});
the result is "apple" not orange. Is there a way to get the new value I just input without submitting the form? I'm trying to make client side validation using javascript on the page, if the value is something, submit form, otherwise display message "value must be something"
maybe I can do something like
$('#input_one').attr('value', 'new value');
but how do I get the new value I just put in? where is this new value stored? innerHTML? or text() maybe?

attr() will get the attribute of the <input>, which is the initial value of the element.
The current value of the element is a property. If we wanted to get any element property:
$('#input_one')[0].value;
$('#input_one').prop('value');
However, jQuery has the perfect method, .val(), for you:
$('#input_one').val();
What is the difference between attribute and property?

Try .val() instead:
$('#input_one').val();

Try something like this:
$("#input_one").blur(function() {
alert(this.value);
});
This alerts the new value of the input box every time you put it out of focus.

I've problems to clear inputs text width jQuery

Well.... i've the next problem and i don't know for why....
I need clear some inputs, the value and text but the text in the input not clear.
My code:
$("#bloque-addDireccion").each(function(){
var input = $(this).find("input[name$='Mia']");
$(input).each(function(){
$(this).text("");
$(this).attr("value","");
});
});
I'm inspect the inputs and the value it's correct ("") but i've the older text always in the input.
What i'm do wrong?

The .text(text) method cannot be used on form inputs. To set the text value of input or textarea elements, use the .val(value) method.
please also check the Difference between val() and text()
try .val(value)
$(this).val("");

As others mentioned to change the value you need to do $(this).val("");.
Me being a beginner as well, my guess why .text() does not work is because as mentioned here: http://www.w3schools.com/tags/tag_input.asp, <input> does not have a text attribute, therefore at this example, $(this).text() seems to point at nothing.

Well... My solution: I chage the value in other javascript using .value("xxxxx"); to change the value and I change this for
.attr("value","xxxx");
And, when I try to reset/change next time the value, i'm using
.attr("value","xxxx");
and it's works....If put .val("xxx"); isn't works!
Thanks for all responses! :D

How to update value of a textbox when the value of another textbox changes.

I have a problem. I have a user control which contains multiple textboxes. When I update a value in one textbox it should calculate value and fill the value in another textbox automatically. I am writing Javascript code in Usercontrol.
When I change the value in the textbox, I am trying to get elementIDs of other textboxes.It shows me an error. It looks to me the elements are not present or they are somewhere else.
Can anyone give me a simple example?
Any help would be appreciated.

if you use jQuery...
var ids = [];
$('input[type=text]').each(function() {
ids.push($(this).attr('id'));
});
ids is now an array of all the ids of the inputs that have the type of text

How to change and track changes to a textarea

I found it really hard to come up with a question title for this one so I apologise that it's fairly cryptic but I'll try explain better there.
Basically part of an app I'm developing involves placing 'placeholders' in a textarea and then modifying those placeholders outside of the textarea.
For example:
This is the <first> placeholder. This is the <second> placeholder.
This is the <first> placeholder again.
Basically i have JS that detects these placeholders and creates input boxes to hold the text. So there would be an input text box for first and one for second.
What I want to achieve is when I type a value into the textbox it changes the placeholder in the textarea to the content being typed into the textbox. Think sublime text editor's snippets for a textarea.
I'm trying to figure out how I can track the placeholders in the text area. For example if a placeholder was <first_name> and i started typing into the placeholders textbox 'Billy'. I could easily change the placeholder by using a string replace function. However now the placeholder <first_name> doesn't exist in the textarea and so now I can't go back and change it. I need to have a way of tracking these placeholders whilst they are changing.
I hope that makes sense.

If you're not bound to a <textarea> element, you can try with a simple div with the attribute contenteditable="true". This way you can use some <span> to mark all the placeholders.
I set up a demo on jsfiddle, try it.

Using an element with contenteditable="true" would be easier for that task, because you could represent placeholders as span elements and you would then only have to retrieve them by id or any other unique attribute to update their content.
If you have to use a textarea and the users can only modify it's content using external inputs, maybe you could initially track the index of each placeholers and their length and keep those synchronized as values are changed.
You could then easily replace content in the textarea. For example, if the placeholder starts at 15 and has a length of 13.
var string = 'this is a test {placeholder} bla bla bla',
placeHolderIndex = 15,
placeHolderLength = 13;
string =
string.substring(0, placeHolderIndex)
+ 'new value'
+ string.substring(placeHolderIndex + placeHolderLength);
//update indexes of every placeholders that comes after this
//one and update the content length of this placeholder.
Obviously, you don't want to hardcode any values and you will want to handle this process in a dynamic way, but that's just an example.
NOTE: I guess users can modify the textarea content if you're using one. In that case, it would make things a bit more complicated, because you would have to update the index of the placeholders for every modifications the user does and you would also have to prevent them from editing the placeholders-mapped text directly.

Getting HTML with the data using jQuery

I have a form which has many elements (e.g. textarea, input, select), after users have entered some data the states of these elements should change.
For example, an input[type="radio"] element will have the attribute checked="checked" if a user has checked it. The value attribute of an input[type="text"] element will contain the text entered by user.
The problem is that the html string returned by $('#form1').html() does not contain these data.
Feel free to take a look at this example:
http://jsfiddle.net/cmNmu/
You can see that no matter what your inputs are, the html returned is still the same (having no attribute data).
Is there any easy way to collect the html including their states?
Thanks in advance.

use below code getting the value of input type text via jQuery
alert($("input:text").val())

Maybe you could use the 'onblur' event handler to set the value of the element when you leave it

You should get the value using :
$('#form1').find(':input').val();
$('#form1').find(':radio[name=gender]:checked').val();
if you have multiple input then you can filter them bu their name or class or even id. Then you will need to select input using .find(':input[name=input_field_name]'). My Suggestion is : use name property instead of other property if you want to use form.

People usually use $('#form1').serialize() to get the values. If html() doesn't return both the source and data, I don't think that there is something you can other than manually constructing the full html by looking at the data.
Live demo: http://jsfiddle.net/cmNmu/6/

By using the jQuery formhtml plugin written by gnarf:
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
The changes in the input elements can be reflected in the html string returned by formhtml().
Thank you very much everyone.