I'm trying to write code that makes an alert sound if focus has left the text field with a class "mandatory", and that field is empty.
Basically if a user leaves a mandatory text field without writing anything, it will prompt them.
Here's my code, it doesn't work:
$(document).ready(function(){
$('.mandatory').blur(function(){
if($(this.id).val() == "")
{
alert('Field:' + this.id + ' is mandatory!');
}
});
});
You're using this.id when you should be using this:
if($(this).val() == "")
{
alert('Field:' + this.id + ' is mandatory!');
}
To explain: inside an event handler, this is the DOM element upon which the event was triggered. As you can see from the documentation for the $ function (note that the jQuery function and the $ function are the same thing), you can use a DOM element to build a jQuery selection.
Note that you could optimise this further by discarding the jQuery constructor and simply using this.value instead.
Assuming you're using jquery:
$(document).ready(function(){
$('.mandatory').blur(function(){
if($(this).val() == "") {
alert('Field:' + $(this).attr('id') + ' is mandatory!');
}
});
});
Your code wont work if the user has entered white space
Use
$.trim()
instead
$(document).ready(function(){
$('.mandatory').blur(function(){
if($.trim($(this).val()) == "")
{
alert('Field:' + this.id + ' is mandatory!');
}
});
});
Guess you were tryin to do this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script>
$(function(){
$('.mandatory').each(function (){
$(this).blur(
function(){
if($(this).val() == ""){
alert("empty");
}
})
});
});
</script>
<div id='header'>
<input type="text" class="mandatory"/>
<input type="text" class="mandatory"/>
<input type="text" class="mandatory"/>
<input type="text" class="mandatory"/>
<input type="text" class="mandatory"/>
<input type="text" class="mandatory"/>
<input type="text" class="mandatory"/>
</div>
and this is working
Related
What I am trying to achieve in the below code is when "0" has been entered into the input field it gets unfocused and other stuff triggers.
$(".val-0").keyup(function() {
if ($(this).val() === 0) {
$(this).blur();
// Do other Stuffss
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input class="val-0" type="number">
You are missing an opening quotation on the class name, for one thing.
For another, you are using === to compare which requires same data type (strict comparison). input.val() returns data of type string not integer.
Deeper explanation here.
You want to compare using $(this).val() == 0) or $(this).val() === '0')
$(".val-0").keyup(function() {
if ($(this).val() == 0) {
$(this).blur();
// Do other Stuffss
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input class="val-0" type="number">
Due to some reason you cannot attached keyup event to input type of number. I tried to put working example here. I hope it will help you.
$(".val-0").keyup(function(event) {
console.log(event.which + ", " + $(this).val());
if ($(this).val() === 0) {
$(this).blur();
console.log($(this));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="val-0" type="text" />
I am creating a 'my account page as part of a larger project. And I am using jquery to get data about which radio button the user has selected. I cannot figure out why it isnt working, i believe the problem is with the jquery used to dictate when a radio button is clicked.
JQUERY:
$("input[name=currentTree]").on('change',function(){
var currentTreeId = $(this).val();
alert ('data:' + currentTreeId);
$.post('selectTree.php',{currentTreeId:currentTreeId} ,function(data,status){
alert(data + ' is the current tree');
});
});
$("input[type=radio][name=currentTree]").change(function(){
var currentTreeId = $(this).val();
alert ('data:' + currentTreeId);
$.post('selectTree.php',{currentTreeId:currentTreeId} ,function(data,status){
alert(data + ' is the current tree');
});
});
Try this:
$('input[type=radio][name=currentTree]').change(function() {
if ($(this).val() == 'typeA') {
alert("Got Type A Radio");
}
else if ($(this).val() == 'typeB') {
alert("Got Type B Radio");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="typea">Type A</label><input id="typea" type="radio" name="currentTree" value="typeA">
<label for="typeb">Type B</label>
<input id="typeb" type="radio" name="currentTree" value="typeB">
$("input[name=currentTree]").on('change', function(){
...
});
Example: https://jsfiddle.net/b80sa4kx/
I have multiple elements like this:
<input type="text">
And I want to add slashes (/) so the output is a date mask.
I am using the following function, which only applies on IDs
$(document).ready(function() {
$("#fecha").keyup(function(){
if ($(this).val().length == 2){
$(this).val($(this).val() + "/");
}else if ($(this).val().length == 5){
$(this).val($(this).val() + "/");
}
});
How can i modify the above function to do a date format mask?
Select all input type="text" elements within parent element where keyup event handler should be called on. You can alternatively set a common .className at the elements and use .className selector $(".date")
$(document).ready(function() {
$("#form input[type=text]").keyup(function() {
if (this.value.length == 2) {
$(this).val(this.value + "/");
} else if (this.value.length == 5) {
$(this).val(this.value + "/");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<form id="form">
<input type="text" />
<input type="text" />
</form>
I can't make text in ajax generated input field selectable on click.
<input type="text" class="form-control input-lg" id="url" value="">
<script>
$.ajax({
...
element.append('<input type="text" id="test" value="' + 'https://' + location.host + '/' + data[0].data + '">')
}
});
return false;
});
</script>
<script>
$('input').on('focus', function (e) {
$(this)
.one('mouseup', function () {
$(this).select();
return false;
})
.select();
});
</script>
I can select all text on click in #url input, beside text in ajax generated input.
All I want is to make text in both static inputs and ajax generated inputs selected on click.
$('body').on('focus', 'input', function () {
$(this).select();
});
I have a function to add and remove a field but the remove function doesnt work somehow.
HTML:
<div id="parts">
Part
<input type="text" id="auto_part" name="auto_part" />
<br />
Description
<input type="text" id="auto_description" name="auto_description" />
<br />
</div>
Add another part
jQuery:
$(function() {
var scntDiv = $('#parts');
var i = $('#parts input').size();
$('#addField').on('click', function() {
$('<br /><div id="parts"><span>Part</span> <input type="text" id="auto_part'+i+'" name="auto_part'+i+'" /><br />').appendTo(scntDiv);
$('<span>Description</span> <input type="text" id="auto_description'+i+'" name="auto_description'+i+'" /> <br />').appendTo(scntDiv);
$('<input type="hidden" id="row_count" name="row_count" value="" />').appendTo(scntDiv);
$('Remove</div>').appendTo(scntDiv);
i++;
return false;
});
$('#removefield').on('click', function() {
if( i > 2 ) {
$(this).parents('div').remove();
i--;
}
return false;
});
});
The problem must have to do with this line:
$('#removefield').on('click', function() {
It doesnt pass that condition.
When I click on Remove it doesnt do anything at all it just scrolls to the top.
You are binding the click handler to the elements that are present in the DOM. But, your #removefield element is being dynamically added. So, the event handler is not attached to it.
You can use .on() to use event delegation and handle also future elements. Also, you may want to use classnames instead of and id attributes. id attributes need to be unique, but you can set the classname to as many elements as you want.
Remove
$("#parts").on("click", ".removefield", function() {
/* ... */
});
The reason why your "Remove" link doesn't work is because you are adding the dynamic <div> element by parts hence making it invalid markup. You should be adding it all together at once. For example,
$('#addField').on('click', function () {
var part = '<div id="parts' + i + '"><span>Part</span> <input type="text" id="auto_part' + i + '" name="auto_part' + i + '" /><br/>' +
'<span>Description</span> <input type="text" id="auto_description' + i + '" name="auto_description' + i + '" /> <br />' +
'<input type="hidden" id="row_count' + i + '" name="row_count' + i + '" value="" />' +
'Remove</div>';
scntDiv.after(part);
i++;
return false;
});
$(document).on("click", ".removefield", function() {
if( i > 2 ) {
$(this).parent('div').remove();
i--;
}
return false;
});
You can see it here.
try
$('#removefield').live("click", function() {