This is my addentry blog page which I have made from scratch and there are underlying problems with this code particularly the clear button which is supposed to clear any text entered when the button is clicked on it doesn't work I have saved it as a html file is that the problem.
Also one other problem is the submit button it works but it doesn't pass any of the text to the index file I have written this as php and for some reason it whenever I click on the submit button it just redirects me back to the index page without posting the entry I have made.
<!DOCTYPE html>
<html>
<head>
<script>
function message() {
alert("Clear the form?");
}
</script>
<style>
body {background-color: beige;}
h1 {color: black;}
p {color: black;}
textarea
{
width: 50%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: white;
font-size: 16px;
resize: none;
}
div
{
padding-left: 20px;
}
</style>
</head>
<meta charset="utf-8">
<link rel="stylesheet" href="../../main.css">
<title>Add an entry</title>
</head>
<body>
<div><h1>Add an entry</h1></div>
<div><p><b>Enter the title of the entry so the topic is clearly defined and then add the entry for the blog that you want to write about after finishing writing about your topic press the submit button to submit the entry which will be posted in the main page of the blog however if you wish to discard or clear your entry then press the clear button to remove your topic which you have written about.</b></p></div>
<form onreset="message()">
<p><label>Title</label>
<input type = "text" id = "myText"/></p>
<p><label>Entry</label>
<textarea>
<input type="clear">
</form>
<form>
<p><label>Title</label>
<input type = "text" id = "myText"/></p>
<p><label>Entry</label>
<textarea>
</textarea></p>
</form>
<form method="post" action="index.html">
<button type="submit" value="Submit">Submit</button> <input type="button" value="Clear" onclick="javascript:eraseText();">
</form>
</body>
</html>
Particularly this part of the clear button code:
<script>
function message() {
alert("Clear the form?");
}
</script>
<form onreset="message()">
<p><label>Title</label>
<input type = "text" id = "myText"/></p>
<p><label>Entry</label>
<textarea>
<input type="clear">
</form>
And this is the submit button code:
<form method="post" action="index.html">
<button type="submit" value="Submit">Submit</button>
<input type="button" value="Clear" onclick="javascript:eraseText();">
</form>
1) Just use input field with type="reset" it will clear the form
2) all your input field should be same form then only it will post to next page
note : your using more than one form and expecting other form values on index page.
<form method="post" action="index.html">
<label>Title</label>
<input type = "text" name="mytext" id ="myText"/>
<br>
<br>
<label>Entry</label>
<textarea name="area"> </textarea>
<br>
<br>
<button type="submit" value="Submit">Submit</button>
<input type="reset" value="Clear" >
</form>
Related
Here is the JavaScript:
myform.addEventListener('submit', (event) => {
fetch("url", {mode: "no-cors"})
.then(res=> {
if(res.ok){
console.log("cats")
}
else{
event.preventDefault()
document.getElementById("subcim_error_message").innerHTML="You must add a title!"
return false
}
})})
Here is the html:
<head>
<title>pH Login</title>
<link rel="stylesheet" href="../styles/ph-styles.css"/>
</head>
<body>
<header>
<h1>parry Hotter School for Alchemy and Pyromancy</h1>
</header>
<div id="hat" style="display: flex; justify-content: center;">
<img src="https://www.renderhub.com/realityscanning/old-boot-with-plants-inside/old-boot-with-plants-inside-01.jpg" style="height: 15rem" alt="Sorting Boot"/>
</div>
<span class="error_form" id="subcim_error_message"></span>
<form name="myform">
<section class="two_columns">
<label for="username">Username:</label>
<input id="username" placeholder="parry Hotter" type="text"/>
<label for="password">Password:</label>
<input id="password" placeholder="*******" type="password" maxlength="20"/>
</section>
<input type="submit"/>
</form>
<footer>
<h6>©Copyright pHSfAaP. All rights reserved.</h6>
</footer>
<style>
#hat{
margin: 3em;
}
img{
border: 1em;
border-style: solid;
border-color: steelblue;
}
</style>
<script src="../scripts/parry-hotter-login.js"></script>
</body>
I am trying to display an error message when someone enters invalid credentials but everytime it happens the page refreshes so the error message immediately vanishes
Literally by adding client site validation. As per the MDN:
Before submitting data to the server, it is important to ensure all required form controls are filled out, in the correct format. This is called client-side form validation, and helps ensure data submitted matches the requirements set forth in the various form controls. This article leads you through basic concepts and examples of client-side form validation.
Then there's server side validation of course. For that you could setup focus or keypress event handlers to validate input and add some UI hints, e.g., messages, colors, checkmarks, and toggle the submit button state.
UPDATE
Here's a snippet that adds the required attribute to the inputs (client-side validation) and a handler for the submit event (server-side validation). The trick to cancelling submission of a form is for the onsubmit handler to return false.
document.getElementById('myform').onsubmit = function()
{
// mock response
res = { status: "failed", reason: "the user name does not exist." };
if (res.status !== "ok")
{
alert(res.reason);
return false;
}
return true;
}
<head>
<title>pH Login</title>
<link rel="stylesheet" href="../styles/ph-styles.css"/>
</head>
<body>
<header>
<h1>parry Hotter School for Alchemy and Pyromancy</h1>
</header>
<div id="hat" style="display: flex; justify-content: center;">
<img src="https://www.renderhub.com/realityscanning/old-boot-with-plants-inside/old-boot-with-plants-inside-01.jpg" style="height: 15rem" alt="Sorting Boot"/>
</div>
<span class="error_form" id="subcim_error_message"></span>
<form id="myform">
<section class="two_columns">
<label for="username">Username:</label>
<input id="username" placeholder="parry Hotter" type="text" required/>
<label for="password">Password:</label>
<input id="password" placeholder="*******" type="password" maxlength="20" required/>
</section>
<input type="submit"/>
</form>
<footer>
<h6>©Copyright pHSfAaP. All rights reserved.</h6>
</footer>
<style>
#hat{
margin: 3em;
}
img{
border: 1em;
border-style: solid;
border-color: steelblue;
}
</style>
<script src="../scripts/parry-hotter-login.js"></script>
</body>
While this code does work, I want to be able to transfer the code to a different html page when the user clicks submit after filling out the form.
<HTML>
<HEAD>
<TITLE>Test Input</TITLE>
<STYLE>
body {
background-color: #2C2F33
}
.form {
font-family: Arial;
color: #FFFFFF
}
.
</STYLE>
<SCRIPT>
function testResults (form) {
var Name = form.Name.value;
var Bio = form.Bio.value;
document.write (Name);
document.write("<br>");
document.write (Bio);
}
</SCRIPT>
</HEAD>
<BODY>
<DIV CLASS="FORM">
<FORM NAME="myform" ACTION="" METHOD="GET" >What is your name? This can be your first name, or an alias your known by. <BR>
<INPUT TYPE="text" NAME="Name" VALUE="" STYLE="height: 50px; width: 400px;"><P>
<FORM NAME="myform" ACTION="" METHOD="GET">Who are you? What do you do? <BR>
<INPUT TYPE="text" NAME="Bio" VALUE="" STYLE="height: 200px; width: 400px;"><P>
<div class="">
<INPUT TYPE="button" NAME="button" Value="Submit" onClick="testResults(this.form)">
</div>
</FORM>
</DIV>
</BODY>
</HTML>
Can anyone please tell me how to achieve this? I've tried making another html page then writing the info, but it doesn't work.
Side note, yes there is some code that isn't filled out
The action property specifies which page it is sent to. Right now it is blank and won't send to another page, even if all the other mark-up was correct.
There are many ways to achieve what you are trying to do. This is only one aspect to consider initiallly.
I am using a variation of the following code. When I press the enter key it refreshes the entire web page, rather than submitting the form. I tried searching but I know absolutely nothing about coding so none of the other answers helped me as they were not specific to my code. Thanks in advance, I really appreciate the help!
<html>
<head>
<head>
<style>
.button {
background-color: blue; /* Green */
border: 1;
color: white;
padding: 8px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
input {
width: 200px;
height: 30px;
background-color : #d1d1d1;
border-style:groove;
}
</style>
</head>
<body>
<form name="login" method=POST>
<center>
<strong>Password:<strong>
<input type="password" name="pswrd" onkeydown = "if (event.keyCode == 13)
document.getElementById('pwsubmit').click()" />
<button class="button" id="pwsubmit" type="button"
onclick="check(this.form)" value="Login"/>Submit</button></center>
</form>
<script language="javascript">
function checkentry(e)
{
document.getElementById("pswrd")
.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode == 13) {
document.getElementById("id_of_button").click();
}
});
}
function check(form)
{
// The list below MUST contain all valid passwords
if (['laura', 'molly', 'katie', 'chris'].indexOf(form.pswrd.value) >= 0) {
// Go to different websites/weebly pages based on the entered password
switch(form.pswrd.value) {
case "laura":
window.open('http://www.bk.com','_self');
break;
case "molly":
window.open('http://www.mcdonalds.com','_self');
break;
case "katie":
window.open('https://www.supermacs.ie/','_self');
break;
case "chris":
window.open('https://www.kfc.ie/','_self');
break;
}
}
// Show following message if invalid password entered
else {alert("Invalid password entered!!!")}
}
</script>
</body>
The default behavior of the forms in the HTML is that the enter key will invoke the first next submit button of the form after the input element.
Here is an example:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Forms</h2>
<form>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<button type="submit" onclick="sayHello()">OK</button>
</form>
<script>
function sayHello(){
alert('Hello every body!');
}
</script>
</body>
</html>
HTML forms have an attribute named action. This attribute has a default behavior also. This behavior is as follow (from https://www.w3schools.com/html/html_forms.asp):
The action attribute defines the action to be performed when the form
is submitted. Normally, the form data is sent to a web page on the
server when the user clicks on the submit button. If the action
attribute is omitted, the action is set to the current page.
So when you hit enter key in the text field the form is submitted and the current page is reloaded.
To prevent this behavior you could use peventDefault() function which prevents this default behavior.
So a simplified edited version of your sample code could be as follow:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Forms</h2>
<form id="myForm" onsubmit="check(event)">
<strong>Password:<strong>
<input type="password" name="pswrd" />
<button class="button" id="pwsubmit" type="button" onclick="check(event)" value="Login">Submit</button>
</form>
<script>
function check(event)
{
event.preventDefault();
var form = document.getElementById('myForm');
if (['laura', 'molly', 'katie', 'chris'].indexOf(form.pswrd.value) >= 0) {
switch(form.pswrd.value) {
case "laura":
window.open('http://www.bk.com','_self');
break;
case "molly":
window.open('http://www.mcdonalds.com','_self');
break;
case "katie":
window.open('https://www.supermacs.ie/','_self');
break;
case "chris":
window.open('https://www.kfc.ie/','_self');
break;
}
} else {
alert("Invalid password entered!!!")
}
}
</script>
</body>
</html>
Note that your code has some syntax error also.
I have been trying to dynamically append HTML input forms using a JS function to a webpage but am having trouble inserting them into the correct location. I have tried to create an empty div tag on line 40:
<div class="itemInfo"></div>
However, when I try to locate that tag from within my JS function, with the findElementById()
function it seems not to find it. I want to create a copy of the three input forms above the empty tag I created and append them underneath, but no matter what I have tried I have not been able to figure out how to put the forms in that exact location. My JS function is as follows:
function newItem(){
instance++;
var oldInput = document.getElementById("itemInfo");
var newDiv = document.createElement("INPUT");
newDiv.name = "myinput";
newDiv.value = "Enter Here";
oldInput.insertBefore(newDiv);
}
Rather than creating the forms again in this function, I would like to duplicate the following and simply append it after itself:
<p>Item: <input type="text" name="item"/>
Qty: <input type="text" name="qty"/>
Color: <input type="text" name="color"/></p>
<input type ="button" value="Add Item" onclick="newItem();"/>
<div class="itemInfo"></div>
I tried to wrap the three forms in a tag and calling that by Id, but it did not seem to work either, which is why I tried to make an empty tag after it. I have searched everywhere and there is a lot of information regarding similar issues but I can't seem to apply the solutions to my situation. I really appreciate any help. Here is the entire page:
<!DOCTYPE html>
<html>
<head>
<script type ="text/javascript">
var instance = 0;
function newItem(){
instance++;
var oldInput = document.getElementById("itemInfo");
var newDiv = document.createElement("INPUT");
newDiv.name = "myinput";
newDiv.value = "Enter Here";
oldInput.insertBefore(newDiv);
}
</script>
<title>Welcome to New Age Embroidery!</title>
<style type="text/css">
body {font-family:sans-serif;color:#4f494f;}
form input {border-radius: 7.5px;}
h5 {display: inline;}
.label {text-align: right}
.ordersBook {float:left; padding-top: 10px;}
.name {width:100%;float:left; padding:3px;}
.wrapper { padding-left: 25px; padding-top: 20px}
</style>
</head>
<body>
<input type ="button" id="btnAdd" value="Add Item" onclick="newItem();"/>
<div class = "wrapper">
<h1>Welcome to New Age Embroidery!</h1>
<div class="ordersBook_input">
<form method ="post" class="form" action = "/newguest" method = 'post'>
Name: <input type="text" name="name"/>
<p>Item: <input type="text" name="item"/>
Qty: <input type="text" name="qty"/>
Color: <input type="text" name="color"/></p>
<input type ="button" value="Add Item" onclick="newItem();"/>
<div class="itemInfo"></div>
<p>Phone: <input type="text" name="phone"/>
Email: <input type="text" name="email"/>
Artwork: <input type="file" name="file"/>
<p>Quote: <input type="text" name="quote"/></p>
</p>
<p>Notes: <textarea cols="40" rows="10"></textarea>
</p>
<input type="submit" value='Add Order'/>
</form>
</div>
<div class ="ordersBook">
<h3>Orders</h3>
%for name in mynames:
<div class="name">
<h5>Name:</h5> {{name['name']}}
<h5>Phone:</h5>{{name['phone']}}
<h5>Email:</h5>{{name['email']}}
<form action="/view/{{name['_id']}}" method='GET' ><input type="submit" value="View">
</form>
<form action="/remove/{{name['_id']}}" method='POST'> <input type="submit" value="Remove" onClick="confirm('Are you sure you want to permenantly remove this order?')">
</form>
</div>
%end
</div>
</div>
</body>
</html>
I changed your Javascript to this
function newItem(){
newInput="<p>Item: <input type="+"text"+" name="+"item"+"/></p>";
document.getElementById("itemInfo").innerHTML=newInput;
}
Here's a working FIDDLE
You are trying to use the function document.getElementById("itemInfo"); which looks for the id itemInfo. There is no element with the id itemInfo in your page. Create the div as follows:
<div class="itemInfo" id="itemInfo"></div>
This should help you get a reference of the div element.
EDIT: The Error is in the function, node.insertBefore(new Element,reference Element); is the correct function.
the current code given below is adding textbox but empyting contents of current textbox
Adding extra text row on current row being changed. I am trying to add a hashtagging system like iphone tags in html. how do i do this?
<div style="padding:15px;border-bottom:solid 1px #c0bbbb;background:#f3f0f0;border-left:solid 1px #c0bbbb;border-right:solid 1px #c0bbbb;">
<fieldset>
<form method="POST" id="hashform" name="hashform" action="/addtags">
<p><input type='text' onchange='generateRow();return false;' name='hashtags[]'></p>
<div id="tags"></div>
<br><br>
<input type="submit" name="Submit" value="Add HashTags" />
</form>
</fieldset>
</div>
<script type="text/javascript">
try{document.hashform.hashtag.focus();}
catch(ex){}
function generateRow() {
var d=document.getElementById("tags");
d.innerHTML+="<p><input type='text' onchange='generateRow();return false;' name='hashtags[]'></p>";
}
generateRow();
</script>