We Keep Coding

Change (immediatly) submit button text if any form input change [JS]

How can I change immediately the submit button text if any form input change?
//This applies to whole form
$('#test').change(function() {
$("#send").prop("value","Change");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="test">
<input id="Input1" value="Input1" />
<input id="Input2" value="Input2" />
<input type="submit" id="send" value="Send" />
</form>
Here, the button text change after the cursor leave the input.
Live example : http://jsfiddle.net/rgg3A/56/

Use input event
Use :input Selector, Selects all input, textarea, select and button elements
$('#test').find(':input').on('input', function() {
document.getElementById('send').value = this.value;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id="test">
<input id="Input1" value="Input1">
<input id="Input2" value="Input2">
<input type="submit" id="send" value="Send">
</form>

You need to put the listener on the inputs themselves, in this case attach it to the onKeyDown event:
$('input').on("keydown", function() {
send.value = "Change";
});
Updated Fiddle

A solution requiring minimal change would be to use the keyup event. I.e.
$('#test').keyup(function() {
send.value = "Change";
});
This way, typing in any of the input fields within the #test parent will trigger the event.

You can do it by using jquery input event and selector.
$('input').on("keydown", function() {
$('#send').val(this.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="test">
<input id="Input1" value="Input1">
<input id="Input2" value="Input2">
<input type="submit" id="send" value="Send">
</form>

As your original question did not mention JQuery directly except by it's use as a selector, this one left me hanging for a proper JavaScript answer.
So this answer is the same as the other examples, but using just plain ol' JavaScript. Uses the input event, just as the other answers do.
document.getElementById('test').addEventListener('input', function(e) {
document.getElementById('send').value = e.target.value;
});
<form id="test">
<input id="Input1" value="Input1">
<input id="Input2" value="Input2">
<input type="submit" id="send" value="Send">
</form>
The difference here is that it is listening for bubbled events on the form element proper, registers an event listener only once (instead of applying the same event listener to multiple elements), and using the Event.target property to figure out which element was modified.

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>

Enabling inactive fields by clicking on field

Is it possible to have a group of inactive fields where if one of the fields is clicked some of the fields become mandatory and some segments of code are run? Say for example you have three fields which are shown:
<input type="text" id="gov1" name="gov1">
<input type="text" id="parentb" name="parentb">
<input type="checkbox" name="child" id="child">
All three of these fields are initially inactive; but say you click on one of the fields it now makes the rest active and mandatory, and some segment of code is run on the field "parentb" and it is attributed at readonly.
window.onload = function(event)
{
var $input2 = document.getElementById('dec');
var $input1 = document.getElementById('parentb');
$input1.addEventListener('keyup', function()
{
$input2.value = $input1.value;
});
}
I have done a bit of searching around but i can't seem to find anything of use for this specific situation and i'm quite new to JavaScript so any sort of help would be great. Is this at all possible using JavaScript? Or is something similar to this possible?

This method you are looking is called 'chained-select' method.
jQuery framework is used for example below:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<form action="" method="get">
<label>
<input name="Government" type="checkbox" value="">Government</label>
<br>
<label>
<input name="Parent" type="checkbox" id="parent_child_group" value="">Parent</label>
<br>
<label>Name of Child
<input type="text" name="parent_child" value="" class="parent_child_group"></label>
<br>
<label>Other
<input type="text" name="parent_other" value="" class="parent_child_group"></label>
</form>
<script type="text/javascript">
$(document).ready(function () {
$(function() {
enable_cb();
$("#parent_child_group").click(enable_cb);
});
function enable_cb() {
if (this.checked) {
$("input.parent_child_group").removeAttr("disabled");
} else {
$("input.parent_child_group").attr("disabled", true);
}
}
});
</script>
</body>
</html>
Working example on JSFiddle: http://jsfiddle.net/farondomenic/fg7p8/1/

Grey-out (disable) HTML textarea when checkbox is ticked

I don't really know much Javascript yet, I was hoping somebody could help me understand how to solve my problem:
My HTML form has a checkbox and then a textarea:
<form>
<input type="checkbox" name="detailsgiven" />
<textarea name="details"></textarea>
</form>
I want it so that the textarea gets disabled when the checkbox is ticked so that the user cannot click it and enter text.
I've had a look here and on google, I couldn't find any clear examples of how to do it.
I'm guessing this can be done in Javascript, but I'm feeling a bit out of my depth. Can somebody explain to me how to do this, preferably without using a third party library?

<form>
<input type="checkbox" name="detailsgiven" onchange="toggleDisabled(this.checked)"/>
<textarea name="details" id="tb1"></textarea>
</form>
<script>
function toggleDisabled(_checked) {
document.getElementById('tb1').disabled = _checked ? true : false;
}
</script>

This extremely easy to do with jQuery. Everyone uses jQuery, so should you ;-).
<form>
<input type="checkbox" name="detailsgiven" id="detailsgiven" />
<textarea name="details" id="details"></textarea>
</form>
<script type="text/javascript">
jQuery(document).ready(function($) {
$("#detailsgiven").change(function() {
if($(this).is(":checked")) {
$("#details").attr("disabled", "disabled");
}
else {
$("#details").removeAttr("disabled");
}
});
});
</script>

try this:
if ($('input:checkbox').is(':checked')) {
$('textarea').attr('disabled', 'disabled');
}

<form>
<input type="checkbox" name="detailsgiven" onclick="document.getElementById('t').setAttribute('disabled','disabled');" />
<textarea id="t" name="details"></textarea>
</form>
Notice how onclick event of checkbox is used to execute some javascript code.
if you give your html elements ids, you can access the elements in javascripts through getElementById method of javascript DOM (document object model).
And once you have the element, you can set/get it's attributes, do whole lot of things.

According to my understanding to your requirement. At first, textarea is disabled. When detailsgiven checkbox is checked, textarea is enabled and checkbox is disabled so that he cannot changed. Try like this.
<!DOCTYPE html>
<html>
<head>
<script>
function valueChanged()
{
var element1 = document.getElementById("detailsgiven");
var element2 = document.getElementById("details");
if(element1.checked)
{
element2.disabled=false;
element1.disabled="disabled";
}
}
</script>
</head>
<body>
<form>
<input type="checkbox" name="detailsgiven" id="detailsgiven" onchange="valueChanged()"/>
<textarea name="details" id="details" disabled="true"></textarea>
</form>
</body>
</html>

All you have to do is when you mark the checkbox, just add the attribute disabled="disabled" in the textarea.
Checkout the jsfiddle I have added
http://jsfiddle.net/Q9Lg4/

checkbox update

I am trying to update some text to say whether or not the checkbox is checked. the only problem is that when it is checked, the textbox disappears, and the text replaces it.
<form name="form" id="form">
<input type="checkbox" name="cb" id="cb" onClick="check();" />
</form>
<script type="text/javascript">
function check() {
document.write("checked: " + document.form.cb.checked);
}
</script>

What you are seeing is a side effect of using document.write. It is replacing the whole body of the document with the text you are writing. Try doing something like this instead.
<form name="form" id="form">
<input type="checkbox" name="cb" id="cb" onClick="check();" />
</form>
<div id="cb-status">checked: false</div>
<script type="text/javascript">
function check() {
document.getElementById('cb-status').innerHTML = "checked: " + document.form.cb.checked;
}
</script>

Bracket missing after html closing bracket for is(":checked") and string concat:
$(":checkbox").click(function(){
$("span#message").html("Checkbox is checked: " + $(this).is(":checked"));
});

You can use jQuery to make things easier for you:
Considering you have a checkbox:
<input type="checkbox" >
And a span element with an id=message:
<span id="message"></span>
Then, when you click on a checkbox, it will "write" in the span if it is checked or not.
$("document").ready(function(){
$(":checkbox").click(function(){
$("span#message").html("Checkbox is checked: " + $(this).is(":checked"));
});
});
See it in jsFiddle: http://jsfiddle.net/WNDUH/3/