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/

Remove input placeholder using jquery

does anyone know how to remove input placeholder using jquery?
I want to do is if one of the inputbox got a value...all the inputbox placeholder will be remove....does anyone know how to do that?
<input type="text" name="name" placeholder="1.)">
<input type="text" name="age" placeholder="2.)">
<input type="text" name="address" placeholder="3.)">

Should work:
$(':input').removeAttr('placeholder');

Get all the inputs, and attach a change event handler, inside the event handler get the value from all the inputs, join the values together, and if it's still nothing, none of the inputs have a value, if it has length, at least one of the inputs have value, and you can remove the placeholder attributes :
var inputs = $('input[type="text"]');
inputs.on('change', function() {
if ( $.map(inputs, function(el) { return el.value; }).join('').length )
inputs.removeAttr('placeholder');
});
FIDDLE

I DONT RECCOMEND to remove placeholder
instead, make a focus, and this will automatically hide placeholder at that moment:
$(element).focus();

.removeAttr()
var txtbox = $('input[type="text"]');
txtbox.change(function () {
txtbox.removeAttr('placeholder');
});

$('input[name="name"]').removeProp('placeholder');

You can change the placeholder to an empty string on keyup.
$("input[type=text]").keyup(function() {
$("input[type=text]").attr("placeholder","")
});
JSFiddle demo

Would something like this work? Untested, but it should remove the placeholder attribute on the first change to any input.
var inputs = $('input');
inputs.one('change', function(){
inputs.removeAttr('placeholder');
});

I've gone one step further, in case you also want this. This code will remove the placeholder text in all text inputs if any of them have a value, but if you then remove all the values it will put the placeholder text back. May not be necessary, but have it...
var $inputs = $("input:text");
$inputs.on("change", function() {
if ($.map($inputs, function(el) { if (el.value) return o.value; }).length) {
$inputs.each(function() {
this._placeholder = this.placeholder;
$(this).removeAttr("placeholder");
});
} else {
$inputs.each(function() {
this.placeholder = this._placeholder;
});
}
});
jsfiddle example...

if you want to reset it back to the original placeholder instead of removing it entirely try clearing the val() first then adding the attr()
$('#name').val('');
$('#name').attr('placeholder', 'whatever your previous placeholder was');

try:
if ($(input).val()) {
$(input).attr("placeholder", "")
}

Jquery Show Input Text Based On Input Value

I facing problem with my jquery, on showing input text based on input value.
Here is the JS fiddle demo :
http://jsfiddle.net/Ltapp/364/
When I try to input #hotmail, the input box will show. But when I want to type some text in the #hotm input box, it will hide again.
JS code :
$(window).load(function(){
var myString = '#hotmail';
$('#hotm').hide();
$("input").keyup(function () {
var value = $(this).val();
if($(this).val().match(myString)) {
$('#hotm').show();
} else {
$('#hotm').hide();
}
});
});

It's because your selector $("input") affects both input elements. I have updated it to the $("input:first") selector instead. JsFiddle here
$("input:first").keyup(function () {
var value = $(this).val();
if(value.match(myString)) {
$('#hotm').show();
} else {
$('#hotm').hide();
}
});

As many has said, you are binding the event on all the inputs I did a little change:
$(function(){
var myString = /#hotmail/ig;
$("#check").bind('keyup checkvalue', function() {
$('#hotm')[myString.test(this.value) ? 'show' : 'hide']();
}).trigger('checkvalue');
});
using regex if you are using #HoTmAil it will also hit on that, and also added a custom event checkvalue to see if #hotm should be visible on for example a postback on the form you might be using.
demo: http://jsfiddle.net/voigtan/xjwvT/1/

You're affecting all inputs. Either give each one a unique ID / Class or use the jQuery $(this) method.
See JSFiddle Here:
http://jsfiddle.net/Ltapp/366/
<input type="text" id="firstinput"/>
<p id="secondinput"><input type="text"/></p>
var myString = '#hotmail';
$('#secondinput').hide();
$("#firstinput").keyup(function () {
var value = $(this).val();
if($(this).val().match(myString)) {
$('#secondinput').show();
} else {
$('#secondinput').hide();
}
});

use this for your if part :
if($(this).val().match($(this).val().substr(0,strlen($(this).val())))

it's because the new box also = "input"; if you give the hotmail textbox it's own id, it won't hide
<input id="hotmail" type="text"/>
and then
$("#hotmail").keyup(function () {...});

Clearing a text input (if it's empty) when another text box is clicked - jQuery

I have an email text box that contains the text '(Not Required)' until a user clicks on it, at which point it turns blank. I'm trying to make it to where if the user clicks another text box without entering an email address (or entering anything), the text box will revert to containing (Not Required).
Here's what I have:
$(document).ready(function () {
$('#email').val("(Not Required)");
// this part works fine
$('#email').click(function(){
if ($(this).val() == '(Not Required)'){
$(this).val('');
}
});
// this isn't working
$(':text').click(function(){
var em = $('#email').val().length();
if (em<3){
$('#email').val('(Not Required)');
}
});
});
I can't figure out why the second part isn't working correctly. Any help would be rewarded with a lifetime's devotion to yourself from myself in a very big way. Forever.

var em = $('#email').text().length();
Should be
var em = $('#email').val().length;
And I show you a better way do this by chain method:
$(document).ready(function () {
$('#email').val("(Not Required)").foucs(function() {
$(this).val('');
}).blur(function() {
if ($(this).val().length < 3 ){
$(this).val('(Not Required)');
}
});
});

You have to use $('#email').val().length instead of $('#email').text().length()

Change
$('#email').text().length();
to
$('#email').val().length;
And just a suggestion, why not use the blur() event of the email input to return the 'Not Required' text instead of waiting for a click on another input box?

click isn't the event you should catch. focus is the one to go. never forget keyboard navigation.
Don't query the DOM twice, save the DOM element and work with it.
use val() instead of text and length instead od length()
:text isn't a good selector. it implies the global selector $('*')
$(document).ready(function () {
var $email = $('#email');
$email.val("(Not Required)");
// this part works fine
$email.focus(function(){
if (this.value == '(Not Required)'){
this.value ='';
}
});
$('#otherTextBoxId').focus(function(){
if ($email.val().length <3 ){
$email.val('(Not Required)');
}
});
});