Clear input box on click with Jquery - javascript

I have a simple code that I'm trying to wrok into my website to clear a textbox with a default value, when a user click on it, the default value should clear out so that the user can enter his/her value. Here is what I have but I'm not sure if its correct since its not working. I just started on JQuery
$(document).ready(function()
{
$('#startDateBox').click(function()
{
if(('#startDateBox')=='Beginning')
{
$('#startDateBox').val('');
}
})
});​

You missed the first .val(), and the $ in front of the ('#startDateBox') on the same line.
You could also use $(this) to reference the textbox, as within that function this refers to the textbox DOM element itself. Wrapping it with the jQuery function $() gives you access to all the framework's goodies.
$(document).ready(function()
{
$('#startDateBox').click(function(){
if($(this).val() == 'Beginning')
^^^^^^ Here
{
$(this).val('');
}
})
});​

You're wrong in this part:
if(('#startDateBox')=='Beginning')
First, you missing $.
Second, I think you want compare the startDateBox value, then use val().
Try this:
$(document).ready(function()
{
$('#startDateBox').click(function()
{
if($('#startDateBox').val()=='Beginning')
{
$('#startDateBox').val('');
}
})
});​

Well, if(('#startDateBox')=='Beginning') will always be false...
I think you meant something more like:
if($('#startDateBox').val() == 'Beginning')

I wrote a very small jquery plugin for this purpose recently:
https://gist.github.com/rmcvey/5136582
$('#input').placeholder("Placeholder Text");
if($('#input').val() === $('#input').placeholder()){ return false; }

