Develop Reference

How to Enable and Disable submit button using text box value

(This text box value comes dynamically)
If textbox gets value 100 it will enable submit button but here enable submit button after editing the value to 100 without changing it won't enable.
<script>
function manage(txt) {
var bt = document.getElementById('btSubmit');
if (txt.value != '100') {
bt.disabled = true;
}
else {
bt.disabled = false;
}
}
</script>

It depends on the browser. To make sure that works, use setAttribute and removeAttribute
var bt = document.getElementById('btSubmit');
bt.setAttribute("disabled","disabled");
bt.removeAttribute("disabled");

Can you check this:
function manage(txt) {
var bt = document.getElementById('btSubmit');
if (txt.value != '100') {
console.log('Disabled');
bt.setAttribute("disabled", "true");
} else {
console.log('Enabled');
bt.removeAttribute("disabled");
}
}
<input type="text" id="txt" onkeyup="manage(this)" />
<input type="submit" id="btSubmit" disabled="true" />

Not absolutely sure what the problem is here since your example is not an MCVE, but you can use the "keyup" event to listen to any changes made to your input element while typing.
Also, your code is unnecessarily verbose:
/* ----- JavaScript ----- */
document.getElementById("txt").addEventListener("keyup", function () {
/* Disable the button, if the value of the input is <> 100. */
document.getElementById("btSubmit").disabled = (this.value != 100);
});
<!----- HTML ----->
<input type = "text" id = "txt"/>
<input type = "submit" id = "btSubmit" disabled/>
If you prefer using inline JavaScript in your HTML code, the above solution can be written as:
/* ----- JavaScript ----- */
function manage (element) {
/* Disable the button, if the value of the input is <> 100. */
document.getElementById("btSubmit").disabled = (element.value != 100);
}
<!----- HTML ----->
<input type = "text" id = "txt" onkeyup = "manage(this)"/>
<input type = "submit" id = "btSubmit" disabled/>

Check if input field value has changed on button click

