Создать случайный адрес электронной почты и скрыть поле формы

Question

У меня есть форма, которая требует заполнения уникального адреса электронной почты. Мне не обязательно нужны адреса электронной почты людей, поэтому мое решение - написать скрипт, который генерирует фиктивный адрес электронной почты. Сценарий должен работать следующим образом:

• Нажмите ссылку, чтобы создать произвольный адрес электронной почты (я завершил это)
• Адрес электронной почты будет заполнен в поле формы (я заполнил это)
• Поле формы затем скрывается (не заполнено, поэтому пользователь не редактирует случайный адрес электронной почты)
• Ссылка, которая генерирует случайный адрес электронной почты, должна делать противоположное действие при повторном нажатии (поэтомупользователь может щелкнуть ссылку еще раз, и поле формы снова появляется, но остается пустым, поэтому при желании пользователь может ввести фактический адрес электронной почты)

Я просто не могу полностью завершить недостающие элементы. Кто-нибудь может оказать некоторую помощь?

Вот JSFiddle с тем, что я сделал: https://jsfiddle.net/faye4tj5/

<script>
    var randomemail = "@dummyaddress.com";
    var randomnumber=Math.floor(Math.random()*1000000000); 

    function setRandomEmail() { $('#email-field').val( randomnumber + randomemail ); }

        $('#random-hold').on('click','.generate-random', setRandomEmail);
</script>

<p id="random-hold" style="font-size:18px;font-weight:600;line-height:1;"><a class="generate-random" style="display:inline-block;margin-top:20px;margin-bottom:10px;">Click here to generate random email address</a></p>
<form>
<input type="text" id="email-field">
</form>

Заранее спасибо.

Answer 1

Вы можете отслеживать, генерируется ли значение с атрибутом data (например: <input ... data-generated="1" />)

При генерировании вы можете установить входное значение на disabled, чтобы пользователь не мог изменить значение (Например: <input ... disabled />)

, поэтому сгенерированное состояние для входа будет выглядеть следующим образом:

<input type="text" id="email-field" name="email" 
    value="987239478@dummyaddress.com" data-generated="1" disabled>

повторное нажатие кнопки вернет вход на

<input type="text" id="email-field" name="email" value="">

jsfiddle

$('#random-hold').on('click','.generate-random', () => {
  let email = $('#email-field');
  if (email.data('generated') === '1') {
    email.val('');
    email.removeData('generated');
    email.removeAttr('disabled');
  } else {
    email.val(Math.floor(Math.random() * 1000000000) + "@dummyaddress.com");
    email.data('generated', '1');
    email.attr('disabled', 'disabled');
  }
});

В качестве альтернативы, вы можете рассмотреть возможность сделать все это без jQuery , используя ванильный Javascript / ES6.

document.querySelector('.generate-random').addEventListener('click', () => {
  let email = document.myForm.email;
  if (email.getAttribute('data-generated') === '1') {
    email.value = '';
    email.removeAttribute('data-generated');
    email.removeAttribute('disabled');
  } else {
    email.value = Math.floor(Math.random() * 1000000000) + "@dummyaddress.com";
    email.setAttribute('data-generated', '1');
    email.setAttribute('disabled', 'disabled');
  }
});