I am trying to create an HTML form which consists of title, text area , post button and clear button. My aim is to clear the text area if the user clicks the Clear button, but before that an alert to appear asking the user if he is sure he wants to clear the text. If the user Types OK, the text area to be erased, if the user types Cancel, the method to be cancelled.
I tried the following code, but I have noticed that whatever input I type, or button I press, the text in the text area is erased by default. How do I prevent that and therefore make it work?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="global.css">
</head>
<body>
<form >
<input type="text" id="title" name="title">
<textarea id="blog_textarea" name="blog" placeholder="Your Text">
</textarea>
<br><button type="submit" id="post" name="submission" value="Submit">Post</button>
<button id="clear_button" onclick="clearFun()" >Clear</button>
</form>
<p id="demo"></p>
<script>
function clearFun() {
var par_output="";
var txt = prompt("To confirm, please type OK, or to stay type Cancel ");
if (txt == "OK" || "ok") {
document.getElementById("blog_textarea").value = "";
} else {
par_output = "Please type OK to confirm or Cancel";
}
document.getElementById("par_output").innerHTML = demo;
}
</script>
</body>
</html>
Also there is Jsfiddle if that helps
Many Thanks guys
you need to write both condition seperatly and form tag is also effect to clear it
if (txt == "OK" ||txt == "ok")
This should work:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<textarea id="textarea"></textarea>
<br />
<button id="clearbutton">Clear</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$('#clearbutton').click(async () => {
const clear = await prompt('Clear? Type ok');
if (clear.toLowerCase() === 'ok') {
$('#textarea').val('');
}
});
</script>
</body>
</html>
In plain JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<textarea id="textarea"></textarea>
<br />
<button id="clearbutton">Clear</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
document
.getElementById('clearbutton')
.addEventListener('click', async () => {
const clear = await prompt('Clear? Type ok');
if (clear.toLowerCase() === 'ok') {
document.getElementById('textarea').value = '';
}
});
</script>
</body>
</html>
Related
I am fairly new coding in JavaScript and web development, and I was wondering if there was any way to input an alert through an HTML text form and have it run on another page after it has been submitted, right now this is what I have.
index.html
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>form</title>
</head>
<body>
<form action="results.html" method="GET">
<div>
<label>Name</label> <input style="width: 400px;" size=400px type="text" name="name" id="name" placeholder="username" required>
</div>
<button type="reset">Reset</button>
<button type="submit">Submit</button>
</form>
</body>
results.html
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Results</title>
</head>
<body>
<div id="results"></div>
Back to Form
<script>
const resultsList = document.getElementById('results')
new URLSearchParams(window.location.search).forEach((value,
name) => {
resultsList.append(`${name}: ${value}`)
resultsList.append(document.createElement('br'))
})
</script>
</body>
I want to get something like this
My input
What I am trying to achieve
You have to receive a variable that you send with the "get" method.
With the window.location object. This code gives you GET without the question mark.
let myTextAlert = window.location.search.substr(1)
(You can use split() method to get rid of &)
Next in Your div or insert js:
<div id="results">
<script>
alert("This page Says:" + myTextAlert);
</script>
</div>
Html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
</head>
<body>
<h1> Welcome to Benjamin's bank. Have some Money</h1>
<p>Please enter your name, password and the amount you want to withdraw</p>
<form action="" method="post">
<input type="text" value="name" id="name"><br>
<input type="password" value="password" id="password"><br>
<input type="text" value="amount" id="amount"><br>
<button onclick="withdraw()">click me</button>
</form>
<p id="para"></p>
<script src="Beginners_bank.js" async defer></script>
</body>
</html>
Javascript
function withdraw(){
var namevar= document.getElementById("name").value;
var passwordvar=document.getElementById("password").value;
var amountvar=document.getElementById("amount").value;
var Amount=3000;
var name="Benjamin Anoruo";
var pass="testing123";
var n=Amount-amountvar;
if(namevar==name && passwordvar==pass ){
if(amountvar<=Amount){
document.getElementById("para").innerHTML="your withdrawal was successful. your new balance is:"+n;
document.body.style.backgroundColor='green';
}
}
}
This code is supposed to take users name password and amount they want to withdraw.anytime I enter every detail and click the button it just flashes the output and return an empty form
Please how can I fix this issue.
just add type="button" to your button
Just like #Hyperella noted, hitting enter causes the page to refresh, that's what's causing the flash. To prevent that do as he's showed.
I got this prompt that makes it change the document.title when the prompt has been submitted, but i want it to make it so that if my prompt equals something, it cancels out the prompt, how to do that?
here is my HTML and JS, also it changes the h1 text, in the snippet it wont change the stackoverflow title cause it's already pre defined.
P.S: i know it's gonna be something small i missed, but pardon me for that i'm still a beginner >_<
const h1 = document.getElementById('h1');
function myFunction() {
let mainTitle = "Enter website title..."
let websiteTitle = prompt("What is your website title?", mainTitle)
if(websiteTitle != null ) {
document.title = websiteTitle;
h1.innerText = websiteTitle;
} else if(document.title === mainTitle) {
websiteTitle = null;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="pets.css">
</head>
<body>
<h1 id="h1">Website Title here!</h1>
<button onclick="myFunction()">Change Website Title</button>
<script src="pets.js"></script>
</body>
</html>
I'm not sure if I understood what you are trying to do, but I'll leave here a snippet with the solution to the problem I think you have:
const h1 = document.getElementById('h1');
function myFunction() {
let mainTitle = "Enter website title..."
let websiteTitle = prompt("What is your website title?", mainTitle)
if(websiteTitle != null ) {
document.title = websiteTitle;
h1.innerText = websiteTitle;
}
if(websiteTitle === mainTitle) {
window.location.reload();
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="pets.css">
</head>
<body>
<h1 id="h1">Website Title here!</h1>
<button onclick="myFunction()">Change Website Title</button>
<script src="pets.js"></script>
</body>
</html>
I can't close a prompt yourself, the user has to do it, you may want to use an input and manually hide it / show it to simulate a prompt.
I have tried this code to no avail.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<textarea name="" id="list" cols="30" rows="10"></textarea>
<input type="button" id="btn" value="submit">
<script>
var string = document.getElementById('list');
var btn = document.getElementById('btn')
btn.addEventListener('click', () => {
var link = 'http://localhost/oke.php?list=' + string.value;
oke(link);
});
async function oke(data) {
var post = await fetch(data);
var resp = await post.json();
}
</script>
</body>
</html>
for example, the value of Textarea is as follows
tiger
rhino
elephant
wolf
and if possible I want after one of the lists has been processed, it will disappear from the Textarea.
thanks
I am relatively new to javascript and Im trying to create a banner that will display if textbox is empty. But it doesn't show. How can I make an alert using bootstrap banners?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
function validateForm() {
var uname = document.getElementById("uname").value;
if (uname == ""){
bootstrap_alert.warning = function(message) {
$('#alert_placeholder').html('<div class="alert alert-danger alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button><span>'+message+'</span></div>')
}
$('#clickme').on('click', function() {
bootstrap_alert.warning('Please enter your name');
});
return false;
}
}
</script>
</head>
<body>
Name: <input type: "text" name="uname" id="uname" />
<input type = "button" id = "clickme" value="Submit"/>
<div id = "alert_placeholder"></div>
</body>
</html>
Well there are several things that you should consider while writing JS code:
Always include $(document).ready(function(){}); if you want your Jquery
code to wait for html body to load. and once it is loaded you want to
use your JS code.
Another thing that you have created a validateform() which is never calling from your code and your main code exists within that function.
I've modified your code to work perfectly
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script>
$( document ).ready(function() {
$('#clickme').on('click', function() {
bootstrap_alert('Please enter your name');
});
bootstrap_alert = function(message) {
var uname=$("#uname").val();
if (uname.length==0){
$('#alert_placeholder').html('<div class="alert alert-danger alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button><span>'+message+'</span></div>')
}
else{
$('#alert_placeholder').html('');
}
}
});
</script>
</head>
<body>
Name: <input type="text" name="uname" id="uname" />
<input type = "button" id = "clickme" value="Submit"/>
<div id = "alert_placeholder"></div>
</body>
</html>
Let me know.. if you need any help in this regard.. I would be gald to help you. Thanks