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);
});
Related
I'm having a hard time with this quick validation i want in place...but i think it's not validating properly because of my select name arrays and i'm not sure how to go about this.
How it should work:
- If stat holiday box is checked for that day && if any Lieu hours are selected for that day give alert error and stop form submission.
My jsfiddle: http://jsfiddle.net/4bgYj/3/
my jquery:
$(document).ready(function() {
$(document).on('submit', 'form', function(e) {
var lieuhrs = $(".lieutimehours").val();
$('.lieutimehours').each(function(i, obj) {
if ($("#statholidaycheck").is(":checked") && lieuhrs > 0) {
alert("cannot process: " + lieuhrs);
return false;
}
}
});
});
Let me give you a more user-friendly approach for your problem:
If stat is selected simply disable the form input for lieu hours.
With this you won't have to check anything before submitting the form and the user can't accidentally select a value in lieu hours.
It still needs to be updated to your markup, but the idea is basically:
var stat = $('.stat');
stat.change(function() {
var e = $(this);
var f = e.parent().find('.lieu');
if (e.is(':checked')) {
f.prop('disabled', true);
} else {
f.prop('disabled', false);
}
});
Demo
Try before buy
First, you're missing a );...
$(document).ready(function() {
$(document).on('submit', 'form', function(e) {
var lieuhrs = $(".lieutimehours").val();
$('.lieutimehours').each(function(i, obj) {
if ($("#statholidaycheck").is(":checked") && lieuhrs > 0) {
alert("cannot process: " + lieuhrs);
return false;
}
}); // missing ); here. <--------------
});
});
Try it after adding that and you'll find it works for the first checkbox. But select a different checkbox and it will fail. In HTML, you will want to use unique ids to reference an element. What I would do is change your HTML to put a css class on the TR tag, and then look at the contained elements.
<tr class='line'>
<td> <input type='checkbox' class='isHoliday'/> </td>
<td> <select class='lieuHours'>options...</select> </td>
</tr>
and in your script...
$(document).ready(function() {
$(document).on('submit', 'form', function(e) {
$('.lines').each(function(i, obj) {
var lieuHours = $(this).find(".lieuHours").val();
if ($(this).find(".isHoliday:checked") && lieuHours > 0) {
alert("cannot process: " + lieuhrs);
return false;
}
}); // missing ); here. <--------------
});
});
You didn't approach the issue properly, the selectors should not be global but specific to the loop you are doing:
$(document).ready(function() {
$(document).on('submit', 'form', function(e) {
$('.lieutimehours').each(function(i, obj) {
var lieuhrs = $(this).val();
if ($(this).closest('tr').find('#statholidaycheck').is(":checked") && parseFloat(lieuhrs) > 0) {
alert('works');
return false;
}else{
alert('fail')
}
});
});
});
I am trying to toggle a div so it shows and hides when a user enters text into textarea.
i am using the below code and its not working for me, can anyone please show me why? thanks
html:
<head>
<script>
$(document).ready(function() {
$("#cname").keyup(function() {
if ($("#cname").val() > 8) {
$('#cname2').toggle("slow");
}
});
});
</script>
</head>
<form>
<input type="text" id="cname" name="cname" class="field">
<div id="cname2"></div>
</form>
css:
#cname2{
width:30px;
height:30px;
position:absolute;
margin-top:-13px;
margin-left:400px;
background-image: url('tick.png');
background-repeat:no-repeat;
background-position:right;
display:none;
}
so apparently my above code doesnt work in IE 9, but i should be able to achieve what i am trying to do by using this code, but can someone please show me where i place my div ID/how i adapt it to work for me?
var activeElement = null;
var activeElementValue = null;
// On focus, start watching the element
document.addEventListener("focusin", function(e) {
var target = e.srcElement;
if (target.nodeName !== "INPUT") return;
// Store a reference to the focused element and its current value
activeElement = target;
activeElementValue = target.value;
// Listen to the propertychange event
activeElement.attachEvent("onpropertychange", handlePropertyChange);
// Override .value to track changes from JavaScript
var valueProp = Object.getOwnPropertyDescriptor(
HTMLInputElement.prototype, 'value');
Object.defineProperty(activeElement, {
get: function() { return valueProp.get.call(this); },
set: function(val) {
activeElementValue = val;
valueProp.set.call(this, val);
}
});
});
// And on blur, stop watching
document.addEventListener("focusout", function(e) {
if (!activeElement) return;
// Stop listening to propertychange and restore the original .value prop
activeElement.detachEvent("onpropertychange", handlePropertyChange);
delete activeElement.value;
activeElement = null;
activeElementValue = null;
});
function handlePropertyChange(e) {
if (e.propertyName === "value" &&
activeElementValue !== activeElement.value) {
activeElementValue = activeElement.value;
// Fire textchange event on activeElement
}
};
$(document).ready(function() {
$("#cname").keyup(function() {
if ($("#cname").val().length > 8) {
$('#cname2').show();
} else {
$('#cname2').hide();
}
});
});
One possible approach (demo):
$(document).ready(function() {
$("#cname").on('input', function() {
$('#cname2')[this.value.length > 8 ? 'hide' : 'show']('slow');
});
});
Here I assumed that in cname2 container there's some warning message, that has to be shown if length of text input is 8 or less characters. Note also that I've used oninput handler, not keyup: as it allows me to process mouse-driven cut-and-paste as well as direct input. The only drawback is that IE8 doesn't support this event (and IE9 support for it is rather buggy, as handler is not fired when character is removed from text input).
Use this Javascript function
var z = document.getElementById('cname');
z.onkeyup = function(){
document.getElementById('cname2').innerHTML = z.value;
}
Your HTML:
<input type='text' name='cname' class='field' id='cname'>
<div class='cname2' id='cname2'></div>
Checkout here: http://jsfiddle.net/iamsajeev/Q9LPv/
$(document).ready(function() {
$("#cname").keyup(function() {
if ($("#cname").val() > 8) {
$('#cname2').fadeIn("slow");
}
else
{
$('#cname2').fadeOut("slow");
}
});
});
http://jsfiddle.net/5EjP7/2/
I hope that helps
Try the following script:
$(document).ready(function() {
$("#cname").keyup(function() {
if ($("#cname").val().length > 8) {
$('#cname2').toggle("slow");
}
});
});
I have the following mark-up:
$(document).ready(function () {
$('.lalala').bind('blur', function (e) {
CheckFirstInput($(this));
});
});
<div id="divContainer">
<input type="text" class="lalala" />
<p id="img1"></p>
</div>
And the following script
function CheckFirstInput(element) {
var txtLength = element.val();
var parent;
var lastElement;
if (txtLength.length < 1) {
parent = element.parent();
lastElement = parent.last();
lastElement.text('prazno e');
}
else {
//element.parent().lastChild().text('4884384f384r34rf');
parent = element.parent();
lastElement = parent.last();
lastElement.text('ne e prazno');
}
}
If the input field is not empty I want to select the last element of the wrapping div (<p>) and change its text. How do I do that?
Thanks in advance!!
You needed to select the children() of the element's parent. You were selecting the last parent. (Which is the parent.)
The following is working. I also cleaned up the code a bit.
$('.lalala').blur( function () {
CheckFirstInput($(this));
});
function CheckFirstInput(element) {
if (element.val().length < 1) {
element.siblings(':last').html('prazno e');
}
else {
element.siblings(':last').html('ne e prazno ');
}
}
Working Fiddle
http://jsfiddle.net/CRccw/2/
If i got it right you could check $(element).is(":empty") and use parent.siblings(":last-child")
Your question has been answered, but here is another way to do it:
$('.lalala').bind('blur', function (e) {
CheckFirstInput($(this));
});
function CheckFirstInput($el) {
var $last = $el.siblings().filter(':last');
var html = ($el.val() == '') ? 'prazno e' : 'ne e prazno';
$last.html(html);
}
DEMO
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>
$(document).ready(function () {
$("#btnhighlight").click(function () {
var htext = $("#txthighlighttext").val();
if (htext == '') {
alert("Pleae enter the search item.");
return false;
}
$("#lstCodelist option").each(function () {
$(this).removeClass('searchItem');
if ($(this).text().search(htext) != -1) {
$(this).addClass('searchItem');
}
});
});
});
Lets take I have a row something like this
I love to work with Jquery.
If I enter my search text as jquery its not highlighting Jquery. But my query should work in both they way regardless of CAPS or SMALL letters.
how to change my code to work like that.
thanks for your all help.
use .toUpperCase() ............. // or lowerCase
if ($(this).text().toUpperCase().indexOf(htext.toUpperCase()) != -1) {
This one should work, I believe:
$(document).ready(function () {
$("#btnhighlight").click(function() {
var htext = $("#txthighlighttext").val().toLowerCase();
if (htext === '') {
alert("Please enter the search item.");
return false;
}
$("#lstCodelist option").each(function() {
var $this = $(this);
if ($this.text().toLowerCase().indexOf(htext) !== -1) {
$this.addClass('searchItem');
} else {
$this.removeClass('searchItem');
}
});
});
});
Sidenote: indexOf is proven to be faster than search.