I need some help in implementing a whitespace character check in a JSP input field.
Here's what my code and existing JSP code looks like:
function validation(){
var wsregex = /\s/g;
var input = document.getElementById("Division_").value;
var result;
if (result = input.match(wsregex)){
alert ("There is a whitespace in the Name field");
return false;
}
JSP Code:
<input type="hidden" name="Division_<%= divisionSeq %>" value="exist" />
<input class="button" type="submit" name="submit" value="Submit" onclick="return validate(this.form, <%=divisionSeq%>)"
I don't know what to change aside from what I have. The JSP code was built by a consultant who did not leave any documentation behind.
Thanks,
E.
I am not sure about the way you are calling that javascript function.
I am sharing what i did to make it work.
<html>
<head>
<script>
function validation(){
var wsregex = /\s/g;
var input = document.getElementById("input").value;
var result;
if (result = input.match(wsregex)){
alert ("There is a whitespace in the Name field");
return false;
}
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
Enter a text : <input id="input" type="text" /><br>
<input type="submit"
value="Submit" onclick="validation()" />
</body>
</html>
Just enter any text and submit.It will check for whitespace and will give alert if found.
Javascript code
function validation(){
var wsregex = /\s/g;
var input = document.getElementById("Division_1").value;
var result;
if (result = input.match(wsregex)){
console.log ("There is a whitespace in the Name field");
return false;
}
JSP code:
input type="hidden" name="Division_<%= divisionSeq %>" value="exist" />
<input class="button" type="submit" name="submit" value="Submit" onclick="return validate()"
The <%=divisionSeq%> scriptlet is a counter so I tricked the js function to predict the initial value.
Related
I am trying to copy the value of the textbox to the textarea However the value gets copied using the javascript function but it disappears from the textarea after a second. What am i doing wrong?Why does it get disappear after being copied?
this is the html:
<html>
<head>
<title>
</title>
<script src="scripts/script.js" type="text/javascript"></script>
</head>
<body>
<form>
<label>Key/Value Pair: </label><input type="text" name="inputText" id="t1"></br></br>
<label>Key/Value List: </label><br>
<textarea name="outputText" rows="10" cols="50" id="t2" ></textarea><br><br>
<input type="submit" value="Add" onClick="fn_copy()" />
</form>
</body>
and this is the javascript code:
function fn_copy()
{
var temp = document.getElementById("t1").value;
if(temp != "")
{
document.getElementById("t2").value = temp;
}
else
alert("Text is Empty");
}
Thank you.
Change your button type to button instead of submit. Otherwise your page will be refreshed (default behavior with submit) and hence the content of your textarea reset.
<input type="button" value="Add" onClick="fn_copy()" />
Your problem is that you are using input of type submit, when you click it, the fuction fn_copy execute, but also do a post request, and that is why the value disappears.
Change the input for a button like that and it will work
function fn_copy()
{
var temp = document.getElementById("t1").value;
if(temp != "")
{
document.getElementById("t2").value = temp;
}
else
alert("Text is Empty");
}
<form>
<label>Key/Value Pair: </label><input type="text" name="inputText" id="t1"><br><br>
<label>Key/Value List: </label><br>
<textarea name="outputText" rows="10" cols="50" id="t2" ></textarea><br><br>
<button type="button" onclick="fn_copy()">Add</button>
</form>
You can sse a working sample here: https://jsfiddle.net/8e5e4wuz/
http://www.w3schools.com/jsref/event_preventdefault.asp
Use preventdefault to stop it from submitting.
Try this. Add any id to the button, for example btn, and do this:
function fn_copy()
{
var temp = document.getElementById("t1").value;
if(temp != "")
{
document.getElementById("t2").value = temp;
}
else
alert("Text is Empty");
}
document.getElementById("btn").addEventListener("click", function(event){
fn_copy();
event.preventDefault();
})
How would I implement NaN and have Inavlid input display in a element
To do this I have to use isNaN to verify that numerical values are input.
I just want it to display "Invalid input" whenever a non numeric value is put in either of the two first text boxes.
http://jsfiddle.net/hq3m1uns/1/ this is my fiddle link
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Question2</title>
<style>
</style>
<script type="text/javascript">
window.onload = function(){
};
function add_number(){
var first_number = document.querySelector("#tb1").value;
var second_number = document.querySelector("#tb2").value;
var First = parseInt(first_number);
var Second = parseInt(second_number);
var result = First + Second;
document.getElementById('tb3').setAttribute("value",result);
}
</script>
</head>
<body>
<div>
<h1>Add two number using text box as input using javascript</h1>
</div>
Enter First Number : <br>
<input type="text" id="tb1" name="TextBox1">
<br> Enter Second Number : <br>
<input type="text" id="tb2" name="TextBox2">
<br> Result : <br>
<input style="width: 50%" type="text" id="tb3" name="TextBox3" >
<br>
<input onclick="add_number()" type="button" id="b1" value="GO" />
</body>
</html>
Just add a paragraph tag in your HTML file with id "msg" and do the following changes in your javascript code.
function add_number() {
var first_number = document.querySelector("#tb1").value;
var second_number = document.querySelector("#tb2").value;
if (isNaN(first_number) || isNaN(second_number)) {
document.getElementById('msg').innerHTML = "Invalid Input";
} else {
document.getElementById('msg').innerHTML = "";
var First = parseInt(first_number);
var Second = parseInt(second_number);
var result = First + Second;
document.getElementById('tb3').setAttribute("value", result);
}
}
<p id="msg"></p>
One way is to use a keyup event listener on the input field to validate the numeric value and update the textContent of the paragraph element based on its validity.
Another solution is to use a input type="number" for the input and use HTML5's checkValidity/reportValidity on it, but I'll leave that for you to research and learn about on your own.
function validate(inputId, helpId) {
var value = document.getElementById(inputId).value;
var help = document.getElementById(helpId);
if (isNaN(value))
help.textContent = "invalid input"
else
help.textContent = ""
}
Enter First Number : <br>
<input type="text" id="tb1" name="TextBox1" onkeyup="validate('tb1', 'help1')">
<p id="help1"></p>
I'm trying to have a user input a string or number on the page, hit submit and have console.log print the string just entered, however as much as I tried it will not print.
Am I missing something here? ( sorry for indentation)
<html>
<head>
<body>
<form>
<input id="userInput" type="text">
<input type="submit" id = "submit()">
</form>
<script>
function submit() {
var test = document.getElementById("userInput");
return console.log(test);
}
</script>
</body>
</head>
</html>
This code will give the result as you expect.you cannot return console.log in return function to get value and also dont use form so that it will always look for action in these kind of cases
function submit() {
var test = document.getElementById("userInput").value;
console.log(test);
return test;
}
<div>
<input id="userInput" type="text">
<button onclick = "submit()"> Submit</button>
</div>
You're doing a few things wrong. Just read the below code, I left explaining comments for you.
<html>
<head>
<body>
<form>
<input id="userInput" type="text">
<button type="button" id="submitBtn" onclick="submit()">Submit</button> // ID - can't be used for submitting a function
</form>
<script>
function submit() {
var test = document.getElementById("userInput");
alert(test.value); // console.log() - is like a void function and it can't be returned
}
</script>
</body>
</head>
</html>
If you look in the console you'll see it's logging a reference to the element, not the value entered in it.
This is because your variable test stores a reference to the element.
var test = document.getElementById("userInput");
You need
var test = document.getElementById("userInput").value;
use Onclick attribute for Submit button! and Also the type of input should be button to prevent the refreshing.
<form>
<input id="userInput" type="text">
<input type="button" onclick= "submit()">
</form>
in JavaScript Code add the value property.
var test = document.getElementById("userInput").value;
Please check the below code. I think this is what you want. The problem was hooking up the event
<form>
<input id="userInput" type="text">
<input id="myBtn" type="submit">
</form>
<script>
document.getElementById("myBtn").addEventListener("click", function() {
var test = document.getElementById("userInput");
console.log(test);
return false;
});
</script>
Trying to teach myself basic JavaScript and stuck for days with this simple concept.
I want to save a form input to a variable and later on execute a function,alert or whatever with that var.
function myFunc() {
var userName = document.getElementById("name").value;
alert("Hello, " + userName + "!");
}
<form onSubmit="myFunc" ;>
<input type="text" id="name">
<input type="submit" value="Submit">
</form>
This is actually an example from a book but it does not work in jsfiddle and nor does it on my own server. I can call up the function from the console but it won't execute from the submit button.
What am I doing wrong here ?
You forgot () into onSubmit attribute.
PS: Also you add ; into <form> tag (invalid) and you forgot both input closure <input> -> <input/>
function myFunc() {
var userName = document.getElementById("name").value;
alert("Hello, " + userName + "!");
}
<form onSubmit="myFunc()">
<input type="text" id="name"/>
<input type="submit" value="Submit"/>
</form>
If you are learing JS, better read a little bit about, you can write code in a better way by following a design pattern (you can learn more here
My solution will be
(function () {
// variables
// cached elements
var form = document.querySelector('#form'),
nameInput = document.querySelector('#name');
// event bindings
form.addEventListener('submit', myFunc);
// methods
function myFunc (e) {
e.preventDefault(); // prevents the page reload
alert(nameInput.value);
}
})();
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<form id="form">
<input type="text" id="name">
<input type="submit" value="Submit">
</form>
</body>
</html>
You need to add two brackets in your onsubmit expression. When you want to prevent the page from refreshing you could even return false inside your function.
function myFunc() {
var userName = document.getElementById("name").value;
alert("Hello, " + userName + "!");
return false;
}
<form onsubmit="myFunc()">
<input type="text" id="name">
<input type="submit" value="Submit">
</form>
Another way is to add a listener to your form, so you could get rid of onsubmit in general.
function myFunc( event ) {
var userName = document.getElementById("name").value;
alert("Hello, " + userName + "!");
event.preventDefault();
}
document.getElementsByTagName( 'form' )[ 0 ].addEventListener( 'submit', myFunc );
<form>
<input type="text" id="name">
<input type="submit" value="Submit">
</form>
But with this solution you need to use preventDefault on the event parameter.
I am trying to confirm with the user if the following string he or she is about to enter is correct but the confirmation box won't appear. Here is that segment of the code:
<html xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
<script>
function validateForm(){
var pkey = document.forms["createProductForm"]["pagekeyTF"].value;
var agree = confirm("Is this your product?\n\n ${pkey}");
if(agree) //Do something
else //Do something else
}
</script>
</head>
<body>
<form name="createProductForm" controller="actions" action="ImplementNewProduct" onsubmit="return validateForm()" method="post">
<g:textField id="productTF" name="productTF" value="My Product" />
<button id="createProductID" name="createButton" value="Create Product">Create Product</button>
</form>
</body>
</html>
Am I not allowed to pass in string variables in the confirmation function? Because if I take off the ${pkey} it works fine but it does not include the user's input and that is not what I am not trying to achieve. Any help? Thanks!
Edit it like this :
var pkey = document.forms["createPixelForm"]["pagekeyTF"].value;
var agree = confirm("Is this your product?\n\n " + pkey);