We Keep Coding

CSS Float Form Pattern for WooCommerce Forms

I'm attempting to implement the float label pattern (https://webdesign.tutsplus.com/articles/implementing-the-float-label-form-pattern--webdesign-16407) for my WooCommerce forms.
The checkout from is here - https://dev.joshkern.co/checkout/.
You'll first need to add a product/service from here - https://dev.joshkern.co/wordpress-maintenance/. You'll see the form isn't working as it should. What am I missing?
This is my javascript:
(function($) {
$(document).ready(function(){
// Test for placeholder support
$.support.placeholder = (function(){
var i = document.createElement('input');
return 'placeholder' in i;
})();
// Hide labels on page load if placeholders are supported
if ($.support.placeholder) {
$('.woocommerce form .form-row').each(function(){
$(this).addClass('js-hide-label');
});
$('.woocommerce form .form-row').find('input, textarea').on('keyup blur focus', function(e){
// Cache our selectors
var $this = $(this),
$parent = $this.parent();
// Add or remove classes
if (e.type == 'keyup') {
if ($this.val() == '') {
$parent.addClass('js-hide-label');
}
else {
$parent.removeClass('js-hide-label');
}
}
else if (e.type == 'blur') {
if( $this.val() == '' ) {
$parent.addClass('js-hide-label');
}
else {
$parent.removeClass('js-hide-label').addClass('js-unhighlight-label');
}
}
else if (e.type == 'focus') {
if( $this.val() !== '' ) {
$parent.removeClass('js-unhighlight-label');
}
}
});
}
});
})(jQuery);

How do I prevent both my if statements running the first time?

Quick question as I'm drawing a blank, if I have an event listener that contains 2 if statements that on first time round are both true but I don't want both of them to execute how do I prevent this? Can I break on the first conditional or something like that?
JS
var input = document.querySelector('.js-input'),
output = document.querySelector('.js-output');
input.addEventListener('keydown', function (event) {
if (this.value.length === 0) {
console.log('run this once');
}
if (this.value === '') {
console.log('this is empty so show hint')
}
});

var input = document.querySelector('.js-input'),
output = document.querySelector('.js-output');
var firstTimeCallbackRun= true;
input.addEventListener('keydown', function (event) {
if (this.value.length === 0) {
console.log('run this once');
if(firstTimeCallbackRun) {
firstTimeCallbackRun = false;
return;
}
}
if (this.value === '') {
console.log('this is empty so show hint')
}
});

var input = document.querySelector('.js-input'),
output = document.querySelector('.js-output'),
isFirst = true;
input.addEventListener('keydown', function (event) {
if (isFirst) {
isFirst = false;
return;
}
if (this.value.length === 0) {
console.log('run this once');
}
if (this.value === '') {
console.log('this is empty so show hint')
}
});

Maybe something like that? But probably you should ask yourself why this is happening and what are you doing wrong. Since it is a hacky and not optimal solution.
(function() {
var firstRun = true;
var input = document.querySelector('.js-input');
var output = document.querySelector('.js-output');
input.addEventListener('keydown', function (event) {
if (firstRun) {
firstRun = false;
if (this.value.length === 0) {
console.log('run this once');
}
} else {
if (this.value === '') {
console.log('this is empty so show hint')
}
}
});
})();
Here an example of how you could achieve this:
(function() {
var input = document.querySelector('.js-input');
var isDirty = function(element) {
if ( ! element.data) {
element.data = {isDirty: false};
}
if (element.value.length > 0 && ! element.data.isDirty) {
element.data.isDirty = true;
} else if (element.value.length === 0) {
element.data.isDirty = false;
}
return element.data.isDirty;
};
input.addEventListener('keyup', function (event) {
var dirtyClass = " is-dirty";
if (isDirty(this)) {
if (this.className.search(dirtyClass) === -1) {
this.className += dirtyClass;
}
} else {
this.className = this.className.replace(dirtyClass, "");
}
});
})();

Jquery function strange behaviour

