Develop Reference

Clearing form two inputs with javascript

i have a problem with clearing html form inputs.
This is my situation:
<input id="filefield" type="file" name="fileupload"/>
<textarea id="textareafield" name="textupload"></textarea>
<script>
('#textareafield').change(function() {
value1 = $(this).val();
if (value1 != '') $('#filefield').val('');
});
('#filefield').change(function() {
value2 = $(this).val();
if (value2 != '') $('#textareafield').val('');
});
</script>
If #filefield used delete the content from #textareafield and if #textareafield used delete the content from #filefield. I need a solution with javascript or jquery. Thanks.

$(function() {
console.log("ready");
$("#filefield").change(function() {
if ($(this).val() != '') {
$('#textareafield').val('');
// make this field "readonly"
$('#textareafield').attr('readonly', true);
}
else {
$('#textareafield').attr('readonly', false);
}
});
$("#textareafield").change(function() {
if ($(this).val() != '') {
$('#filefield').val('');
// disable the "file" button
$('#filefield').attr('disabled', true);
}
else {
// enable the "file" button
$('#filefield').attr('disabled', false);
}
});
});
Exemple on jsfiddle : https://jsfiddle.net/w3z17dvb/

How to select all/unselect all the check boxes which are not disabled?

I've multiple checkbox inputs while some them are disabled. So when I click select all/unselect all the checkbox at the top, I want to apply this event for the only enabled check boxes. Also when I've all the checkboxes checked by clicking on each one, then the select all checkbox must be clicked.
Note : Also I've one functionality, when the enabled checkbox is clicked and followed by the save click, then that particular checkbox will be disabled.I can add a new checkbox using add new checkbox button. When a new checkbox is added the select all/unselect all checkbox must be unchecked.
HTML
<input type="checkbox" id="ckbCheckAll" /><span>Select all</span>
<table id="myTable">
<tr>
<td>
<input type="checkbox" class="checkBoxClass" disabled="disabled" checked/> <span>Option1</span></td>
</tr>
<tr>
<td>
<input type="checkbox" class="checkBoxClass" /> <span>Option2</span></td>
</tr>
<tr>
<td>
<input type="checkbox" class="checkBoxClass" /> <span>Option3</span></td>
</tr>
<tr>
<td>
<input type="checkbox" class="checkBoxClass" /> <span>Option4</span></td>
</tr>
<tr>
<td>
<input type="checkbox" class="checkBoxClass" /> <span>Option5</span></td>
</tr>
</table>
<button id="add">
Add check box
</button>
<button id="save">
Save
</button>
JQuery
$(document).ready(function() {
$("#ckbCheckAll").click(function() {
$(".checkBoxClass").prop('checked', $(this).prop('checked'));
});
});
$(document).ready(function() {
$('.checkBoxClass').click(function() {
var selected = $('.checkBoxClass').length;
if ($('.checkBoxClass:checked:enabled').length === selected) {
$('#ckbCheckAll').prop('checked', true);
} else {
$('#ckbCheckAll').prop('checked', false);
}
})
});
$(document).ready(function() {
count = 5;
$('#save').click(function() {
$('.checkBoxClass').each(function() {
if ($(this).is(':checked')) {
$(this).prop('disabled', true);
}
})
});
$('#add').click(function() {
count = count + 1;
$('#myTable').append('<tr><td><input type="checkbox" class="checkBoxClass" /> <span>Option'+count+'</span></td></tr>')
});
})
Fiddle

To detect disabled check boxes you can use jquery filter method like this:
$(".checkBoxClass").filter(function(){
return !$(this).attr('disabled');
}).prop('checked', $(this).prop('checked'));
by using filter like this, JQuery changes checkboxes that have not disabled attribute.
and use .prop('checked', false) or .attr('checked', false) to uncheck checkboxes on add new checkbox button.
so to uncheck select all on save and add checkbox use:
$("#ckbCheckAll").attr('checked', false);
and to uncheck all enabled checkboxes on addcheckbox use:
$(".checkBoxClass").filter(function(){
return !$(this).attr('disabled');
}).prop('checked', false);
You should also use $(document).on("click",".checkBoxClass",function(){}) binder to let JQuery bind click event for dynamically added checkboxes. by doing that and add some extra jquery, select all checkbox, checked when ever all checkboxes are checked.
Updated Fiddle

try this, it will get only enable checkobox and select/unselect them.
$(document).ready(function() {
$("#ckbCheckAll").click(function() {
$(".checkBoxClass:enabled").prop('checked', $(this).checked);
});
});
check fiddle
http://jsfiddle.net/p73wW/8/

