Как передать входное значение по клику

Question

Я пытаюсь сделать конструктор меню, как WordPress. У меня есть что-то вроде этого на рис. (https://prnt.sc/podhpu). Я ввожу значение в левую часть, затем нажимаю кнопку «Menü Ekle - eng. Add Menu», но значение становится пустым.

Я попытался перевести значение в переменную с именем «x». Затем на клик я пытался отправить х в значении "", но он не работает. Я думаю, что нужно что-то вроде триггера перед отправкой, но я точно не знаю.

HTML-код:

<div class="kt-portlet__body">
    <div class="form-group">
        <label>URL</label>
        <input type="text" class="form-control menu-url" value="" placeholder="Menü başlığını giriniz.">
     </div>
    <div class="form-group">
        <label>Başlık</label>
        <input type="text" class="form-control menu-title" value="" placeholder="Menü bağlantı adresini giriniz.">
    </div>
    <a href="#" id="add-menu" class="btn btn-brand btn-elevate btn-icon-sm">Menü Ekle</a>
</div>

Код Javascript:

$(function(){
            var x = $('.menu-url').val();
            $('#add-menu').on('click', function (e) {
                $('#menu').append('<li>\n' +
                    '                    <div class="menu-item">\n' +
                    '                        <a href="#" class="delete-menu">\n' +
                    '                            <i class="fa fa-times"></i>\n' +
                    '                        </a>\n' +
                    '                        <input type="text" name="title[]" placeholder="Menü Adı">\n' +
                    '                        <input type="text" name="url[]" val="'+ x +'" placeholder="Menü Linki">\n' +
                    '                    </div>' +
                    '<div class="sub-menu"><ul></ul></div>\n' +
                    '                    <a href="#" class="add-submenu btn">Alt Menü Ekle</a>\n' +
                    '                </li>');
                e.preventDefault();
            });

Я хочупередать введенное значение, когда я нажму кнопку «Добавить меню».

Answer 1

значение является истинным атрибутом, а не значением.

, и вы тоже забыли скобку.

$(function(){
  var x = $('.menu-url').val();
  $('#add-menu').on('click', function (e) {
    $('#menu').append(
        `<li>
          <div class="menu-item">
            <a href="#" class="delete-menu">
              <i class="fa fa-times"></i>
            </a>
            <input type="text" 
              name="title[]" 
              placeholder="Menü Adı"> 
            <input type="text" 
              name="url[]" 
              value="${x}" 
              placeholder="Menü Linki">
          </div>' +
          <div class="sub-menu"><ul></ul></div>
          <a href="#" class="add-submenu btn">Alt Menü Ekle</a>              </li>`);
    e.preventDefault();
    })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="menu-url" value="i am here"
  placeholder="menu url"> 
<button id="add-menu">add menu</button>
<div id="menu"></div>