Include a search button within the search box of the Custom Search Engine

Can anyone help me with adding a search button to my HTML code? I've tried implementing it, but when I try to search something on a website like YouTube, the results show up without displaying my search query. How can I fix this issue and what changes do I need to make in the code provided below? Thank you.

.main{
position: absolute;
top: 10px;
    left: 25%;
width: 50%;
height: auto;
text-align: center;
}
.q{
padding: 5px;
width: 90%;
margin-top: -30px;
border: solid 1px #c68e00;
font-size: 17px;
font-family: Arial;
height: 40px;
}
<script>
    (function() {
        var cx = '004533415228465222070:r2ak9s12hwi';
        var gcse = document.createElement('script');
        gcse.type = 'text/javascript';
        gcse.async = true;
        gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx;
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(gcse, s);
    })();
</script>
<gcse:searchresults-only></gcse:searchresults-only>
</div>

<div class="main">
<br/><br/>
<form action="" method="GET">
 <input class="q" name="q" placeholder="Search by Name or type URL" title="Search ..." value="" /> 
</form>

javascriptjqueryhtmlsearchgoogle-search-api

Answer №1

I am uncertain of the outcome, but I am hopeful that this will work.

Inserted id="searchbox" into the search input and included these two lines.

var urlParams = new URLSearchParams(window.location.search);
document.getElementById('searchbox').value = urlParams.get('q');

Your entire code should now appear as follows.

<div class="main">
    <br/><br/>
    <form action="" method="GET">
 <input class="q" name="q" id="searchbox" placeholder="Search by Name or type URL" title="Search ..." value="" /> 
</form>
</div>
<script>
    (function() {
        var cx = '004533415228465222070:r2ak9s12hwi';
        var gcse = document.createElement('script');
        gcse.type = 'text/javascript';
        gcse.async = true;
        gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx;
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(gcse, s);
    })();
var urlParams = new URLSearchParams(window.location.search);
document.getElementById('searchbox').value = urlParams.get('q');
</script>
<gcse:searchresults-only></gcse:searchresults-only>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Fade between two divs using jQuery works perfectly with images, but unfortunately, it does not work with iframes

Edit: Uploaded live, with images, and with iframes I am experimenting with making pane1 fade into pane2. It successfully works with images, but I am curious if it can be achieved with iframes. Is this feasible? Any insights or suggestions are much appreci ...

jqueryhtmliframetransitionfade

Implementing closure within a recursive function allows for better control

