The active tabs or placeholders do not update properly when I click on them

Is there anyone who can help figure out why the tabs are not functioning as expected? The goal is for the tabs to change the input field placeholder and perform a search based on the active tab.

If you're able to assist, please review my complete code on this fiddle: https://jsfiddle.net/4bcog3f8/

          <script type="text/javascript">
                            function searchEncore() {
                                var encoreBaseURLInput, encoreBaseURL, searchInput, scopeInput, searchString, scopeString, locationHref, charRegExString, base64Regex;
                                /*base64_encoding_map includes special characters that need to be
                                 encoded using base64 - these chars are "=","/", "\", "?"
                                 character : base64 encoded */
                                var base64_encoding_map = {
                                    "=": "PQ==",
                                    "/": "Lw==",
                                    "\\": "XA==",
                                    "?": "Pw=="
                                };

                                var escapeRegExp = function(string) {
                                    return string.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
                                }
                                encoreBaseURLInput = document.getElementById("encoreBase");
                                searchInput = document.getElementById("encoreSearchInput");

                                if (searchInput && encoreBaseURLInput) {
                                    encoreBaseURL = encoreBaseURLInput.value;
                                    searchString = searchInput.value;
                                    for (var specialChar in base64_encoding_map) {
                                        charRegExString = escapeRegExp(specialChar);
                                        base64Regex = new RegExp(charRegExString, "g");
                                        searchString = searchString.replace(base64Regex, base64_encoding_map[specialChar])
                                    }
                                    searchString = encodeURIComponent(searchString);

                                    scopeInput = document.getElementById('encoreSearchLocation');

                                    if (scopeInput) {
                                        scopeString = scopeInput.value;
                                    }

                                    if (scopeString) {
                                        scopeString = encodeURIComponent(scopeString);
                                        locationHref = encoreBaseURL + "C__S" + searchString + scopeString + "__Orightresult__U";
                                    } else {
                                        locationHref = encoreBaseURL + "C__S" + searchString + "__Orightresult__U";
                                    }

                                    languageSetting = document.getElementById("encoreLanguage");

                                    if (languageSetting) {
                                        locationHref = locationHref + "?lang=" + languageSetting.value;
                                    }

                                    window.location.href = locationHref;
                                }
                                return false;
                            }
                        </script>

Answer №1

I trust this solution will be beneficial for you

JavaScript

//Clear Input Value
var inputField = document.querySelector('[name="encoreSearchInput"]');
inputField.setAttribute('onblur','');
inputField.setAttribute('onfocus','');
inputField.setAttribute('value','');
//Set Default Placeholder
inputField.setAttribute('placeholder','SEARCH CATALOG');
inputField.addEventListener('focus',function(){
    this.setAttribute('placeholder','');
});
inputField.addEventListener('blur',function(){
    this.setAttribute('placeholder','SEARCH '+document.querySelector('.uk-active a').textContent.toUpperCase());
});

//Tab Click Event
var tabLinks = document.querySelectorAll('.uk-tab a');
Array.from(tabLinks).forEach(link=>{
    link.addEventListener('click',function(e){
        e.preventDefault();
        var tabs = document.querySelectorAll('.uk-tab a');
        Array.from(tabs).forEach(tab=>{ tab.parentNode.classList.remove('uk-active'); });
        this.parentNode.classList.add('uk-active');
        document.querySelector('[name="encoreSearchInput"]').setAttribute('placeholder','SEARCH '+this.textContent.toUpperCase());
    });
});

Access the jsfiddle demo at: https://jsfiddle.net/khadkamhn/dajxrLwn/

Answer №2

Creating Tabs with Simple CSS:

.tab, .linkinp {display: none;}

/* Styling for the tabs */
#link1:checked ~ #tab1,
#link2:checked ~ #tab2,
#link3:checked ~ #tab3 {display: block;}

/**************/

.linkinp:checked + .link {
  background-color: #259; color: #fff;
}

.link {
  width: 100px; display: inline-block;
  text-align: center; padding: 3px 0;
  background-color: #999; transition: 0.2s;
  border: 1px solid #333; cursor: pointer;
}
.tab {
  margin-top: 20px; height: 60px;
  padding-left: 5px; border-left: 3px solid #236;
}
<input id="link1" class="linkinp" name="link" type="radio" checked>
<label for="link1" class="link">First</label>

<input id="link2" class="linkinp" name="link" type="radio">
<label for="link2" class="link">Second</label>

<input id="link3" class="linkinp" name="link" type="radio">
<label for="link3" class="link">Third</label>

<div id="tab1" class="tab">1 - 1 - 1 - 1 - 1</div>
<div id="tab2" class="tab">2 - 2 - 2 - 2 - 2</div>
<div id="tab3" class="tab">3 - 3 - 3 - 3 - 3</div>

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

Get the maximum width in pixels through JavaScript when it is specified in different units within the CSS

