We Keep Coding

Javascript disable input field

I have two input fields one is for a phone number another is for an email. I would like to disable one field based on the user selection. Should a user click and enter input in either field, it would disable the other and vice versa.
I have written code but it seems to only disable the email field upon entering in numbers in the phone field. Removing the numbers in the phone field removes the disabled from the email input field.
IN MY HTML
<input type="number" name="number" placeholder="hone" class="cellphone" data-cp-visibility="new-user" id="phone">
<input type="email" name="email" placeholder="enter email" class="email" data-cp-visibility="new-user" id="email">
IN JAVASCRIPT
$('#phone').live('blur',function(){
if(document.getElementById('phone').value > 1) {
$('#email').attr('disabled', true);
} else {
$('#email').attr('disabled', false);
}
});
$('#email').live('blur',function(){
if(document.getElementById('email').value > 1) {
$('#phone').attr('disabled', true);
} else {
$('#phone').attr('disabled', false);
}
});
Ultimately I what I am trying to accomplish is that a user can click in either field and then enter input, upon doing so, the other field is disabled. Should they choose to remove the text they entered, it would remove the disabled feature and then they could choose the opposite input field.
I am not sure why it only works for one field and not the other or why if you enter in 333-333-3333 in the phone field it breaks the disabled, but 33333333 works fine.
Any ideas or insight as to what I may be missing?

to fix the dash issue you are having with the phone input, you can try changing it to:
<input type="text" required="" pattern="\d{3}[\-]\d{3}[\-]\d{4}" name="phone" id="phone" data-cp-visibility="new-user" placeholder="123-345-5678">
and here is another version of the js:
var $phone = $('#phone'),
$email = $('#email');
$phone.on('keyup change', function() {
$email.prop('disabled', $(this).val() ? true : false );
});
$email.on('keyup change', function() {
$phone.prop('disabled', $(this).val() ? true : false );
});

You may use jQuery on instead of live. live is deprecated as of jQuery 1.7.
You can also look for the keyup/keydown event on the input element.
$(function(){
$('#phone').on('keyup',function(){
if($(this).val()!=="")
{
$('#email').prop('disabled', true);
}
else {
$('#email').attr('disabled', false);
}
});
$('#email').on('keyup',function(){
if($(this).val()!=="")
{
$('#phone').prop('disabled', true);
}
else {
$('#phone').prop('disabled', false);
}
});
});
Here is a working sample.

