Данные заполнения Javascript или jQuery на основе значения

В настоящее время я пытаюсь найти решение для упрощения входа в систему для моих сотрудников. В идеале я ищу сценарий js или jQuery, который предварительно заполняет 2 поля ввода на основе вводимых данных.

Например. главное поле должно быть: Введите токен

ЕСЛИ токен равен 123, тогда заполните input1 и input2 определенным количеством данных, а если токен 456, заполните его другими данными - если токен не соответствует, то не заполняйте никакие данные. Я знаю, что это очень небезопасно, но, поскольку это что-то работает только локально, это сработает для моих конкретных нужд.

<style>.hidden {display: none !important;}</style>

<form>
    <input id = "token" type = "text">
    <input class = "hidden" id = "input1" type = "text">
    <input class = "hidden" id = "input2" type = "password">
    <input type = "submit">
</form>

Будем признательны за некоторые советы, спасибо

Вы пробовали что-нибудь, что не работает должным образом? По сути, вы хотите добавить прослушиватель событий input в #token и установить значения скрытых входов на основе введенного значения. Это близко к тому, что у вас есть, или вы идете другим путем?

Phil 13.11.2018 06:17

Пожалуйста, предоставьте сценарий, который вы пробовали, только тогда мы сможем вам помочь

Dark_thunder 13.11.2018 06:19

К вашему сведению, вы можете использовать <input type = "hidden"> вместо того, чтобы скрывать их с помощью CSS

Phil 13.11.2018 06:20
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
3
265
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Попробуйте код jquery, приведенный ниже:

<script 
  src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
</script>

<script type = "text/javascript">
  $('#token').keyup(function() {
    if ($(this).val() == 123) {
        $('#input1').val('1'); //assign the value you want
        $('#input2').val('1'); //assign the value you want
    } else if ($(this).val() == 456) {
        $('#input1').val('2'); //assign the value you want
        $('#input2').val('2'); //assign the value you want
    } else {
        $('#input1').val('');
        $('#input2').val('');
    }
  });
</script>
Ответ принят как подходящий

Вы в основном хотите добавить прослушиватель событий input в #token и установить значения скрытых входов на основе введенное значение.

Что-то вроде этого должно хватить ...

// make sure this script goes AFTER the HTML

// A map of token to values
const secrets = {
  123: {
    input1: 'input1 123',
    input2: 'input2 123'
  },
  456: {
    input1: 'input1 456',
    input2: 'input2 456'
  }
}

const input1 = document.getElementById('input1')
const input2 = document.getElementById('input2')

document.getElementById('token').addEventListener('input', e => {
  const token = e.target.value
  
  // get the values or if the token doesn't exist, sensible defaults
  const secret = secrets[token] || {
    input1: '',
    input2: ''
  }
  input1.value = secret.input1
  input2.value = secret.input2
}, false)
<form>
  <input id = "token" type = "text" placeholder = "Enter token">
  <input class = "hidden" id = "input1" type = "text">
  <input class = "hidden" id = "input2" type = "password">
  <input type = "submit">
</form>

Это довольно просто. Вы можете получить желаемый результат, используя условный оператор, например if else.

вот решение вашей проблемы.

var token=$('#token').val();
if (token==123)
{
  $('#input1').val('value1'); //set the value which you want to place here
  $('#input2').val('value2'); //set the value which you want to place here
}
else if (token==456)
{
  $('#input1').val('value1'); //set the value which you want to place here
  $('#input2').val('value2'); //set the value which you want to place here
}
else {
  $('#input1').val('');
  $('#input1').val('');
}

Другие вопросы по теме