How to send a value from a search box to a URL? - javascript

I have a search box and I have no clue how to append the string that the user searches to url after a user clicks search.
How would this work?
I have a reference code but I want to know how to append the value that a user searches:
onclick="location.href = $(this).attr('href')+'?q1=Asustablet&x=70&y=14=siys';return false"
Here is my jsFiddle

yu can't use jquery inline. you can use its events like this:
$('#search-button-4').click(function(){
window.location.href = $(this).attr('href')+'?q1=Asustablet&x=70&y=14=siys';
});
DEMO

May I suggest using PHP as it will be much easier,
Add this inside PHP tags and set the variable for $user_search_input
header("Location: ".$_SERVER['REQUEST_URI']."?search=".$user_search_input);
I'm sorry if you needed a Javascript version but if not I highly suggest PHP for it has a lot of functionality being very powerful and has a lot of potential.

Related

Retrieve link address from Span Class in table

I'm currently learning to code in javascript and jquery so my knowledge is exceptionally poor. Im trying to edit a script(with lots of googling) that was written in tampermonkey by a friend and I assume I havent been able to find the answer through search as I have been using the incorrect terms - but dont know what they are.
this is the HTML
<span class="village_anchor contexted" data-player="9281645" data-id="804">
Black Reaper (492|489) K44
<a class="ctx" href="#"></a></span>
All I want to do is get the address that links to and then use location. to go there.
Once again, apologies for my lack of prowess and thankyou for any help.
All you have to do, is to select the spanby his class and then finds the a tag you want.
So you can write this:
var linkhref = $(".village_anchor").find("a").first().attr("href");
Then, you can do the "redirection":
document.location = linkhref;
Use this code.
var address = $('span.village_anchor.contexted a:eq(0)').attr('href');
window.location.href = address; //to open the link in same page.

Javascript and PHP in harmony - Search function

I am currently constructing a "datatable"-ish search function.
When a user inputs something into a search box, I'd like to update the div containing its values.
Currently I do this using this input field:
<input type="text" id="IdSearch" onkeyup="Search()" value="<?php echo $searchtext; ?>" onfocus="this.value = this.value;" name="zoeken" autofocus>
The onfocus="this.value = this.value; makes sure the selector is behind the values after the page is reloaded.
<script>
function Search() {
var x = document.getElementById("IdSearch").value;
window.location.href = "index.php?search" + x;
}
</script>
And then
if (isset($_GET['search'])) {
$searchtext = $_GET['search'];
echo $searchtext;
$sql = "SELECT blabla FROM blabla";
//execute sql statement and update the table now..
} else {
//generate the standard table
}
This works, it outputs a correct result, but it's sluggish. The page needs to reload every time you input a character.
So maybe, just maybe, I can somehow retrieve the searchbox' value every time a key pressed, and update my table that way?
I know PHP runs and then doesn't run again without a page reload. Maybe I can reload certain elements? I don't know.
Please, don't go all "PHP runs on the server" on me. I know, that's why I'm currently using this method. I am not even going to attempt to learn ajax in the timespan I have to finish this.
Any help is appreciated.
I am not even going to attempt to learn ajax in the timespan I have to finish this.
I'm afraid you'll have to either learn AJAX or submit to using iFrames. If you are going to use AJAX, there's some great libraries out there (JQuery or Zepto.js, or maybe qwest) that make it super easy to learn, quickly.
Maybe I can reload certain elements?
Yes! The other option, using iframes is pretty strongly frowned-upon by the web developer community as a whole, but it does exactly what you ask for. Check out MDN's information about scripting iframes. You can use the same properties as you do on window now, but it will still probably be sluggish and most likely quite annoying to work with as well.
So, if you want my advice: use AJAX. But it's your choice!
-Either you use a button " " to submit the search....
and remove the onkeyup="Search()"
<button type="submit">Search</button>
-Or you can try to post your form into an Iframe.... but still will be sluggish.
-The way to go is AJax : dynamically update the content while type-in.
use AJAX (like $.ajax) and create a php response in json. then recreate your content with a javascript template or an MVVM framework like angular.
Another way is return the part of the content than you need and inject with $('#mycontent').html(response).
try jquery $.post it's everything you're looking for.
http://api.jquery.com/jquery.post/

JavaScript edit links

My internal search engine returns search results which look like this:
http://test.mobilkul.se/search/search.html
Right now this JavaScript adds for example "target=blank" and #search="query_String" to each link at the search results.
I am trying to edit the JavaScript so that every link will be changed from
"http://test.mobilkul.se/search/click?query..."
to
"http://test.mobilkul.se/search/fetch?query..."
I have tried to add:
.replace('search/click?query=','search/fetch?query=');
to different places in the JavaScript, but nothing happens..
Can anyone please help?
EDIT:
I have put up a JSfiddle here:
http://jsfiddle.net/shibaja/kK2PZ/
The JavaScript is at the bottom of the html code.
I want to execute these commands on each link:
.replace('&url=%2Fsearch','&urlx=%2Fsearch')
.replace('search/click?query=','search/fetch?query=')
.replace('&title=file','&url=file')
.replace('&spaceId=','&space=')
But I dont know where to put them in the javascript.. Please save my day :)
Something like:
$('a[href*=query]').each(function(){
$(this).attr('href', $(this).attr('href').replace('query', 'fetch'));
});
You can tweak to replace the more specific string (search/click?query).
Also, remember that replace will not affect the original string, but will return you a new one in the way you want.
Hope it helps.
Here is the JSFiddle: http://jsfiddle.net/V8B8N/

Validation before Submitting on prompt page

I am trying to use some sort of script on prompt page using HTML Item, what i am trying to accomplish is after clicking finish button script checked if there is nothing left black. Nothing means any of the prompt/filter (text, prompt, date/time) and if it is than it doesn't go through.
Hope i made things clear.
Thank You
Personally I think the fastest and easiest way if you don't already have a js framework is jQuery validate... check out this page, see the examples and give this a go. I should think the description you've provided will be covered in the basic usage examples for this plugin.
http://docs.jquery.com/Plugins/Validation
If you don't want to use jQuery as in Ben's answer, you can use the form's onSubmit event:
<form id="datform" action="http://path.to/action.script" onsubmit="return isValidated()">
...
...
'</form>
You'll then use a javascript function, ala
<script type="text/javascript">
function isValidated(){
var so=false;
return so;
}
</script>
Personally, I prefer jQuery but this allows for some on-the-fly validation

getting values from javascript to apex code

I need to get a value from a javascript variable into a text field in a visualforce page.
I got it using a command button.But I was wondering if there is any other way of getting it,cz i dun want an onclick event.
Thanks in advance
I can't tell by your comment what event you're listening for, but assuming you know what that will be, just use document.getElementById() or a selector in jQuery to get the input field. If you are using Apex:inputField, define the id attribute with something like 'theField'. When the page is rendered, Salesforce should give an id attribute like 'j_id0:j_id1:theField' to the real tag, but this can and probably will be different every time the page is viewed. That means you're going to need to select the input by a substring. Here's some sample code using jQuery (apologies to any jq gurus out there if it's inefficient-- feel free to improve).
<apex:page>
<apex:includeScript value="{!$Resource.jquery_1_6_1}"/>
<script>
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery('input[id*="theInput"]').val('Hello World');
});
</script>
<apex:form >
<apex:inputText value="{!phonenum}" id="theInput"/>
</apex:form>
</apex:page>

Categories

Resources