JavaScript click function null value in text box - javascript

I need to null the value in text box on click, currently I have written a code as such:
<div class="keyword_non">
<h1>Keywords : <a class="someClass question_off" title="Keywords "></a></h1>
<h2><input type="text" name="kw1" value="one" /></h2>
<h2><input type="text" name="kw2" value="two" /></h2>
<h2><input type="text" name="kw3" value="three" /></h2>
<h2><input type="text" name="kw4" value="four" /></h2>
</div>
<script type="text/javascript" src="/functions/javascript/custom/non_profit_edit.js"></script>
<script type="text/javascript" src="/functions/javascript/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/functions/javascript/custom/jquery-ui-1.8.7.custom.min.js"></script>
Inside non_profit_edit.js i have written as such
$(document).ready(function(){
$(".kw1").click(function() {
$(".kw1").val(" ");
});
$(".kw2").click(function() {
$(".kw2").val(" ");
});
$(".kw3").click(function() {
$(".kw3").val(" ");
});
$(".kw4").click(function() {
$(".kw4").val(" ");
});
});
But write now its not working properly. Is this any browser issues or error in code?

In the selector the '.' indicates a class. For names use
$('[name="kw1"]'). //

Error in code.
Your selector ".kw1" selects an element with kw1 as the class attribute. None of your inputs have a class, they just have names. Add classes to them or replace the selector in your jQuery to this format: $('[name="kw1"]')
You can also simplify your function by doing this:
$('.keyword_non')
.on('click', 'input[type="text"]', function(e) {
this.value = ''; // input that was clicked on
}

This is a syntax error in your code.you does not use dot(.) in click function.Dot(.) will use for class. when kw1 is name in your input

Related

check all inputs value in jquery [duplicate]

How do I identify empty textboxes using jQuery? I would like to do it using selectors if it is at all possible. Also, I must select on id since in the real code where I want to use this I don't want to select all text inputs.
In my following two code examples the first one accurately displays the value typed into the textbox "txt2" by the user. The second example identifies that there is an empty textbox, but if you fill it in it still regards it as empty. Why is this?
Can this be done using just selectors?
This code reports the value in textbox "txt2":
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#cmdSubmit').click(function() {
alert($('[id=txt2]').val());
});
});
</script>
</head>
<body>
<form>
<input type="text" name="txt1" id="txt1" value="123" /><br />
<input type="text" name="txt2" id="txt2" value="" /><br />
<input type="text" name="txt3" id="txt3" value="abc" /><br />
<input type="submit" name="cmdSubmit" id='cmdSubmit' value="Send" /><br />
</form>
</body>
</html>
This code always reports textbox "txt2" as empty:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#cmdSubmit').click(function() {
if($('[id^=txt][value=""]').length > 0) {
if (!confirm("Are you sure you want to submit empty fields?")) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
}
}
});
});
</script>
</head>
<body>
<form>
<input type="text" name="txt1" id="txt1" value="123" /><br />
<input type="text" name="txt2" id="txt2" value="" /><br />
<input type="text" name="txt3" id="txt3" value="abc" /><br />
<input type="submit" name="cmdSubmit" id='cmdSubmit' value="Send" /><br />
</form>
</body>
</html>
Another way
$('input:text').filter(function() { return $(this).val() == ""; });
or
$('input:text').filter(function() { return this.value == ""; });
or
// WARNING: if input element does not have the "value" attribute or this attribute was removed from DOM then such selector WILL NOT WORK!
// For example input with type="file" and file does not selected.
// It's prefer to use "filter()" method.
// Thanks to #AaronLS
$('input:text[value=""]');
Working Demo
code from the demo
jQuery
$(function() {
$('#button').click(function() {
var emptyTextBoxes = $('input:text').filter(function() { return this.value == ""; });
var string = "The blank textbox ids are - \n";
emptyTextBoxes.each(function() {
string += "\n" + this.id;
});
alert(string);
});
});
You could also do it by defining your own selector:
$.extend($.expr[':'],{
textboxEmpty: function(el){
return $(el).val() === "";
}
});
And then access them like this:
alert($(':text:textboxEmpty').length); //alerts the number of text boxes in your selection
$(":text[value='']").doStuff();
?
By the way, your call of:
$('input[id=cmdSubmit]')...
can be greatly simplified and speeded up with:
$('#cmdSubmit')...
As mentioned in the top ranked post, the following works with the Sizzle engine.
$('input:text[value=""]');
In the comments, it was noted that removing the :text portion of the selector causes the selector to fail. I believe what's happening is that Sizzle actually relies on the browser's built in selector engine when possible. When :text is added to the selector, it becomes a non-standard CSS selector and thereby must needs be handled by Sizzle itself. This means that Sizzle checks the current value of the INPUT, instead of the "value" attribute specified in the source HTML.
So it's a clever way to check for empty text fields, but I think it relies on a behavior specific to the Sizzle engine (that of using the current value of the INPUT instead of the attribute defined in the source code). While Sizzle might return elements that match this selector, document.querySelectorAll will only return elements that have value="" in the HTML. Caveat emptor.
$("input[type=text][value=]")
After trying a lots of version I found this the most logical.
Note that text is case-sensitive.
There are a lot of answers here suggesting something like [value=""] but I don't think that actually works . . . or at least, the usage is not consistent. I'm trying to do something similar, selecting all inputs with ids beginning with a certain string that also have no entered value. I tried this:
$("input[id^='something'][value='']")
but it doesn't work. Nor does reversing them. See this fiddle. The only ways I found to correctly select all inputs with ids beginning with a string and without an entered value were
$("input[id^='something']").not("[value!='']")
and
$("input[id^='something']:not([value!=''])")
but obviously, the double negatives make that really confusing. Probably, Russ Cam's first answer (with a filtering function) is the most clear method.
Building on #James Wiseman's answer, I am using this:
$.extend($.expr[':'],{
blank: function(el){
return $(el).val().match(/^\s*$/);
}
});
This will catch inputs which contain only whitespace in addition to those which are 'truly' empty.
Example: http://jsfiddle.net/e9btdbyn/
I'd recommend:
$('input:text:not([value])')
This will select empty text inputs with an id that starts with "txt":
$(':text[value=""][id^=txt]')
Since creating an JQuery object for every comparison is not efficient, just use:
$.expr[":"].blank = function(element) {
return element.value == "";
};
Then you can do:
$(":input:blank")

