We Keep Coding

Enable fields and allow editing with keyup value

I have a script the enables/disables a text field when a value is entered in another field. The problem is when the field becomes enabled I also want it to be editable. The current script enables the field but I cannot edit the text. Here's what I have
<script type='text/javascript'>
$(function(){
$('.addbut').onkeyup(function(){
if ($(this).val() == '') {
$('.enableOnInput').prop('disabled', true);
} else {
$('.enableOnInput').prop('disabled', false);
}
});
});
</script>
Then the html form has this.
<div class="input ">
<input type="text" class="addbut" name="location" id="location"></div>
<div class="input"><input class="enableOnInput" disabled=""type="text"id="name" name="street" required></div>

Use .keyup( instead of .onkeyup(

Enable and disable textbox if checkbox is checked

I read this article as suggested by an answer for a similar question. I did everything the article said, but the end result wasn't what I wanted.
I want the text box to be disabled by default. When the checkbox is checked, the textbox is enabled.
What happened was that the textbox is enabled by default, and when the checkbox is checked, the textbox is disabled.
Here is my code:
<td class="trow2">
{$prefixselect}<input type="text" class="textbox" name="subject" size="40" maxlength="85" value="{$subject}" tabindex="1" />
<input type="checkbox" class="input_control" value="subject" />
<strong>I believe {$forum['name']} is the best section for this topic.</strong>
</td>
<script type="text/javascript">
$(document).ready(function(){
$('.input_control').attr('checked', true);
$('.input_control').click(function(){
if($('input[name='+ $(this).attr('value')+']').attr('disabled') == false) {
$('input[name='+ $(this).attr('value')+']').attr('disabled', true);
}
else {
$('input[name='+ $(this).attr('value')+']').attr('disabled', false);
}
});
});
</script>

You can simplify your code:
$(document).ready(function () {
$('.input_control').change(function () {
$('input[name=' + this.value + ']')[0].disabled = !this.checked;
}).change();
});
Demo: http://jsfiddle.net/t5qdvy9d/1/

The checkbox and the input elements are siblings so you can use
$(document).ready(function () {
$('.input_control').prop('checked', true);
$('.input_control').change(function () {
$(this).siblings('input').prop('disabled', this.checked)
});
});

If you use jQuery 1.6 or later, you can use this way. Of course, it works with the textarea element also. The demo below includes textarea element too.
edited: add textarea element.
$(document).ready(function(){
$('.input_control').change(function () {
$(".textbox").prop('disabled', this.checked);
$(".textarea").prop('disabled', this.checked);
});
$('.input_control').prop('checked', true);
$('.input_control').trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<input type="text" class="textbox" name="subject" size="40" maxlength="85" value="test subject" tabindex="1" />
<textarea class="textarea"></textarea>
<p></p>
<input type="checkbox" class="input_control" value="subject" />
<strong>I believe forum name is the best section for this topic.</strong>

enable/disable of submit button based on other elements of the form using zurb foundation

I have created a form with a few inputs and a button using zurb foundation, is it possible to disable the button till all the fields of the form are being attended ?

You can identify all your required inputs (with a class) and then when any of them changes or get focusout-ed check if there are empty ones. If there all filled, then enable the button.
// Bind the events to the inputs
// You can use any class nedded, this covers selects too
// You even can add more events to suite your needs
$('.input-required').on('focusout change', function() {
// We instantiate a variable to hold the button status
var buttonDisabled = false;
// Iterate every input
$('.input-required').each(function() {
// If there is any empty...
if (!$(this).val()) {
// We say true to the disableness of the button
buttonDisabled = true;
}
})
// Set the status to the button
$('button').prop('disabled', buttonDisabled);
});
form {
width: 460px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form action="#">
<input type="text" class="input-required">
<input type="text" class="input-required">
<input type="text" class="input-required">
<input type="text" class="input-required">
<input type="text" class="input-required">
<input type="text" class="input-required">
<hr>
<button type="submit" disabled>Process</button>
</form>

jquery validate either checkbox or input field

I had a form that can send message and user need to select group from checkbox or manual input the group name. Now i want validate this form, if user not check any checkbox or insert any value in text field this form cannot sumbit.
Below is my form and here is my jsfiddle (already validate textarea).
<form action="" method="post" name="myform" id="myform">
<input type="checkbox" name="group_list[]" value="1" />Group 1<br />
<input type="checkbox" name="group_list[]" value="1" />Group 1<br />
<input type="checkbox" name="group_list[]" value="1" />Group 1<br />
<input type="checkbox" name="group_list[]" value="1" />Group 1<br />
<input type="text" name="manual_group" value="" placeholder="Group Name" /><br />
<textarea name="message" placeholder="Your Message"></textarea> <br />
<input type="submit" name="submit" value="Send Message" />
</form>
User need to check one of checkbox or insert group name before submit.So the question is how to create condition for this rule?
*Remember this form still can submit if i not check one of the checkbox but key-in some name in manual_group , this form also can sumbit if i not key-in any name but check for checkbox.

You can achieve this by setting a rule on the textbox that it is required only if none of the checkboxes are checked. This uses the type of required specification that takes a function as a parameter.
rules: {
manual_group: {
required: function () {
return $('[name=group_list\\[\\]]:checked').length === 0;
}
}
}
The other thing you need to do is force a re-validation when either the checkboxes or the textbox are changed. I have done it like this,
$('form input').on('click focusin focusout keyup', function () {
$('form').validate().form();
});
The full script is below, and in this fiddle
$(function () {
$("form").validate({
rules: {
manual_group: {
required: function () {
return $('[name=group_list\\[\\]]:checked').length === 0;
}
}
},
messages: {
manual_group: "Please check a checkbox or fill in this field"
},
submitHandler: function () {
alert('form ok');
}
});
$('form input').on('click focusin focusout keyup', function () {
$('form').validate().form();
});
});

with reference to your Fiddle
you can add it in the same way just like the validation you'hv added for message
e.g.
"group_list[]": {required:true}...

May be this will work
$("#submit").click(function(){
if($('#myform input:checked').length >= 1 || $("#manual_group").val() !=""){
return true ;
}
return false;
}

display data in a textbox when checkbox is checked

I have three text boxes having id text1, text2, text3 and one checkbox having id check. I am displaying something in first textbox let's say 10. Now if i will check checkbox then automatically "20" will be displayed in the second textbox. Third textbox remains same as it is. If I will display something in 1st and 2nd textboxes, now if i will check checkbox then same "20" will be displayed in 3rd textbox. After checked if in anytime i will uncheck the checkbox then value "20" will also be removed from the textbox(either 2nd or 3rd) Any idea please? Please be easy with me
index.jsp
<input type="checkbox" id="check"/>
<input type="text" id="text1" value="10"/>
<input type="text" id="text2"/>
<input type="text" id="text3"/>

Your question is not easy to understand....
When checkbox is checked the next empty input text have to display '20' value ?
And if checkbox is unchecked last input with '20' is cleared value ?
Add the "checker" class to each input text.
<input type="checkbox" id="check"/>
<input type="text" id="text1" value="10" class="checker"/>
<input type="text" id="text2" class="checker"/>
<input type="text" id="text3" class="checker"/>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
<br/>
<input type="text" id="anotherTB" value="100"/>
Use this jquery script instead of yours
$(document).ready(function(){
$('#check').click(function(){
if($(this).is(':checked'))
{
var stop='';
$('.checker').each(function(){
if($(this).val()=='' && !stop)
{
$(this).val('20');
stop='stop';
// Add something like that to set other textbox values
var add = parseInt($('#anotherTB').val()) + parseInt($(this).val());
$('#anotherTB').val(add);
}
});
}
else if(!$(this).is(':checked'))
{
$('.checker').each(function(){
if($(this).val()=='20')
{
$(this).val('');
}
});
}
});
});
You can see it work here : http://jsfiddle.net/w9hAZ/1/

$('#check').change(function(){if($(this).is(':checked'))$('#text2').val(20);});
If you want to clear the value when it is unchecked use:
$('#check').change(function(){if($(this).is(':checked'))$('#text2').val(20);else $('#text2').val(''); });