HTML generate URL from Input - html

i am working on a search function, herefore i need the value of an input to generate the final url (which shows the results)
Let's say the user enters the content he is looking for here:
Name: <input type="text" id="myText">
now i need to generate a hyperlink from
http://constant/constant?query=NAME&someotherconstantthings
here, the NAME needs to be replaced from the content of the input

Try to use PHP, you could add a action to the Form Element to post the entered informations to the PHP file, then generate ur hyperlink.
<form action="phpfilename.php" method="post">
Name: <input type="text" id="myText" name="myText">
<input type="submit" value="Search">
</form>
<?php
$name = $_POST['myText'];
$hyperlink = 'http://constant/constant?query='.$name;
?>

You need something like this:
<form action="URL" method="get">
Enter your name here: <input type="text" name="query" value="">
<input type="submit" value="Search">
</form>
You need to replace the keyword URL with the path to the page which performs the search. You can remove the keyword URL if want to submit the form to the same page.

Related

How to keep question marks for input field values in GET forms?

I have an HTML form like the following:
<form method="GET" name="search" action="/api">
Name: <input type="url" name="url" />
<input type="submit" value="Search"/>
</form>
If I input some value in the URL field like www.google.com?teste=a, I receive on my server-side the following value from the parameter www.google.com teste=a (notice the question mark disappeared).
Is it possible to fix this without using JavaScript to receive the question mark on the server-side?
Without changing the form method to POST you could possibly use Javascript to modify the value of the URL field just prior to submitting the form itself.
document.forms.search.bttn.addEventListener('click',function(e){
e.preventDefault();
this.previousElementSibling.value=encodeURIComponent(this.previousElementSibling.value);
this.parentNode.submit()
});
<form method="GET" name="search" action="/api">
Name: <input type="url" name="url" />
<input type="submit" name='bttn' value="Search" />
</form>

get input form not as variable but as url

I am building a webservice so people can search into the database. Lets say I have users and companies. Each user and company can be found thought their id. So if you search myurl/users/<id> you get information of that user, on the other hand if you search company/ you get information of that company.
For this I have created two simple input texts (one for users and another for companies) where people can type the <id>. My problem is that when I get the value from the input text I get this myrul/users?<id> and not myurl/users/id. I tried to hardcode the slash but then I get myrul/users/?<id>.
So my question is how can I get input text as a url and not as a variable.
I am using flask so my html has jinja2 code like this:
<!-- USER id -->
<form method='GET' action={{url_for('get_info_by_id', type_collection='user')}}>
<input type="text" name="my_id"/><input type="submit" value="Go">
</form>
<!-- COMPANY id-->
<form method='GET' action={{url_for('get_info_by_id', type_collection='company')}}>
<input type="text" name="my_id"/><input type="submit" value="Go">
</form>
In my python script (flask)
#app.route('myurl/<type_collection>/<my_id>')
get_info_by_id(type_collection,my_id):
# search into the database and return info about that id
As #dirn suggested in the commentary, I made it through JavaScript, here is the code if someone else is also interested:
HTML:
<!-- USER id -->
<form method='GET' class="search" id="user" action="">
<input type="text" name="my_id"/><input type="submit" value="Go">
</form>
<!-- COMPANY id-->
<form method='GET' class="search" id="company" action="">
<input type="text" name="my_id"/><input type="submit" value="Go">
</form>
JS:
$(".search").submit(function( event ){
event.preventDefault();
var my_id = $(this).find(":input").val();
url = 'myurl/'+ $(this).attr("id") + '/' + my_id;
window.location.href = url;
});
python (flask)
#app.route('myurl/<type_collection>/<my_id>')
get_info_by_id(type_collection,my_id):
# search into the database and return info about that id
Is there a reason you cannot use the variable, or are you just trying to get it into a URL so that you can do your search? I went out on a limb and assumed you just want the form and database search to work, so try the following out.
Adjust your route like so:
#app.route('myurl/<type_collection>/')
def findAllTheThings():
if not request.form['my_id']: # Just check if a specific entity is chosen
return render_template('YourTemplateHere') # If no entity, then render form
entity_id = request.form['my_id']
get_info_by_id(type_collection, entity_id):
# search into the database and return info about that id
Now adjust the template as follows:
<!-- USER id -->
<form method='GET' action={{url_for('findAllTheThings', type_collection='user')}}>
<input type="text" name="my_id"/><input type="submit" value="Go">
</form>
<!-- COMPANY id-->
<form method='GET' action={{url_for('findAllTheThings', type_collection='company')}}>
<input type="text" name="my_id"/><input type="submit" value="Go">
</form>
Now, if no entity has been selected you'll just render the form. You can throw in a flash to let them know they need to select a specific ID, or just let them figure it out. If an entity has been selected, you will call the fucntion correctly.

