Detecting display: inline-block with Javascript vanilla

Question

I have a multilanguage registration page. All the of it is on one HTML document, and each language is in its own div, with display:none; or display:visible depending on the language selected.

All of the forms are identical, ie. <input type="email" class="email"> is the same on all forms (with different placeholders etc.).

I would like to know how I could use a conditional statement to see which div is visible, so I could take out the appropriate class information via index.

For example, the user filled out the English registration page, I know I need to use getElementsByClassName(".email")[1].value. (index 1).

Or is there a way to detect which element in the array has actual content/value (as the specific class array will be empty, except for 1 entry).

HTML

<div class="lng" id="sl">
    <div class="registerTitle">
        Slo - Register
    </div>
    <div class="registerForm">
        <form accept-charset="utf-8" name="mail" onsubmit="return false;" method="post" id="mail">
            <input type="text" name="fname" required maxlength="50" minlength="1" placeholder="Janez"
                   onfocus="this.placeholder = ''" onblur="this.placeholder = 'Janez'" /><br />
            <input type="text" name="lname" required maxlength="50" minlength="1" placeholder="Novak"
                   onfocus="this.placeholder = ''" onblur="this.placeholder = 'Novak'" /><br />

            <span class="radioS">Spol: </span><br /><br />
            <div class="radioC"><label><input type="radio" name="spol" value="M">Moski</label></div><br />
            <div class="radioC"><label><input type="radio" name="spol" value="Z">Zenski</label></div><br />
            <div class="radioC"><label><input type="radio" name="spol" value="O">Ostalo</label></div><br /><br />

            <input type="email" name="email" autofocus="autofocus" required placeholder="moj@email.com"
                   onfocus="this.placeholder = ''" onblur="this.placeholder = 'moj@email.com'" />
            <br />
            <input type="button" value="Submit" id="submit_ok" name="submit_ok" /> <br />
        </form>
    </div>
</div>
<div class="lng" id="en">
    <div class="registerTitle">
        Eng - Register
    </div>
    <div class="registerForm">
        <form accept-charset="utf-8" name="mail" onsubmit="return false;" method="post" id="mail">
            <input type="text" name="fname" required maxlength="50" minlength="1" placeholder="John"
                   onfocus="this.placeholder = ''" onblur="this.placeholder = 'John'" /><br />
            <input type="text" name="lname" required maxlength="50" minlength="1" placeholder="Doe"
                   onfocus="this.placeholder = ''" onblur="this.placeholder = 'Doe'" /><br />

            <span class="radioS">Gender: </span><br /><br />
            <div class="radioC"><label><input type="radio" name="spol" value="M">Male</label></div><br />
            <div class="radioC"><label><input type="radio" name="spol" value="Z">Female</label></div><br />
            <div class="radioC"><label><input type="radio" name="spol" value="O">Other</label></div><br /><br />

            <input type="email" name="email" autofocus="autofocus" required placeholder="my@email.com"
                   onfocus="this.placeholder = ''" onblur="this.placeholder = 'my@email.com'" />
            <br />
            <input type="button" value="Submit" id="submit_ok" name="submit_ok" /> <br />
        </form>
    </div>
</div>

u can have an option to choose lang then display the form based the on language chosen by the user. — Amaresh S M, Jan 22 '20 at 09:03
yea, i already have that. So if a user is submiting an englsh form, i need to push the value of `getElementsByClassName(".email")[1].value` to my AJAX. I want to know if there is a way to detect if the english form (`
`) has `display:inline-block` so I can take out the value of the array with index 1. If the form/div is in french (`
`) I would need to use index 2... etc. Am I making sense? — DrDoom, Jan 22 '20 at 09:31

score 0 · Answer 1 · answered Jan 22 '20 at 08:59

0

Have a look at - how can I disable everything inside a form using javascript/jquery?

Disabling other form inputs might be an option, so when you go to submit, the form that isn't disabled submits.

answered Jan 22 '20 at 08:59

jackstride

53
8

my submit is actually linked to a javascript ajax function, as there needs to be a few ajax calls before the form gets submitted. thanks though. looks useful. – DrDoom Jan 22 '20 at 09:22

djs · Answer 2 · 2020-01-22T09:16:34.460

0

Here's a way to detect if an array of inputs has a value and then log to the console. I know it's general, but I'm having a hard time understanding exactly what you need in your case:

const emailInputs = Array.from(document.querySelectorAll('.email'));
  const form = document.querySelector('form');

  form.addEventListener('change', () => {
    const hasValue = emailInputs.filter((input) => input.value);
    console.log('these inputs are active...\n');
    hasValue.forEach(val => console.log(val));
  });

<form action="" method="get" class="form-example">
    <div class="form-example">
      <label for="en">English </label>
      <input type="email" name="en" id="email" class="email">
    </div>
   <div class="form-example">
      <label for="fr">French </label>
      <input type="email" name="fr" id="email2" class="email">
    </div>
    <div class="form-example">
      <label for="es">Spanish </label>
      <input type="email" name="es" id="email3" class="email">
    </div>
    <div class="form-example">
      <label for="it">Italian </label>
      <input type="email" name="it" id="email4" class="email">
    </div>
  </form>

Here's a JSFiddle if you want to play with it outside of this setting.

edited Jan 22 '20 at 09:16

answered Jan 22 '20 at 09:10

djs

3,947
3
14
28

I went through it, but it does not help me much. Thanks anyway. – DrDoom Jan 22 '20 at 11:59
@DrDoom Can you post a more specific question, or some more code then? The problem you are trying to solve sounds simple enough, but with what information you've given I can't construct a specific answer because there isn't enough code to work with. The last line of your question `is there a way to detect which element in the array has actual content/value` is answered by my answer. My code will detect which element in the array has a value and then prints to the console. – djs Jan 22 '20 at 16:16
Hey. I have been editing my code, and for this specific question I don't have it on hand. I can post more details tomorrow. I've tried to solve this problem with a different approach. The question can be found here https://stackoverflow.com/questions/59863347/display-function-depending-on-the-classes-inside-the-element-javascript-vanill?noredirect=1#comment105858491_59863347 again, thanks for the help, – DrDoom Jan 22 '20 at 17:05

Detecting display: inline-block with Javascript vanilla

2 Answers2