I need to check if a value has changed on an input field before submitting a form. This is the code I have so far:
JS
$(document).ready(function(){
$('#submitButton').click(function() {
if( $('input[name="inputToBeChecked"]').val() != 'Original input field value' {
alert("Input field has changed!");
} else {
alert("Input field has not changed!");
}
});
});
HTML
<form>
<input type="text" name="inputToBeChecked" id="inputToBeChecked" value="Original input field value">
<a id="submitButton" type="button" class="btn" href="javascript:void(0);">Submit form</a>
</form>

Just set a flag once the input has been changed
var flag = 0;
$('input[name="inputToBeChecked"]').change(function(){
flag = 1;
});
$('#submitButton').click(function() {
if(flag == 1){
//yeah!
}
});
There can be also another case, if it gets changed and then returns to initial state. Then you could just save the initial value instead.
var initialVal;
$(document).ready(function(){
initialVal = $('input[name="inputToBeChecked"]').val();
});
$('#submitButton').click(function() {
if($('input[name="inputToBeChecked"]').val() != initialVal){
// initial value changed
} else {
// initial value either unchanged or changed and later reversed to initial state
}
});

Validating a form to not submit on empty input boxes

// html
<label>Write Data:</label>
</br>
<input type=text id=data name="data"style="width: 14em;">
</br>
</br>
<button id="write" type="submit" formaction="/output4" formmethod="post" style="width: 5em;">Write</button>
<button id="More" type="submit">Add more Parameters</button>
// js
$('#write').click(function(){
$('#data').each(function() {
if ($(this).val() == "" || $(this).val() == null) {
alert("Write Data must be filled out or Remove empty parameter list!");
return false;
}
});
});
I have a program where if a user clicks on a button, more write data boxes are appended. I do not want the form to submit unless all the write data boxes are filled out. The snippet above shows the alert box if an input if incomplete but then when you press ok, the form still submits?

You can use the .submit() event handler. Then use either return false or e.preventDefault() to stop the submit. Also note that id's are unique so $('#data') will only be a single element, so the .each() isn't needed:
$('#formIDHere').submit(function(e){
if ($('#data').val() == "" || $('#data').val() == null) {
alert("Write Data must be filled out or Remove empty parameter list!");
e.preventDefault(); // or `return false`
}
});
For many inputs have your input items be a class with the value class="data". Just note you need to to use e.preventDefault() using the e from the submit event. In this case return false is for the .each() and not the submit. I use it here to stop the .each from going so we don't have many unneeded alerts and checks:
$('#myForm').submit(function(e){
$('.data').each(function(){
if ($(this).val() == "" || $(this).val() == null) {
alert("Write Data must be filled out or Remove empty parameter list!");
e.preventDefault(); // This is the preventDefault of submit
return false; // This stops the .each from continuing
}
});
});
Demo

$('#write').click(() => {
// if any one of the inputs is blank canSubmit will end up as false
// if all are not blank, it will end up as true
var canSubmit = [...document.querySelectorAll('input')]
.reduce((acc, input) => acc = input.value === '' ? false : acc , true)
});

<script type="text/javascript">
$(function () {
$("#data").bind("change keyup", function () {
if ($("#data").val() != "")
$(this).closest("form").find(":submit").removeAttr("disabled");
else
$(this).closest("form").find(":submit").attr("disabled", "disabled");
})
});
</script>
This would allow you to disable your submit button until there was data within the input field.

Prevent text entry in textbox unless checkbox is checked

I'm trying to prevent text from being entered in a textbox unless a checkbox that corresponds with the textbox is checked.
// Validate "Other" textbox
var isOther = document.getElementById("isOther");
isOther.addEventListener("input", function (evt) {
// Checkbox must be checked before data can be entered into textbox
if (isOther.checked) {
document.getElementById("other").disabled = false;
} else {
document.getElementById("other").disabled = true;
}
});

Do not use disabled. Instead use readonly. During document load, uncheck and disable the inputs:
<input type="checkbox" id="isOther" />
<input type="text" id="other" readonly />
And use this script.
// Validate "Other" textbox
var isOther = document.getElementById("isOther");
var other = document.getElementById("other");
isOther.addEventListener("click", function () {
other.readOnly = !isOther.checked;
});
other.addEventListener("focus", function (evt) {
// Checkbox must be checked before data can be entered into textbox
other.readOnly = !isOther.checked;
});
Longer version.
// Validate "Other" textbox
var isOther = document.getElementById("isOther");
var other = document.getElementById("other");
isOther.addEventListener("click", function () {
if (isOther.checked) {
other.readOnly = false;
} else {
other.readOnly = true;
}
});
other.addEventListener("focus", function (evt) {
// Checkbox must be checked before data can be entered into textbox
if (isOther.checked) {
this.readOnly = false;
} else {
this.readOnly = true;
}
});
Fiddle: http://jsfiddle.net/praveenscience/zQQZ9/1/
Fiddle: http://jsfiddle.net/praveenscience/zQQZ9/

My solution uses jQuery library. Here's a fiddle: http://jsfiddle.net/8LZNa/
Basically I'm disabling the input on page load:
<input name="isOther" type="checkbox" id="isOther" /><br />
<input type="text" id="other" disabled/>
... and when isOther changes it will make sure it is checked, and change the state to enabled. Or change back to disabled.
$('input[name=isOther]').change(function(){
if($(this).is(':checked')) {
$("#other").removeAttr('disabled');
}
else{
$("#other").attr('disabled','disabled');
}
});

You can do this:
document.getElementById( 'isOther' ).onChange = function(){
document.getElementById("other").disabled = !this.checked;
};

Without the use of jQuery or disabled property:
HTML
<input type="checkbox" id="x" value="Enable textbox" onclick="test(this);" />
<input type="text" id="y" readonly />
JAVASCRIPT
function test(checkbox) {
if(checkbox.checked) {
document.getElementById('y').readOnly = false;
}
else {
document.getElementById('y').readOnly = true;
}
}

Want to prevent a textbox from becoming empty with javascript

So i already have a textbox in which you can only enter numbers and they have to be within a certain range.The textbox defaults to 1,and i want to stop the user from being able to make it blank.Any ideas guys?Cheers
<SCRIPT language=Javascript>
window.addEventListener("load", function () {
document.getElementById("quantity").addEventListener("keyup", function (evt) {
var target = evt.target;
target.value = target.value.replace(/[^\d]/, "");
if (parseInt(target.value, 10) > <%=dvd5.getQuantityInStock()%>) {
target.value = target.value.slice(0, target.value.length - 1);
}
}, false);
});
<form action="RegServlet" method="post"><p>Enter quantity you would like to purchase :
<input name="quantity" id="quantity" size=15 type="text" value="1" />

You could use your onkeyup listener to check if the input's value is empty. Something along the lines of:
if(target.value == null || target.value === "")
target.value = 1;
}

You could add a function to validate the form when the text box loses focus. I ported the following code at http://forums.asp.net/t/1660697.aspx/1, but it hasn't been tested:
document.getELementById("quantity").onblur = function validate() {
if (document.getElementById("quantity").value == "") {
alert("Quantity can not be blank");
document.getElementById("quantity").focus();
return false;
}
return true;
}

save the text when keydown
check empty when keyup, if empty, restore the saved text, otherwise update the saved text.
And you could try the new type="number" to enforce only number input
See this jsfiddle