append string parmeters while submitting a GET form from HTML

Consider a form in Html:
<form action="demo_form.asp" method="get">
<div class="form-group" style="margin-top:7px;">
<label class=".... </label>
<input type="text" name="prefersite1" placeholder="http://www.website.com">
<input type="text" name="prefersite2" cla....;">
<input type="text" name="prefersite3" cl....">
<input type="text" name="prefersite4" c....">
<input type="text" name="prefersite5" cla....">
</div>
On using a 'submit' type button, is there a way to get appended prefersite_list[] or comma separated string in the url
The button I used is just:
<button type="submit">
Submit
</button>
I am working on django platform and use this url to extract variables by request.GET.get method in python. Is there a way to change name=prefersite[0], [1] etc so that I will get a single long string.
Instead of /?prefersite1=&prefersite2=&prefersite3=.. , I need a single /?prefersite=.
Using prefersite[] as name seems to be working for post forms, but I need to use get forms.

HTML button - action?

I would like to make a navigate button: http://tulyita.hu/pr2info.php?name= + PR2name.text
What i write wrong?
Enter your PR2 name: <input type="text" name="PR2name"><br>
<form method="link" action="http://tulyita.hu/pr2info.php?name=" + PR2name><input type="submit" value="Submit"></form>
the methodattribute of the form tag can only tag the value of either "get" or "post".
See this link for explanation.
Your code should look like:
<form method="get" action="http://tulyita.hu/pr2info.php">
Enter your PR2 name: <input type="text" name="name"><br>
<input type="submit" value="Submit">
</form>
You need Javascript.
var val = document.getElementsByTagName('input[type="text"]').value;
Then pass the val to form.
Also you should also check this about method attribute.
method attribute <form method=“link” > or <a>? What's the difference?
There is no method="LINK" value. This will cause the form to fall back
to the default method, GET, which is equivalent to an anchor element
with a href attribute anyway.

HTML Form element to URL

I am using an eCommerce engine script that uses a different search method.
Instead of a URL using GET like this:
http://search.com/searchc?q=the+query
It uses
http://search.com/searchc/the+query
How can I make a form to POST or GET to that, because this form makes the URL
http://search.com/searchc/?q=the+query
<form action="/searchc/" method="post">
<input type="text" id="q" name="q">
<input type="submit" value="go">
</form>
Also tried this (get or post do not work for both of these)
<form action="/searchc/" method="post">
<input type="text" id="" name="">
<input type="submit" value="go">
</form>
The reliable way has two components: Client-side JavaScript manipulation, which turns form submission to a request as needed, and (as backup for non-JS situations) a simple server-side redirect utility which receives a request from the form and redirects it as modified.
Something like this (for the GET case):
<form action="http://www.example.com/redirect"
onsubmit="location.href = document.getElementById('f1').value +
document.getElementById('q').value; return false">
<input type="text" id="q" name="f2">
<input type="submit" value="go">
<input type=hidden id=f1 name=f1 value="http://search.com/search/">
</form>
Here http://www.example.com/redirect is some server-side form handler that just reads the form fields and picks up fields named f1, f2,..., concatenates them into a single string, and redirects using it as a URL. As a CGI script, this would be
use CGI qw(:standard);
$dest = '';
$i = 1;
while(param('f'.$i)) {
$dest .= param('f'.$i++); }
print "Location: $dest\n\n";
<form action="/searchc/" method="post" onsubmit="this.action+=this.q.value;return true">
<input type="text" id="q">
<input type="submit" value="go">
</form>
spaces will be submited as %20
you can use
this.action+=this.q.value.split(' ').join('+')
to replace them
This is very strange url pattern, but anyway you could do something like:
$(function () {
$('form').submit(function () {
var url = '/searchc/' + encodeURIComponent($(this).find('[name=q]').val());
window.location = url;
return false;
});
});