I would recommend using .on('input', ...) to listen for changes, this makes it so even if you use the increment/decrement buttons (or other forms of input) you'll trigger the event-handler. Then use .attr('disabled', boolean) to control enable/disabled state, see example below:
$(function() {
$('#phone').on('input', function() {
$('#email').attr('disabled', $(this).val() !== "");
});
$('#email').on('input', function() {
$('#phone').attr('disabled', $(this).val() !== "");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" placeholder="phone" id="phone">
<input type="email" placeholder="enter email" id="email">

How to instantly review text inside input

I've seen some sites that using jquery to review instantly any text wrote inside an input text field.
Here is example :-
where i write a it instantly shown at => some_site.com/a
when i write another letter b it instantly shown at => some_site.com/ab
and so on anything i wrote instantly shown
But that is not all ! if i removed any text so the input field is empty
it shows => some_site.com/???
This could be good for reviewing input text before submit the whole form
How to do such nice effect ?
if html form code is
<input type="text" name="txt" id="txt">
~ thanks for help

Here is a working example
http://jsfiddle.net/ydzr8/
basically you want the keyup event to get the value from the text box
<input type='text' class='input'/> <div class="display">http://www.something/???</div>
Then
$('.input').keyup(function(){
if($(this).val() === '')
{
$('.display').html("http://www.something/???");
}else{
$('.display').html("http://www.something/" + $(this).val());
}
});

Since you tagged Mootools in this question, here is a Mootools way to do it:
HTML example:
<input type='text' class='input' />
<div id="result">http://www.mysite.com/<span></span>
</div>
Mootools:
document.getElement('input').addEvent('keyup', function () {
var val = this.value ? this.value : '???';
document.id('result').getElement('span').innerHTML = val;
});
// Option 2:
document.getElement('input').addEvent('keyup', function () {
$$('#result span').set('html', this.value ? this.value : '???');
});
Demo here

check if all input field has value jQuery condition

i have several input fields with a class name of required.
i have a code below to check if all my <input> fields have a value, if not empty or null, it will show/unhide a specific div.
but it doest seem to work on me.
also, by default, #print is displayed as none via CSS.
<!-- index.php -->
<input type="text" id="getID" class="required form-control" placeholder="id">
<input type="text" id="getName" class="required form-control" placeholder="name">
<!-- script.js -->
$(document).ready(function() {
$('input.required').each(function() {
if($(this).val() != "") {
$("#print").show();
}
else {
$("#print").hide();
}
});
});

I'd suggest:
$('#print').toggle(!($('input.required').length == $('input.required').filter(function () {
return this.value;
}).length));
Simplified JS Fiddle demo.
Obviously this should be run on submit, assuming you want to only show the #print element as a validation prior to submission.
References:
filter().
toggle().

As I stated in my comment above, you're checking the values when the page loads, before the user has any chance to enter anything. If you have a button on your page, bind the event to that which will fire the function at the right time.
Something a little like this jFiddle
index.php
<input type="text" id="getID" class="required form-control" placeholder="id">
<input type="text" id="getName" class="required form-control" placeholder="name">
<div id="button">Submit</div>
<div id="print">You're missing something D:!</div>
script.js
$('#button').on('click', function() {
$('#print').hide();
var error=false;
$('input.required').each(function() {
if($(this).val() == "") {
error=true;
}
});
if(error) {
$('#print').show();
}
});

Try
$(document).ready(function () {
//the default state
var valid = true;
$('input.required').each(function () {
//if the value of the current input is blank then the set is invalid and we can stop the iteration now
if ($.trim(this.value) == '') {
valid = false;
return false;
}
});
//set the visibility of the element based on the value of valid state
$("#print").toggle(!valid);
});

Show placeholder instead of the default value in html form

A text field in html form have a default value,
but I would like to show the placeholder instead of the default value.
any ideas?

From what you said here it sounds like you actually want to listen for the focus and blur events and just clear the contents of the <input> with some kind of cache to restore it if nothing gets typed.
<input id="foo" type="text" value="" data-value="" />
Then in script
var foo = document.getElementById('foo');
foo.addEventListener('focus', function () {
this.setAttribute('data-value', this.value);
this.value = '';
});
foo.addEventListener('blur', function () {
if (this.value === '')
this.value = this.getAttribute('data-value');
});
DEMO

Provided you are only concerned with browsers that support HTML5, the following is an option:
<input type="text" name="myText" placeholder="My Placeholder">

<input type="text" name="foo" placeholder="Foo Name"/>
<input type="hidden" name="foo" value="foo"/>

On one hand, it is doable; on the other hand, I'm not sure why you should.
$('input[type="text"]').each(function (i, o) {
var inputBox = $(o),
swapInValue = function () {
inputBox.val(inputBox.data('val'));
},
swapOutValue = function () {
inputBox.data('val', inputBox.val()).val('');
};
inputBox.blur(swapOutValue).focus(swapInValue);
});

How not to grab default value of inputbox

I am grabbing the value of input box and passing to the URL as querystring. I dont want to grab the default value "Enter Keywords(address....) which is controlled to show or hide by the following:
//**onClick and OnLostFocus (focus and blur) events on textareas and input textboxes**
$('input[type="text"], textarea').focus(function () {
defaultText = $(this).val();
$(this).val('');
});
$('input[type="text"], textarea').blur(function () {
if ($(this).val() == "") {
$(this).val(defaultText);
}
});
<input name="KeywordBox" class="BasicSearchInputBox" type="text" size="300" value="Enter Keywords (address,city and state OR zipcode)"/>
How not to grab the default text but just user input?? in jquery?

I usually add some default class name to the input field, then clear it when the user types. That way I can tell if the default "watermark" text is there, or user data.

The proper way to do this would be to use placeholder and fallback for older browsers.
For your current problem you can just check for that default text when you grab the value. Something like:
$('form').submit(function(){
if (~$('input').val().indexOf(defaultText)) {
// Not found, do your ajax stuff
}
});

The code you have above doesn't really do default values (placeholder). If someone first types 'anything' into the field, then clears the value from the field, your code will reset it to 'anything' instead of 'Enter Keywords...'
You need a plugin like http://archive.plugins.jquery.com/project/defaultvalue
<input placeholder="Enter a username…" type="text">
<input placeholder="…and a password" type="password">
<script>
$(' [placeholder] ').defaultValue();
</script>
If you really want to write it on your own, the simplest steps are
Add a placeholder property in the input field
onfocus: clear input.value if input.value equals input.placeholder
onblur: set input.value to input.placeholder if input.value is empty

You can do it with something like:
function togglePrompt() {
if (this.value == this.defaultValue) {
this.value = '';
} else if (this.value == '') {
this.value = this.defaultValue;
}
}
window.onload = function() {
var el = document.getElementById('inp0');
el.onfocus = togglePrompt;
el.onblur = togglePrompt;
}
<input value="Enter text..." id="inp0">