Try this :
$(document).ready(function() {
$("#ckbCheckAll").click(function() {
var checked = false;
if($(this).prop('checked') == true) {
checked = true;
}
$("#myTable tbody tr").each(function() {
if($(this).find('.checkBoxClass').attr('disabled') != 'disabled') {
$(this).find(".checkBoxClass").prop('checked', checked);
}
});
});
$('.checkBoxClass').click(function() {
var i = 1;
var totalCheckboxes = $("#myTable tbody tr").length;
if($(this).prop('checked') == true) {
$("#myTable tbody tr").each(function() {
if($(this).find('.checkBoxClass').attr('disabled') != 'disabled') {
if($(this).find(".checkBoxClass").prop('checked') == true) {
i++;
}
}
});
}
if(i==totalCheckboxes) {
$("#ckbCheckAll").prop('checked', true);
} else {
$("#ckbCheckAll").prop('checked', false);
}
});
count = 5;
$('#save').click(function() {
$('.checkBoxClass').each(function() {
if ($(this).is(':checked')) {
$(this).prop('disabled', true);
}
});
$("#ckbCheckAll").prop('checked', false);
});
$('#add').click(function() {
count = count + 1;
$('#myTable').append('<tr><td><input type="checkbox" class="checkBoxClass" /> <span>Option'+count+'</span></td></tr>')
});
});
Updated Fiddle

Here is another method. Instead of using filter I have used :enabled. Also used on jquery to detect new added checkbox. Hope it will help you.
$(document).on('click','.checkBoxClass',function() {
var selected = $('.checkBoxClass:enabled').length;
if ($('.checkBoxClass:checked:enabled').length === selected) {
$('#ckbCheckAll').prop('checked', true);
} else {
$('#ckbCheckAll').prop('checked', false);
}
})
demo

Multiple inputs with duplicate value check

I have a button to create input tags. When user click submit button I want to find inputs with duplicate values and change border to red.
I'm not using jquery validate plugin
html code:
<form>
<table>
<tr>
<td><input type="text" name="text[]" id="1"> <button class="add">add</button></td>
</tr>
</table>
<input type="submit" id="submit" value="check">
</form>
jQuery code:
// add input
var i = 2;
$('.add').click(function(e){
e.preventDefault();
$('table').append("<tr><td><input type="text" name="text[]" id="'+i+'"> <button class="add"></td></tr>");
i++;
});
$('#submit').click(function(){
// I do not know how to write ...
});

Here is what you want
$('#submit').click(function () {
var valid = true;
$.each($('input[type="text"]'), function (index1, item1) {
$.each($('input[type="text"]').not(this), function (index2, item2) {
if ($(item1).val() == $(item2).val()) {
$(item1).css("border-color", "red");
valid = false;
}
});
});
return valid;
});

If somebody is after this, with a lot of inputs, and is concerned with efficiency, this yields the same result (duplicates besides the first occurrence are marked):
$('#submit').click(function(){
var values = []; //list of different values
$('table input:text').each(
function() {
if (values.indexOf(this.value) >= 0) { //if this value is already in the list, marks
$(this).css("border-color", "red");
} else {
$(this).css("border-color", ""); //clears since last check
values.push(this.value); //insert new value in the list
}
}
);
});
fiddle:
https://jsfiddle.net/4s82L4vg/

Disable / Enable button when the text and textarea are empty

