Атрибут value у input

271
11 сентября 2018, 22:10

Возможно ли использовать два значения в атрибуте value у тега input? Если да, то возможно ли их парсить отдельно друг от друга с помощью js?

Это нужно для того, чтобы одно значение уходило в заявке на почту, а другое использовалось в калькуляторе. Может есть какой то более разумный способ это сделать?

Такое написание кстати вообще приемлемо?:

<div class="form__block"> 
  <input id="where2" type="radio" name="Когда приступить" value="10days 6000"> 
  <label for="where2"> В течении 10 дней</label> 
</div>

Answer 1

Возможно ли использовать два значения в атрибуте value у тега input?

Да, возможно, value1<delimiter>value2.

value="value1|value2"

Если да, то возможно ли их парсить отдельно друг от друга с помощью js?

Более приемлемый вариан атрубит data-*, показываете value, обрабатываете data-value.

Вот пример:

var inpt = document.querySelector('#where2') 
 
console.info(inpt.value); 
console.info(inpt.getAttribute('data-value'));
<div class="form__block"> 
  <input id="where2" type="radio" name="Когда приступить" value="10days 6000" data-value="10,6000"> 
  <label for="where2"> В течении 10 дней</label> 
</div>

Доки

Answer 2

В данном случае value это строка, которая может быть любого вида. Поэтому никто не мешает вам делать с ней, все что вздумается:

<div class="form__block">
  <input id="nums" name="Цифры" value="1,2,3,4,5">
</div>

Обработать можно так:

const values = nums.value.split(',').map(parseInt); // массив чисел
console.log(values.map(x => x * x )); // квадраты чисел

В вашем случае, можете разбить строку по пробелам split(' ') и тогда у вас будет массив значений, которые можете отправлять куда угодно

Answer 3

Есть вариант использовать для этого data-атрибуты:

var el = $('#where2'); 
console.log(el.val()); 
console.log(el.attr('data-value'));
<div class="form__block"> 
  <input id="where2" type="radio" name="Когда приступить" value="10days" data-value="6000"> 
  <label for="where2"> В течении 10 дней</label> 
</div> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

READ ALSO
Получение хэша для виджета записей вк через js и html

Получение хэша для виджета записей вк через js и html

Дело в том, что чтобы вставить себе виджет на сайт нужно получить hash записи, а вот он получается только на этом сайте: https://vkcom/dev/Post И сделать...

255
Как исправить проблему со 100vh на мобильных устройствах?

Как исправить проблему со 100vh на мобильных устройствах?

При определении высоты блока как 100vh, на мобильных устройствах верхнее меню браузера прибавляется к общей высоте, появляется вертикальный...

261
Вывод сообщения после отправки формы

Вывод сообщения после отправки формы

Подскажите как вывести сообщение об успешной отправке формы под кнопкой?

261
Не могу выставить по центру див

Не могу выставить по центру див

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

257