The problem of duplicate ids: Once an id is used, it cannot be

Currently, I'm focusing on a specific script :

http://www.andwecode.com/playground-demo/pop-up-login-signup-box-jquery/#

I've made some adjustments to the Gmail and Facebook boxes within this script. When clicking on them, I want them to display a login form. For instance, with the Gmail box:

<a href="#1" class="social_box google" id="login_form" >
<span class="icon"><i class="fa fa-google-plus"></i></span>

By adding the ID : (id="login_form"), the desired function was achieved successfully!

However, the issue arises when attempting to use the same ID for multiple boxes which renders the login button ineffective.

Any suggestions or solutions on how to enable all the boxes to direct to the login form effectively?

htmlcss

Answer №1

The functionality is limited to one scenario because each 'ID' must be unique. If there are duplicate IDs, the system will only recognize the first element and ignore the duplicates.

There are two ways to achieve your desired outcome:

1) Have the same class for all boxes, such as 'box-form' for example.

HTML:

<a href="#1" class="social_box google box-form">
<span class="icon"><i class="fa fa-google-plus"></i></span>
<a href="#1" class="social_box fb box-form">
<span class="icon"><i class="fa fa-google-plus"></i></span>

Jquery:

$('.box-form').click(function() {
    //code
});

2) Assign a different ID to each box and then combine them in jQuery.

HTML:

<a href="#1" class="social_box google" id="login-form">
    <span class="icon"><i class="fa fa-google-plus"></i></span>
    <a href="#1" class="social_box fb" id="fb-form">
    <span class="icon"><i class="fa fa-google-plus"></i></span>

Jquery:

$('#login-form, #fb-form').click(function() {
        //code
    });

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

Is there a substitute for bootstrap select in Rails?

