How can I change the CHANGE ME text inside my script - javascript

I've tried this code on my pc and it doesn't work, does anyone know why?
There is this paragraph that contains the text CHANGE ME. It contains an id of "warning", now I want to change that text when someone clicks on the login button. It does not work on my pc. What am I doing wrong?
<!DOCTYPE html>
<html style="height: 100%; width: 100%; margin: 0;">
<head>
<title></title>
</head>
<body style="display: flex; height: 100%; width: 100%; margin: 0;">
<!-- maxlength="20"> -->
<form style="margin: auto; border: solid; padding: 10px;">
<label style="font-size: 40px;"> Welcome! </label>
<br>
<input id="passwordText" type="password" placeholder="Password" maxlength="20">
<input id="loginButton" type="button" value="Login" onclick="submit()">
<br>
<p id="warning">CHANGE ME</p>
</form>
<script>
function toggleWarningText(text)
{
document.getElementById('warning').innerHTML = text;
}
function submit()
{
//toggleWarningText("");
let password = document.GetElementById("passwordText").value;
//This togglewarningtext doesn't work
toggleWarningText(password);
//This below doesn't work either
if(password.length < 4)
{
toggleWarningText("The password must be at least 4 characters long");
}
else
{
toggleWarningText(password);
}
}
</script>
</body>
</html>

Change submit() function name.
It calls form submit() function.
<!DOCTYPE html>
<html style="height: 100%; width: 100%; margin: 0;">
<head>
<title></title>
</head>
<body style="display: flex; height: 100%; width: 100%; margin: 0;">
<!-- maxlength="20"> -->
<form style="margin: auto; border: solid; padding: 10px;">
<label style="font-size: 40px;"> Welcome! </label>
<br>
<input id="passwordText" type="password" placeholder="Password" maxlength="20">
<input id="loginButton" type="button" value="Login" onclick="clicked()">
<br>
<p id="warning">CHANGE ME</p>
</form>
<script>
function toggleWarningText(text)
{
document.getElementById('warning').innerHTML = text;
}
function clicked()
{
//toggleWarningText("");
let password = document.getElementById("passwordText").value;
//This togglewarningtext doesn't work
toggleWarningText(password);
//This below doesn't work either
if(password.length < 4)
{
toggleWarningText("The password must be at least 4 characters long");
}
else
{
toggleWarningText(password);
}
}
</script>
</body>
</html>

I think you're looking for
function toggleWarningText(text)
{
document.getElementById('warning').value= text;
}
instead of .innerHTML

Related

How can i use coordinates provided in a form to position an element using jquery

I am using jquery to create an element, i would then like the user to input the x and y values of the desired position of the element, and then click a button so the element would then appear at that position. This is a rough code of how the page is setup. want #newelement to appear in a new position after the forms are filled and the button is clicked.
<!DOCTYPE html>
<html>
<head>
<title>
Create div element using jQuery
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<style>
#parent {
height: 300px;
width: 600px;
background: green;
margin: 0 auto;
}
#newElement {
height: 100px;
width: 100px;
margin: 0 auto;
background-color: red;
position: absolute;
}
</style>
</head>
<div id= "parent"></div>
<br><br>
<!-- Script to insert div element -->
<script>
function insert() {
$("#parent").append('<div id = "newElement">A '
+ newdiv </div>');
}
</script>
<button onclick="insert()">
insert
</button>
<form id="form1">
<b>First Name:</b> <input type="text" name="positionX">
<br><br>
<b>Last Name: </b><input type="text" name="positionY">
<input type="submit" value="Submit">
</body>
</html>
Using the "top" and "left" style attributes can be used if you want to position the top left corner of the new div relative to the top left corner of the parent
i.e. something like
<!DOCTYPE html>
<html>
<head>
<title>
Create div element using jQuery
</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<style>
#parent {
height: 300px;
width: 600px;
background: green;
}
#newElement {
height: 100px;
width: 100px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<div id="parent"></div>
<!-- Script to insert div element -->
<script>
function insert() {
// Get the X and Y from the form elements
var x = parseInt($("[name='positionX'").val());
var y = parseInt($("[name='positionY'").val());
var newElement = $('<div id="newElement">newdiv</div>').css({top: y, left:x});
$("#parent").append(newElement);
}
</script>
<button onclick="insert()">
insert
</button>
<form id="form1">
<b>X:</b><input type="text" name="positionX" />
<br />
<b>Y:</b><input type="text" name="positionY" />
<input type="submit" value="Submit" />
</form>
</body>
</html>

