I'm trying to make a small script that determines whether inputted text is entirely uppercase, entirely lowercase, or neither. Here:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<script>
function caps (p1){
console.log ("yes");
if (p1.toUpperCase() == p1){
alert ("Is uppercase")
}
else if (p1.toLowerCase() == p1){
alert ("Is lowercase")
}
else {
alert ("Is mix of both");
}
}
</script>
<form id="form1" name="form1" method="post" action="">
<p>
<label>Write something<br />
<input type="text" name="numero" id="numero" />
</label>
</p>
<p>
<input onclick="caps(numero)" type="submit" name="button" id="button" value="Submit" />
</p>
</form>
</body>
</html>
However, it doesn't work; the Firefox Web Console insists that "toUpperCase()" is not a valid method. What's happening here?
In your onclick, you call the function like this: caps(numero)
This isn't passing numero as a String. Its passing it as a variable name. An undefined one. .toUpperCase is a method on String, and will not exist on undefined.
Instead, try: caps('numero')
Or, if you're trying to pass the value of your text input:
caps(document.getElementById('numero').value)
Perhaps better yet, build that into your function:
function caps (id) {
var p1 = document.getElementById(id).value
if (p1.toUpperCase() == p1){
alert ("Is uppercase")
}
else if (p1.toLowerCase() == p1){
alert ("Is lowercase")
}
else {
alert ("Is mix of both");
}
}
That way, you can call it like onclick="caps('numero')", passing in the id of the input whose value you want to UpperCase
Try this way, p1 is input element not your input element's value so compare with p1.value
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function caps (p1)
{
console.log (p1); //see here
console.log (p1.value);
if (p1.value.toUpperCase() == p1.value){
alert ("Is uppercase")
}
else if (p1.value.toLowerCase() == p1.value){
alert ("Is lowercase")
}
else {
alert ("Is mix of both");
}
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<p>
<label>Write something<br />
<input type="text" name="numero" id="numero" />
</label>
</p>
<p>
<input onclick="caps(numero)" type="submit" name="button" id="button" value="Submit" />
</p>
</form>
</body>
</html>
not p1.toUpperCase() == p1, p1 stand for input dom element where id="p1",
don't have touppercase method,only string has this method,so you should use p1.value
document.getElementById(p1) equals to p1,p1 is the id name
Related
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h1>placeholder</h1>
<form method="get">
<label for="word">enter word</label>
<input id="word" name="word" type="text" maxlength="15">
<input type="submit">
</form>
<script type="text/javascript">
let actualWord = document.getElementById('word');
if (actualWord === 'yes') {
document.querySelector('h1').innerHTML = "oh yeah";
} else {
document.querySelector('h1').innerHTML = "error";
}
</script>
</body>
</html>
Im very new to the world of coding and im hoping someone could help me with a "simple" test I was trying to perform.
I want this HTML code to replace the "Placeholder" text at the top of the screen with "oh Yeah" if the user types "yes" in the form.
Im hoping someone can tell me what im doing wrong or point me in the right direction.
https://github.com/Uken81/Form-test.git
1.You need to listen to form submit event and trigger a function
HTML
<form onsubmit="return handleSubmit()">...</form>
Javascript
function handleSubmit(evt) {
...
}
2.You get user's input value like this
document.getElementById('word').value
3.Also you need to prevent form from submitting, By returning false
Full Example
function handleSubmit(evt) {
let actualWord = document.getElementById('word').value;
if (actualWord === 'yes') {
document.querySelector('h1').innerHTML = "oh yeah";
}
return false;
}
<h1>placehold</h1>
<form onsubmit="return handleSubmit()">
<label for="word">enter word</label>
<input id="word" name="word" type="text" maxlength="15">
</form>
You can achieve that by adding click event listener to the <submit> button inside the form, and then perform the check on the text <input> and use .value attribute to get the <input> text value, note that I used [e.preventDefault()][3] to prevent the form from redirect, here is a working snippet:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h1>placeholder</h1>
<form method="get">
<label for="word">enter word</label>
<input id="word" name="word" type="text" maxlength="15">
<input id="change-placeholder" type="submit">
</form>
<script type="text/javascript">
document.getElementById('change-placeholder').addEventListener('click', function(e){
e.preventDefault();
let actualWord = document.getElementById('word').value;
if (actualWord === 'yes') {
document.querySelector('h1').innerHTML = "oh yeah";
} else {
document.querySelector('h1').innerHTML = "error";
}
})
</script>
</body>
</html>
I've got a simple html and JS script, but it doesn't fire the alert message onchange when I enter 2 in the input number field.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width">
<script type="text/javascript">
function myFunction() {
var x = document.getElementById("partysize");
if (x==2) window.alert ("You entered" + x);
}
</script>
</head>
<body bgcolor="#6BD3FF" text="#000000" link="#0000EE" vlink="#551A8B" alink="#FF0000">
<div align="center">
<br> Please enter the party size:
<input type="number" id = "partysize" name="partySize" onchange="myFunction()" >
<br />
<input type="SUBMIT" name="submitButton">
</form>
<br />
</div>
</body>
</html>
ugh, fixed by getting the value of the element:
function myFunction() {
var x = document.getElementById("partysize").value;
if (x==2) window.alert ("You entered" + x);
}
You need to get the value from the input box but in your snippet x is the only dom element. Pass the value to the change handler using this.value. Also parseInt will convert the number value in string to number
function myFunction(x) {
if (parseInt(x, 10) === 2) {
alert("You entered" + x);
}
}
<body bgcolor="#6BD3FF" text="#000000" link="#0000EE" vlink="#551A8B" alink="#FF0000">
<div align="center">
<br> Please enter the party size:
<input type="number" id="partysize" name="partySize" onchange="myFunction(this.value)">
<br/>
<input type="submit" name="submitButton">
<br />
</div>
</body>
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<style>
#myloc,#mypass{
color: red;
}
</style>
<script>
function validateform(){
var username=document.login.username.value;
var password=document.login.password.value;
if (username==null || username==""){
var data="username should not be blank.";
document.getElementById("myloc").innerHTML=data;
return false;
}else if(password.length<6){
var p="Password must be at least 6 characters long.";
document.getElementById("mypass").innerHTML=p;
return false;
}
}
</script>
<body>
<form action="/loginusingservlet/LoginSES" onsubmit="return validateform()" method="post" name="login">
<table>
<tr>
<td>username</td><td> <input type="text" name="username"></td></tr>
<tr><td></td><td><div id="myloc"></div></td>
</tr><tr><td>password</td><td> <input type="text" name="password"></td></tr>
<tr><td></td><td><div id="mypass"></div></td></tr>
<tr><td></td><td><input type="submit" value="submit"></td></tr>
</table>
</form>
</body>
</html>
this program works great...when i click submit buttons it displays messages like "username should not be blank " or "password atleast 6".after getting message..if i click on a textbox i want the message disappear untill i click "submit" button.
Here you go. New function in script (it checks argument and removes text from specific element:
function removeWarning(type)
{
(type == 1) ? document.getElementById('myloc').innerHTML = "" : document.getElementById('mypass').innerHTML = "";
}
And add onClick event in inputs.
<input type="text" name="username" onClick="removeWarning(1)">
<input type="text" name="password" onClick="removeWarning(2)">
To me it is working but it was a quick solution, it is possible to improve a little.
I would like to have my code check if one or more check boxes have been selected in a list of check boxes. If no check boxes have been selected then I would like a window.alert to pop up saying "please select at least one interest". Currently all it does is alert that nothing has been checked even if you check a box.
My code is as follows:
<!DOCTYPE HTML>
<html>
<head>
<title>Web Site Registration Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function confirmSubmit(){
if(document.forms[0].interests.checked) {
{window.alert("Thank you");}
} else {
{window.alert("Select at least one preference");
}
return false;}
return true;
}
</script>
</head>
<body>
<h1>Web Site Registration Form</h1>
<h2>Personal Information</h2>
<form action="FormProcessor.html" method="get"
enctype="application/x-www-form-urlencoded" onsubmit="return confirmSubmit()">
<p>Select areas of interest (select at least one)</p>
<p><input type="checkbox" name="interests"
value="entertainment">Entertainment<br />
<input type="checkbox" name="interests"
value="business">Business<br />
<input type="checkbox" name="interests"
value="music">Music<br />
<input type="checkbox" name="interests"
value="shopping">Shopping<br />
<input type="checkbox" name="interests"
value="travel">Travel</p>
<p><input type="submit"></p>
</form>
</body>
</html>
Note: The extra code in the header is there to submit all data entered to a page which shows what has been submitted. This is my first post so feel free to let me know what other information may help. Thanks!
Add your script tag below the form, you can use this to pass the form to your call back. Use querySelector for :checked to search inside the form for a checked input.
<script type="text/javascript">
function confirmSubmit(form){
if(form.querySelector(":checked")) {
window.alert("Thank you");
return true;
} else {
window.alert("Select at least one preference");
return false;
}
}
</script>
You can pass the form to your call back by updating your onclick listener;
<form action="FormProcessor.html" method="get"
enctype="application/x-www-form-urlencoded"
onsubmit="return confirmSubmit(this)">
Here is the fiddle.
With jQuery you can do this:
function confirmSubmit(){
$('input').each(function(index, item) {
if(item.checked){
return true;
}
});
}
Hello again everyone
i am working on this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Form</title>
<script type="text/javascript">
</script>
</head>
<body>
<h2>**Form**</h2>
<form name=form method="post" action="javascript" subject=RSVP" enctype="text/plain" >
<input type=text name="first" size="20"> First Name<BR>
<input type=text name="last" size="20"> Last Name<BR>
<input type="text" name="email" size="20"> E-Mail<BR><BR>
<input type="submit" value="Submit">
<input type="reset" value="Clear Form"><br>
</form>
</body>
</html>
I am getting really confused here.. I need to have a onsubmit form handler and a create validation script. Ok now if I am right the validation script is the the function that needs to be placed right? sorry i know some of you guys might think this is easy but I am still learning. Now I have examples in my book of it but they only due one at a time. Is there a way you can do a onsubmit of all or does it have to be one at a time? thanks
ok I have this one i am working on..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Form</title>
<script type="text/javascript">
<!--
function validate_form()
{
valid = true;
if ( document.contact_form.contact_first.value == "" )
{
alert ( "Please fill in the 'Your Name' box." );
valid = false;
}
return valid;
}
//-->
</script>
</head>
<body>
<h2>**Form**</h2>
<form name="contact_form" method="post" action="javascript" onSubmit="return validate_form();">
<input type=text name="contact_first" size="20"> First Name<BR>
<input type=text name="contact_last" size="20"> Last Name<BR>
<input type="text" name="contact_email" size="20"> E-Mail<BR><BR>
<input type="submit" value="Submit">
<input type="reset" value="Clear Form"><br>
</form>
</body>
</html>
now Can i just copy the function for the other two or how do i do the one for the email?
I've added an example here of how to do it:
http://jsfiddle.net/tomgrohl/JMkAP/
I added an onsubmit handler to the form:
<form method="post" action="javascript" enctype="text/plain" onsubmit="return valForm(this);">
And added this at the top of the page, a simple validation function:
<script type="text/javascript">
function valForm( form ){
var firstVal, lastVal, emailVal, error = '';
firstVal= form.first.value;
lastVal= form.last.value;
emailVal= form.email.value;
//OR
//firstVal= document.getElementById('first').value;
//lastVal= document.getElementById('last').value;
//emailVal= document.getElementById('email').value;
if( firstVal.length == 0){
error += 'First name is required\n';
}
if( lastVal.length == 0){
error += 'Last name is required\n';
}
if( emailVal.length == 0){
error += 'Email is required\n';
}
if( error ){
alert( error );
return false;
}
return true;
}
</script>
OnSubmit is invoked once for the form.
You can validate all the form fields in one onSubmit function, during one call to that function.
function myOnSubmitHandler(theForm) {
if (theForm.data1.value == "") {
alert("This field is empty.");
return false; // suppress form submission
} else {
return true; // A-OK, form will be submitted
}
}
in HTML:
<form method="POST" ACTION="SomethingOnServer.php"
onSubmit="return myOnSubmitHandler(this);">
I need to have a onsubmit form handler
You said it; <form onsubmit="return myValidate(this);" .... >
myValidate is your validation function that returns true|false indicating whether or not you want the form to be submitted to its handler script (which your also missing).
might I suggest you use jQuery and jQuery validate to validate your form no need to re-invent the wheel
be sure to check out validator's demo