We Keep Coding

Check if input value is not the same onBlur

How can I check if the value of an input box is not the same after blur?
$("#username").on('blur', function() {
$("#usertext").append("new input<br>");
})
Check this jsFiddle: https://jsfiddle.net/xztptsdg/
Let's think that I enter "Josh" in input and after blur, will append new input box. But, user can "re-blur" the username input, and will append other input.
I want to check if the value is the same, not append new input.

You may use change instead of blur, for example:
$("#username").on('change', function() {
$("#usertext").append("new input<br>");
});
So, there is no need to check if the value changed or not because the change event is sent to an element when its value changes.

See this fiddle
You can keep a global variable to store the current value of the textbox and then check whether the entered value is the same as the previous one. If not, then append the new input text and also set the global variable with the new one. Below is the Javascript that does this.
JS
var txt = "";
$("#username").on('blur', function() {
if (txt != this.value) {
$("#usertext").append("new input<br>");
txt = this.value;
}
})
I would suggest you to use change(). According to the docs
The change event is sent to an element when its value changes.
See the fiddle and below is the JS code with change().
$("#username").change(function() {
$("#usertext").append("new input<br>");
});

You can do it like following snippet.
var text = '';
$("#username").on('blur', function() {
if(this.value != text){
text = this.value;
$("#usertext").append('new input<br>');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="username" id="username">
<br>
<span id="usertext"></span>

How can I add to the end of the string that already exists in input field?

Now, If I hit the button, it clears all in the input field, and it automatically inputs "#marry" to it.
But, I don't want it to be cleared:(
What if I want to add "#marry" to the end of the strings that already exists in the input field?
How can I customize my javascript part?
Input field
<textarea class="box text_area" cols="10" id="input" name="comment[body]"></textarea>
button
<a href="#topic" id="username" value="#marry”><span class='btn'>reply</span></a>
javascript
$(document).on('click', 'a#username', function() {
$(".box#input").val($(this).attr('value'));
}

val() has a callback with the arguments index and value, you can use that to easily add something to the value.
$(".box#input").val(function(_, val) {
return this.value + 'some extra string';
});
$(document).on('click', 'a#username', function() {
var self = this;
$(".box#input").val(function(_, val) {
return val + self.value;
});
});

First of all adeneo's answer is good and you should read it. Here is an alternative solution that does not use jQuery:
I assume that both these elements are a part of a form. Let's say for instance the form has an ID of "post". We can access it using document.forms and then its fields as such:
var input = document.forms.post["comment[body]"];
Now, we can add to its value whenever the button is clicked. First select username with getElementById or querySelector and then add the event:
username.addEventListener("click", function(ev){
input.value += ev.target.value;
});
Or with jQuery (this also delegates if the element is not in the DOM yet):
$(document).on('click', 'a#username', function() {
input.value += this.value;
});
It might be desirable to append an extra space between the current text and the username.

append #marry at the end of text area. you can use bellow code its working fine.
$(document).on('click', 'a#username', function () {
var txtvalue = $(".box#input").val();
$(".box#input").val(txtvalue + $(this).attr('value'));
});
see jsfiddle link http://jsfiddle.net/F6mkh/1/

using html() to get changed content

I have a div that I need to grab the HTML contents of (so naturally I use html())...
However, they are text fields. Whenever I grab the contents of the div (that contains the text fields), it grabs the initial HTML and not any data changed by the end user...
Here is JS bin version..change the input field, run the function and you see that it will only take the initial value of the field...
Any way around this?
http://jsbin.com/oleni3/edit

http://jsbin.com/oleni3/5/edit
Try this out ^
The code:
$(document).ready(function() {
$('div#top input').change(function() {
$(this).attr('value', $(this).val());
});
$('#click').click(function() {
var _curHtml = $("div#top").html();
$("div#bottom").html(_curHtml);
});
});

Your getting the HTML of the div. You want to get the value of the input box:
$(document).ready(function() {
$('#click').click(function() {
var _curHtml = $("#data").val();
$("div#bottom").html(_curHtml);
});
});

No way to do it with html(). You'll have to get the value of each input using val(). You can use
$("input").each(function() {
doSomething($(this).val());
}
if it make life easier.

$(document).ready(function() {
$('#click').click(function() {
var _curHtml = $("#data").val();
$("div#bottom").html(_curHtml);
});
});

The easiest hack would be like this:
$("div#bottom input").val($("div#top input").val());
Get the value of the updated input and set that to the clone.
Updated link:
http://jsbin.com/oleni3/3/edit

$(document).ready(function() {
$('#data').change(function() {
$(this).attr('value', $(this).val());
})
$('#click').click(function() {
var _curHtml = $("div#top").html();
$("div#bottom").html(_curHtml);
});
});
This works.. here's the link http://jsbin.com/oleni3/2/edit
UPDATE: If you have many inputs inside the div, you can use this http://jsbin.com/oleni3/6/edit

jquery textarea value focus

This is probably stupidity on my part, but where am I going wrong with this?
$(function() {
$('textarea#comment').each(function() {
var $txt = $(this).val();
$(this).bind('focus', function() {
if($(this).val($txt)) {
$(this).val('');
}
});
});
});
Basically on focus I want to check if the value is the default value in this case 'Enter your comment', then if it is change the value to nothing.
Anyone know how to do this? I'm guessing its relatively simple. What the code does at the moment is removes any value.

Ok first off you should only have one tag with the id of comment since ids are supposed to be unique, but if we go with your code you have to setup a default value first like this:
<textarea id="comment">Enter text here</textarea>
Now the javascript:
(function() {
$('textarea#comment').each(function() {
var $txt = $(this).val();
//alert($txt);
$(this).bind('focus', function() {
if($(this).val() === this.defaultValue) {
$(this).val('');
}
});
});
})();
The self executing function syntax has been corrected here and should be as follow:
(function () { // my code here })();
and for default value use:
this.defaulValue; // works for input boxes as well
Hope it helps. Cheers

jquery_example plugin do exactly what you need. You may have a look at its source code and get some inspiration. Or you can store the default value as meta-data on the tag and check against it on change event of the textarea tag.

try
$('#comment').live('click change focus', function() {
var $txt = $(this).val();
if($txt == 'Enter your comment' );
$(this).val('');
});
DEMO

How to update span when text is entered in form text field with jquery

I would like a span to update when a value is entered into a text field using jquery.
My form field has a text box with the name "userinput" and i have a span with the id "inputval".
Any help would be greatly appreciated.

UPDATE:
although you marked this as the correct answer, note that you should use the keyup event rather than the change event or the keydown
$(document).ready(function() {
$('input[name=userinput]').keyup(function() {
$('#inputval').text($(this).val());
});
});

Try the following, you have to call again keyup() to trigger for the last char:
$(".editable_input").keyup(function() {
var value = $(this).val();
var test = $(this).parent().find(".editable_label");
test.text(value);
}).keyup();

Try this. Be sure that you understand what is going on here.
// when the DOM is loaded:
$(document).ready(function() {
// find the input element with name == 'userinput'
// register an 'keydown' event handler
$("input[name='userinput']").keydown(function() {
// find the element with id == 'inputval'
// fill it with text that matches the input elements value
$('#inputval').text(this.value);
}
}

$(function() {
$("input[name=userinput]").keydown(
function() {
$('#inputval').text(this.value);
}
)
})