Connect search box for map

I am trying to create a search box and button for this map,
can anyone help me how to connect the search box to the map?
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form class="example" action="/" style="margin:auto;max-width:300px">
<input type="text" placeholder="Search.." name="search2">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
<div class="mapouter">
<div class="gmap_canvas">
<iframe
width="600" height="500" id="gmap_canvas"
src="https://maps.google.com/maps?q=university%20of%20san%20francisco&t=&z=13&ie=UTF8&iwloc=&output=embed"
frameborder="0" scrolling="no" marginheight="0" marginwidth="0">
</iframe>
embedgooglemap.net</div>
<style>
.mapouter {
text-align: right;
height: 500px;
width: 600px;
}
.gmap_canvas {
overflow: hidden;
background: none !important;
height: 500px;
width: 600px;
}
</style>
</div>
</body>
</html>
This can easily be done with Vanilla JavaScript.
On your html, bind the onkeyup event
<input type="text" onkeyup="search()" id="search-input" placeholder="Search.." name="search2">
And on your JavaScript file
function search() {
const input = document.getElementById('search-input');
console.log(input)
}

Error message not working in simple javascript form validation

Here is the following code which is not working to show error message when submitted.
The problem is that the error message is not displayed properly when clicked once but if you give multiple clicks it works.
Help will be appreciated.
Thanks
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>JavaScript form validation - checking all letters</title>
<style type="text/css">
li {list-style-type: none;
font-size: 16pt;
}
.mail {
margin: auto;
padding-top: 10px;
padding-bottom: 10px;
width: 400px;
background : #D8F1F8;
border: 1px soild silver;
}
.mail h2 {
margin-left: 38px;
}
input {
font-size: 20pt;
}
input:focus, textarea:focus{
background-color: lightyellow;
}
input submit {
font-size: 12pt;
}
.rq {
color: #FF0000;
font-size: 10pt;
}
</style>
</head>
<body onload='document.form1.text1.focus()'>
<div class="mail">
<h2>Enter your Name and Submit</h2>
<form name="form1" action="#">
<ul>
<li>
Code:
</li>
<li id="myList">
<input type='text' name='text1'/>
<p id="error"></p>
</li>
<li class="rq">
*Enter alphabets only.
</li>
<li> </li>
<li>
<input type="submit" name="submit" value="Submit" onclick="allLetter(document.form1.text1)" />
</li>
<li> </li>
</ul>
</form>
</div>
<script type="text/javascript">
function allLetter(inputtxt) {
var letters = /^[A-Za-z]+$/;
if(inputtxt.value.match(letters)) {
document.getElementById("error").innerHTML="error here";
return false;
} else {
document.getElementById("error").innerHTML="success";
return true;
}
}
</script>
</body>
</html>
Your problem and solution is quite simple.
When you click the form button, the form automatically submits itself and that's why you see nothing.
Add this to your button code so you can prevent the default functionality of the submit input:
<input type="submit" name="submit" value="Submit" onclick="allLetter(document.form1.text1);return false" />
That should solve it:
You should to use event.preventDefault method to prevent the page refresh.
So, your function should look like this:
function allLetter(event) {
event.preventDefault();
var letters = /^[A-Za-z]+$/;
if (document.form1.text1.value.match(letters)) {
document.getElementById("error").innerHTML="error here";
//return false;
} else {
document.getElementById("error").innerHTML="success";
return true;
}
}
It should be called in the following way:
<input type="submit" name="submit" value="Submit" onclick="allLetter(event)" />

Login popup in javascript not working as expected

