Я хочу динамически изменить значение моей кнопки из формы ввода, заполненной пользователем с использованием JavaScript - PullRequest
Новая
       14

Я хочу динамически изменить значение моей кнопки из формы ввода, заполненной пользователем с использованием JavaScript

0 голосов
/ 01 октября 2019

Пользователь заполняет форму (для настройки продукта), и я хочу использовать его вывод для динамического изменения информации о моей кнопке.

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

Моя форма: 

   <form>
       <fieldset>
          <legend>Selecting elements</legend>
          <p>
             <label>Select type : </label>
             <select id="type" name="type">
               <option> X </option>
               <option> Palleitte </option>
             </select>

          </p>
       </fieldset>
    </form>

Моя кнопка: 

  <button name="julien" class="snipcart-add-item" id="my-button"
    data-item-id="{{ product.identifier }}"
    data-item-name="{{ product.name }}"
    data-item-price="20.00"



    data-item-custom2-name="Type"
    data-item-custom2-options="Cachet|Palleitte"
    data-item-custom2-value=""

    data-item-custom3-name="Quantité"
    data-item-custom3-options="100g|200g|500g|1kg|100kg"
    data-item-custom3-value="500g"
    >
    ADD TO THE CART 
  </button>

МОЙ JS CODE SO FAR: 

<script>

    document.getElementById("type").addEventListener("click", function(){
      const x = document.getElementById("my-button");
      console.log(x);

      console.log(document.getElementById("type"));
      document.getElementById("my-button").innerText = "change by the input of user";
});

</script>

Я ожидаю изменить значение моей кнопки: data-item-custom2-value = "" на значение, которое пользователь заполнил в форме, заранее спасибо!

1 Ответ

0 голосов
/ 01 октября 2019

Ваш HTML-код в порядке, но javascript требует некоторых изменений, как следует 

    document.getElementById("type").addEventListener("change", function(elem){
      var e = document.getElementById("type");
      var selectedValue = e.options[e.selectedIndex].value;
      document.getElementById("my-button").innerText = selectedValue;
});
 <form>
       <fieldset>
          <legend>Selecting elements</legend>
          <p>
             <label>Select type : </label>
             <select id="type" name="type">
               <option> X </option>
               <option> Palleitte </option>
             </select>

          </p>
       </fieldset>
    </form>
  <button name="julien" class="snipcart-add-item" id="my-button"
    data-item-id="{{ product.identifier }}"
    data-item-name="{{ product.name }}"
    data-item-price="20.00"



    data-item-custom2-name="Type"
    data-item-custom2-options="Cachet|Palleitte"
    data-item-custom2-value=""

    data-item-custom3-name="Quantité"
    data-item-custom3-options="100g|200g|500g|1kg|100kg"
    data-item-custom3-value="500g"
    >
  </button>
...