Develop Reference

show alert when value is number

I need to show the alert box when the user typed the number in the input field
<input type="text" class="only-text">
if (document.querySelector('.only-text').value === '') {alert('no numbers are allowed!')};

I'd use the beforeinput event, this way you can check the value inserted before it is painted in the DOM, and if it's not good you can prevent it from being painted.
function isBeforeInputEventAvailable() {
return window.InputEvent && typeof InputEvent.prototype.getTargetRanges === "function";
}
if (isBeforeInputEventAvailable()) onlyText.addEventListener("beforeinput", e => {
if (/[\d]+/.test(e.data)) {
alert('no numbers are allowed!')
e.preventDefault()
};
})
<input type="text" id="onlyText">

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
}
});

onkeydown doesn't work with javascript

why doesn't my function return an alert given this particular code?
function searchString() {
if (event.keyCode == alert("Success!"); }
}
Here is my HTML code:
<input type="text" id="searchString" name="searchString" onkeydown="searchString();"/>

You need to pass the event argument in your function. Otherwise event is undefined when you try to invoke the keyCode method:
function searchString(event) {
if(event.keyCode == 13) {
alert("Success!");
}
}
document.querySelector('input').addEventListener('keyup', searchString);
function searchString(event) {
if (event.keyCode == 13) {
alert("Success!");
}
}
<p>Press the <b>enter</b> key in the input below see your alert</p>
<input type="text" />

You can do it with pure javascript:
const search = document.getElementById('searchString');
search.addEventListener('keydown', (e) => {
if (e.keyCode === 13) {
// your code here
}
}
Note: 13 is the key code for the enter

You need to ensure that the actual event is being passed as an argument... otherwise, it will be unrecognised within the function. To see which code is tied to which key, please try the following.
function check(event)
{
var keycode = event.keyCode;
alert(keycode);
}
And then ...
<input type="text" id="check" name="check" onkeydown="check();">
The return key is tied with '13'. So if you just want to do something when it is pressed, do the following.
function searchString(event)
{
if(event.keyCode === 13) {
alert("return key was pressed");
// do something ....
}
}
And the html code should be something like the following.
<input type="text" id="searchString" name="searchString" onkeydown="searchString();">
Please note that I have used '===' instead of '=='. It is now the recommended practise. Also, note that the forward slash at the end of input is not necessary.

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.

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