Develop Reference

Setting and removing the 'required' attribute using javascript and html5

I have this function, all im trying to do is if the first radio button is selected, then hide a few input fields and make them not required by the form. Then is the other radio button is selected then show those hidden fields and make them required by the form. The user may change between the radio buttons, and so the show hide operation and adding and removing of the required attributes have to happen on radio button change. At the moment the fields are showing and hiding but i cannot change the required attributes. Any ideas? Thank you.
$(document).ready(function() {
$('input[type="radio"]').click(function() {
if($(this).attr('id') == 'watch-me') {
$('#show-me').show();
$('#1041827741').setAttribute("required", "");
$('#1283215174').setAttribute("required", "");
$('#1496644528').setAttribute("required", "");
$('#1392644643').setAttribute("required", "");
$('#1321281340').setAttribute("required", "");
}
else {
$('#show-me').hide();
$('#1041827741').removeAttr('required');
$('#1283215174').removeAttr('required');
$('#1496644528').removeAttr('required');
$('#1392644643').removeAttr('required');
$('#1321281340').removeAttr('required');
}
});
});

Use the prop() method:
$('#1041827741').prop('required',true);

You could use .prop("required", true / false) to set and remove. Also, setAttribute and removeAttribute methods are native DOM methods which directly operate on the element.
If you do not have an option of changing the elements markup you could modify your code to save some typings.
Here is what you could do to fix.
$(document).ready(function() {
$('input[type="radio"]').click(function() {
var ids = ["#1041827741", "#1283215174", "#1496644528", "#1392644643", "#1321281340"];
if ($(this).attr('id') === 'watch-me') {
$('#show-me').show();
ids.forEach((id) => $(id).prop("required", true));
} else {
$('#show-me').hide();
ids.forEach((id) => $(id).prop("required", false));
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
if you do have options to change the elements, I would assign a same class name to all of those elements and just operate on the ids.
Here is what it can be done.
$(document).ready(function() {
$('input[type="radio"]').click(function() {
if ($(this).attr('id') === 'watch-me') {
$('#show-me').show();
//inputElement is the class assigned to all input elements
$(".inputElement").prop("required", true);
} else {
$('#show-me').hide();
$(".inputElement").prop("required", false);
}
});
});

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/

How to hide contents with the same class name but different id's

Hi i have to hide contents of tab using submit button. I try to hide the contents but its not working.Even when i try to hide the contents through id the tab itself getting hide. I have same class name with different id's. So in this case how can i hide the contents using class name with their id ? Thanks.
Here is my code:
function hide_visibility(classname) { $(classname).hide(); }
$('#news .butt-rahmen').on('click', function(){
if($(this).attr('id') == 'saveId')
hide_visibility('#news .cont-liste-verlauf');
getNewsWidgetEdit();
});

The '.' is not necessary. Additionally, I'm assuming you forgot brackets around your if
function hide_visibility(selector) { $(selector).hide(); }
$('#news .butt-rahmen').live('click', function(){
if($(this).attr('id') == 'saveId') {
hide_visibility('#news .cont-liste-verlauf');
getNewsWidgetEdit();
}
});
That being said, live is deprecated, so you should use on. If you need to dynamically attach to .butt-rahman classed items under #news:
function hide_visibility(selector) { $(selector).hide(); }
$(document).on('click', '#news .butt-rahmen', function(){
if($(this).attr('id') == 'saveId') {
hide_visibility('#news .cont-liste-verlauf');
getNewsWidgetEdit();
}
});

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

Select individual form with Javascript

<script>
$(document).ready(function() {
$('form["meldaan"] input').keyup(function() {
var empty = false;
$('form["meldaan"] input').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$('#register').attr('disabled', 'disabled');
} else {
$('#register').removeAttr('disabled');
}
});
});
</script>
This script works fine with one form, but I have two or three different forms on one page. I want each form to be treated different, if I use this code all fields in ALL forms need to be filled in, which I obviously don't want.
How can I identify the unique forms? Say one form is named name="formone" and the other name="formtwo". How would I implement that? (It's okay if I have to make more functions).

You just need to adjust your selector:
$('form[name="formone"] > input')
Update: #Andre, in your live example inputs are not direct children of the form element, so you need to use:
$('form[name="formone"] input')
Update 2: if you are using an id:
$('#formid input')