I would suggest for HTML5 browsers use this
<input type="text" id="Beginning" placeholder="Beginning" />
if($('#startDateBox').val() =='Beginning')
this is the line that needs to be changed
also
$('#startDateBox').on("focus", function()
{
// code here
the click will not handle hitting tab until that text box is focused

Related

How to test for onchange value?

This gives an error and breaks the function.
The error says "Cannot read property 'onchange' of undefined" even though I'm trying to test for onchange to prevent an error.
Here's my function:
function ClearAndRun(element) {
$el = $("select, input");
$next = $el.eq($el.index(element) + 1);
for(i=$el.index($next);i<$el.length;i++) {
if($next.get(0).onchange != null) {
$next.val("");
$next.change;
}
$next = $el.eq($el.index(element) + i);
}
}
<input onchange="ClearAndRun(this)">
I've tried a few different was of testing for an onchange value and they all seem to give that error. Thanks for your help!
Use $.each and .change doesn't call change, you need parentheses
$.each($element, function(){
if(this.onchange){
$(this).val("");
$(this).change();
}
});
I want to set the values to nothing
This will reset the value to nothing for each select/input
$element.each(function() {
if ($(this).val() != null) {
$(this).val("");
$(this).change();
}
});
...and run their onchange functions which are prepared for a nothing answer
this will be invoked because you have called .change() on one of those elements
$element.on('change', function() {
$('the_form').reset()
});
It sounds like when that .change() method is invoked for any element, you want to reset the form...
If these answers are reset and there onchange functions are run, it essentially resets the form...
(Example taken from here)
This is as far as I understand your question, I am unsure when you started talking of other child elements...
...this may hide or show spans based on their answers
But, this code will reset all values of input/select and call their .change() method. The problem with this, what I can see, is that for every element, you are resetting the form which will put additional strain on the DOM and is not ideal.
N.B: If you are not setting the value of these elements, you can use text() instead which will check the text inside the element
The HTML onchangeattribute only seems to be possible for select elements. From references I cannot see if this is possible with input's as well...
Execute a JavaScript when a user changes the selected option of a element:
(Credit w3schools)
So here's what I ended up needing:
function ClearAndRunFuncs(element) {
$el = $("input[name!=''][onchange!=''], select[name!=''][onchange!='']");
for(i=$el.index(element)+1;i<$el.length;i++) {
$el.eq(i).val("");
$el.eq(i).change();
}
}
I didn't realize you could put conditions based on attributes on the selector. So this prevents any errors because no fields that are missing onchanges, or even name values are being processed by this function.

jQuery syntax for if checking if class along with keydown

I am writing an interaction and need a bit of syntax help on one element:
Need to check "IF" a class is present on a div
<div class="something">
and the "Enter" key is pressed (key 13)
switch (window.event.keyCode) {
case 13:
window.location.href = 'http://google.com';
break;
}
then run a function
$('#thing').addClass('that');
What would proper jQuery or JS Syntax be for something like this?
So to clear things up: I have a div with classes that are changing. I am trying to get the browser to detect when said class is present on the dive "AND" the enter button is pressed, then run a function.
Thanks!
Here is a working JSFiddle
You can check for the class within your keypress function:
$(function() {
$(window).keypress(function(event)
{
if ((event.keyCode == 13) && ($('div').hasClass('this')))
{
$('#thing').addClass('that');
}
});
});
You may want to change the generic div to check whether a certain div has the class by its id
if($('#thing').hasClass('that')) { // your code };
Simple as that. Check out the jQuery docs some time. Usually if you need to do anything, there's a function for it already.
You are probably looking for the jquery function .hasClass()
https://api.jquery.com/hasClass/
like
if($("#thing").hasClass("something")){
$("#thing").addClass("that");
}
I don't completely understand understand what you are trying to do to incorporate it in your code.

Select all elements except ... in jQuery

I am working on a project, what includes a smartsearch engine.
I'd like to write a method what makes the client write inside the smartsearch, even when it's not focused. F.e. browsing the site, the client hits down a key, and the focus jumps to the smartsearch.
That's working fine with this simple code:
$(document).ready(function()
{
$("*").keydown( function()
{
$("input.ss-24#b").focus();
});
});
But, yeah as You can see, it unfocuses other inputs too, and that's not the way I want it.
I have tried several 'possible-solutions', like :not() and even .not() method like:
$(document).ready(function()
{
$("*").not("input").keydown( function()
{
$("input.ss-24#b").focus();
});
});
But it still unfocuses fields with "input" tagname too. What should I do to force jQuery not to select input fields for this event listener?
Thanks, Steven.
$(document).keydown(function() {
if (!$('input').filter(':focus').length) {
$('#b').focus();
}
});
Working fiddle
$(document).ready(function () {
$(document).keydown(function (e) {
$("input.ss-24#b").focus();
});
});
Does this work?
http://jsfiddle.net/Xbbu8/

Hiding button using jQuery

Can someone please tell me how I can hide this button after pressing it using jQuery?
<input type="button" name="Comanda" value="Comanda" id="Comanda" data-clicked="unclicked" />
Or this one:
<input type=submit name="Vizualizeaza" value="Vizualizeaza">
Try this:
$('input[name=Comanda]')
.click(
function ()
{
$(this).hide();
}
);
For doing everything else you can use something like this one:
$('input[name=Comanda]')
.click(
function ()
{
$(this).hide();
$(".ClassNameOfShouldBeHiddenElements").hide();
}
);
For hidding any other elements based on their IDs, use this one:
$('input[name=Comanda]')
.click(
function ()
{
$(this).hide();
$("#FirstElement").hide();
$("#SecondElement").hide();
$("#ThirdElement").hide();
}
);
You can use the .hide() function bound to a click handler:
$('#Comanda').click(function() {
$(this).hide();
});
jQuery offers the .hide() method for this purpose. Simply select the element of your choice and call this method afterward. For example:
$('#comanda').hide();
One can also determine how fast the transition runs by providing a duration parameter in miliseconds or string (possible values being 'fast', and 'slow'):
$('#comanda').hide('fast');
In case you want to do something just after the element hid, you must provide a callback as a parameter too:
$('#comanda').hide('fast', function() {
alert('It is hidden now!');
});
It depends on the jQuery selector that you use. Since id should be unique within the DOM, the first one would be simple:
$('#Comanda').hide();
The second one might require something more, depending on the other elements and how to uniquely identify it. If the name of that particular input is unique, then this would work:
$('input[name="Vizualizeaza"]').hide();

How can I remove an attribute with jQuery?

I can't seem to get removeAttr to work, I'm using the example I saw on the jQuery site. Basically onclick I add the attribute to disable a field (which works just fine) but when the user clicks again it should enable the field in question. I used alerts to make sure the else block is being fired, so I know that's not it.
Code:
$('#WindowOpen').click(function (event) {
event.preventDefault();
$('#forgot_pw').slideToggle(600);
if('#forgot_pw') {
$('#login_uname, #login_pass').attr('disabled','disabled');
} else {
$('#login_uname, #login_pass').removeAttr('disabled');
}
});
Thanks.
All good used this:
$('#WindowOpen').toggle(
function()
{
$('#login_uname, #login_pass').attr("disabled","disabled");
},
function()
{
$('#login_uname, #login_pass').removeAttr("disabled");
});
Your problem is that the following line of code will always evaluate to true.
if('#forgot_pw')
try replacing with
if($('#forgot_pw').attr('disabled'))
$('#forgot_pw').attr('disabled', false);
should work for you.

Categories

Resources