How do I send search parameters to Flask server? - javascript

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>

Related

Search input gets sent to another search bar on a different page

I am trying to get the input from my main sites search bar to be sent to the search bar of my second site and have the results of the second sites search appear.
I have played around with some code that almost works, however instead of searching the second site it instead adds the search input onto the url.
<div class="form-group">
<form id="search-products" method="get">
<input type="search" class="form-control input-thick-border" id="test" placeholder="Search..." name="keyword">
</form>
<script type="text/javascript">
document.getElementById('search-products').onsubmit = function() {
window.location = "http://website.com/Search" + document.getElementById('test').value;
return false;
}
</script>
</div>
So if I type "pen" into the first search bar then it will link to "website/searchpen" which doesn't exist so it redirects to the "not found" page. I feel like I am very close I am just missing some code that takes the input from the first search bar and searches for it in the second search bar. Any help or ideas will be much appreciated.
You don't actually need JavaScript for this. A normal form submit does exactly what you're looking for. Just set the form action.
<form method="get" action="https://example.com/search">
<input type="search" name="keyword" />
</form>
On form submit, it will go to something like:
https://example.com/search?keyword=Whatever+the+user+typed+in

Submiting one form to two different URLs

Hello, Folks!!
I am not very experience. I would really appreciate some help as follows:
Goal: Run 2 actions associated with 1 submit, just have to add URLs and they will pull out all the necessary info they need from the form.
Constraints: No access to Database, No Ajax and No PHP.
Problem: Nothing happens even when I use <input type="button" value="submit" onclick="OnBtn1(); OnBtn2();">
I also tried these with no luck:
Two onClick actions one button
Submit single form to two actions
HTML Code:
<script type="text/javascript">
function postToUrl () {
document.Form1.action = "https://dB2.com/cgi-bin/b.cgi?"
document.Form1.submit();
}
</script>
<form id=" Form1" method="POST" action="https://dB1.com/cgi-bin/a.cgi?" onsubmit="postToUrl();">
<input type="text" id="field1" name="field1">
<input type="text" id="field2" name="field2">
<input type="button" value="submit" name="sdb">
</form>
Can someone please help me? Thank you!
The best solution would be to use ajax, to send the form twice on the submit event.
Maybe you can try to add a hidden form with mirrored values but different action url. This way, when you submit the form it submit the hidden one too.

How To Save text in Textbox

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.

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/

sending form data across two pages with added javascript

I'm stuck! - I have a search form, that when data is entered and submitted, the data is sent to another page! - this works well see eg below.
My problem is, I have a piece of javascript called "greybox", it basically loads an external, dimming the first page and focusing on the external - see eg below.
normal working
The new window can be called via either a href "rel" link or an "onclick" command.
I have tried implementing the the two together to no success..Whichever method I use, when i use the greybox the data from the original form is not passed over! - this is what I have so far...
example1, Using standard form with an "onclick" function on the submit button example 1
<body>
<script>
GB_show(caption, url, /*optional*/ height, width, callback_fn)
</script>
<form name="form1" action="test_script.php" method="post">
<input type="text" name="var1" value="">
<input type="submit" name="submit" value="submit" onclick="return GB_show('Search', 'http://www.nctfleetlist.co.uk/test_script.php', this.href)">
</form>
</body>
example 2 - using "onsubmit" [example 2][3]
<body>
<script>
GB_show(caption, url, /*optional*/ height, width, callback_fn)
</script>
<form name="form1" action="test_script.php" method="post" onSubmit="return GB_show('Search', 'http://www.nctfleetlist.co.uk/test_script.php', this.href)">
<input type="text" name="var1" value="">
<input type="submit" name="submit" value="submit">
</form>
</body>
example 3 - using a javascript text link
<body>
<form name="form1" action="test_script.php" method="post">
<input type="text" name="var1" value="">
Search
</form>
</body>
To see the other working pages, simply change eg1.php to eg2.php or eg3.php
If anyone can help me, it would be much appreciated!

Categories

Resources