I'm trying to make a menu builder like wordpress. I have something like this in the pic. ( https://prnt.sc/podhpu ). I enter a value in the left side then click button "Menü Ekle - eng. Add Menu" But value goes empty.
I tried to transfer the value into a variable called "x". Then on click i tried to send x in value"" but it is not working. I think it needs something like trigger before sending it but i do not know exactly.
HTML Code:
<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 Code:
$(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();
});
I want to transfer entered value when i click to "add menu" button.