I have a section on a webapp where the user can search a map for a set of locations and it all works properly but I want the text of the location to show up in the URL so that the user can copy it and share it and it will be the same search.
What is the best way to do this and can I do it with HTML or do I need to use Javascript? I am using jinja2 as a templating engine and I am doing the back end in Python but that shouldn't have a big impact on this. Basically I want them to be able to search for "New York City, NYC" and I want it to show up in the URL as something like
www.url.com/map?location=new%20york%20city%20nyc
The simplest way is just to create a form:
<form action="/map" method="get">
<label>Search: <input type="search" placeholder="Search" name="location"></label>
<input type="Submit">
</form>
When you enter a search term into the input box and hit "Submit" the browser will make a request to http://www.your-site.com/?q=Your%20Search%20Term - and then you can get the argument from request and do whatever you need to do with it.
document.location.hash = "some/values/moreValues";
And you can parse the hash when the page loads to display the content you need on the map
Related
Hello and thanks for your help in advance.
I want to make an internal search capability on my web site.
A user enters a keyword in the search field and after they press enter, the result are shown on a separate web page. So if someone enters the word cat, all the web pages on my web site will be populated in a list with hyperlinks to the pages. I want this to only search my site, no google search engines.
I want to make this in the simplest way possible to php no python, just javascript.
I attempted to make it happen but this code just takes me to a page that has the word i searched for on it.
<div id="widget-user">
<form id="siteSearch" method="get" action="http://www.example.com/first">
<input type="text" id="searchInput" name="q" maxlength="20">
<input type="submit" value="Search">
</form>
<script>
var a = document.getElementById("siteSearch");
a.addEventListener("submit", function(event) {
event.preventDefault();
var b = document.getElementById("searchInput").value;
window.location.href = "http://www.example.com/first" + b;
});
</script>
try change this and let us know window.location="etzy.html"
I'm looking for a boilerplate smart way to take the input value, append it to a fixed url like /search/inputboxvalue and send the user there. Is there anyway smart robust way to do it? I could use an onlick handler and a form but I wondered if there is a more elegant way to do it, pref just using javascript.
My code:
<input name="search" id="search" value="" type="text" width="650px"></input>
Try this:
var my_value = document.getElementById('search').value;
window.location.href = window.location.href + my_value
Use following statment to get value from text box and append to current url.After append it will redirect user to that url.
input_box_value = jQuery('#search').attr('value');
window.location.href = window.location.href + input_box_value
Above 2 statement can be insert on particular event.like click
This is not really correct way to form requests. This symbol "/" should tell us, that we go to subdirectory, or its analog. So, to form this type of url, you will need to use javascript.
But, there is more easy way to create this type of request. Native:
<form id="search" method="get" action="search">
<input type="text" name="q" value="" />
<button type="submit">Search</button>
</form>
This small HTML snippet will allow you to visit an url: site.com/search?q=inputboxvalue without any JS. You may even hide submit button and just use Enter to search.
I have access to a url runs a script to clear a users state.
Id like to produce a script that will run on a webpage, to do this.
The following script works but in Firefox its annoying for people to have to disable mixed content each time they come to the page:
<SCRIPT LANGUAGE="JavaScript">
function go(loc,loc2){
document.getElementById('userstate').src = loc +
document.getElementById('username').value + loc2;
}
</script>
<form onSubmit="go('http://mysiteurlomitted.com/userstate/?userId=','&app=cc'); return false;"/>
Username: <input type="text" id="username">
<input type="submit" value="Clear User State">
</form>
<iframe id="userstate" src="about:blank" width="470" height="30" frameborder="1" scrolling="no"></iframe>
The resulting URL produces a simple text string, and has no HTML on the results page, so I feel it should be pretty easy to read this URL as a file, and load the results into an alert box. This would avoid the iframe method, and get out of the mixed content situation. It would run without anyone needing to change anything. But I cannot figure out how to get this to work. I feel like FileReader() should be a good way to do it, but the URL has parameters... so the reader doesn't know what file type it is. Its just failing. There has to be an easier way to do this.
You shouldn't need any javascript for this kind of thing. Just add a name attribute to the username input, and that value will get passed along in the query string as "&username=Name". so:
<form action="/userstate?app=cc">
Username: <input type="text" id="username" name="username" />
<input type="submit" value="Clear User State" />
</form>
That would submit the form to "http://samedomain.wut/userstate?app=cc&username=", which would be available on the server side in the usual post data source.
There are other, better ways of doing this, but I don't know your setup. You should look into server-side management of cookies/session; the user shouldn't have to input anything except to log in initially.
Edit:
If you want to use this as an administration tool, you can do two things: use ajax (XMLHttpRequest or $.ajax from Jquery), or make your endpoint redirect back to (or serve) the form. You could have the form submit to its own url and in your server side scripting process the data, then output the html for the form again. Not a great pattern for actual applications, but it should work in this situation.
Trying to do the following, created this simple form for for a test:
<form name="input" action"submit.jsp" method="get">
Change background-color: #<input type="text"> <input type="submit"value="submit">
</form>
I am trying to, on clicking the button to take the value from the text box and insert that into a link (which is going to be a rest request) and action it.
I of course need to make sure no one can see the user and password I will pass along the request as well, can someone point me in the right direction of where to start?
I was thinking maybe to use
document.getElementById("id")
And have the input as:
<input name="bgcolor" id="bgcolor">
I'm just not sure how to execute and hide a rest request with a password inside.
To get
Thanks!
Can be completed using the following:
http://www.tizag.com/javascriptT/javascript-getelementbyid.php
I need to change a form so that instead of reloading the page after submitting it, it redirects the user to another page.
This is the form I'm talking about:
<form class="questionform" name="questionform-0" id="questionform-0">
<textarea class="question-box" cols="12" rows="5" id="question-box-' . $questionformid . '" name="title" type="text" maxlength="200" size="28"></textarea>
<input type="text" class="ubicacion" value="" name="question">
<input type="button" name="ask" value="Publicar" onclick="askquestion('questionform-0'); window.location.reload(true);">
I want to remove window.location.reload and change it for something that redirects users to the page their comment will appear.
The problem is that it's not simply a static. So I have no idea how to do it. The URL I want to send users to is:
www.chusmix.com/s?=(content of the second field)
How do I do it? Anyway thanks for any info or whatever that points me on the right direction. Thanks
There is no need to use javascript for this purpose. You only need to set the action attribute of the form tag. It tells where the form information will be sent. So in your case it will be:
<form action="http://www.chusmix.com/s">
Also if you want to send the variables through the URL like: http://www.chusmix.com/s?variable=someValue
You need to set the method attribute as get so it will look like this:
<form action="http://www.chusmix.com/s" method="get">
If you don't want the data sent to be visible set the method to post, note that there are different advantages for each method so i recommend you read more about this if this form is an vital part of your webpage.
The variable names that appear in the url http://domain.com?**variable**= will depend on the inputs name <input type="text" name="**variable**" />
For more information on how forms work you can go to:
http://www.w3schools.com/TAGS/tag_form.asp
http://www.tizag.com/phpT/forms.php
You can ad an action:
<form action="redirection_url.php" method="POST" class="questionform" name="questionform-0" id="questionform-0">
I think you can use both absolute and relative url. Also note that I've added
method="POST" - which defines how the data from the form will be sent, as you already send some data with GET method (that's the stuff after ? in your url) - so this should work pretty well.
If you cannot use the action attribute in the <form> tag, you may redirect the user using window.location (you will probably want to do this inside the askquestion method, not in the onclick attribute).
window.location = "http://www.chusmix.com/s?=" + inputValue;