One of my functions is designed to take a parameter and print the last number in the Fibonacci Series. For example, if the parameter is 3, it would return 2 as the series progresses like 1, 1, 2. function recursionFib(num){ if(num ...

javascript

Fast method or tool for generating a detailed CSS element list from deeply nested elements

I have been using Chrome dev tools to work on a code base that was not created by me. There are numerous deeply nested elements scattered throughout the code. I find myself having to manually search through the HTML structure in order to select them with ...

htmlcssgoogle-chrome-devtools

AngularJS is throwing an error because the current.$$route object is not defined

Having worked with AngularJS, I encountered an error when trying to set a title. Here is my App.js 'use strict'; var serviceBase = 'http://www.yiiangular.dev/' var spaApp = angular.module('spaApp', [ 'ngRoute' ...

javascriptangularjs

Firebase Firestore is returning the dreaded [object Object] rather than the expected plain object

I've created a custom hook called useDocument.js that retrieves data from a firestore collection using a specific ID. However, I'm encountering an issue where it returns [object Object] instead of a plain object. When I attempt to access the nam ...

javascriptreactjsfirebasegoogle-cloud-firestore

Adjust the position of elements based on their individual size and current position

I am faced with a challenge regarding an element inside a DIV. Here is the current setup... <div id="parent"> <div id="child"></div> </div> Typically, in order to center the child within the parent while dynamically changing i ...

javascriptjqueryhtmlcss

Using an image as a button in Vue.js: A step-by-step guide

I'm currently working on creating a login button within a single-file-component using Vue.js in my Rails application with a Vue.js front-end. The purpose of this button is to redirect users to an external login page when clicked. I am wondering how I ...

javascripttypescriptvue.jsvue-component

Making an asynchronous call from Index.html to PHP Script

I am currently working on implementing an AJAX call to my PHP Script. While I can successfully echo the results from my data.php file, I am now facing a challenge regarding how to initiate the call from index.html in order to retrieve the table results s ...

javascriptphphtmlajax

Troubleshooting problem in Vercel with Next.js 13 application - encountering "Module not found" error

Encountering a deployment issue with my Next.js 13 application on Vercel. I recently implemented the Parallel Routes feature of Next in my codebase. While pushing the changes to create a new pull request on GitHub, the branch's deployment on Vercel is ...

javascriptreactjsnext.jsdeploymentvercel

I'm curious about the potential vulnerabilities that could arise from using a Secret key as configuration in an express-session

Our code involves passing an object with a secret key's value directly in the following manner --> app.use(session({ secret: 'keyboard cat', resave: false, saveUninitialized: true, cookie: { secure: true } }) I am pondering wheth ...

javascriptnode.jsexpressexpress-session

Issues arise when using res.send() with ExpressJS and Mongoose

Initially, I have multiple callbacks that need to be executed before sending a res.send() to construct a JSON API: app.get('/api', function (req, res){ ... function logPagesId() { console.log("load: " +pagesId); c ...

javascriptnode.jsmongodbexpress

How can we verify email addresses and URLs in PHP? Let's discuss converting this validation process

After studying the code extracted from the jquery.validate plugin, I find it quite challenging to decipher. My goal is to convert this code into PHP and I would greatly appreciate any assistance in understanding each segment of the regular expression codes ...

phpjavascriptjqueryregexjquery-validate

What is the process of embedding a string with pug code into a pug file?

How can I interpolate a string with pug formatted code in a pug file? Here is what I have tried: - var text = "i.home.icon" div= text div !{text} div #{text} div ${${text}} div {{text}} div {text} div \#{text} div \{text} div ${text} div # ...

javascriptexpresspugstring-interpolation

Breaking apart a pipe-separated text and sending it through a JavaScript function

CSS: <div class="pageEdit" value="Update|1234567|CLOTHES=5678~-9876543?|5678"> <a href="https://host:controller">Update</a> </div> Trying to retrieve the data within the div and pass it into a JavaScr ...

javascripthtmljqueryjsp

What is the best way to retrieve the value of a button using javascript?

After trying to extract the value from a button in JavaScript, here is the code I used: for(i=0; i<cars.length;i++){ var p = `<button id="myBtn" onclick="myFunction()" value="${cars[i]}">${cars[i]}</button>` func ...

javascripthtml

The authentication callback function fails to execute within Auth0 Lock

I'm having an issue with logging into my application using Auth0. I have integrated Auth0 Lock version 10.3.0 through a CDN link in my project and am utilizing it as shown below: let options = { disableSignupAction: true, rememberLastLogin: f ...

javascriptangularjstokenjwtauth0

The dilemma between installing Electron or installing Electron-Builder: which one

When it comes to installing Electron for an Electron app with React, the method can vary depending on the tutorial. Some tutorials use electron-builder while others do not, but there is little explanation as to why. First: npx create-react-app app cd app ...

javascriptnode.jsreactjsnpmelectron

Issue with FullPage.js scrollOverflow feature not properly accommodating loaded content

I am currently working on a full-page website and have opted to utilize the Fullpage.js plugin. However, I seem to be facing some challenges when it comes to loading content through an AJAX request. The pages are being populated with JSON content, but for ...

javascriptjqueryajaxfullpage.jsslimscroll

Establishing the value of "document.cookie"

Encountering issues while trying to set a cookie using different methods: Method 1: document.cookie = name + "=" + value + "; expires=" + date.toUTCString() + "; path=/"; This method only sets the value up to "name=value" wh ...

javascriptangulartypescriptcookies

Using CURL in PHP to make a post request on a form

this is the form: <textarea name="message" id="messageContent" rows="18" wrap="virtual" tabindex="2"></textarea> <span id="formSubmit"> <a href="#" class="formSubmit" tabindex="3"> <img src="/clear.gif" class="master-sprite ...

phpformsjquerycurl