Google custom search on wordpress - html

The google custom search has recently stopped working on a client's website. Here's the source code
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1', {language : 'en'});
google.setOnLoadCallback(function(){
var customSearchControl = new google.search.CustomSearchControl('URLGOESHERE/');
customSearchControl.setResultSetSize(google.search.Search.SMALL_RESULTSET);
customSearchControl.draw('cse');
}, true);
</script>
Is this the most recent code to use? I've been looking to see if this code has been changed recently by Google but cannot see anything.
The problem is the search button just doesn't let you search, almost like it's closed off.
Any help would be much appreciated, thanks.

You can use this code in an iframe
<form id="cse-search-box" action="http://google.com/cse">
<input type="hidden" name="cx" value="YOUR SEARCH ENGINE ID goes here" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa" value="Search" />
</form>
<img src="http://www.google.com/cse/images/google_custom_search_smwide.gif">

Related

How can I make a input that goes to a youtube video?

I'm trying to make an input that goes to a youtube video by entering a video ID. What I'm I doing wrong with this code?
<form method="get" action="http://www.youtube.com/embed/">
<input id="searchinput" type="text" placeholder="Enter Video ID" name="" value="">
<input type="hidden">
</form>
You don't necessary use a form like that.
You can use javascript to get value from input and change the page.
<head>
<script>
function goToYoutube(){
const id = document.querySelector("#searchinput").value;
location.href = "http://www.youtube.com/embed/" + id;
}
</script>
</head>
<body>
<input id="searchinput" type="text" placeholder="Enter Video ID" name="" value="">
<button type="button" onclick="goToYoutube()">GO</button>
</body>
I don't know if that link is correct, but the code works!

pre-fill forms without id's