I have the following jsp:
<head lang="en">
<meta charset="UTF-8">
<title>Data Platform - Real Time Monitor </title>
<script src="../dist/ag-grid-enterprise.js?ignore=notused30"></script>
<script src="../dist/loadingGrid.js"></script>
<script src="../dist/sortGrid.js"></script>
<style type="text/css">
#popupbox{
margin: 0;
margin-left: 40%;
margin-right: 40%;
margin-top: 50px;
padding-top: 10px;
width: 20%;
height: 150px;
position: absolute;
background: #FBFBF0;
border: solid #000000 2px;
z-index: 9;
font-family: arial;
visibility: hidden;
}
</style>
<script language="JavaScript" type="text/javascript">
function login(showhide){
if(showhide == "show"){
document.getElementById('popupbox').style.visibility="visible";
}else if(showhide == "hide"){
document.getElementById('popupbox').style.visibility="hidden";
}
}
</script>
<body style="height: 100%; margin: 0px;">
<div id="popupbox">
<form name="login" action="" method="post">
<center>Username:</center>
<center><input name="username" size="14" /></center>
<center>Password:</center>
<center><input name="password" type="password" size="14" /></center>
<center><input type="submit" name="submit" value="login" /></center>
</form>
<br />
<center>close</center>
</div>
<p>login</p>
<div style="font-style:bold;font-size:30;color:black;"> Data Platform - Monitor
But when I open the jsp, a link "login" appears on top, which on clicking shows a popup box for logging in, however I'm still able to see all the content of the page before logging in. How do I make this popup box appear before loading the content of the page?
Also, I want to set only one username and password and if only that is supplied, page should be displayed. How to get this done?
Your login and close links both have javascript in the href attribute, it should be in onclick attributes instead.
<a onclick="login('show');">login</a>
By having it in the href (or any other attribute that's not associated with an event) the code gets executed. Since your last button is javascript:login('show'); it will always show the login.
Better yet, you should do all the work in your script.
document.getElementById('show-login').addEventListener('click', function(e) {
e.preventDefault(); // cancel the click, but run the following code
login('show');
});
This requires you added an id attribute to your login button.
<a id="show-login">login</a>

Need help getting a jQueryTools Validation script to fire without a submit button

I have the following ColdFusion page (below). I have jQueryTools validation running. It works perfectly fine from a traditional submit button, but I need it to work from the a href link, formatted as a button ( little further down in the code). I can't seem to figure out how to get the a href link that normally submits the form to fire an action that will cause the page to validateV BEFORE submitting the form.
My Javascript skills appear to be very basic. Any help would be greatly appreciated.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><cfoutput>Welcome to#application.settings.meta_title#</cfoutput></title>
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<link rel="stylesheet" href="/common/ext/jQuerytools/form.css" type="text/css" media="all" />
<style>
/* error container */
#errors {
background-color: #163356;
color: #fff;
width: 400px;
padding: 20px;
margin: 5px auto;
display: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
/* title */
#errors h2 {
margin: -5px 0;
color: yellow;
}
</style>
</head>
<body onLoad="self.focus();">
<h1>Pre Incident Plans Editor</h1>
<!--- BEGIN MAIN CONTENT AREA --->
<div id="main">
<div id="leftcol">
<form action="" method="POST" name="form2" id="form2">
<label for="addr_street">Address<br>
<input type="text" name="addr_number" id="Street Number" value="" style="width:50px;display:inline" placeholder="Number" required >
<input type="text" name="addr_street" id="Street Name" value="" size="32" placeholder="Street Name" style="display:inline" required />
<span class="field_instructions">Provide the street address that will match the CAD information</span> </label>
<label for="occ_name">
Occupancy Name<br>
<input type="text" name="occ_name" value="" style="width:100%" placeholder="Occupancy Name"/>
<input type="submit" name="button" id="button" value="Submit" class="button green medium">
</form>
</div>
<div id="rightcol">
<div id="publishingcontrols">
<h2>Publishing Controls</h2>
<div align="center"> Save </div>
<div id="errors">
<h2>Please fix these first</h2>
</div>
</div>
</div>
<script>
// adds an effect called "wall" to the validator
$.tools.validator.addEffect("wall", function(errors, event) {
// get the message wall
var wall = $(this.getConf().container).fadeIn();
// remove all existing messages
wall.find("p").remove();
// add new ones
$.each(errors, function(index, error) {
wall.append(
"<p><strong>" +error.input.attr("id")+ "</strong> " +error.messages[0]+ "</p>"
);
});
// the effect does nothing when all inputs are valid
}, function(inputs) {
});
// initialize validator with the new effect
$("#form2").validator({
effect: 'wall',
container: '#errors',
// do not validate inputs when they are edited
errorInputEvent: null
// custom form submission logic
}).submit(function(e) {
});
</script>
</body>
</html>
Add this to fire validator without a submit button:
var $validator= $("#form2").data("validator");
$validator.checkValidity();

Categories