We Keep Coding

If an input contains custom word, hide the button

I have an input[type=text] area and i'll paste/type a URL in it.
If pasted/typed url contains http, i want to hide $('#button') element.
If its not, keep showing the button also.
Thanks for any help.
Here is my demo code so far:
$('#pasteUrl').on('input', function () {
var str = $('#pasteUrl').val();
if (str.indexOf("http") !== -1) {
$('#button').hide();
}
});

Edit: Added "propertychange" to events as suggested by OP in the comments.
$('#pasteUrl').on('input propertychange', function (ev) {
var str = $(ev.currentTarget).val();
if (str.indexOf("http") != -1) {
$('#button').hide();
} else {
$('#button').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="pasteUrl" />
<button id="button">Go</button>

This is likely what you want - using toggle:
$('#pasteUrl').on('input propertychange', function() {
var str = $(this).val();
$('#button').toggle(str.indexOf("http") == -1);
});

Editable textareas in header and footer need to show changes in both places

I have a header and a footer of an html invoice containing contact information. Whatever content changes I make in the header I want to show them in the footer and vice versa.
For example if I change the phone number in the header, it should change in the footer once I click out of the text box. I've only managed it to work in one and on enter unfortunately:
$(document).ready(function () {
function getValue() {
var x;
x = document.getElementById("phone-number").value;
document.getElementById("phone-number-footer").value = x;
}
$('#phone-number').keypress(function (e) {
if (e.which == 13) { //Enter key pressed
getTextBoxValue();
}
});
});

Javascript function does not work inside document.ready function. It should moved below or above document.ready function.
So please check below solution.
$(document).ready(function() {
$(document).on('blur', '#phone-number', function(e) {
getHeaderTextBoxValue();
});
$(document).on('keypress', '#phone-number', function(e) {
if (e.which === 13) {
getHeaderTextBoxValue();
}
});
$(document).on('blur', '#phone-number-footer', function(e) {
getFooterTextBoxValue();
});
$(document).on('keypress', '#phone-number-footer', function(e) {
if (e.which === 13) {
getFooterTextBoxValue();
}
});
});
function getHeaderTextBoxValue() {
var x;
x = document.getElementById("phone-number").value;
document.getElementById("phone-number-footer").value = x;
}
function getFooterTextBoxValue() {
var x;
x = document.getElementById("phone-number-footer").value;
document.getElementById("phone-number").value = x;
}

how to change images on each click using jquery

I am using this HTML on my site:
<a id="slick-toggle" href="javascript:change_status()"><img src="img/enable.png"></a>
When I click this link, I would like to change the image src to img/disable.png. And revert back to img1.jpg when clicked again & so on. Can someone explain how I do this using jQuery?
Also on each click i want to change my table's column emp_ref_table.enabled_flag value 0 for disable.png and 1 for enable.png
Here is my existing jQuery if this helps:
function change_status() {
alert('sure to change the status ?');
$(document).ready(function() {
$('#slick-toggle').click(function() {
e.preventDefault();
$('img', this).attr('src', function(i, oldSrc) {
return oldSrc == 'img/enable.png' ? 'img/disable.png' : 'img/enable.png';
});
return false;
});
});
}

Try this code : place all your pic changing code in a function:
var changeStatus = false;
function change_status() {
var r = window.confirm("Sure to change the status!");
if (r == true) {
if (changeStatus == false) {
changeStatus = true;
document.getElementById("en-ds").src = "https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg";
} else {
changeStatus = false;
document.getElementById("en-ds").src = "https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg";
}
}
}
<a id="slick-toggle" href="javascript:change_status()"><img id="en-ds" src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg">
</a>

Try the simplified one below, set your enable and disable image paths.
$(function() {
$('#slick-toggle').click(function() {
$('img', this).attr('src', function(el, src) {
var imgEnable = 'http://www.google.com/logos/doodles/2014/australia-day-2014-doodle-4-google-2013-winner-6247445470117888-hp.jpg';
var imgDisable = 'https://www.google.com/logos/2012/d4g_poland12-hp.jpg';
return (src == imgEnable) ? imgDisable : imgEnable;
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="slick-toggle" href="javascript:;">
<img src="http://www.google.com/logos/doodles/2014/australia-day-2014-doodle-4-google-2013-winner-6247445470117888-hp.jpg">

jQuery hover on the same element

With jQuery hover how do you check if you've just hovered on the same element again? Say I have two boxes and hover on box 1, then left, then come back and hover on that same box. I'd like to store the value of the initial hovered element (box 1) and then compare if it's the same when hovering back.
Thanks!!

Try something like below,
var lastHovered = '';
$('#box1').hover(function () {
if (lastHovered == 'box1') {
alert('You have hovered on this already');
}
lastHovered = 'box1';
//Your stuff
}, function () {
//mouse out stuff
});
$('#box2').hover(function () {
if (lastHovered == 'box2') {
alert('You have hovered on this already');
}
lastHovered = 'box2';
//Your stuff
}, function () {
//mouse out stuff
});
Note: I have used 2 functions assuming that box1 hover and box2 hover has totally different functionalities... If not you can have it inside same function and use this.id to group them.. see below.
var lastHovered = '';
$('#box1, #box2').hover(function () {
if (lastHovered == this.id) { //<-- used this.id instead of hard-coded value
alert('You have hovered on ' + this.id + ' already');
}
lastHovered = this.id; //<-- used this.id instead of hard-coded value
//Your stuff
}, function () {
//mouse out stuff
});

Use .data() http://api.jquery.com/data/ so on first hover in the callback do something like
if (!$(this).data('var')) {
$(this).data('var','value');
} else {
console.log($(this).data('var'));
};

var lastHovered = null;
$('#selector1,#selector2,#selector3').hover(function (evt) {
if(lastHovered && lastHovered === $(this).attr("id")){
//code for 're-hovering'
}else{
//code for 'new hover'
}
}, function (evt) {
//mouse out stuff
lastHovered = $(this).attr("id");
});

Placeholders in IE

I am using this script : http://www.morethannothing.co.uk/wp-content/uploads/2010/01/placeholder.js to get some placeholders into IE. Works a treat for input types of text and password.
But just does'nt seem to load for Text Areas. Does anyone know of a line of code I could add to that, or maybes a little bit of jQuery or JavaScript to execute to get it to load.
Thanks in advance.

instead of $(':text[placeholder],:password[placeholder]') use $(':text[placeholder],:password[placeholder],textarea[placeholder]')

For all inputs and textarea:
$('input[placeholder],textarea[placeholder]')

<script type="text/javascript">
if(navigator.userAgent.indexOf("MSIE") > 0 )
{
$(function()
{
var input = document.createElement("input");
if(('placeholder' in input) == false)
{
$('[placeholder]').focus(function()
{
var i = $(this);
if(i.val() == i.attr('placeholder'))
{
i.val('').removeClass('placeholder');
if(i.hasClass('password'))
{
i.removeClass('password'); this.type='password';
}
}
}).blur(function()
{
var i = $(this);
if(i.val() == '' || i.val() == i.attr('placeholder'))
{
if(this.type=='password')
{
i.addClass('password'); this.type='text';
}
i.addClass('placeholder').val(i.attr('placeholder'));
}
}).blur().parents('form').submit(function()
{
$(this).find('[placeholder]').each(function()
{
var i = $(this);
if(i.val() == i.attr('placeholder')) i.val('');
});
});
}
});
}
</script>