selector with two property - javascript

I'm trying to loop unto all the input that has a required attribute and which value is empty.
I tried this
$("input[required][value='']").each(function(){
alert("s");
});
but unfortunately, not working. Any help, ideas?

Try like this:
$("input[required]").filter(function(){
return $(this).val().length === 0;
}).each(function(){
alert("s");
});

Your code should work as it is, just put it inside $(function()... as shown below.
$(function(){
$("input[required][value='']").each(function(){
alert("s");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<input value="" required>
<input value="">

It should be
$("input[required][value='']").each(function)({
alert("s");
});

Related

Remove HTML onchange code using jQuery

Below code snippet has HTML onchange attribute as well as jQuery's change event on the input text. I want only the jQuery's change event to be effective. I tried using both unbind and off without luck.
Could somebody please help?
$(document).ready(function(){
$("#testInput").unbind("change").bind("change",function(){
console.log("jQuery change");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="testInput" type="text" onchange="console.log('change');"/>
If you want to remove the "previous" onchange event, use
$("#testInput").removeAttr("onchange")
$(document).ready(function() {
$("#testInput").removeAttr("onchange")
$("#testInput").unbind("change").bind("change", function() {
console.log("jQuery change");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="testInput" type="text" onchange="console.log('change');" />
Just remove onchange attribute. removeAttr('onchange') will remove onchange attribute
$(document).ready(function(){
$("input").each(function(){
$(this).removeAttr('onchange');
});
$("input").bind("change",function(){
console.log("jQuery change");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="testInput" type="text" onchange="console.log('change');"/>
<input id="testInput2" type="text" onchange="console.log('change');"/>
you could set the onchange to null and add listener, like:
$(document).ready(function(){
//remove inline 'onchange' event by setting it to null
$("#testInput")[0].onchange = null;
$(document).on("change" "#testInput", function(){
console.log("jQuery change");
});
});
try this
$(document).ready(function(){
$(document).on('change','#testInput',function(){
console.log("jQuery change");
});
});

How can show a div when input has a value?

I have an input text that and a hide div.
I want to show the div when the input text has a value.
Here is the demo: http://jsfiddle.net/vyc7N/181/
<label for="db">Type whatever</label>
<input type="text"name="amount" />
<div id="yeah" style="display:none;">
<input type="submit" />
</div>
Please somebody can help me?
You can write the code in keyup event of textbox to get the length of text entered in it.
$('input[name=amount]').keyup(function(){
if($(this).val().length)
$('#yeah').show();
else
$('#yeah').hide();
});
Working Demo
you can also use .toggle() instead of using .show/.hide():
$('input[name=amount]').keyup(function(){
$('#yeah').toggle($(this).val().length);
});
$('input[name=amount]').bind('keyup change', function(){
if(!$(this).val())
$("#yeah").css('display', 'none');
else
$("#yeah").css('display', '');
});
Working fiddle
Use following logic : If after trimming there is some value , then show else hide.
$('input[name=amount]').keyup(function(){
if($.trim($(this).val())!='')
$('#yeah').show();
else
$('#yeah').hide();
});
This is pure javascript and DOM, no jQuery
You could use onkeyup():
<label>Type whatever</label>
<input id='inptOne' type="text" name="amount" onkeyup="myFunction()" />
<div id="yeah" style="display:none">
<input type="submit" />
</div>
<script>
//if input has some value will show the button
window.myFunction = function() {
//alert('it ran!');
var hasValue = document.getElementById('inptOne').value;
if (!!hasValue) {
document.getElementById('yeah').style.display = 'inline';
} else {
document.getElementById('yeah').style.display = 'none';
};
};
</script>
Click Here for jsfiddle

Change span when text field changes

I have a form with several text fields. I want to change a span tag when I write something in the field. Like this:
Any ideas?
You can use keyup and then replace the span content with the textbox value.
<input id="test" type="text" />
<span id="content"></span>
$("#test").keyup(function() {
$("#content").html($("#test").val());
});
http://jsfiddle.net/
Edit:
You can also use $(this).val() as pXL has suggested.
$("#test").keyup(function() {
var val = $(this).val();
$("#content").html(val);
});
You can simply use jquery for this. For eg
<input type="text" id="mytext"/>
<span id="content"></span>
$(document).ready(function(){
$("#mytext").keyup(function(){
$('#content').html($(this).val());
})
})
I would use $.keyup() and update the html with input value.
Demo: Working Demo
$(document).ready(function()
{
// Regular typing updates.
$("#input").keyup(function()
{
$("#output").html($(this).val());
});
// If pasted with mouse, when blur triggers, update.
$("#input").change(function()
{
$(this).keyup();
});
// Any value loaded with the page.
$("#input").keyup();
});
The lost focus is also an aproach,
html:
<input type="text" id="txa" value="123" />
<span>345</span>
jquery:
$('input[id=txa]').blur(function () {
$(this).next("span").text($(this).val());
});
Glad to help.

Disable a jqueryui datepicker

I have a jqueryui datepicker associated with a input text. When i make the input textbox readonly i dont want the datepicker to show up . Is that possible? I would be setting the readonly property to true or false from the code.
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
<div class="demo">
<p>Date: <input type="text" id="CompleteDate"> <input class="change" type="checkbox" name="chkBoxb" id="chkBoxb"> </p>
</div>
j$('#chkBoxb').click(function(){
var paramChangeBoxes = j$('input:checkbox.change');
if (j$(this).is(':checked')) {
paramChangeBoxes.removeAttr('checked');
j$('#chkBoxb').attr('checked', 'checked');
j$('#CompleteDate').attr('readonly',false);
j$("#CompleteDate").datepicker();
}
else
{
j$('#CompleteDate').attr('readonly',true);
$( "#CompleteDate:not([readonly])" ).datepicker();
}
});
Updated the code
disable it like this:
$('#dateSelector').datepicker('disable');
and enable it like this:
$('#dateSelector').datepicker('enable');
Here's a working sample: http://jsfiddle.net/CG64h/8/
I ran into this today and unfortunately, the answers provided above did not work. Read the datepicker code, here's how it's done in jqueryui 1.10:
$(selector).datepicker("option", "disabled", true);
Here you go:
<div class="demo">
<p>Date: <input type="text" id="CompleteDate"> <input class="change" type="checkbox" name="chkBoxb" id="chkBoxb"> </p>
</div>
<script>
$('#chkBoxb').click(function(){
if ($(this).is(':checked')) {
$('#CompleteDate').attr('readonly',false)
.datepicker();
} else {
$('#CompleteDate').attr('readonly',true)
.datepicker("destroy");
}
});
</script>
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerDisabled.html
I believe you should use 2 different textbox's and toggle them as needed so that only one is shown at a time. The first one as plain text box and the second one with jquery Datapicker applied.
if($("#").attr("enabled")=="false") {
$("#").attr("disabled","true");
}
Just change the selector and add :enabled
$( "#datepicker:enabled" ).datepicker();

How do I remove the default Google Search Value from Google Search box?

I am trying to use a little jQuery to "hide" the initial value in a Google Search box when you click in the box and I am missing something.
Here is the search box code:
<div id="search_box">
<form action="http://mfrp.ehclients.com/search_results" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="017425724926122041548:1ccj3d-e1-s" />
<input type="hidden" name="cof" value="FORID:9" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" id="q" name="q" value="Search..." size="31" />
</div>
</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=en"></script>
</div>
Here is the jQuery:
<script type="text/javascript">
$('#q').click(function() {
if($(this).val() == 'Search...')
$(this).val('');
});
</script>
Only problem is, it doesn't work. Here is the page.
I would appreciate some help sorting this out.
Thanks,
Forrest
When your code it needs to run when the DOM elements available to find, so $("#q") finds the id="q" elements to bind to. This means your script either needs to run after the elements it needs in the page (e.g. end of the <body>), or when the DOM is completely ready, like this:
$(function() {
$('#q').click(function() {
if($(this).val() == 'Search...')
$(this).val('');
});
});
If you're not doing this, and the $("#q") selector doesn't find any elements...there's just nothing to run .click() on, which binds that handler.
I think what you'll want is the reverse as well, which would look like this:
$(function() {
$('#q').focus(function() {
if($(this).val() == 'Search...') $(this).val('');
}).blur(function() {
if($(this).val() == '') $(this).val('Search...');
});
});
This will put "Search..." back in the box if it's empty and someone clicks outside, by relying on .focus() and .blur() instead of .click().
demo
You've been faked by google... the textbox has a background which look as if there was value... you should have checked that on the dev tools..
so just try to remove it on blur...
$('#q').blur(function(){
$(this).css('background','none');
if(this.value == '') {
this.value = this.defaultValue;
}
}).focus(function() {
if(this.value == this.defaultValue) {
this.value = '';
}
});​

Categories

Resources