How To Save text in Textbox - javascript

Hi I'm kind of a beginner in coding I've been doing it for a couple of months doing basic things. I'd like to know how to make a basic account sign in type of thing, where you type in your username and password that you want press submit then it saves those to the html file and remember it when I exit and that the next time you type in your username and password it will recognize the username and password. Any thoughts? The code I have so far...
<!DOCTYPE HTML>
<html>
<head>
<title>Sign Up!!!</title>
</head>
<body>
<form>
<input type="text" name="UserName" value="Username">
<br>
<input type="text" name="Password" value=Password">
<br>
<input type="submit" name="SU" value="Sign Up" onclick="su()"
</form>
<script>
function su(){
var su = document.getElementsByName("Username")[0].value;
var su2 = document.getElementsByName("Password")[0].value;
}
</script>
</body>
</html>
I have the var su to get what's in the text boxes, but I'm not sure on how to save those two things. What do I do?

There are some ways to do that, but there are very simple way in HTML5, just put <input type="text"> for the user name and <input type="password"> and the web browser will automatically cache it.

There are many youtube tutorials for your answers. However, you will mainly need php. Here is a link to a tutorial about register and login.

Related

How do I tell javascript to verify my information and direct me to another page at the same time through a submit button

Hey guys I am new to web development. I am currently trying to learn JavaScript.
At the moment I am trying to create a page where when it loads up, the page will ask for the user to input his/her zip code. Now I have a specific zip code that I want the user to input which is 11385. Now, after the user inputs the zipcode I want JavaScript to check if that zipcode is 11385, if it is 11385 I want an alert to pop up and for it to direct me to another page.
I am trying to teach myself coding so I don't really have anyone to ask if you could bear with me. Thank you in advance your help is greatly appreciated.
<form action="c:/users/lui/desktop/index.html" method="post" onsubmit="return ver()">
<fieldset>
<legend>zip code Information</legend> <label for="shippingName">Name:</label>
<input type="text" name="Name" id="shippingName" required><br/>
<label for="billingzip">Zip code:</label> <input type="text" name="zip" pattern="[0-9]{5}" required><br/>
</fieldset>
<input type="submit" value="Verify" />
</form>
<script>
function ver() {
var eje = document.getElementById('zip_code');
if (eje.value == 11385) {
alert("thank you");
}
return true;
}
</script>
Welcome to StackOverflow.
You forgot to give your zip input the id zip_code. This is why the DOM query in your ver function always resolves to null.
As for the redirecting, check the answer of unknown coder, or, for a little more context, the MDN docs on Window.location. Your check could look something like this:
if (eje.value == 11385) {
alert("thank you");
window.location = "redirect.html";
}
In JS you can redirect using
window.location.href = 'some url'
that's all you need to add after you validate your input value

How do I send search parameters to Flask server?

This is my first question! I am trying to enter a search term into a search box, and when I click Submit, I want the search term inserted into this URL:
http://www.hadrians-search.tk/search?search_param=mario?&items_per_page=2&page_number=2
mario would be the search term. This is the search page I am testing with:
http://cs.oswego.edu/~jmcquaid/CSC-380/search3.html
When I enter a search term such as ball into the search box and click Submit, this is the URL I get:
http://hadrians-search.tk/search?search%3Fsearch_param%3D=ball
As you can see, this is clearly not the URL I am intending to get.
Bear in mind that search3.html is just a file I am testing with on the front-end:
<!DOCTYPE html>
<html>
<body>
<form id="myForm" action="http://hadrians-search.tk/search?search_param=">
Search: <input type="text" name="search?search_param="><br><br>
<input type="button" onclick="myFunction()" value="Submit form">
</form>
<script>
function myFunction() {
document.getElementById("myForm").submit().action="http://hadrians-search.tk/search?search_param=";
}
</script>
</body>
</html>
So basically I am trying to send the search term entered in the search box to the Flask server, but it isn't getting sent properly. Should I be trying an HTTP GET Request? I originally tried this, but I couldn't figure out how to integrate an HTTP GET Request with a search box and button. Because of this, I instead tried to use action, as you can see in the file. Any advice that you can provide will be greatly appreciated, and I thank you for your time.
You can pass the parameters via GET. If you have three parameters, you could add the three elements in the form. You can do something like this.
<!DOCTYPE html>
<html>
<body>
<form id="myForm" method="get"
action="http://hadrians-search.tk/search">
search_param: <input type="text" name="search_param"><br><br>
items_per_page: <input type="text" name="items_per_page"><br><br>
page_number: <input type="text" name="page_number"><br><br>
<input value="Submit form" type="submit">
</form>
</body>
</html>

