Form fields random ID (few same forms on the page)

Nikita_Sp
(@nikitasp)

6 years, 8 months ago
Hi!

Thank you for this awesome plugin that everyone is using.
I’ve got a question about dynamic ID for input fields.

The thing is I have a form template with <labels> inside for Floating labels effect (Example: https://css-tricks.com/float-labels-css/). So a have such template:
```
<div class="form-group">
	<label for="first-name">Your first name</label>[text firstname class:field id:firstname placeholder "First name"]
</div>
```
It working nice, BUT if there is only one form on the page. If I add one more – each label leads to first element with ID name which is set in for parameter.

So all labels from second form lead to the first one. I was trying to find a solution and I couldn’t think of anything better than generate random ID and FOR

How can I achieve that? Maybe some form template hook? Maybe some shortcode or parameter?

Thanks.
- This topic was modified 6 years, 8 months ago by Nikita_Sp.

Viewing 1 replies (of 1 total)

Thread Starter

(@nikitasp)

I can also generate random input ID and label FOR with JS, but it’s not good for robots and validation (or users without JS).

For example:

$('.form-group').each(function(){
    var $label = $(this).find('label'),
        $input = $(this).find('input'),
        random = Math.random();
    
    $label.attr('for', $label.attr('for') + random);
    $input.attr('id', $input.attr('id') + random);
  });

Any ideas will appreciate.

Viewing 1 replies (of 1 total)

The topic ‘Form fields random ID (few same forms on the page)’ is closed to new replies.