find element html with jquery

how to find element html with Jquery .
in this example element html is "input"
jsfiddle
$("#her").click(function() {
var $t = $('#mee');
console.log($t.filter());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="mee">
<input type="submit" value="click ici" id="her">
$(this).prev().prop('nodeName');
I believe this was the JSFiddle link - http://jsfiddle.net/sr2o412y/
<input type="text" id="mee">
<input type="submit" value="click ici" id="her" >
If you want to select a element using jquery you can use (#)id attribute or (.) class attribute or (input) html tagname.
In this case if you want to take the data from text element which has id => "#mee" on click if id => "#her". You can use the below code
$('#her').on('click', function(){
var textvalue = $('#mee').val();
console.log(textvalue);
});
Provide readable id and class names to identify elements properly.
Your selectors looks fine to me. In short, you can use any valid CSS selector, so both $('#her') and $('#mee') should be working in your example, as you have HTML elements with those ids:
$('#her').click(function() {
var $t = $('#mee');
console.log($t.val());
});
<input type="text" id="mee" />
<input type="submit" id="her" value="SUBMIT" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
If you want to select an element based on its type (tag) instead, then just remove the #. For example, to select any input element on the page you would just do:
$('input')
Or, to get just the first one:
$('input').first()
Or also:
$('input').eq(0)
You can also select elements based on type plus attribute to select specific inputs:
$('input[type="text"]')

get the input text field value on tooltip

Get the input text field value on tool-tip.for me I am using text-box with autocomplete..when ever i selected in autocomplete it will show in text-box. when i hover it i want tool-tip the value in text-box..how to get that one can anyone can help me
<input type="text" value="something" class="curate">
Use the title attribute and pass the value of the input into the it on the keyup event.
$(document).ready(function(){
$('#testInput').keyup(function(){
$(this).attr('title',$(this).val())
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Type Something
<input type="text" title="" value="" id="testInput">
The first, you set the title is the value,
and do the same when you change the value of textbox
function updateTitle(me)
{
me.title=me.value;
}
<input type="text" title="something" value="something" id="one" class="curate" onchange="updateTitle(this)">
I'd suggest:
$('input.curate').on('change', function (){
this.title = this.value;
});
<input type="text" id="one" value="something" class="curate">
<script>
var x=document.getElementById("one");
x.title=x.value;
</script>
You can using on hover to all inputs in you html like that :
$('input[type="text"],input[type="number"],input[type="date"]').hover(function() {
$(this).attr('title', $(this).val()); });

Javascript to Jquery, add text in input onclick

How can I change this javascript code to JQuery.
<script type="text/javascript">
function addTextTag(text){
document.getElementById('text_tag_input').value += text;
}
</script>
When a user click the link text automaticaly is added in input.
This is the HTML:
<input id="text_tag_input" type="text" name="tags" />
<div class="tags_select">
text1
text2
text3
</div>
Here is the demo: http://jsfiddle.net/Smartik/j8qGT/
<script type="text/javascript">
$(function() {
$('.tags_select a').click(function() {
var value = $(this).text();
var input = $('#text_tag_input');
input.val(input.val() + value + ', ');
return false;
});
});
</script>
and your markup:
<input id="text_tag_input" type="text" name="tags" />
<div class="tags_select">
text1
text2
text3
</div>
and here's a live demo.
Without inline javascript, completely jQuery:
http://jsfiddle.net/j8qGT/3/
JavaScript:
$('a').click(function(){
$('#text_tag_input').val($('#text_tag_input').val()+$(this).html()+', ');
});
​
HTML:
<input id="text_tag_input" type="text" name="tags" />
<div class="tags_select">
text1
text2
text3
</div>​
Some notes on the steps:
select already the input where to set the value so you avoid the need to re-query for it all the time: var $tagsInput = $('#text_tag_input');. The hash tag selector if the ID selector in jQuery, replaces document.getElementById
bind a click event with .click() for links within element with class "tags_select": `$('.tags_select a').click(...);``
To append the value, instead of struggling with jquery methods to get and set the value of the input, get the native DOM element with [0] on $tagsInput and use the += notation of the property value.
Here's the code:
// select already you input element for re-use
var $tagsInput = $('#text_tag_input');
// bind a click event to links within ".tags-select" element
$('.tags_select a').click(function() {
// append link text to the input field value
$tagsInput[0].value += $(this).text();
return false;
});
DEMO
Further reading:
jQuery selectors
Bind a click event with .click()

jQuery .change() not firing

Just working on some small pages to be elements of a much larger project and am completely confused at my current problem here is my code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<STYLE TYPE="text/css">
.questionBlock { font-size: x-large; color: red }
</STYLE>
<script type="text/javascript">
$(document).ready(function() {
alert("sdsd")
$("input[#name='questionType']").change(function(){
alert("dfdfdf");
var selected = $("form input:radio:checked").val();
alert(selected);
})
});
</script>
<form action="">
<input type="radio" name="questionType" value="closed" /> Closed Endeded<br />
<input type="radio" name="questionType" value="matrix" /> Matrix Question<br />
<input type="radio" name="questionType" value="open" /> Open Ended
</form>
<div class="questionBlock" id="closed">lol</div>
<div class="questionBlock" id="open">rol</div>
<div class="questionBlock" id="matrix">bol</div>
But the change event never fires, regardless of browser, I've tried using bind as well but it's driving me up the wall!
jQuery attribute selectors don't need # prefix (like XPath). Change your code like this:
$("input[name='questionType']").change(function(){
Here is a working version.
you need to remove the # fiddle
$(document).ready(function() {
$('input[name="questionType"]').change(function(){
alert("dfdfdf");
var selected = $("form input:radio:checked").val();
alert(selected);
})
});
jQuery does not use "#" in Xpath-style attr selectors anymore. This being the case, your selector does not match anything.

Categories

Resources