In order to style select tags with Bootstrap, we had to utilize the gem: bootstrap-select However, due to the high volume of options in our data-heavy application, the select dropdowns are causing significant slowdown (loading times, drop down performance ...

cssruby-on-railstwitter-bootstraphtml-select

Use multiple lines to create a stunning visualization using morris.js. Let your data

I need help creating a graph using morris.js with 2 lines. I have two sets of data in one array, but I can't seem to display both lines on the graph simultaneously. When I use todos[0], only the first line is visible, and when I use todos[1], only the ...

javascriptphphtmlcssmorris.js

What is the proper way to arrange CSS classes in a specific order?

I am facing some confusion regarding the CSS and the class attribute. I had always believed that the order in which multiple classes are specified within the attribute value holds significance. It was my understanding that the later class could or should o ...

htmlcss

When a specific JavaScript function is triggered, the value of an HTML control will reset to its original default value

I have a form with a specific requirement. I need to allow users to input data in a text field and press enter, which should dynamically create new controls like another text field, a dropdown menu, and another text field using jQuery. While the functional ...

javascriptjqueryhtml

Tips on avoiding blurring when making an autocomplete selection

I am currently working on a project to develop an asset tracker that showcases assets in a table format. One of the features I am implementing is the ability for users to check out assets and have an input field populated with the name of the person author ...

javascriptjqueryhtml

Create a function that triggers a fade-out effect on one button when another button is clicked

Hello everyone! I'm still getting the hang of things around here so please be kind. I need some assistance with my weather app project. Specifically, I've created two buttons and I want to make it so that when one is clicked, the other fades to g ...

javascriptjqueryhtmlcss

Issue with the image posting function in Laravel - why isn't it functioning properly?

Looking for Assistance I've been working on a simple web application using Laravel 6.0 and have encountered an issue with the image post function I developed. Despite not receiving any error messages, the functionality doesn't seem to be work ...

phphtmllaravel

The detailView feature in wenzhixin bootstrap-table is failing to initialize the child row

I am currently utilizing the wenzhixin bootstrap table and attempting to initialize another bootstrap table within a child row known as 'detailView' in the code. Previously, I was using datatables but found this method to be simpler and more dir ...

jqueryhtmltwitter-bootstrapbootstrap-table

How do you set a background image for the color of the font?

Imagine I have this piece of code: <span>Hello world!</span> Along with the following CSS: span{ color:red; } Is it possible to replace the red value with an image? Something like url(images/text-bg.png);? I am looking to add a texture to m ...

htmlcss

Troubleshooting Problem: Adjusting the hover border color for TextField in ReactJS Material UI

I'm having trouble setting the hover border color of a TextField to a theme variable. It seems that in order for the hover borderColor to work, it needs the "!important" tag. However, I am unsure of how to incorporate this into the theme variable. Th ...

cssreactjsmaterial-ui

Align two containers centrally using absolute positioning inside a division

I am looking for a way to centrally align two "boxes" within a div using CSS. These boxes are positioned absolutely. For reference, here is the JSFiddle link: http://jsfiddle.net/p4sA3/8/ Is there a method to achieve this alignment without specifying spe ...

csshtmlcenter

What steps can I take to make the cards in bootstrap 5.3 responsive for mobile devices?

I'm struggling with my code and need some help. I've been editing it, but things seem to be getting worse instead of better. Specifically, I can't figure out how to set up my container, row, and columns in Bootstrap properly. My site uses ca ...

htmlcsssassbootstrap-5responsive-images

Adjust the source of the HTML5 video tag based on the orientation of an iPad

I am currently coding an HTML5 page specifically for iPad Mobile Safari, which includes a video tag for embedding video files. I have successfully implemented CSS3 media queries to determine the orientation of the iPad. My next challenge is to dynamically ...

ipadhtmlvideocssmobile-safari

Is there a way to retrieve just the parent's value?

<div class="island biz-owner-reply clearfix"> <div class="biz-owner-reply-header arrange arrange--6"> <div class="arrange_unit biz-owner-reply-photo"> <div class="photo-box pb-30s"> <a hre ...

pythonhtmlseleniumselenium-webdriverxpath

Is there a way to trigger the opening of a jQuery-UI-Selectmenu dropdown using the 'ENTER' key instead of the 'SPACE' key as indicated in the documentation?

I'm currently working on implementing jQuery-UI-Selectmenu to create a dropdown feature. As per the API documentation for select menu available at https://api.jqueryui.com/selectmenu/, it mentions that the 'SPACE' key can be utilized to ope ...

htmljquerydrop-down-menuaccessibilityjquery-ui-selectmenu

Attempting to implement a disappearing effect upon submission with the use of JavaScript

I am currently working on implementing a disappearing form feature for a small web application. The idea is that once the initial form is submitted, it will be replaced by a new form. While my current code somewhat works, it only lasts for a brief moment b ...

javascripthtml

Element obscured by dropdown content now clearly visible thanks to dropdown adjustment

Something strange is happening here - the Add question div shouldn't be visible. It's somehow appearing behind the dropdown content. I've attempted to adjust the z-index of the Add Question div, setting it to a lower number than the dropdown ...

htmlcssvue.jsz-index

Steps for resetting a div's display after adjusting the device size

I have a code that displays horizontally on desktop screens and vertically on phones. It includes an x button (closebtn) that is only displayed on phones to close the menu bar. How can I automatically display it again after resizing the page back to deskto ...

javascripthtmlcssresponsive-design

Can you provide step-by-step instructions on how to customize styles with MUI in my application?

I am encountering issues with MUI while attempting to customize the color of my buttons. The two methods I have tried so far have been unsuccessful. For example, Method 1: import React from 'react' import { Typography } from '@mui/material& ...

cssreactjsmaterial-ui

The rendering of HTML DOM is being obstructed on iPhone devices running iOS 13

Currently, I'm developing a web-based URL stream music player using JavaScript. The player functions smoothly on Android devices, but I'm encountering an issue with DOM rendering being blocked on iPhone devices. Despite rearranging the JavaScript ...

javascripthtmliosdomhtml5-audio