I have this code that disable the button when the text is empty, but I have a textarea html code. How can I include this that when the text and textarea are both empty the button will be disabled and when both are filled it enables. I tried the code below and it works on text only. Any ideas?
$(document).ready(function() {
$('input[type="submit"]').attr('disabled', true);
$('input[type="text"]').on('keyup',function() {
if($(this).val() != '') {
$('input[type="submit"]').attr('disabled', false);
} else {
$('input[type="submit"]').attr('disabled', true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="textField" />
<textarea rows="4" cols="30" ></textarea>
<input type="submit" value="next" />

You miss the textarea selector in jQuery
$(document).ready(function() {
$('input[type="submit"]').attr('disabled', true);
$('input[type="text"],textarea').on('keyup',function() {
var textarea_value = $("#texta").val();
var text_value = $('input[name="textField"]').val();
if(textarea_value != '' && text_value != '') {
$('input[type="submit"]').attr('disabled', false);
} else {
$('input[type="submit"]').attr('disabled', true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="textField" /><br>
<textarea rows="4" cols="30" id="texta"></textarea><br>
<input type="submit" value="next" />

You can do this using the .prop() method like:
// Cache the elements first
var $text = $('input[type="text"]');
var $textarea = $('textarea');
var $submit = $('input[type="submit"]');
// Set the onkeyup events
$submit.prop('disabled', true);
$text.on('keyup', checkStatus);
$textarea.on('keyup', checkStatus);
// Set the event handler
function checkStatus() {
var status = ($.trim($text.val()) === '' || $.trim($textarea.val()) === '');
$submit.prop('disabled', status);
}
F.Y.I.
As mentioned in the .prop() API Documentation:
Before jQuery 1.6, the .attr() method sometimes took property values
into account when retrieving some attributes, which could cause
inconsistent behavior. As of jQuery 1.6, the .prop() method provides a
way to explicitly retrieve property values, while .attr() retrieves
attributes.
FIDDLE DEMO

Just check both input feild and textarea.
For that you can bind the both fields to keyup event and check the value
$('input[type="submit"]').prop('disabled', true);
$("#yourtextfield,#yourtextarea").on("keyup","#parentdiv",function(){
if($("#yourtextfield").val() == '' || $("#yourtextarea").val() == ''){
$('input[type="submit"]').prop('disabled' , true);
}
else{
$('input[type="submit"]').prop('disabled' , false);
}
})

use prop
$('input[type="submit"]').prop('disabled', true);
$('input[type="text"],textarea ').on('keyup',function() {
if($(this).val()) {
$('input[type="submit"]').prop('disabled' , false);
}else{
$('input[type="submit"]').prop('disabled' , true);
}
});
by attr we can do by
$('input[type="submit"]').attr('disabled', 'disabled');
$('input[type="text"],textarea ').on('keyup',function() {
if($(this).val()) {
$('input[type="submit"]').removeAttr('disabled');
}else{
$('input[type="submit"]').attr('disabled','disabled');
}
});
see .prop() vs .attr()

I think you have to check space.
$("textarea").on('mouseout', function(){
if (!$.trim($("textarea").val())) {
alert("empty");
}
});
test it : http://jsfiddle.net/mehmetakifalp/ef5T9/

<input type="text" name="textField" />
<textarea rows="4" cols="30" id="texta"></textarea>
<input type="submit" value="next" />
<script type="text/javascript">
$(document).ready(function() {
$('input[type="submit"]').attr('disabled', true);
$('input[type="text"],textarea').on('keyup',function() {
var textarea_value = $("#texta").val();
var text_value = $('input[name="textField"]').val();
if(textarea_value != '' && text_value != '') {
$('input[type="submit"]').attr('disabled' , false);
}else{
$('input[type="submit"]').attr('disabled' , true);
}
});
});
</script>

The selected answer does the job but it is not enough. A text area and text field filled with spaces ( pressing the space bar several times) will enable the submit button.
You therefore need to apply $.trim() to the values from these fields before passing them to the if statement as shown below
$(document).ready(function() {
$('input[type="submit"]').attr('disabled', true);
$('input[type="text"],textarea').on('keyup',function() {
var textarea_value = $.trim($("#texta").val());
var text_value = $.trim($('input[name="textField"]').val());
if(textarea_value != '' && text_value != '') {
$('input[type="submit"]').attr('disabled', false);
} else {
$('input[type="submit"]').attr('disabled', true);
}
});
});

I needed a solution where there are 2 text fields and a Submit button. The business logic was that the user should type in a value in any one of the text fields at a minimum to enable the Submit button.
Here is my solution which I used in my code. It is not the best/optimal solution possibly but it did the job. Do comment if you have a better way.
//Enable Submit button for search only on text input
$(".inputFieldCSSClass").on('keyup', function(){
var isEmpty = !($.trim($("#inputText1").val()).length > 0 ||
$.trim($("#inputText2").val()).length > 0);
$("#btnSubmit").prop('disabled', isEmpty);
});

How to save the value of INPUT in variable?

How to save the value of INPUT in variable to not to write a lot of duplicate code?
like var input = $(this).val();
full example
<div id="form">
1. <input type="text" value="title" />
2. <input type="text" value="value" />
</div>
$(function(){
$('#form input:eq(0)').bind({
focus: function(){
if($(this).val()=='title'){
$(this).val('');
}
},
blur: function(){
if($(this).val() == ''){
$(this).val('title');
}
}
});
$('#form input:eq(1)').bind({
focus: function(){
if($(this).val()=='value'){
$(this).val('');
}
},
blur: function(){
if($(this).val() == ''){
$(this).val('value');
}
}
});
});

I'm not exactly sure what you are asking, but this refactoring will work for toggling the value. EDIT: added default attribute to the html elements and shortened jQuery (still readable though) http://jsfiddle.net/UmZeZ/
<div id="form">
1. <input type="text" value="title" default="title" />
2. <input type="text" value="value" default="value" />
</div>
$(function() {
$('#form input').bind('focus blur', function() {
var value = $(this).attr('default');
if ($(this).attr('value') == value) {
$(this).attr('value', '');
} else if ($(this).attr('value') === '') {
$(this).attr('value', value);
}
});
});

To accomplish what you want, I would suggest using the HTML5 placeholder attribute. With Modernizr, we can detect browser support for this feature, and with this simple piece of code, we can get it to work even for browsers that do not support placeholder.
if(!Modernizr.input.placeholder){
var input = $('input[type="text"]');
input.focus(function(){
if(this.value === this.getAttribute('placeHolder')) this.value = '';
}).blur(function(){
if(this.value === '') this.value = this.getAttribute('placeHolder');
}).blur();
}
See a live demo of this here: http://www.jsfiddle.net/yijiang/cTDsL/1

Here is my solution. I would work to any field which has class="set-default"
Checkout the working example
Here is the code:
$(function(){
$('.set-default').bind({
focus: function(){
if(typeof($(this).data('def')) == 'undefined'){
$(this).data('def', this.value)
}
if(this.value == $(this).data('def')){
this.value = '';
}
},
blur: function(){
if(this.value == ''){
this.value = $(this).data('def');
}
}
})
});
basically all fields which had the class set-default will act as you like. You can always change the selector to $('#form input') but I think it's not useful.
HTH