Pulling javascript from tumblr with specified username

I am trying to get a fairly simple bit of code to work. The essence of it is just to take user input, append it on to a source URL, and then use a script to display the appropriate tumblr feed.
I have spent some time on this, and I can't get my head around how javascript works enough to do something like this.
This is what I have so far:
<html>
<body>
<form>
Tumblr Username:<br>
<input type="text" name="username">
<br>
<br>
<input type="submit" value="Submit">
</form>
<script type="text/javascript" src= username + ".tumblr.com/js"></script>
</body>
</html>
Thanks in advance.
The way that JavaScript works, is you need an event to attach the running of your code. In your case, the form's submit event. Additionally, you cannot compute values within the HTML as you're attempting; you'll need code to manipulate the HTML (the DOM). Here's a sample of how you can do it:
<html>
<body>
<form onSubmit="handleSubmit(event)">
Tumblr Username:<br>
<input type="text" name="username">
<br>
<br>
<input type="submit" value="Submit">
</form>
<script id="theScript" type="text/javascript"></script>
<script>
function handleSubmit(e) {
e.preventDefault(); // Keep the form from actually submitting
var username = document.querySelector('[name="username"]').value;
document.getElementById('theScript').src = username + '.tumblr.com/js';
}
</script>
</body>
</html>
Because the JS file that is on username.tumblr.com uses document.write, I think it'd be better to just load the actual url of the user in an iframe, as this wouldn't require you to refresh the page, while creating a mini page inside your page.
This won't work on the snippet tool here or on JSFiddle, but I've tested it on a web server:
<html>
<body>
<script>
function getUN() {
var username = document.getElementsByName("username")[0].value;
document.getElementById("tumblrframe").src = "http://" + username + ".tumblr.com";
}
</script>
Tumblr Username:
<br>
<input type="text" name="username">
<br>
<br>
<button onclick="getUN()">Submit</button>
<br/>
<br/>
<iframe id="tumblrframe" width="80%" height="600px"></iframe>
</body>
</html>

DOS style input in a HTML from

I want to simulate he old habit of a DOS programm input in a HTML from.
Think of it as an order form.
First I have bunch of form fields for entering names, addresses and so on.
After that I have several product groups.
Each group has only two fields. One for the product and another for the quantity.
Now, tabbing through the form I want to have a NEW set of two input fields for the specific group if the product field its NOT empty.
If you enter a product, you get the chance to enter another one. Entering non, you quickly tab yourself in the next group.
Now I'm thinking about and searching for the most efficient solution that offers the fastest way of entering data without using the mouse when inside this form.
I'm totally free using jquery, html5 or whatever. But I definitely want this way of input, that Turbo Pascal gave to me with a little loop and some ReadLn commands.
All suggestions are welcome
--edit
started coding:
Basic form will look like this
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Testform for a DOS-like behavior</title>
</head>
<body>
<pre>
<?php print_r($_POST); ?>
</pre>
<form action="testform.php" method="post" id="formmail">
<fieldset id="person">
<legend>Person</legend>
<label for="name">Name:</label>
<input type="text" name="name" id="name" value="">
<br>
<label for="email">E-Mail:</label>
<input type="text" name="email" id="email" value="">
<br>
<label for="phone">Phone:</label>
<input type="text" name="phone" id="phone" value="">
</fieldset>
<fieldset id="productgroup1">
<legend>Product Group 1</legend>
Product: <input type="text" name="product[1][]">
Qty: <input type="text" name="qty[1][]">
</fieldset>
<input class="button" type="submit" value="Submit">
</form>
</body>
</html>
* Update
Discovering the powers of fiddle I made this: http://jsfiddle.net/zarquon42/HcbfH/
And it is basically what I want. That surprises me. Now I'm going to take a look if it works also in the context with several groups of input fields.
* Next Update
Much shorter with some jquery: http://jsfiddle.net/zarquon42/NdD7v/
perhaps you could use the JQuery terminal emulator plugin?
http://terminal.jcubic.pl/
Hope this helps!

