Develop Reference

Javascript disable submit unless all text areas filled

I have varied textareas in a form that I wish to be completed before the submit button is activated. I have researched into this and already found how to specify particular textareas/inputs however dependent on the user group will be dependent on how many text areas are shown so I need a blanket javascript to just check that any textareas shown on the page are filled before the submit button is activated.
I have looked at this: http://jsfiddle.net/qKG5F/641/ however have not managed to successfully implement it myself.
(function() {
$('form > input').keyup(function() {
var empty = false;
$('form > input').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$('#register').attr('disabled', 'disabled');
} else {
$('#register').removeAttr('disabled');
}
});
})()
Could this be because of how I have created my textareas? As shown below
<textarea name="i_2" id="i_2" class="input-block-level"></textarea>
Instead of using <input> as the JSFiddle example does above.
Is there any way to disable the submit button if not all textareas have been filled (without specifying each textarea)? I have edited my submit button accordingly with the JSFiddle example.

In HTML5 you can actually use a very simple "required" command to make any form elements a required field before the submit button is activated. It removes the need for any unnecessary JavaScript.
<textarea name="i_2" id="i_2" class="input-block-level" required></textarea>
give it a try :) stuff like this is why I love HTML5

Why do you think that textarea is an input? Here is the code for the situation when you have inputs and textareas in one form, and you want the button to be disabled if one of the inputs or textareas is empty. Input and textarea are different html elements! You can't select textarea with "input".
(function() {
$('form > input, form > textarea').keyup(function() {
var empty = false;
$('form > input, form > textarea').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$('#register').attr('disabled', 'disabled');
} else {
$('#register').removeAttr('disabled');
}
});
})()
For only textareas use:
$('form > textarea')
Better approach is to use class name, for example "must_be_filled" and assign this class to any html element.
The you can select elements by:
$('form > .must_be_filled')
Try this:
http://jsfiddle.net/g0m79p81/

Can't toggle the text

[Fiddle]
In the example, I'm trying to make each pair of buttons toggle the text by matching data attributes. I can change the text from "Add" to "Remove on click. But I can't toggle it back to "Add" on second click. Can anyone tell me what's the problem?
HTML:
<div class="yellow"><button class="my_choice" data-term="A">Remove</button>
<button class="my_choice" data-term="A">Remove</button>
</div>
<div class="black">
<button class="my_choice" data-term="B">Add</button>
<button class="my_choice" data-term="B">Add</button>
</div>
jQuery:
$('.my_choice').click(function(){
var dataterm = $(this).data('term'),
my_choice = $('.my_choice[data-term='+dataterm+']')
if (my_choice.text() == "Remove")
{
my_choice.text("Add")
}
else
{
my_choice.text("Remove")
}
});

Just change the conditional to reference the clicked item, not the all the matching buttons
if (my_choice.text() == "Remove")
to:
if ($(this).text() == "Remove")
FIDDLE
As you have it, you're trying to read the text() from multiple buttons, which is why it's not working. You need to limit the text() to read from just one button.
Edit:
Updated my answer to reference the fiddle.

you are getting text using class selector so its returning text of all elements with class my_choice which is in this case addadd instead of add and for remove case removeremove instead of remove so use $(this).text() to get current clicked one text.
so you have to do like this:
$('.my_choice').click(function(){
var text= $(this).text();
var dataterm = $(this).data('term'),
my_choice = $('.my_choice[data-term='+dataterm+']')
console.log(my_choice.text())
if (text == "Remove")
{
my_choice.text("Add")
}
else
{
my_choice.text("Remove")
}
});
FIDDLE DEMO

Demo
As i earlier pointed out your code always entered else case
$('.my_choice').click(function(){
var dataterm = $(this).data('term'),
if ($(this).text() === "Remove")//change only applied in your code and added some semi colon
{
my_choice.text("Add");
}
else
{
my_choice.text("Remove");
}
});

Hide buttons related to empty textareas (selecting issue)

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

how to set focus to first editable input element in form

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); }}
);

jQuery: clone input field without losing keyCode functionality

Been trying to build jQuery support into a text input where pressing return duplicates the div container into the space right below it. What I can't figure out is how to focus on the input field inside the newly-created div automatically, and, even more frustrating, why that new input field loses the functionality to duplicate. In other words, pressing return only duplicates if you are in the originally-created input field.
$(document).ready(function(){
textboxes = $("input.data-entry");
if ($.browser.mozilla) {
$(textboxes).keypress (checkForAction);
}
else {
$(textboxes).keydown (checkForAction);
}
});
function checkForAction (event) {
if (event.keyCode == 13) {
$(this).clone().val('').appendTo('#form_container');
return false;
}
}
HTML
<div id="form_container">
<input name="firstrow" type="text" class="data-entry">
</div>

use .clone(true) to copy event handlers. see the docs for more info.

$(textboxes).live('keypress', function(checkForAction));