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.
Related
I have a mobile app with a submit button. When I enter the parameters and hit submit, I want the page to reload with the new value displayed. For some reason, when I click submit, it navigates to index.html. I can't get it to stop. I've tried event.preventDefault(); and action = "saved_locations.html" but that took me to a weird pure html version of the page outside of the app.
<div class="pages">
<div data-page="saved_locations" id="saved" class="page navbar-through no-toolbar" align="center">
<h2><br><u>Enter A Location<br><br></u>
<form id="enter_location">
Latitude: <input type="text" id="Latitude" value=""><br>
Longitude: <input type="text" id="Longitude" value=""><br>
Location: <input type="text" id="Location" value=""><br>
<input type="submit" value="Submit">
</form>
<h2><u>Saved Locations</u></h2>
</div>
</div>
This is how a proper HTML form looks like. I'll do a basic example here:
function showData() {
let x = document.getElementsByTagName("input")[0].value;
let y = document.getElementsByTagName("input")[1].value;
let z = document.getElementsByTagName("input")[2].value;
alert(`For the location ${z} the latitude is ${x} and the longitude is ${y}`);
}
form {
font-weight: bold;
letter-spacing: 3px;
color: blue;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML Form Example</title>
</head>
<body>
<form action="https://stackoverflow.com/questions/52657111/html-submit-button-is-navigating-away-from-the-page">
Latitude:<br>
<input type="text" name="Latitude" value=""><br> <hr/>
Longitude:<br>
<input type="text" name="Longitude" value=""><br><hr/>
Location:<br>
<input type="text" name="Location" value=""><br><hr/>
<input type="submit" value="Submit" onclick="showData()">
</form>
<p id="demo"></p>
</body>
</html>
Like others in the comments suggested, you're missing an action. Here is a brief explanation of why is needed and what happens if it omitted:
The Action Attribute
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.
In the example above, the form data is sent to a page on the server called "/server_side.php". This page contains a server-side script that handles the form data.
<form action="/server_side.php">
If the action attribute is omitted, the action is set to the current page. - [In your case the root index page].
Turns out that the issue is that I'm using Framework7 for my app. window.location.reload(); doesn't work, but this does:
setTimeout(mainView.router.refreshPage(),5);
I am trying to make a registration form which has a textbox for confirming your password.
<!DOCTYPE html>
<html>
<head>
<style>
label {
display: inline-block;
width: 100px;
margin-bottom: 10px;
}
body {
font-family: sans-serif;
}
</style>
<title>Register</title>
</head>
<body>
<h2>Register</h2>
<form method="post" action="">
Username:<br>
<input type="text" name="username"><br><br> Email Addres: <br>
<input type="text" name="email"><br><br> Password:
<br>
<input type="text" name="password"><br><br> Confirm Password:<br>
<input type="text" name="passwordconf" onkeyup="passVal()"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
<script>
var pass = document.getElementsByName("password");
var confPass = document.getElementsByName("passwordconf");
function passVal() {
if (pass.value != confPass.value) {
confPass.setCustomValidity("Passwords don't match");
} else {
confPass.setCustomValidity("");
}
}
</script>
The intent is that whenever a key is released (onkeyup), a function runs which checks to see if the contents of the textboxes are equal (passVal). When I run it add text to both of the password boxes, errors show up in the console saying that passVal is not defined.
I tried making passval equal to a variable
var variableExample = passVal;
and using onkeyup to call the variable, but this made no difference. Except, that now the console said variableExample was not defined instead of passVal. I have no clue why this is not working. Anyone know how I might fix this?
<!DOCTYPE html>
<html>
<head>
<style>
label {
display: inline-block;
width: 100px;
margin-bottom: 10px;
}
body {
font-family: sans-serif;
}
</style>
<title>Register</title>
</head>
<body>
<h2>Register</h2>
<form method="post" action="">
Username:<br>
<input type="text" name="username"><br><br> Email Addres: <br>
<input type="text" name="email"><br><br> Password:
<br>
<input type="text" name="password"><br><br> Confirm Password:<br>
<input type="text" name="passwordconf" onkeyup="passVal()"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
<script>
var pass = document.getElementsByName("password")[0];
var confPass = document.getElementsByName("passwordconf")[0];
function passVal() {
if (pass.value != confPass.value) {
console.log('Not equal');
} else {
console.log('Equal');
}
}
</script>
If you query by .getElementsByName(), you'll get an array of elements, as does .getElementsByTagName(). Notice that "Element" is plural.
If you only want one element, just use .getElementsById().
getElementsByName return an array of elements,
You should use id instead or get the fist element of array (pass[0])
The first thing you need to fix here is how you are getting the element value which is by using
var pass = document.getElementsByName("passwordconf")
which returns an array of all the elements with the name passwordconf.
Adding .value to variable pass will then return undefined because you did not define which element in the array are you trying to get. You can add [0] to get the first element in the array (array indexing always starts count with 0) like this:
pass[0].value;
Note that by doing this, you will not get the passVal is not defined error.
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>
I am not using a reset button because I have other functions that aren't working either and I need to do it this way to meet program requirements. I am intentionally not using jQuery. Everything seems correct to me.
HTML:
<script src="js/breaker.js"></script> <!-- it seems to be linked right, but nothing is working -->
<form action="#" method="get" onsubmit="return false"> <!-- is there something wrong here? -->
<td><textarea id="text" cols="50" rows="10" style="width: 40em; height: 15em;"></textarea></td>
<input type="text" value="0" id="shift" style="width: 4em;"/>
<input type="button" value="Exit value = 3" onclick ="javascript: clearSetFocus();"/>
Javascript:
function clearSetFocus() { //functions seems right
document.getElementById("text").value = "";
}
I have a very simple form with three fields that I need to submit to an mvc action. The form must be application/x-www-form-urlencoded. however, one of the fields is populated by users copying and pasting an already urlencoded value. I would like to decode that value prior to submitting the form. this seems really simple but I keep running into proplems with my javascript.
Here is the code:
<html>
<head>
<script>
function decodeURI()
{
decodeURIComponent(document.createprofile.URI.value);
}
</script>
<title>Test Create</title>
</head>
<body>
<center>
<h1> Spoof Profile Calls </h1>
<hr>
<div style="border: 1px solid black; width: 300px;">
<b>Create</b>
<form method="post" action="https://test.test-lab.com/Profile/Create/" name="createprofile">
<input type="hidden" name="ReturnURL" value="self.close()">
UserName: <input type="text" name="UserName"><br />
Client: <input type="text" name="Client"><br />
URI: <input type="text" name="URI" onblur="decodeURI();"><br />
<input type="submit" formenctype="application/x-www-form-urlencoded" value="Go To - Create"><br />
</form>
</div>
</body>
</html>
The URI field is the one that needs url decoded prior to submission because it gets reencoded and thus corrupted. I could ask the users to un-encode these values themselves but they are not terribly sophisticated users and it will likely not happen.
Thank you in advance!
UPDATED WITH FAILING CODE
Replace the line
URI: <input type="text" name="URI" onblur="decodeURI();"><br />
by
URI: <input type="text" name="URI" onchange="decodeURI(this);"><br />
And do something like
function decodeURI(elm) {
elm.value = 'foo ' + elm.value + ' bar';
return false;
}