изменение значения на входе с помощью val() и триггера ('change')

#jquery #symfony #triggers

#jquery #symfony #запускает

Вопрос:

У меня есть список кнопок, для каждой из которых задано определенное значение, я хотел бы получить одно из этих значений, когда я нажимаю на кнопку, а затем помещаю это значение в определенный ввод. Для этого я использую symfony и jquery. Вот мой код:

Другая кнопка с определенным значением :

 {% block body %}
<div class="row">
    <div class="col-sm-12">
        <div class="card-box ">
            <h2 class="m-t-0 header-title">{{ "Données traitement"|trans }}</h2>
            <div class="btn-group btn-group-lg" role="group" aria-label="...">
                {% for s in secteur %}
                    <button id="linkSecteur_{{ s.SecteurId }}" class="text-lg-left btn btn-link z-btn-secteur essai" data-id="{{ s.SecteurId }}">{{ s.LibLong }}</button>
                {% endfor  %}
            </div>

Вход, куда я хочу поместить значение, выбранное с помощью кнопки:

         <form id="searchForm" class="form-horizontal search-form " role="form" action="{{ path('api_post', {id: odata_search}) }}" method="post">
            <div class="row">
                <div class="col-6 col-md-8">{{ form_row(form.Secteur) }}</div>

Вот это тест, который я пытаюсь исправить :

 var $searchFieldSecteur = $("#form_Secteur");

            $('#linkSecteur_02').on('click',function() {

               var long = $(this).val('hello');
                //console.log(long);
                $searchFieldSecteur.val(long).trigger('change')
    });

Ответ №1:

Если под значением вы имели в виду идентификатор данных кнопки attr, то использование .val() вам не поможет, вам придется использовать attr()

 var $searchFieldSecteur = $("#form_Secteur");

// use a class instead of id to make the rule apply on multiple buttons
$('.z-btn-secteur').on('click', function() {

  // get value from data-id attribute
  var long = $(this).attr('data-id');
  console.log(long);
  $searchFieldSecteur.val(long).trigger('change')
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body style="background:white">
  <button id="linkSecteur_01" class="text-lg-left btn btn-link z-btn-secteur essai" data-id="01">button 1</button>
  <button id="linkSecteur_02" class="text-lg-left btn btn-link z-btn-secteur essai" data-id="02">button 2</button>
  <button id="linkSecteur_03" class="text-lg-left btn btn-link z-btn-secteur essai" data-id="03">button 3</button>

  <form id="searchForm" style="margin-top:25px" class="form-horizontal search-form " role="form" method="post">
    <input id="form_Secteur" type="text">
  </form>

</body>