I found following function to enable placeholder like effect on browsers like IE6-9.
The problem is placeholder appears after first-time focusing. There is no initial value. Input boxes are just blank after page loading.
And another thing is, as on tutorial I created .placeholder class and set color to grey. It sets inputs color to light grey and doesn't change to black while user types.
var isInputSupported = 'placeholder' in document.createElement('input');
var isTextareaSupported = 'placeholder' in document.createElement('textarea');
if (!isInputSupported || !isTextareaSupported) {
$('[placeholder]').focus(function () {
var input = $(this);
if (input.val() == input.attr('placeholder') && input.data('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function () {
var input = $(this);
if (input.val() == '') {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
input.data('placeholder', true);
} else {
input.data('placeholder', false);
}
}).blur().parents('form').submit(function () {
$(this).find('[placeholder]').each(function () {
var input = $(this);
if (input.val() == input.attr('placeholder') && input.data('placeholder')) {
input.val('');
}
})
});
}
Any suggestions?

To address the problem of the placeholders not showing up initially, you need to initialize each of them when the page loads, something like this:
$('[placeholder]').each(function(){
var $this = $(this);
if($this.val() == ''){
$this.val($this.data('placeholder')).addClass('placeholder');
}
});
The problem with the text color is that the .placeholder class is being added/removed on focus or blur, not when the user types. You need an additional event handler for keyup that removes the .placeholder class (this also includes my snippet from above):
var isInputSupported = 'placeholder' in document.createElement('input');
var isTextareaSupported = 'placeholder' in document.createElement('textarea');
if (!isInputSupported || !isTextareaSupported) {
$('[placeholder]').each(function(){
var $this = $(this);
if($this.val() == ''){
$this.val($this.data('placeholder')).addClass('placeholder');
}
});
$('[placeholder]').focus(function () {
var input = $(this);
if (input.val() == input.attr('placeholder') && input.data('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).on('keyup', function(){
$(this).removeClass('placeholder')
}).blur(function () {
var input = $(this);
if (input.val() == '') {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
input.data('placeholder', true);
} else {
input.data('placeholder', false);
}
}).blur().parents('form').submit(function () {
$(this).find('[placeholder]').each(function () {
var input = $(this);
if (input.val() == input.attr('placeholder') && input.data('placeholder')) {
input.val('');
}
})
});
}

JS/jquery - add textbox on doubleclick and update table field(s)

hello dear programmers,
i'm trying to update table fields with ajax.
doubleclick on a table cell, the cell content will be replaced with a textbox and after changing the text, it updates the cell value with the textbox value.
my problem is, the first change works fine, but after the second change, all table cells changed before are updated with the new value and not only the one clicked.
would be great if someone can help me out and point me to right direction.
you can find the whole thing to test on http://jsfiddle.net/bDxDX/3/
$(function () {
$(".doodleEdit").dblclick(function (e) {
e.stopPropagation();
var currentEle = $(this);
var value = $(this).html();
updateVal(currentEle, value);
});
});
function updateVal(currentEle, value) {
$(currentEle).html('<input class="thVal" type="text" value="' + value + '" />');
var mode = $(currentEle).attr('class').split(' ')[1];
if (mode == 'editDescr') {
alert("editDescr");
} else if (mode == 'addDate') {
alert("addDate");
} else if (mode == 'addVote') {
alert("addVote");
}
$(".thVal").focus();
$(".thVal").keyup(function (event) {
if (event.keyCode == 13) {
$(currentEle).html($(".thVal").val().trim());
}
});
$(document).click(function () {
$(currentEle).html($(".thVal").val().trim());
});
}
http://jsfiddle.net/bDxDX/3/
many thanks and best regards
costal

Does this solve your case ? Please check this jsfiddle -
http://jsfiddle.net/hellomaya/bDxDX/5/
$(function () {
$(".doodleEdit").dblclick(function (e) {
e.stopPropagation();
var currentEle = $(e.target);
var value = $(e.target).html();
console.log($(e.target));
if ($.trim(value) === "") {
$(currentEle).data('mode', 'add');
} else {
$(currentEle).data('mode', 'edit');
}
updateVal(currentEle, value);
});
});
function updateVal(currentEle, value) {
$(currentEle).html('<input class="thVal" type="text" value="' + value + '" />');
var mode = $(currentEle).data('mode');
alert(mode);
$(".thVal").focus();
$(".thVal").keyup(function (event) {
if (event.keyCode == 13) {
$(this).parent().html($(this).val().trim());
$(".thVal").remove();
}
});
}
$(document).click(function (e) {
if ($(".thVal") !== undefined) {
if ($(".thVal").val() !== undefined) {
$(".thVal").parent().html($(".thVal").val().trim());
$(".thVal").remove();
}
}
});

I just did something very similar and thought this was a pretty concise way to do it. It assumes you want use the Enter key (key code 13) to write the input data back to the table cell, and Escape (code 27) to close the input without writing to the cell.
$("#table").on('dblclick', 'td', function() {
var cell_data = $(this).text();
$(this).replaceWith('<td><input id="temp_enter"></input></td>');
$("#temp_enter").keyup( function(event) {
if (event.which == 13) {
$(this).parent().replaceWith('<td>' + $(this).val() + '</td>');
} else if (event.which == 27) {
$(this).parent().replaceWith('<td>' + cell_data + '</td>');
}
});
});

How to refactor this code block to be simple and dynamic?

$(document).ready(function() {
$('.watermark').focus(function() {
if (this.className == 'watermark')
{
this.className = '';
this.value = '';
}
});
$('.watermark').blur(function() {
if (this.value == '')
{
this.className = 'watermark';
this.value = 'Type here';
}
});
});
I have this block of code that works perfectly except that it is not dynamic. I was wondering if there was an elegant way to reset the value to the original dynamically. I was thinking that maybe if you defined the original text in its ID or some other sort of attribute you could reset it that way.. or maybe you could use variables or arrays or tuples. What does SO think is the best way of doing it?

How about storing the value into some other attribute of the input?
$(document).ready(function() {
$('.watermark').focus(function() {
if (this.className == 'watermark')
{
this.className = '';
this.title = this.value;
this.value = '';
}
});
$('.watermark').blur(function() {
if (this.value == '')
{
this.className = 'watermark';
this.value = this.title;
}
});
});

In this scenario i prefer to use html5(placeholder attrinute) with javascript fall back.
function supports_input_placeholder() {
var i = document.createElement('input');
return 'placeholder' in i;
}
$(document).ready(function() {
if (!supports_input_placeholder())
{
$('input').each(function(){
$(this).val($(this).attr('placeholder'))
});
$('input').focus(function() {
if (this.className == 'watermark')
{
this.className = '';
this.value = '';
}
});
$('input').blur(function() {
if (this.value == '')
{
this.className = 'watermark';
this.value = $(this).attr('placeholder');
}
});
}
});
This script will detect if native placeholder is available if not it will take text from placeholder attribute and simulate it.

You can just store it in a variable if it's scoped to each element:
$(function() {
$('.watermark').each(function() {
var lead = $(this).val();
$(this).focus(function() {
if ($(this).val() == lead) $(this).val('');
}).blur(function() {
if ($(this).val() == '') $(this).val(lead);
});
});
});