CODEWITHSUNDEEP
htmlcss
Raken_887
Raken_887

Reputation: 39

Mobile and desktop version - Avoiding two elements with the same ID

I have two forms, one for desktop version, and another one for mobile version. The content is the same, but the display is very different.

Because it's a long form, I do have two different "div", one for each version.

<div class="desktop-version">
    <!-- blah blah blah my long form -->
</div>

<div class="mobile-version">
    <!-- blah blah blah my long form -->
</div>

At first, I just wanted to put a "display: none" in my CSS file to hide one form, and let the other one visible.

But then I realize if I do that, I will have two fields with the same ID (one visible and one hidden). And obviously, I don't wanna have two fields with the same ID...

Does anyone have a proper method to solve my problem please ?

Thanks

Upvotes: 2

Views: 707

Answers (1)

Sarsa Murmu
Sarsa Murmu

Reputation: 437

You can use window.innerWidth to determine the width of window and do thing according to it. Assume HTML

<div class="desktop-version">
  <input name="email" type="email">
</div>

<div class="mobile-version">
  <input name="email" type="email">
</div>

In JS

var mobileWidth = 769; // in px
var formParent;

if (window.innerWidth < mobileWidth) {
  // Yay, on mobile, do whatever
  formParent = document.querySelector('.mobile-version');
} else {
  // You're on desktop
  formParent = document.querySelector('.desktop-version');
}

// Access value of <input name="email">
var email = formParent.querySelector('[name="email"]').value;

You won't have to give ID to element, you can access them using querySelector() using CSS like identifier. Here we are changing the parent element according to screen size. We can do the rest after that.

Upvotes: 1

Related Questions