I have a wordpress site which I want to make a search utility for it in menu.
I know if we put this to browser :
www.yoursite.com?s=keyword
It searches all posts for keyword in their title.
But I don't how to make the form and use Javascript to handle that.
Any ideas wil be helpful
What I have tried in header.php :
<script>$(document).ready(function(){
function search(){
var uri = $("#searchtxt").val();
window.location.href="www.codepro.gq?s="+uri;
return;
}
})
</script>
In menu part :
<form class="navbar-form navbar-left">
<div>
<input type="text" id="searchtxt" placeholder="Search" />
</div>
<button onclick="search()">Search</button>
</form>
I don't use jQuery (I am an amateur)
I did it only with Javascript, edit it as you want.
Here's the Javascript & Form Code, I changed the url to "http", I don't know but there was a problem when I used "www" with the url
function search(){
var uri = document.getElementById("searchtxt");
window.location.href = "http://www.codepro.gq?s="+uri.value;
return;
}
<form class="navbar-form navbar-left">
<div>
<input type="text" id="searchtxt" placeholder="Search" />
</div>
<input type="button" value="Search" onClick="search()"/>
I changed the <button> tag to <input> tag as different browsers use different default types for the <button> element.
Related
How to follow a link with a value in the input field without writing additional javascript, i.e. all code in html input and button tags?
Let's say there is a Google site for search and the search line is in input, so that when you click on the button, the link https://www.google.com/search?q= and the value of the input field, for example, text are substituted:
https://www.google.com/search?q=text
<input type="text" id="search" name="search" value="text">
<button onclick="code">Follow a search link with a value in input</button>
To do this without any JS you simply need to create a <form> element whose target is google.com/search.
The only things to note is that the action should be get and the input name needs to be q so that the correct querystring format is used when the form is submit. Try this:
<form action="https://www.google.com/search" method="get">
<input type="text" id="search" name="q" value="" required />
<button type="submit">Follow a search link with a value in input</button>
</form>
"It’s necessary without using a form, you can have js code"
Well, there is a js code that you can use to achieve this
<input type="text" id="search" name="search" value="text">
<button onclick="search()">Follow a search link with a value in input</button>
<script>
function search() {
const searchValue = document.getElementById('search').value
window.location.href = `https://www.google.com/search?q=${ searchValue }`
}
</script>
Form action should be set to the website you need, google in this case
Form method should be GET
Form fields must be named, like the parameters in the query string
Example:
<form action="https://www.google.com/search" method="GET">
<input type="search" placeholder="Search..." name="q" />
<input type="submit" value="serach"/>
</form>
I want to change THISVALUE using a textbox and submit button, which then refreshes the data on the page:
<form id="newssearch" action="#">
<input type="text" size="30" maxlength="155" name="search" id="search" />
<input type="button" name="submit" value="Search" onclick="showElements();" />
</form>
<div class="sm" data-type="static" data-symbol="THISVALUE" data-size="medium" data-logscale="on" data-chart-type="ca" data-timeframe="1y"></div>
<div class="sm" data-type="news" data-symbol="THISVALUE"></div>
Also: you press the button and it refreshes the page with the new data-symbol value. That value stays for the next visit to the page or until another search is performed.
Perhaps it would be better to do this in php?
You can also use the setAttribute() function
function showElements(){
document.getElementsByClassName('blah')[0].setAttribute("data-symbol",document.getElementById('search').value);
}
First off - data-symbol is not an element. It is an attribute and to be more specific - a data attribute.
Learn more about data attributes here: Using data attributes | MDN
I assume you want the data submitted in the form to get into the data-symbol attribute.
Checkout the working code snippet below:
function showElements(){
// just copy over the search text into the data attribute
document.getElementsByClassName('blah')[0].dataset.symbol = document.getElementById('search').value;
}
<div class="blah" data-type="cur" data-symbol="THISVALUE"></div>
<form id="newssearch" action="#">
<input type="text" size="30" maxlength="155" name="search" id="search" />
<input type="button" name="submit" value="Search" onclick="showElements();" /> <!-- no need to pass any arguments to this function, we can get data using element ID -->
</form>
Check the result using Developer Tools (I have used Chrome here):
trying to open search results in window (enter and click) it looks like the code is doing what I want it to do except accessing the actual search url any help is greatly appreciated.
the site is also on dev so you can see what I mean if you enter a search term.
http://staging.asla.org/2014awards/index.html
Code:
<script type="text/javascript">
$(document).ready(function() {
$('form[role="search"]').submit(function() {
var url = "http://asla.org/awardssearch.html";
url += "?s=" + $('#GoogleCSE').val();
window.location = url;
});
});
</script>
<form class="navbar-form navbar-right" role="search">
<div class="search">
<input id="GoogleCSE" type="text" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" value="Search All Awards" name="Search All Awards" />
<input id="submit" type="submit" value="Search" />
</div>
</form>
Setting the location doesn't work beacuse the browser has already started to post the form. The browser will go to the page specified in the action attribute in the form, and as you don't have one, it will use the current page.
Use the preventDefault method to stop the posting of the form:
$('form[role="search"]').submit(function(e) {
e.preventDefault();
...
The issue caused is because of the on focus and onblir event where you are trying to show a placeholder text,
Change your input text to
<input id="GoogleCSE" type="text" placeholder="Search All Awards"/>
It should work.
Given this code, it never works and always returns true whatsoever ?
<form id="my-form" data-validate="parsley">
<p>
<label for="username">Username * :</label>
<input type="text" id="username" name="username" data-required="true" >
</p>
<p>
<label for="email">Email Address * :</label>
<input type="text" id="email" name="email" data-required="true" >
</p>
<br/>
<!-- Validate all the form fields by clicking this button -->
<a class="btn btn-danger" id="validate" >Validate All</a>
</form>
<script>
var $form = $('#my-form');
$('#validate').click (function () {
if ( $form.parsley('validate') )
console.log ( 'valid' ); <-- always goes here
else
console.log ('invalid');
});
</script>
So my question is if there is a way to trigger parsley validation without adding a submit button ?
$form.parsley('validate') is 1.x API. It was deprecated in 2.x versions you might use.
Try $form.parsley().validate() instead.
Best
I've been searching high and low to try and make the form validation work with a non-form tag.
I guess my biggest gripe with the framework is that it doesn't work out-of-the-box with non-form elements.
I would be ok using a form element if it didn't scroll to the top of the page every time it tries to validate. Because this behavior is inherent in how form works, there is only this hack to fix it.
Just as a side note, using data-parsley-validate attribute on the div tag also works. You can also initialise the form as normal (meaning you can subscribe to the validation).
example html:
<div id="signupForm" data-parsley-validate>
... put form inputs here ...
<button id="signupBtn">Sign me up</button>
</div>
Just make sure to put js in:
var $selector = $('#signupForm'),
form = $selector.parsley();
form.subscribe('parsley:form:success', function (e) {
...
});
$selector.find('button').click(function () {
form.validate();
});
if you put type="button" on the button, it won't refresh and scroll to top of page when clicked.
I'm writing a new tab extension for Firefox, and I'd like to have a box that you can type in and have it search Google. I really don't want to use a custom Google search, just because I feel like it's inconsistent and seems cheap.
All that it's supposed to do is add your query to the end of the google URL (in the correct formatting, of course) and redirect you to that page. I have it working sometimes, but not all of the time.
Here's the code I have:
JS:
var textstring;
//Gets the text from the form
function getQ() {
textstring = document.forms['Search'].elements[0].value;
}
//Does a Google Search
function googleSearch() {
window.location ="http://www.google.com/search?q="+textstring;
}
//main function to run everything
function main() {
getQ();
googleSearch();
}
HTML:
<form name="Search" >
<div id="test1">
<input type="text" name="q" size="31" maxlength="255" value="" />
</div>
<div id="test2">
<input type="button" value="Google Search" onclick="main();" />
</div>
</form>
Not sure why that last /form isn't showing up, but that's in there just so you guys know.
It works like 25% of the time. I can't figure out what's wrong with it. Could it just be that I'm testing it locally? I've been testing it in Firefox, but it seems to have the same issue in IE or Chrome, as well.
Why don't you just submit to google (and avoid all the javascript) ?
<form name="Search" method="get" action="http://www.google.com/search" >
and use a normal submit button like
<input type="submit" value="Google Search" />
Since you have named the input element q and the method of the form is get it will create the correct url.
example: http://jsfiddle.net/gaby/gxun9/