We Keep Coding

JQuery input messages

I have a form with inputs. The first input needs to be filled out before the second input.
If the user clicks on input 2 first they get a message saying to fill the other input first. Now I want to make it so that after the message pops up, if the user then fills out input one the message disappears.
My codepen.
I tried adding an onchange function but that doesn't seem to work.
$('body').on('focus', '.clickable', function() {
if (!$('.look').val().length) {
$(this).siblings('p').text('Please select Type first')
}
});
$('body').on('change', '.look', function() {
if ($('.look').val().length) {
$(this).siblings('p').text('')
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div>
Input-1:<br>
<input type="text" name="first" id="one" class="look"><br> Input-2:
<br>
<input class="clickable" type="text" name="second" id="two">
<p class="warning"></p>
</div>
</form>

on change called when you leave the input, your code works when leaving the input, also you can change the "on change" by keyup to see the changes whitout leaving the input
codepen : https://codepen.io/anon/pen/QOzKwQ

You could use keyup as your event instead of change. Change needs to wait for you to click away from the input (blur).
$( 'body').on('focus','.clickable',function() {
if (!$('.look').val().length) {
$(this).siblings('p').text('Please select Type first')
}
});
$( 'body').on('keyup','.look',function() {
if ($('.look').val().length) {
$(this).siblings('p').text('')
}
});

Use .on("change keyup paste"...)
to detect immediate changes to the text-field
$( 'body').on('focus','.clickable',function() {
$('.look').on("change keyup paste", function(){
$(this).siblings('p').text('')
});
if (!$('.look').val().length) {
$(this).siblings('p').text('Please select Type first')
}
});
$( 'body').on('change','.look',function() {
if ($('.look').val().length) {
$(this).siblings('p').text('')
}
});

I don't mean to change your approach but you could try disabling the field so they can't click it and then enable it once input 1 has been filled?
HTML:
<form>
<div>
Input-1:<br>
<input type="text" name="first" id="one" class="look"><br>
Input-2:<br>
<input class="clickable" type="text" name="second" id="two" >
<p class="warning"></p>
</div>
</form>
The JS:
document.getElementById("two").disabled = true;
var dis1 = document.getElementById("one");
dis1.onchange = function () {
if (this.value != "" || this.value.length > 0) {
document.getElementById("two").disabled = false;
}
}

It will be more efficient if you track the user input using input event like :
$('body').on('input', '.look', function() {
if ($('.look').val().length) {
$(this).siblings('p').text('')
}
});
Snippet:
$('body').on('focus', '.clickable', function() {
if (!$('.look').val().length) {
$(this).siblings('p').text('Please fill the first input.')
}
});
$('body').on('input', '.look', function() {
if ($('.look').val().length) {
$(this).siblings('p').text('')
}
});
.warning {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div>
Input-1:<br>
<input type="text" name="first" id="one" class="look"><br> Input-2:
<br>
<input class="clickable" type="text" name="second" id="two">
<p class="warning"></p>
</div>
</form>

color handler changing CSS

I am trying to make it possible to change the background color of pull quotes by using the input type="color" tag in a form.
my HTML is as follows
<form action="change.php" method="post">
name: <input type="text"><br/>
email: <input type="email" id="email"><br/>
<label for="background-color">Choose a color for background :</label>
color: <input type="color" name="bgcolor"><br/>
<input type="submit" name="submit" value="Submit">
</form>
You see I was trying to do it in PHP by getting the color value from a POST , but I would reay like to solve this question in Jquery if possible.

You can achieve this with something like the following. You need an id attribute for you input. Then on blur event you will change the div background color with the input value if it is valid.
Also, you have to include jQuery in html <head>.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
JSFIDDLE
HTML:
<input type="text" name="bgcolor" id="bgcolor" maxlength="6" placeholder="Hex representation of the color">
JQuery:
$(document).ready(function() {
$('#bgcolor').on('change', function() {
var color = $(this).val();
var isOk = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test('#'+color)
if (isOk) { //If input is a valid representation of a color
$('#your_div_id').css('background-color', '#'+color);
}
});
});
isOk regex from here.
Or using type="color":
HTML:
<input type="color" name="bgcolor" id="bgcolor" value="">
JQuery:
$(document).ready(function() {
$('#bgcolor').on('change', function() {
var color = $(this).val();
$('#your_div_id').css('background-color', color);
});
});
UPDATE:
Move the following inside $(document).ready(function () { like this:
$(document).ready(function () {
$('span.pq').each(function () {
var quote = $(this).clone();
quote.removeClass('pq');
quote.addClass('pullquote');
$(this).before(quote);
}); //end each
$('#note').draggable();
$('#bgcolor1').on('change', function () {
var color = $(this).val();
$('#id1').css('background-color', color);
});
$('#bgcolor2').on('change', function () {
var color = $(this).val();
var isOk = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test('#' + color)
if (isOk) { //If input is a valid representation of a color
$('#id1').css('background-color', '#' + color);
}
});
});

Show div when radio button selected

I am novice in javascript and jQuery.
In my html have 2 radio buttons and one div. I want to show that div if I check the first radio-button but otherwise I want it to be hidden
so: If radio button #watch-me is checked --> div #show-me is visible.
If radio button #watch-me is unchecked (neither are checked or the second is checked) --> div #show-me is hidden.
Here is what I have so far.
<form id='form-id'>
<input id='watch-me' name='test' type='radio' /> Show Div<br />
<input name='test' type='radio' /><br />
<input name='test' type='radio' />
</form>
<div id='show-me' style='display:none'>Hello</div>
and JS:
$(document).ready(function () {
$("#watch-me").click(function() {
$("#show-me:hidden").show('slow');
});
$("#watch-me").click(function(){
if($('watch-me').prop('checked')===false) {
$('#show-me').hide();}
});
});
How should I change my script to achieve that?

I would handle it like so:
$(document).ready(function() {
$('input[type="radio"]').click(function() {
if($(this).attr('id') == 'watch-me') {
$('#show-me').show();
}
else {
$('#show-me').hide();
}
});
});

Input elements should have value attributes. Add them and use this:
$("input[name='test']").click(function () {
$('#show-me').css('display', ($(this).val() === 'a') ? 'block':'none');
});
jsFiddle example

$('input[name=test]').click(function () {
if (this.id == "watch-me") {
$("#show-me").show('slow');
} else {
$("#show-me").hide('slow');
}
});
http://jsfiddle.net/2SsAk/2/

$('input[type="radio"]').change(function(){
if($("input[name='group']:checked")){
$(div).show();
}
});

var switchData = $('#show-me');
switchData.hide();
$('input[type="radio"]').change(function(){ var inputData = $(this).attr("value");if(inputData == 'b') { switchData.show();}else{switchData.hide();}});
JSFIDDLE

How to clear text inside text field when radio button is select

Currently I have this radio buttons
Eletronics
Computers
Others
What I am trying to do is, if radio button Others is selected, I would like to display an input text field and let the user type.
What I would like to do is, when I select Others and type something inside the input field, then when I choose back to Eletronics or Computers, I would like to clear the text that I wrote inside input field.
Please kindly provide me with the solution of JavaScript or jQuery.
Here is my code sample. Please kindly check it: http://jsfiddle.net/dnGKM/

UPDATE
$('input:radio').on('click', function() {
if($(this).attr('id') == 'others') {
$('#showhide').css('opacity', 1.0);
} else {
$('#showhide').css('opacity', 0).find('input:text#others_text').val('');
}
});​
DEMO

You can use this:
document.getElementById("others_text").value='';
to clear the input field.

Please add below code of line in your code:
document.getElementById("others_text").value = '';
now its look like:
document.getElementById("others").addEventListener("click", function()
{
document.getElementById("others_text").value = '';
document.getElementById("showhide").style.opacity = 1;
}, false);
document.getElementById("computers").addEventListener("click", function()
{
document.getElementById("showhide").style.opacity = 0;
}, false);
document.getElementById("electronics").addEventListener("click", function()
{
document.getElementById("showhide").style.opacity = 0;
}, false);​
This would be helpful for you.

Try with this Solution:
$(function() {
$('input[type="radio"]').click(function() {
if($(this).attr('id') == 'others') {
$('#others-text').show();
} else {
$('#others-text').hide();
$('#others-text').val('');
}
});
})
Here there is a JSFiddle link:
http://jsfiddle.net/dnGKM/4/

You add the jQuery tag to your question, so that should do the trick using jQuery :)
CSS:
.hidden {
display: none;
}
HTML:
<label for="electronics">Electronics</label>
<input type="radio" id="electronics" name="rdbutton" />
<label for="computers">Computers</label>
<input type="radio" id="computers" name="rdbutton" />
<label for="others">Others</label>
<input type="radio" id="others" name="rdbutton" />
<input type="text" id="others-text" name="others-text" class="hidden" />
JS:
$(function() {
$('input[type="radio"]').click(function() {
if($(this).attr('id') == 'others') {
$('#others-text').removeClass('hidden');
} else {
$('#others-text').addClass('hidden');
$('#others-text').val('');
}
});
});

===============HTML
<input type="radio" name="rdo" value="1" checked="checked" />Electronics
<input type="radio" name="rdo" value="2" />Computers
<input type="radio" name="rdo" value="3" />Others
===============jQuery
$('input[name=rdo]').change(function() {
var a = $(this).val();
if (a != 3) {
$('#textboxid').hide();
}else{
$('#textboxid').val('');
$('#textboxid').show();
}
});

$("#<%=text1.ClientID%>").val('');

Changing password field to text with checkbox with jQuery

How can I toggle a password field to text and password with a checkbox check uncheck?

is this what you looking for ??
<html>
<head>
<script>
function changeType()
{
document.myform.txt.type=(document.myform.option.value=(document.myform.option.value==1)?'-1':'1')=='1'?'text':'password';
}
</script>
</head>
<body>
<form name="myform">
<input type="text" name="txt" />
<input type="checkbox" name="option" value='1' onchange="changeType()" />
</form>
</body>
</html>

Use the onChange event when ticking the checkbox and then toggle the input's type to text/password.
Example:
<input type="checkbox" onchange="tick(this)" />
<input type="input" type="text" id="input" />
<script>
function tick(el) {
$('#input').attr('type',el.checked ? 'text' : 'password');
}
</script>

updated: live example here
changing type with $('#blahinput').attr('type','othertype') is not possible in IE, considering IE's only-set-it-once rule for the type attribute of input elements.
you need to remove text input and add password input, vice versa.
$(function(){
$("#show").click(function(){
if( $("#show:checked").length > 0 ){
var pswd = $("#txtpassword").val();
$("#txtpassword").attr("id","txtpassword2");
$("#txtpassword2").after( $("<input id='txtpassword' type='text'>") );
$("#txtpassword2").remove();
$("#txtpassword").val( pswd );
}
else{ // vice versa
var pswd = $("#txtpassword").val();
$("#txtpassword").attr("id","txtpassword2");
$("#txtpassword2").after( $("<input id='txtpassword' type='password'>") );
$("#txtpassword2").remove();
$("#txtpassword").val( pswd );
}
});
})
live example here

You can use some thing like this
$("#showHide").click(function () {
if ($(".password").attr("type")=="password") {
$(".password").attr("type", "text");
}
else{
$(".password").attr("type", "password");
}
});
visit here for more http://voidtricks.com/password-show-hide-checkbox-click/

I believe you can call
$('#inputField').attr('type','text');
and
$('#inputField').attr('type','password');
depending on the checkbox state.

Toggle the checkbox's focus event and determain the checkbox's status and update the field as nesscarry
$box = $('input[name=checkboxName]');
$box.focus(function(){
if ($(this).is(':checked')) {
$('input[name=PasswordInput]').attr('type', 'password');
} else {
$('input[name=PasswordInput]').attr('type', 'text');
}
})

I have the following in production. It clones a new field having the toggled type.
toggle_clear_password = function( fields ) {
// handles a list of fields, or just one of course
fields.each(function(){
var orig_field = $(this);
var new_field = $(document.createElement('input')).attr({
name: orig_field.attr('name'),
id: orig_field.attr('id'),
value: orig_field.val(),
type: (orig_field.attr('type') == 'text'? 'password' : 'text')
})
new_field.copyEvents(orig_field); // jquery 'copyEvents' plugin
orig_field.removeAttr('name'); // name clashes on a form cause funky submit-behaviour
orig_field.before(new_field);
orig_field.remove();
});
}
JQuery doesn't just let you take the type attribute and change it, at least not the last time I tried.

<html>
<head>
<script>
$(function(){
$("#changePass").click(function(){
if ($("#txttext").hasClass("hide")){
$("#txttext").val( $("#txtpass").val() ).removeClass("hide");
$("#txtpass").addClass("hide");
} else if ($("#txtpass").hasClass("hide")){
$("#txtpass").val( $("#txttext").val() ).removeClass("hide");
$("#txttext").addClass("hide");
}
});
});
</script>
<style>
.hide{display:none;}
</style>
</head>
<body>
<form id="myform">
<input type="text" id="txtpass" type='password'/>
<input class="hide" type="text" id="txttext" type='text'/>
<button id="changePass">change</button>
</form>
</body>
</html>

.attr('type') was blocked by jQuery team because it won't work with some versions of IE.
Consider using this code :
$('#inputField').prop('type','text');
$('#inputField').prop('type','password');

oncheck
$('#password').get(0).type = 'text';
onuncheck
$('#password').get(0).type = 'password';

This can be implemented much simpler:
<form name="myform">
<input type="password" name="password" />
<input type="checkbox" name="showPassword" onchange="togglePasswordVisibility()" />
</form>
<script>
function togglePasswordVisibility() {
$('#password').attr('type', $('#showPassword').prop('checked') ? 'text' : 'password');
}
</script>
Works for jQuery 1.6+