Как передавать разные значения data в один и тот же инпут по onclick?

248

12 февраля 2020, 01:00

Имеется несколько ссылок с атрибутами . Значения атрибутов задаются через php и они все разные. Ниже лежит форма, которая вызывается при клике на любую из этих ссылок. Нужно передавать в один из инпутов этой формы значение data-model текущей ссылки.

Это шаблон модального окна, в него массивом передаются параметры компонента кнопки, в том числе нужный мне параметр $arParams['MODEL_NAME'].

<?$arInfo = array(
"IBLOCK_ID" => $arParams['IBLOCK_ID'],
"VALIDATE_EMAIL" => $arParams['VALIDATE_EMAIL'],
"MODEL_NAME" => $arParams['MODEL_NAME'],);?>
<form action="/.ajax.php" name="popup_form" id="popup_form_<?= $arInfo['ID_FORM'] ?>" class="popup_form" enctype="multipart/form-data" method="POST" onsubmit="">
<input type="hidden" name="iblock_id" value="<?= $arInfo['IBLOCK_ID'] ?>" />
<input type="hidden" name="validate_email" value="<?= $arInfo['VALIDATE_EMAIL'] ?>" />
<input type="hidden" name="model_name" value="<?= $arInfo['MODEL_NAME'] ?>" />
<div class="block <?= $INPUT_TYPE ?>">
<div class="input">
<input type="text" rel="<?= $arResult['PROPERTY_LIST_FULL'][$propertyID]['CODE'] ?>" id="form_text_<?= $propertyID ?>" class="input" name="PROPERTY[<?= $propertyID ?>][<?= $i ?>]" size="25" value="" />
<input type="submit" value="Отправить" /> 
</form>
</div>

Вызов модального окна осуществляется онкликом, в show_popup передаются параметры из массива выше, эту часть кода привела так, как она выглядит в сгенереном виде в html

<a href="javascript:void(0);" data-model="<?=$arParams['MODEL_NAME']?>" class="link_popup" rel="nofollow" onclick="show_popup({id: '16', model-name: 'Kia'}); $('#form_text_323').val($(this).attr('data-model')); return false;" return false;">Получить предложение</a>

Параметр MODEL_NAME передается в data-model, передается вместе с другими данными в show_popup, а непосредственно в самом модальном пустота.

Answer 1

Так как информации мало, да и по разметке не всё понятно, то ответ будет отвлеченным. Но в рамках темы: передача разных data в одно поле ввода.

var i 
var input = document.getElementById('form_text') 
var modal = document.getElementById('modal_box') 
var buttons = document.getElementsByClassName('link_popup') 
 
function processEvent(event) { 
  var dataset = event.target.dataset 
 
  modal.style.display = '' 
  // Обратите внимание: свойство пишется по правилу camelCase. 
  input.value = dataset.modelName 
 
  event.preventDefault() 
  console.log(dataset.id, dataset.model, dataset.modelName) 
} 
 
for (i = 0; i < buttons.length; i++) { 
  buttons[i].addEventListener('click', processEvent) 
}

<p><a href="#" data-id="16" data-model="200" data-model-name="Kia-200" class="link_popup">Получить предложение</a></p> 
<p><a href="#" data-id="32" data-model="400" data-model-name="Kia-400" class="link_popup">Получить предложение</a></p> 
<p><a href="#" data-id="48" data-model="800" data-model-name="Kia-800" class="link_popup">Получить предложение</a></p> 
 
<div id="modal_box" style="display:none;"> 
  <form> 
    <input id="form_text" type="text" class="form_text" value="" /> 
    <input type="submit" value="Отправить" /> 
  </form> 
</div>