I'm looking to retrieve the max-width value in px from CSS for use in a JavaScript code. The challenge is that this value might be specified in different units in the CSS file. Any suggestions on how to achieve this using JavaScript? const element = ...

chrome side column must be set to 100% height

Having trouble with setting height to 100%. I have a list of items that need to be distributed to match the height of the side image. It works fine when I use a fixed height, but not with a percentage. The issue arises because the website is responsive a ...

What is the overlay feature in Material-UI dialogs?

I recently started using the React-Redux Material-UI package found at http://www.material-ui.com/#/components/dialog My goal is to implement a grey overlay that blankets the entire dialog element, complete with a circular loading indicator after the user ...

Dealing with AJAX errors in React components after mounting

Facebook suggests that the optimal method for loading initial data in a React component is to execute an AJAX request within the componentDidMount function: https://facebook.github.io/react/tips/initial-ajax.html It would look something like this: ...

Accessing certain metafield data from a bulk of product uploads on Shopify

After setting up a "Product Reference" and "List of products" metafield, I can now easily populate it with multiple products. However, my goal is to showcase the images and titles of these added products individually for customization purposes. https://i.s ...

What is the best way to create a shape using CSS?

In my chat application, I have a functionality where replies on a chat are initially hidden and represented by a count in a red box. When the user clicks on the red button, the replies from other users are revealed along with an input box for writing a r ...

Do not delay, MongoJS function is ready to go!

I have a function set up in my Express JS endpoint that uses 'await' to retrieve data from a Mongo DB using Mongo JS. Function:- async function getIntroducer(company){ const intro = await dbIntro.collection('introducers').findOne({c ...

Unable to display images on mobile devices using HTML

I recently created a website using HTML and CSS. I have successfully added images to some of the web pages, and they display properly on laptops and desktops. However, I am facing an issue where the images do not appear on small screens, even though all im ...

Thick labels in Chart.js are shortened with three dots

Is there a way to show the entire label without it getting truncated with 3 dots? I have experimented with different options from https://www.chartjs.org/docs/master/axes/index, including padding, but so far I haven't been successful. The full date da ...

Javascript functions triggering repeatedly

I'm working on creating a fun trivia quiz using JavaScript functions. Each question involves globally defined functions called "right" and "wrong" that are supposed to update the score accordingly. However, I've run into an issue where the quiz s ...

Testing Ajax code encounters error

Currently, I am running a code test with Jasmine and setting up a mock object for the ajax method. spyOn($,'ajax').and.callFake(function(e){ console.log("is hitting"); }) In order to test the code snippet below: $.ajax({ url: Ap ...

What is the best way to completely reset a personalized AJAX object?

I've been passing AJAX parameters through a new object and then using that object with jQuery's $.ajax(). However, I'm struggling to fully reset the object. Despite knowing there must be a simple and elegant solution, I haven't been abl ...

The smooth scroll feature is not functioning properly on the animated mouse-scroll down button

I've recently added an Animated Mouse Scroll Down button on my website. However, when I click the button, the smooth scroll feature is not working as expected. Important Note: I already have a separate button for navigating to the next section where ...

Executing a request using jQuery's ajax method to perform a

I'm having trouble with my ajax call. I just want to show the json data from my php file but it's not working. Any assistance would be greatly appreciated. My PHP script (phonecall.php): <?php $con = mysqli_connect('localhost',&ap ...

Having trouble locating an element using Selenium?

I'm attempting to extract the price of a flight from Google Flights website using Selenium, but I am unable to locate the specific element on the page. Even after scraping the entire page, the element remains elusive. It has been suggested that it may ...

Is it possible to incorporate both Bootstrap 3 and Bootstrap 4 within the same HTML file for separate div elements on a webpage? If so, what is the best way to achieve this?

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Using Bootstrap 3 and Bootstrap 4 in the Same HTML File</title> </head> <body> <div class="bootstrap3"> Some code her ...

Sending a JSONP request to a PHP script

For my application submission, I am trying to send a JSON object to a PHP script that will return a JSON response. The challenge here is that the domain does not comply with the same-origin policy, meaning the JSON is being sent from a different domain. Up ...

Embarking on the journey of launching an Angular application on AWS CloudFront

I have a Laravel PHP application that functions as an API accessed by an Angular single-page app. Currently, the Angular app is situated within the public folder, but I aim to separate it so I can deploy it through Amazon CloudFront. I came across this ar ...

AngularJS: Patience for an asynchronous request

I'm having trouble understanding the concept of promises in AngularJS. Here is a provider I have: var packingProvider = angular.module('packingProvider',[]); packingProvider.provider('packingProvider',function(){ ...

AngularJS ng-view is a directive that views the application

I am currently struggling to create an angular js menu. I have been working on my code, but the pages are not loading as expected. Do you think I missed something or did I forget to include all the necessary scripts? I am fairly new to angular and could us ...