Ok, this should be easy but for me it doesn’t seem so… probably because i’m very close to the deadline and have a lot to do.
This is what i’m trying to do;
I have an html form with a textfield and a button - whenever the button is clicked or enter is pressed i would like it to goto a particular page and place the text field’s value on the end as a hash.
for instance;
user enters “test” and presses enter or hits the button and the page goes to “google.com#test”
is there a base site and then the #textentered or also the url changes, I mean is it always google.com#textentered or it will be somerandompage.com#textentered?
it’s always the same page but the hash will change. I already have a method for getting and handling hashes. I just don’t know how to manipulate the form.
A simple button onclick doesn’t do the trick and neither does wrapping it in <a href>
so far the best i can get is “?searchTerm=testttt” which really isn’t acceptable because the page receiving it treats terms after “?” as a particular action whereas it treats # as something entirely different.
the field is a search field. I’m using the hash to pass the term across joomla modules to a new page where the results will be displayed.
honestly i don’t even know where the searchTerm part is coming from… I guess it’s the default method of HTML forms. I’ve tried taking the result that gave me that and using # + .substr(12). No go -_-
would this work for what you are trying to do?
function openUrl(){
var hash = # + getElementBtyId('fieldid').value;
var url = "http://www.google.com" + hash;
window.open (url, "mywindow");
}
<input type="submit" onclick="openUrl()" value="Submit" />
I am not very good at javascript so I don´t know if this will work for what you need
nope unfortunately…
I need to open the page within the parent not as a popup
and I’d already tried the same thing with window.location.href='s instead of open() and it doesn’t do anything but append ?searchTerm=*word
I even tried taking the result and concatenating the desired url and # with it using .substr(12) with no luck.
I really don’t want to go back into my original JS function to make this work for an unlinked form on a different page.
My JS app is HUGE. It’s encompasses a custom shadowbox and also interfaces the youtube API to pull videos from a feed for a custom display within a list. it also includes a homebrew search engine designed for the feed and links up with about 50 custom filters contained within an accordion.
the reason I want it to be transferred via hash is because on the receiving end I went through the trouble to write a hashlistener to make the filters work properly from page to page.
it sounds like overhaul until you realize i’m using Joomla with different implementations in different places on the page. the search field has no sort of access to anything outside of it’s module. I just can’t believe i’m stuck on this miniscule functionality after building such a hardcore solution -_-
Normally I would probably be able to handle this with no problem but I’ve been working my ass off. I’m pretty much completely out of steam after working well over 70 hours in the past week on this project that is now 5 days behind schedule. The original developer had 2.5 months to complete the project and bailed out in the last few days… without the decency to even leave some code behind (i think he was failure and just couldn’t do it). I’m already 4x past my estimate and the client ran out of budget at 2x so i’m not even getting paid. However the client has a lot more projects for me to work on IF i can get this damn site live! Tonight was supposed to be the ultimate deadline and I have to be ready to go live before 5-6AM.
This is a nightmare -_- and my brain isn’t even working.
The worst part is… I’ve already received a 50% deposit on my original quote and I won’t get paid the 150% balance until it’s finished.
I’m not really a web developer… I write C# for fun and typically write x32 and x64 intel assembly based embedded software. I just took up the job for extra cash to pay off student loans.
From memory i believe the second argument for window.open can also act as a target so for instance if you use…
var url = 'http://www.myurl.com/page.php#' + document.getElementById('textInput').value;
window.open(url, '_self');
Also i noticed you said you tried
window.location.href
which won’t work as .href is a property of the window object and doesn’t use any exclusive redirect event so all it does is set the href value, if you remove .href so its just the below it will redirect.
window.location = 'http://www.google.com';
i tried that too… unfortunately all it does is append the current url with ?textfieldnameproperty=termattemptedtoapply
i use ? as a stop to specify an action on the receiving end so that’s not really acceptable even if it did relocate to the proper page
function openUrl(){
var url = 'http://www.myurl.com/page.php#' + document.getElementById('searchtext').value;
window.open(url, '_self');
//window.location = url;
}
</script>
<div id="searchForm" align="center">
<form id="searchForm">
<input class="searchbutton" type="submit" value="Search" onclick="openUrl()">
<input class="searchfield" id="searchtext" name="searchTerm" type="text" value="" style="WIDTH: 280px;">
</form>
Here’s something you can try, instead of trying to use JavaScript use HTML instead.
<form id="searchForm" action="url_here" method="get">
So what this will do by default is append any input field value to the URL rather then using extra code to do the work the browser can do.
ugggghhhh… No dice.
I tried that too before coming here to post and still all it does is put ?searchTerm= onto the end of the current URL.
<INPUT TYPE=“button” VALUE=“Home Page” ONCLICK=“window.location.href=‘http://www.google.com’”>
works by itself but how do i go about bring the hash value with me O_O while using type submit so i can check for the enter key in the search field
How about using onchange for the text field and have a function that changes the url?
function change_url(){
some script to construct url
some script to update form action
}
</script>
<div id="searchForm" align="center">
<form id="searchForm" action="change_this" method="get" >
<input class="searchbutton" type="submit" value="Search" onclick="openUrl()">
<input class="searchfield" id="searchtext" name="searchTerm" type="text" value="" style="WIDTH: 280px;" onchange="change_url()" >
</form>
Try this, it works for me up to the point of opening google.com but google does not seem to respond very well at the url Google
<script type="text/javascript" >
function changeUrl(){
var hash = '#' + document.getElementById('searchtext').value;
var url = "http://www.google.com" + hash;
document.getElementById('searchForm').action = url;
}
</script>
<form id="searchForm" action="change_this" method="get" >
<input class="searchbutton" type="submit" value="Search" >
<input class="searchfield" id="searchtext" name="searchTerm" type="text" value="" style="WIDTH: 280px;" onchange="changeUrl()" >
</form>
You can take over the submit event, so that you can use location.href to navigate to where you need it to go.
Let’s start though with something that will work even when scripting is not available, even though it uses a querystring instead of a hash.
I’ve made some adjustments to your sample form to fix problems such as invalid duplicate id’s, and inline styles.
<html>
<head>
<style type="text/css">
#searchForm {
text-align: center;
}
.searchfield {
width: 280px;
}
</style>
</head>
<body>
<div id="searchForm">
<form id="search" action="http://www.google.com/search">
<input type="submit" value="Search" class="searchbutton">
<input id="searchtext" name="q" class="searchfield">
</form>
</div>
</body>
</html>
Is a successful form-based search what you need? Because if so, the above code works without needing any scripting at all.
Put in a search term of “kittens” and the form takes you to google’s result page: http://www.google.com/search?q=kittens
no -_- i need it to be google.com#kittens
sorry tla, your’s still didn’t work for me either… i ended up with going to the page but getting searchpage?searchTerm=sdf rather than searchpage#sdf
The reason why is because google changes the url once it gets to it and about that you will be able to do nothing since you have no control over how google will handle the search because the action is changed to Google
I’m not trying to get to google. I’m trying to get to my own search engine that accepts a hash value on page load to preload results based on a filter from a different page.
That’s okay, because now we use scripting to take over the submit event and perform the task that is needed.
Something like this should do it:
var form = document.getElementById('search');
form.onsubmit = function () {
var form = this,
domain = form.action.match(/^(http:\\/\\/[a-zA-Z.]+)/)[1],
searchtext = form.elements.q.value;
location.href = domain + '#' + searchtext;
return false;
}
Or if you don’t want to worry about the non-scripted situations working, you can put the domain you need in the form action, and simplify things to this:
var form = document.getElementById('search');
form.onsubmit = function () {
location.href = this.action + '#' + this.elements.q.value;
return false;
}
heh it’s still returning this instead of just a hash
myurlhere.com/searchpage?searchTerm=test
you got my hopes up lol
i guess there’s no way around it but to build a complicated exception into my code.
the weird part is that in every thing we’ve tried the “#” just dissapears and gets replaced by ?fieldname=
o_O damn html…
Then most likely you are running the script before the form even exists yet on the page.
Put the script at the end of the body, just before the body tag. That’s where they’re supposed to improve web-page loading performance, and to achieve ease of access to on-page elements.