Dynamically created form contains input elements. First elements may be disabled or readonly.
I tired code below to set focus to first elemnt which accepts data to enable fast data enttry form keyboard.
However if form fist element is disable or readonly, focus is not set.
How to set focus to first element which accepts data ?
<form style='margin: 30px' id="Form" class='form-fields' method='post' target='_blank'
action='Report/Render'>
...
<input id='_submit' type='submit' value='Show report' class='button blue bigrounded' />
</form>
<script type="text/javascript">
$(function () {
var elements = $('#Form').find(':text,:radio,:checkbox,select,textarea');
elements[0].focus();
elements[0].select();
});
</script>
Update
There are also hidden input fields, sorry. Answers provided set focus to hidden element. Answr containing function does not find any element.ˇ
Here is the update testcase:
$(function () {
$("#form :input:not([readonly='readonly']):not([disabled='disabled'])").first()
.focus();
});
How to set focus to vist visible, enabled and not readonly element ?
Update 3
I tried Row W code where input element was added.
Now it sets focus to second element. Testcase is shown at Revision 5 of Rob W's answer
Use the following code:
var elements = $('#Form').find(':text,:radio,:checkbox,select,textarea').filter(function(){
return !this.readOnly &&
!this.disabled &&
$(this).parentsUntil('form', 'div').css('display') != "none";
});
elements.focus().select();
If you only want to select the first element, the following code is more efficient:
$('#Form').find(':text,:radio,:checkbox,select,textarea').each(function(){
if(!this.readOnly && !this.disabled &&
$(this).parentsUntil('form', 'div').css('display') != "none") {
this.focus(); //Dom method
this.select(); //Dom method
return false;
}
});
Update: if you want to have the elements in the same order, use:
var elements = $("#form").find("*").filter(function(){
if(/^select|textarea|input$/i.test(this.tagName)) { //not-null
//Optionally, filter the same elements as above
if(/^input$/i.test(this.tagName) && !/^checkbox|radio|text$/i.test(this.type)){
// Not the right input element
return false;
}
return !this.readOnly &&
!this.disabled &&
$(this).parentsUntil('form', 'div').css('display') != "none";
}
return false;
});
Use jQuery's :not() selector:
$("#myForm :input:not([readonly='readonly']):not([disabled='disabled']):reallyvisible").first()
.focus();
Here's a working fiddle.
EDIT:
To meet the new requirement you posted in the comments, you'll have to extend the :visible selector to check for parent visibility (untested):
jQuery.extend(
jQuery.expr[ ":" ],
{ reallyvisible : function (a) { return !(jQuery(a).is(':hidden') || jQuery(a).parents(':hidden').length); }}
);
Related
How would I apply this js function to the input tag and return result.
here is the javascript function:
function checkFocus() {
if ($(document.activeElement).attr("type") == "text" || $(document.activeElement).attr("type") == "textarea") {
//Something's selected
return true;
}
Here is the html:
<input type="text" name="fname"value="">
My aim is to check if the input box is selected
Assuming you're using jQuery (since you have $(document.activeElement) in your code), you can use the focus listener like so:
$("input[type=text], input[type=textarea]").focus(() => {
// Do something with the element
});
This will trigger each time you select an input box (focus it). Look at the jQuery documentation for the focus event listener
I am creating a calendar event app where you can save people's birthday dates and edit people's names or dates whenever you want.
To display stored events I am using a forEach loop in JSP. I have a span named ld-option-okay-edit in each div. You can edit previous data after you click on that span and save your data.
But before clicking on the save button I am checking whether any field in a particular div is empty or not, using a jQuery hover function.
If any field is empty then I am disabling the span element so that it can't forward request to the servlet, but the problem is I am not able to disable it.
??????
THE PROBLEM
???????
My question is how can I disable a span through jQuery, or how can I prevent the onclick event of a span using jQuery?
Here is my code:
<c:forEach items="${relativeUser}" var="user">
<div class="elementsdiv">
<form action="<c:url value=" ******">" method="post">
<div class="cld-option-okay" >
<span class="glyphicon glyphicon-ok cld-option-okay-edit" name="cld-option-okay-edit" ></span>
</div>
<div class="cld-option-name" >
<input class="cld-name-input" value="${user.name}" placeholder="Name of the person" type="text" name="name">
</div>
</form>
</div>
</c:forEach>
What I have tried until now in jQuery is:
$(".elementsdiv").each(function (i, data) {
$($(data).find('.cld-option-okay')).hover(function (e) {
e.preventDefault();
if ($($(data).find('input[name="name"]')).val() === "") {
$($(data).find('span[name="cld-option-okay-edit"]')).addClass('disabled');//in this line i am getting trouble
}
}
});
For that line I even tried:
1)$($(data).find('span[name="cld-option-okay-edit"]')).attr("disabled","true");//with single quote also
2)$($(data).find('span[name="cld-option-okay-edit"]')).attr("disabled","disabled");//with single quote also
3).prop("disabled", true );
4).attr('disabled', '');
5).attr("disabled", "disabled");
6).off( "click", "**" );
7).unbind( "click", handler );
but when I apply:
`$($(data).find('span[name="cld-option-okay-edit"]')).hide()`;//it is applying
**********************
`$($(data).find('span[name="cld-option-okay-edit"]'))`till here code is working fine my problem is in applying disable.
previously i applied disable like below
$('.cld-option-okay-edit').addClass('disabled');
but it disables okay span in all divs
*************************
For enable or disable a span, you could do it like this:
var isEmpty = false;
$('#myDiv > input').keyup(function(){
isEmpty = false;
$('#myDiv > input').each(function(i,obj){
if(this.value == ""){
isEmpty = true;
return false;
}
});
// Styles for the span.
if( ! isEmpty){
$('#myDiv > span').removeClass('disabled');
} else {
$('#myDiv > span').addClass('disabled');
}
});
$('#myDiv > span').click(function(){
if(isEmpty){
alert("disabled");
} else {
alert("enabled");
}
});
I think this is what your code should look like based on what you have written, but I am not sure it is actually what you want to happen. If you want to disable it, you need to use prop()
$(".elementsdiv").each(function() {
var elem = $(this);
elem.find('.cld-option-okay').hover(function(e) {
if (elem.find('input[name="name"]').val() === "") {
elem.find('span[name="cld-option-okay-edit"]').addClass('disabled'); /*.prop("disabled",true); */
}
});
});
I'm struggling with a jQuery selection: I have a table that contains these columns (more or less)
Name (input field)
Surname (input field)
Note (textarea)
Button (a button to submit the relative note)
I would like to hide all buttons whose textarea is empty (to avoid the submission). This is the table:
The DOM structure of the single row is quite simple (I think):
So, I would like to select something like "all buttons contained in a td that is a brother of a td that cointains an empty textarea"...anf anf...can I do that with a single jQuery selection or not? Thank you in advance.
Of course!
$("tr td textarea").each(function() {
if (this.value == "") {
$(this).closest("td").next("td").find("button").prop("disabled", true);
}
});
You could hide buttons onLoad with the next selector:
$('textarea:empty').parent().next('td').find('button').hide();
Or if you want to disable the buttons:
$('textarea:empty').parent().next('td').find('button').prop("disabled", true);
It would be useful to check if user has type something in the textarea while on the page, and enable or not the button:
$( $('textarea') ).blur(function() {
var button = $(this).parent().next('td').find('button');
if($(this).val() === ''){
button.prop("disabled", true);
}else{
button.prop("disabled", false);
}
});
You can check this fiddle with your table included:
http://jsfiddle.net/6B9XA/4/
try this
$('table textarea').change(function()
{
var thisval=$.trim($(this).html())
if(thisval=='')
{
$(this).parent().next().children('button').attr('disabled')
}
})
I think you should use it this way:
$("#yourtableid").find("textarea").each(function() {
if (this.value == "") {
$(this).closest("tr").find("button").prop("disabled", true);
}
});
"#yourtableid" this should be changed to your table id.
Selectors optimization for performance boost.
You can use filter() to get only the buttons who contains an empty textarea within that row
$('tr button').filter(function(){ // get all buttons
return $(this).closest('tr').find('textarea').val() == ''; // only return those that are empty
}).prop('disabled',true); // disable the buttons
What I'm trying to do! Rank your top 10 movies in order from 1-10.
When a link is clicked it should add the text value to the input and a button that removes the value. The process should be repeated until all inputs have a value.
My horrible code!
When I click a link, it adds the value to all inputs. How do I click a link add the value to input1, click another link add the value to input2, etc.
HTML
<div class="movies">
Titanic
Rainman
Forrest Gump
</div>
<ol>
<li>
<input type="text">
<button class="remove">X</button>
</li>
<li>
<input type="text">
<button class="remove">X</button>
</li>
<li>
<input type="text">
<button class="remove">X</button>
</li>
</ol>
jQuery
$('.movies a').click(function() {
var value = $(this).text();
var input = $('input')
input.val(value);
$('button').show();
});
$('button').click(function() {
$('input').val("");
$(this).hide();
});
See Demo on Fiddle
You can use .filter() to select the next input with no current value.
$('.movies a').click(function() {
var value = $(this).text();
var input = $('input').filter(function () {
return this.value === ''
}).eq(0);
input.val(value);
input.next().show();
});
Here is a demo: http://jsfiddle.net/yp2ee/3/
The above code will only select input elements where the value is blank and then it only selects the first one returned by the .filter() function. This way you only change the value of a single input and only the first blank one.
I also updated the show/hide code for the buttons by showing and hiding the element relatively to the input element or button element clicked:
input.next().show();
UPDATE
You can use .data() to store the state of the links so you can only add a movie once:
$('.movies a').data('clicked', false).click(function() {
if ($(this).data('clicked') === false) {
$(this).data('clicked', true);
...
}
});
Then in your "X" button click event handler you can change the data regarding that value before removing the value:
$('button').click(function() {
var val = $(this).prev().val();
$('.movies a').filter(function () {
return $(this).text() === val
}).data('clicked', false);
$(this).prev().val("");
$(this).hide();
});
Here is a demo of my update: http://jsfiddle.net/yp2ee/7/
Another way: not upto standards, but readable
Modified the HTML a bit by adding classes and ids
http://jsfiddle.net/yp2ee/5/
$('.movies a').click(function() {
var value = $(this).text();
var id = $(this).attr('id');
$('.'+id).val(value).show();
$('.'+id).next('button').show();
});
$('button').click(function() {
$(this).prev('input').val("");
$(this).hide();
});
You are simply selecting the elements with its tag name. It will return collection of elements. So we don't need that. Right.? so what should we do is we have to filter the required element by using .filter() function by supplying the necessary condition[empty] to it.
Ok now we are having chances to get more than one empty text boxes, so in that situation we have to use .first() to select the first element from that collection.
Try,
$('.movies a').click(function() {
var value = $(this).text();
var input = $('input')
.filter(function(){ return $.trim($(this).val()) == ""; })
.first();
input.val(value);
input.next('button').show();
});
$('button').click(function() {
$(this).prev('input').val("");
$(this).hide();
});
The above explanations would have given a minimum understanding about the mechanism. Ok now come to the point .next() and .prev(). Again you are selecting those buttons using the tag name. So actually what we need at this situation is to select the button next to the input box and vice versa. So we could use that both to accomplish what we needed.
DEMO
i need to select some items and check if value are not empty, and hide the previus item....but not work....
for example:
<script>
if($('input[type=text],input[type=email],input[type=password]').val() != ""){
$(this). prev().hide();
}
</script>
<div class="prova"></div>
<input type="text">
<div class="prova"></div>
<input type="text">
<div class="prova"></div>
<input type="text">
when i load page the previus div for every input, not hide....someone can help me?
When you call a call val() method on a set of matched elements it gets the current value of the first element in the set of matched elements. So you should run a loop check the value of each element and then hide previous element. Try this.
$('input[type]').each(function(){
if($(this).val()){
$(this).prev().hide();
}
});
If you have to show the previous element if there is value then you can use this script.
$('input[type]').each(function(){
$(this).prev().toggle($(this).val() == '');
});
.toggle(showOrHide) - Display or hide the element based on the boolean input.
You want to do this:
$(':input').each(function() {
if ($(this).val() != "") {
$(this).prev().hide();
}
});
You can do it by passing a function to .val().
var inputs = $('input[type=text],input[type=email],input[type=password]');
inputs.val(function(i,curr_val){
if( curr_val )
$(this).prev('.prova').hide();
return curr_val;
});