How can the user save a form and access it later? - html

I have made a form and I want the user to have this option to type into the form and have the ability to close the page and open it again and see the text they have typed into the form. Do I have to use a database?
Here's my form:
<form action="" name="form1">
<label>Enter the title: </label>
<input type="text" name="title" class="title">
<label>Enter the description: </label>
<textarea name="description" class="description">
<!--Here's the save button-->
<input type="submit" name="submit" value="Save" class="savebtn">
</form>
I'm also not sure if I have to use a submit button.

You can use offline storage capabilities of HTML5.
See Client-Side Storage
Cheers !!

There are a number of different solutions.
The easiest way I would think of is to use a cookie, you can find how to create and manage cookie with easy javascript here
Then with some simple javascript code, when you load the page you just check if there is a cookie, if there is you retrieve the data and populate the form.

Related

Formaction attribute is not working when input text has required attribute

I have this code, I use formaction attribute to return in home.html
but it's not working because of required attribute.
<form action="post">
Name:
<input type="text" name="name" required>
<br>
Email:
<input type="email" name="name" required>
<button name="Send" id="send">Send</button>
<button name="Return" id="return" formaction="home.html">Return</button>
</form>
The formaction attribute working fine. I can use the Network tab in my browser's developer tools to observe that when I click Return (in the live demo in your question) the form is submitted to home.html.
The required fields are still required (so I have to fill them in before that happens), but that is to be expected.
It sounds like your goal is to provide an exception and not need the user to enter any data when submitting the form to Return.
That isn't possible without adding a bunch of JS but you're approaching the problem from the wrong angle in the first place.
It looks like you want something for the user to click on that will abort filling in the form and just go to a different URL. There's no data submission involved.
That isn't a job for a submit button.
Use a link instead.
Return
You can apply CSS if you want it to look like a button, but I wouldn't recommend it. The visual appearance of the button implies that the form data will be sent somewhere, and that isn't what you are doing.
You should refer to homepage at the form tag
<form action="home.html" method="POST">
and for the submit
<input type="button" name="Return" id="return">

Is there a way to have one single form HTML element that can send information to numerous URL's?

I'm designing a front end for Google in my class, but the only issue I'm having is that my <form> element where a user can type in keywords to send to google and get the results on their page only supports one URL to send information to.
Is there a way I can add a feature (preferably a button) to send that info to the "I'm feeling lucky" URL without having to create a separate form, using plain HTML?
I've attached some of my code if it helps.
<form action="https://google.com/search" name="Search" class="search" >
<input type="text" name="q" placeholder="Search Google or type a URL" id="query">
<input type="submit" value="Search" class="submit">
</form>
While this is typically handled with JavaScript (or server-side logic), it is indeed possible to achieve this with just HTML, as HTML5 introduces the formaction attribute on <input type="submit"> (and type="image"), which allows you to modify the submission location.
This can be used to submit to two different locations based on button click:
<form>
<input type="submit" formaction="/one" value="Submit To URL One">
<input type="submit" formaction="/two" value="Submit To URL Two">
</form>
This is supported by all modern browsers.

Input text to link with a form?

I've been working on having a form where a user can input a subreddits name in a input form and be taken to it, but not been working out well. I've tried using get and name="q" but it makes the address funky.
What I have so far:
<form method="post" action="http://www.reddit.com/r/" style="margin-left:5px;margin-right:5px;margin-bottom:0px;">
<input class="form-control" value="" placeholder="Subreddit Name">
</form>
If you're not getting what i'm trying to do: A user types text into an input, the text they typed would be sent to an address as reddit.com/r/(whatever the user typed)
Not knowing from your question whether or not you have access to server-side coding, and based on your answers in the comments, the following should work for you. Note that if a browser has JavaScript disabled, this will bring the user directly to http://www.redit.com/r/
If you have access to server-side scripting, you could add a catch on your server as well to avoid this.
<form method="post" onsubmit="document.location='http://www.reddit.com/r/'+document.getElementById('subredditname').value;return false;" action="http://www.reddit.com/r/" style="margin-left:5px;margin-right:5px;margin-bottom:0px;">
<input id="subredditname" class="form-control" value="" placeholder="Subreddit Name">
</form>
You can do this easily with PHP.
User types text into input field
<input type="text" name="user_text" />
After form submit, run PHP code
$page = $_POST['user_text'];
//send user to website
header('Location: http://reddit.com/r/' . $page);

Submitting to a remote .cfm file using an html form

I want visitors to my website to be able to search for airport lounges offered by a company called Priority Pass. I have created the following form:
<form action="http://prioritypass.com/lounges/lounge-print.cfm" method="post">
<input type="text" id="print_airport_code" name="print_airport_code" value="MAN" />
<input type="submit" value="Submit" />
</form>
Which mirrors the form they have on their own mobile search site (here). But when I submit my form it doesnt seem like the parameters are being posted properly.
Any help would be great. Thanks.
The form on their website doesnt appear to contain any fields which I have missed?
You're pointing to the wrong URL; POSTing to /lounges/lounge-print.cfm is producing an HTTP redirect header, which is corrupting your output.
Additionally, the name of your input field is incorrect. Using someone else's form results often requires you to maintain all field names consistently as they appear on the remote site.
Change the form to:
<form action="http://www.prioritypass.com/mobile/lounges.cfm" method="post">
<input id="Airport_Code" name="Airport_Code" type="text" size="10" value="MAN" />
<input type="submit" value="Submit" />
</form>

Can I stop the form action from redirecting the user to another page?

I have this form:
<form name="input" action="http://s164074194.onlinehome.us/mail.py" method="POST">
Username:
<input type="text" name="email" />
<input type="submit" value="Submit" />
</form>
On submission, the mail.py script is called and the user is redirected to its output...
I'd like the user to just stay on the same page as the form, right now when I click submit on the form I'm redirected to mail.py, which is on another site. Is it possible to disable this redirect action and instead just invoke the script?
Thanks
As #josh mentioned, you probably want to submit the form via AJAX, but if the script is on another site, then I don't think you will be able to do that.
Probably your best bet is to have a hidden iframe with the real form that gets submitted, and when the user clicks the button on the visible form, some javascript copies the field values to the hidden form, and submits it.
You might also be able to just specify a target on the form to be the hidden iframe, and not worry about the javascript part, but I haven't tried it.
Submit it via AJAX.
One solution would be to have mail.py redirect the browser to a different page once it has finished running whatever functions with the form data.
I'm not sure of the situation you have but if you don't have access to edit mail.py then perhaps you can get a local copy of it if possible.
If Possible then write a name same name in "action='current_filename'"
<form name="input" action="current_file_name" method="POST">
Username:
<input type="text" name="email" />
<input type="submit" value="Submit" />
</form>