Tag archive for: HTML

How to make a HTML search box with the input text field and search button within the same enclosing box

Since Google had indexed most of the content from my website, Google Custom Search is the easiest way for me to implement site-wide search. In addition to fast searching, Google Custom Search also comes with AdSense monetization.

Given these points and some time on hand, I had recently implemented site-wide search with Google Custom Search.

In addition to building the search page to display the search result, there is a need for a HTML search box beside the top navigation links:

Techcoil search box as at 20180616

Since I had spent quite a bit of time on building the search box, I decided to document the steps in this post for future references.

With this intention, this is how to make a HTML search box with the input text field and search button within the same enclosing box.

How to send a HTTP GET request to an API endpoint and add the response as HTML elements to the DOM with jQuery

jQuery is a JavaScript library that simplify client-side scripting of HTML.

In case you want to augment your webpage with data from an API endpoint, you may want to look at jQuery.

With this purpose in mind, this post discusses how to send a HTTP GET request to an API endpoint and add the response as HTML elements to the DOM with jQuery.

How to reflect cart count at the cart icon as and when products are added or removed from the cart in WooCommerce

Although there is a hassle free option of using WooCommerce.com as your e-commerce store, you may prefer to host your own.

If you are familiar with WordPress and wish to host your e-commerce website, WooCommerce is also available as a WordPress plugin that augments WordPress with e-commerce website features.

Although more work needs to be done for self-hosted WordPress sites, we have the option of creating our own themes without having to pay additional charges on top of the web hosting fees.

When it comes to creating our own WooCommerce themes, one feature that we may want to implement would be to show the number of products that had been added to our WooCommerce cart near the shopping cart icon as and when products are added or removed from the cart.

This post documents how we can reflect cart count at the cart icon as and when products are added or removed from the WooCommerce shopping cart.

How to use jQuery to detect user checking and unchecking a checkbox

I wanted to show / hide some input fields when a user checks / unchecks a checkbox on a web page.

To investigate how I can use jQuery to detect user checking and unchecking a checkbox, I cooked up a scenario.

There is a page with a HTML checkbox and a message. When the checkbox is checked, the message shows; if not, the message hides.

Pretty straightforward scenario to get me into working out a proof of concept to fulfill my objective.

How to use jQuery to access the DOM structure of parent HTML webpage from within the child HTML window

Sometimes, instead of showing a dialog box within a web page, it is more strategic to spawn a new HTML window as a dialog box to capture user input. This technique is especially useful when there are Java applets embedded in the web page, as Java applets tends to appear in front of every visual element on a HTML web page. There is no easy solution to place a visual element, for instance a HTML div, on top of Java applets.

Spawning another web page in another window is straightforward, but how do I send data collected from a child HTML window back to the parent HTML webpage? With this question in mind, I set out to find an answer.

How to use jQuery to intercept form submissions and validate form input

There came a time where I had to create a HTML form to accept inputs from users in order to generate a report. Before submitting the form to the back end server, there are some validations that I can perform on the data at the client side to reduce the number of HTTP responses that my server had to generate for unwanted inputs. The cost savings is especially significant when the form submission contains large file as part of the HTTP request.

I chose to use jQuery for intercepting the form submissions and do some data validation before I allow the browser to create a HTTP request to the server. This post documents a proof of concept, as a stepping stone, to realize my objective.