Javascript acting funny in Internet Explorer

I have a website where I want people to be able to type something in a text box and get sent to that directory based on what they entered.
Say customer numbers, so we have customer # 155. His invoices are in folder /invoices/155 directory. I want him to be able to type in his customer # and be directed with a button click to his directory with all his invoices.
Now I have coded the below code but it only works when I click on the button with the mouse. In Internet Explorer When I press enter it gives me a bunch of gook in the address bar and doesn't do anything. It looks like this in the address bar:
file:///C:/Users/My%20Name/Desktop/test.html?dir=%2Finvoices%2F&userinput=155
Instead of loading the folder /invoices/155/.
<html>
<head>
<title>test</title>
</head>
<form name="goto" action="">
<input name="dir" type="hidden" value="/invoices/">
<input name="userinput" type="text"> <input type="button" value="try me" onclick="window.location=this.form.dir.value+userinput.value">
</form>
Can anyone tell me what is wrong with the code and what can I do to fix it? Thanks in advance.
In some browsers the form will be posted when you press enter, eventhough there is no submit button. Use a submit button, and catch the submit, then you handle all cases:
<form name="goto" action="" onsubmit="window.location=this.dir.value+this.userinput.value;return false;">
<input name="dir" type="hidden" value="/invoices/">
<input name="userinput" type="text"> <input type="submit" value="try me">
</form>
It won't work, if you use file protocol. Especially in IE. You need a real web server.
And to let a customer type in his on id is extremely insecure. Anyone could type in any id. Use a login.
It is really*** important to sanitize every user input to prevent abuse.
It is a long way to go.
I think you should go for onsubmit on <form>
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script>
function handleFormSubmit(form)
{
window.location = form.dir.value + form.userinput.value;
return false;
}
</script>
</head>
<body>
<form onsubmit="return handleFormSubmit(this)">
<input name="dir" type="hidden" value="/invoices/">
<input name="userinput" type="text">
<input type="submit" value="try me" >
</form>
</body>
</html>​​​​​​​
BTW:
Inlining javascript is not so good. Use script tag or external .js-file.
Edit:
Oops! OK, the error was that I wrote this.form.dir but it needed to be this.dir because this already referred to the form, now that the javascript handler was on the form tag (onsubmit="<handler-code>"). That works - http://jsfiddle.net/Q875a/
Edit 2:
Inlining javascript means that you write javascript code in your html tags (form, input,...) in the onXXX attributes - it's not readable. Having your script in a script tag within a handler-function (i.e. handleFormSubmit) makes it much more readable especially if your site gets more and more script in it - see current script and onsubmit-attribute.
Finally, if you want to to take a step further to crossbrowser, powerful javascript development you should take a look at jQuery - it's imho the door to really professional and exiting javascript programming!
JSFiddle to test:
http://jsfiddle.net/yNTK5/
jQuery-links concerning the topic:
http://api.jquery.com/submit/
http://api.jquery.com/on/
http://api.jquery.com/ready/

Categories

Resources