html - How to get text input value from a file? - html

So I have a form in HTML which submits the content of 2 inputs to an external website. What I am trying to achieve is get the value of the input from a text file. Is that possible? If so, how can I do it?
<form action="http://blockbench.net/web/index.php" method="POST">
<input type="text" name="model" value="I want this value to be gotten from a text file I have in the directory of my website">
<input type="text" name="textures" value="">
<button type="submit">Submit</button>
</form>

You have two possibilities to do this: server side (which I'd recommend) or client side.
Server side:
Depending on what language you have available on your server, you can have the file content served as part of the HTML. For PHP for instance:
<form action="http://blockbench.net/web/index.php" method="POST">
<input type="text" name="model" value="<?php echo file_get_contents('some_file_on_server.txt'); ?>">
<input type="text" name="textures" value="">
<button type="submit">Submit</button>
</form>
Client side:
Alternatively, if the file you want to read is publicly available on the same web server, you can have the browser request it via JavaScript and fill in the data.
<form action="http://blockbench.net/web/index.php" method="POST">
<input type="text" name="model" value="">
<input type="text" name="textures" value="">
<button type="submit">Submit</button>
</form>
<script>
fetch('http://your-server/some_file.txt')
.then(response => response.text())
.then(text => document.querySelector('[name="model"]').value = text)
</script>
I recommend going for the server side way, because the text from the file will be immediately available as the HTML arrives in the browser while the client side solution will take some time (or may even fail) to download the text from the server and fill it into the input element.

Related

HTML E-mail form

So my site is almost done but I'm stuck on the part of sending an email.
Everything works, when I fill in the fields. But it always gets saved as a draft so I don't receive the email.
Here is my html code:
This code is copied from a site.
<form action="mailto:myemailadress#gmail.com" method="post" enctype="text/plain">
Name:<br>
<input type="text" name="name"><br>
E-mail:<br>
<input type="text" name="mail"><br>
Comment:<br>
<input type="text" name="comment" size="50"><br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
action="mailto:myemailadress#gmail.com" <-- This is not correct.
You'll have to point your post submission to a handler php file that will process the form request and submit the email.
Now, some host providers do have a php mailer to make us things easier, e.g godaddy https://www.godaddy.com/es/help/using-our-php-form-mailers-on-web-and-classic-hosting-8376 .
An example of php mail handler for forms can be found here http://www.freecontactform.com/email_form.php . It has some validation code too.
There is a possibility that you're using a server that doesn't support PHP but ASP, .NET, Node.js or some other, in that case i can't help you because i'm not familiar to none of them :)

How to build a custom URL from a HTML form?

I have a HTML form like:
<form name="input" action="" method="post">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
I need to build a URL when the submit link is clicked and send the user to it, using the username from the form in the correct position in the URL.
URL:
http://example.com/htmlchat/init.html?init_room=1&init_user=USERNAME_FROM_FORM_HERE
Can someone help (an example would be great)?
Don't use POST when you want the data to appear in the URL
Do put all the data you want in your URL in the form
Get the names of your fields right
Put the base URI in the action
such:
<form action="init.html">
<input type="hidden" name="init_room" value="1">
<label>
Username:
<input name="init_user">
</label>
<input type="submit" value="Submit">
</form>
This is possible with either Javascript or a server side language such as PHP. With Javascript you want to update the action attribute.
You could use jQuery to do this.

Multi-search, single search bar HTML

As the title states, I'm trying to incorporate many searches into one search bar. More specifically, Google and Amazon. I have setup a radio option to set which site to search when one is selected.
This is the code I currently have:
<form method="get" action="http://www.google.com/search">
<div align="center" style="font-size:75%">
<input type="text" name="q" size="25" maxlength="255" value="" />
<input type="submit" value="Google or Amazon Search" /></br>
<input type="radio" name="sitesearch" value="" />The Web
<input type="radio" name="sitesearch" value="yoursite.com" checked />This Site
</div>
</form>
I have this form for Amazon, but I'm just unsure how to code it into the one search bar.
<form action="http://amazon.com/s/ref=nb_sb_noss" method="get" target="_blank">
<input type="text" id="twotabsearchtextbox" name="field-keywords">
<input type="submit" value="Search" class="nav-submit-input">
</form>
Use JavaScript to change the actual form action in page's DOM (and other parameters, if needed), depending on the user selection (use onclick event on radio to montior for change for example). Simple as that. You won't be able to do that in pure HTML without using some kind of proxy server to redirect the requests and return the results appropriately.
document.your-form.action = (google_selected) ? "http://www.google.com/search" : "http://amazon.com/s/ref=nb_sb_noss";
etc.

Can I have two form's in diffrent places which triggers one request to server?

I am beginner to HTML. I found there is something like form which is used to pass data to server. I know what is the basic usage.
Last time I cut children of my initial form between two HTML files (some reorganization to include later in JSP). Personally I don't like to start tag <form> in one file, and close the </form> in other file. And I know I could do something like this (I will use this probably):
<form>
// include file1
// include file2
</form>
But now I am just thinking... Is it possible to do something totally different? like this:
// first file
<form name="input" action="index.html" method="get">
<label for="iduser">User:</label><input id="iduser" type="text" name="user">
</form>
// second file
<form name="input">
<label for="iddata">Data:</label><input id="iddata" type="text" name="data">
<input type="submit" value="Submit">
</form>
I want to submit both inputs with button inside second form. I know above doesn't work even if I set the same name attribute. But maybe I missed something?
if you need to break the form in 2 separate files, you can't have nested form elements so what you need to do is this
// first file
User: <input type="text" name="user">
// second file
Data: <input type="text" name="data">
<input type="submit" value="Submit">
There is no need to break it into seperate forms..
Keep it as the one form they will both be poosted to the same location..
// only File
<form name="input" action="index.html" method="post">
<label>User:</label> <input type="text" name="user">
<label>Data:</label> <input type="text" name="data">
<input type="submit" value="Submit">
</form>
if you wanted to carry on to the second page with the first page post values you could use something like php
<?php
$value1FromPrevious = $_POST['user'];
$value2FromPrevious = $_POST['data'];
;?>
More HTML Code forms here
You will just need to change the form ACTION to your new php page..

How to send hidden data

I have a form(like the one below for example) where I type data, but I also want to send data which are not directly entered by the user, for example a generic Id(for a user in this case)
<form name="input" action="" method="post">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
Don't know if I have been clear enough, I hope so.
try a hidden input:
<input type="hidden" value="foo" name="user_id" />
The user can't see it, but remember that such inputs can be spoofed and need to be validated on the server just like any other input.