So, I was wondering if it was possible to pre-fill a form that doesn't include IDs. If I had a form like this:
<form action="" method="POST" >
<input type="text" name="title" />
<input type="submit" value="Submit" />
</form>
Would it be possible to pre-fill this form on an already built website, without editing the HTML code?
For reference, the link I would like to do this on is:
https://crystalmathlabs.com/tracker/compcreate.php
Since you asked for a jquery solution you can do this
var i=0;
$('form > input').each(function(){
$(this).attr('id','id'+i);
i++;
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form action="" method="POST" >
<input type="text" name="title" />
<input type="submit" value="Submit" />
</form>

Implementing a evaluation system using jekyll

I am improving a website that was created using Jekyll. This site is a blog for an enterprise, and there are some texts there. I need a plugin, which let the readers evaluate the texts. However, I haven't found any.
Can anyone help me?
This Jekyll site (I created) uses a rating form:
http://www.stresan.de/perfekte-turniervorbereitung/
The code below relies on some Javascript and a form that is submitted through the CloudCannon form handling. Cloudcannon can easily be replaced by some other form service, like FormSpree, FormSubmit, FormBucket or others. The initial value of the post is set in the Front Matter. This rating system is therefore partially fake, but it provides good feedback.
function setreviewval(val){
var i=1;
$('#review img').each(function(){
if(i<=val) $(this).attr('src','http://www.stresan.de/img/star.svg');
else $(this).attr('src','http://www.stresan.de/img/star-empty.svg');
i++;
});
}
function setreviewvaldef(val){
setreviewval(val);
//remove mouseover and mouseout
$('#review img').attr('onmouseover','');
$('#review img').attr('onmouseout','');
}
img {width: 30px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="review"><div>Bewerte diesen Artikel: </div>
<img src="http://www.stresan.de/img/star.svg" onmouseover="setreviewval(1);" onmouseout="setreviewval(4);" onclick="setreviewvaldef(1);$('#rating').val(1);$('#ratingform').show().attr('action',$('#ratingform').attr('action')+'#rating=1');" />
<img src="http://www.stresan.de/img/star.svg" onmouseover="setreviewval(2);" onmouseout="setreviewval(4);" onclick="setreviewvaldef(2);$('#rating').val(2);$('#ratingform').show().attr('action',$('#ratingform').attr('action')+'#rating=2');" />
<img src="http://www.stresan.de/img/star.svg" onmouseover="setreviewval(3);" onmouseout="setreviewval(4);" onclick="setreviewvaldef(3);$('#rating').val(3);$('#ratingform').show().attr('action',$('#ratingform').attr('action')+'#rating=3');" />
<img src="http://www.stresan.de/img/star.svg" onmouseover="setreviewval(4);" onmouseout="setreviewval(4);" onclick="setreviewvaldef(4);$('#rating').val(4);$('#ratingform').show().attr('action',$('#ratingform').attr('action')+'#rating=4');" />
<img src="http://www.stresan.de/img/star-empty.svg" onmouseover="setreviewval(5);" onmouseout="setreviewval(4);" onclick="setreviewvaldef(5);$('#rating').val(5);$('#ratingform').show().attr('action',$('#ratingform').attr('action')+'#rating=5');" />
<form method="POST" id="ratingform" action="{{ page.url }}"><input type="hidden" name="_to" value="jhvanderschee#gmail.com" />
<input type="hidden" name="post" value="{{ page.url }}" /><input id="rating" type="hidden" name="rating" value="" /><br />
<input type="text" name="comment" placeholder="Please clarify your score..." class="form-control" required="required" />
</form>
</div>

Website search field not working - Chrome

So this was brought to my attention today, that our website search field does not work in chrome... I cannot click and enter text into the text field, nor click the search icon to initiate searching...
Sorry I do not know the specifics as to what is causing this, nor did I develop this. One of our developers who left quite some time ago did. I am now in charge of trying to figure this out.
FireFox and IE 11 seems to working fine.
Any insight is greatly appreciated.
<div class="searchbox" id="searchbox">
<script type="text/javascript">
function RunSearch() {
window.location.href = "http://search.domain.com:8765/query.html?ql=&col=web1&qt=" + document.getElementById("search").value;
}
</script>
<div class="formSrchr">
<input type="text" size="20" name="qt" id="search" value="Search" onfocus="if(this.value == 'Search') {this.value=''}" onblur="if(this.value == ''){this.value ='Search'}" />
<input type="hidden" name="qlOld" id="qlOld" value="" />
<input type="hidden" name="colOld" id="colOld" value="web1" />
<input type="image" name="imageField" alt="search" src="/_images/search-mag.gif" onclick="RunSearch();" />
</div>
</div> <!-- /searchbox -->
This is bad code and i suggest an entire re-write.. As for a quick fix..
You could try the following :
var searchTerm = document.getElementById("search").value;
location.assign("http://search.domain.com:8765/query.html?ql=&col=web1&qt=" + searchTerm );
Or
function RunSearch() {
window.location.href = "http://search.domain.com:8765/query.html?ql=&col=web1&qt=" + document.getElementById("search").value;
return false;
}
But dont use this.. re-write it!
My recommendation is to open the Developer tools in chrome and look at the Javascript debug window. That should tell you what's going on in the more general case. In either case, I recommend rewriting that snippet like this:
<div class="searchbox" id="searchbox">
<div class="formSrchr">
<form action="http://search.domain.com:8765/query.html" method="get">
<input type="text" size="20" name="qt" value="Search" onfocus="if(this.value == 'Search') {this.value=''}" onblur="if(this.value == ''){this.value ='Search'}" onmouseup="return false" />
<input type="hidden" name="ql" id="ql" value="" />
<input type="hidden" name="col" id="col" value="web1" />
<input type="image" alt="search" src="/_images/search-mag.gif" />
</form>
</div>
</div>
The standard form element will behave the way it's supposed to without JavaScript. All the named inputs will be added as URL parameters just like it did before. That's what method="get" does. For most forms, the default method="post is best; however, for search you aren't really posting anything. There are some strange proxy servers that disable all HTTP POST calls to prevent people behind that proxy from accidentally sharing information they aren't supposed to. The method="get" allows those people to at least search your site.
NOTE: based on some searching around, Chrome needs you to disable the onmouseup event for focus and blur to work as expected. My HTML form above has that change in it already for you.
In HTML 5, you can simplify it even more by using the placeholder tag. It would look like this:
<input type="text" size="20" name="qt" placeholder="Search" value=""/>
That removes all the Javascript from your search form.

Google Places API <input> not submitting form on enter

Problem:
Pressing Enter does not submit the <form>. The <input> is hooked up to Google Places API, and submit works if it's a plain <input> field.
HTML:
<form>
<input type="text" name="query" id="geocode_query" />
<!-- Working without id attribute:
<input type="text" name="query" />
-->
<input type="submit" value="Submit" />
</form>
Backbone (event: "geocode:result #geocode_query": "doSomething"):
setLocation: (event, result) ->
#location = result
See anything wrong? Thanks so much!