отправить выбранные данные обратно в исходное окно

Question

У меня есть файл bpSearch. Внутри bpSearch у меня есть окно MODAL, называемое addNewModal. Внутри addNewModal у меня есть 2 поля INPUT, называемые partnerName и partnerCode. У меня есть кнопка, которая когда-то нажата, открывается в другое окно MODAL, называемое searchPartnerModal.

Вот часть ФОРМЫ внутри addNewModal:

<form action="bpSearch.php" method="get"> 
    <input type="text" readonly id="partnerName" name="partnerName" /> 
    <input type="text" readonly id="partnerCode" name="partnerCode" /> 
    <a href="#searchPartnerModal" data-toggle="modal" class="btn">Go</a> 
</form> 

Когда пользователь нажимает GO, она открывает searchPartnerModal.

searchPartnerModal - это то, где пользователь вводит либо код, либо имя (не обязательно должно быть одновременно). Но, нажимая ПОИСК, я использую вызов AJAX, который возвращает JSON, который я анализирую и в конечном итоге возвращаюсь в поле UL, называемое pNames. Мы все еще находимся внутри searchPartnerModal.

Вот FORM внутри searchPartnerModal:

<form action="bpSearch.php" method="get"> 
    <input type="text" id="pNameSearch" name="pNameSearch" /> 
    <input type="text" id="pCodeSearch" name="pCodeSearch" /> 
    <input type="button" class="btn" id="pSearch" name="pSearch" value="search" /> 
</form> 

Когда пользователь вводит имя, я использую JQuery, чтобы отправить его на скрипт, который будет возвращать данные в теге UL.

Вот JQuery, который будет искать, если пользователь вводит имя:

$('#pSearch').on('click', function() 
{ 
    var partnername = $('#pNameSearch').val(); 
    if($.trim(partnername) != '') 
    { 
    $.post('api/pNameSearch.php', {partnername: partnername}, function(data) 
    { 
     var obj = JSON.parse(data); 
     $('#pNames').empty();  
     var htmlToInsert = obj.map(function (item) 
     { 
     return '<li><a id="getPInfo" href="javascript:;" 
     onclick="getPInfo()" data-selname="'+item.FULL_NAME+'" 
     data-selcode="'+item.PARTNER_CODE+'">' 
      + item.FULL_NAME + ' - ' 
      + item.PARTNER_CODE + '</a></li>'; 
     }).join(''); 
     $('#pNames').html(htmlToInsert); 
    }); 
    }; 
}); 

С помощью этого кода, я могу отправить имя для поиска в таблице базы данных для правильного имени. Данные возвращаются через JSON и анализируются и отображаются внутри тега UL (называемые pNames) как теги LI, каждый из которых имеет тег A с их собственными атрибутами данных, называемыми selname и selcode данных.

Теперь то, что мне нужно сделать, - это когда пользователь нажимает на одну из возвращаемых линий данных внутри pNames, мне нужно отправить его обратно в предыдущее модальное окно addNewModal.

Здесь я застрял.

Если вы заглянете внутрь Jquery выше, после того, как я разобрал JSON, вы увидите, что я создал другую функцию Javascript внутри тега A каждого возвращаемого фрагмента данных, называемого getPInfo().

Вот что я до сих пор для функции getPInfo():

function getPInfo() 
{ 
    var selname = ($('#getPInfo').attr('data-selname')); 
    var selcode = ($('#getPInfo').attr('data-selcode')); 
} 

На данный момент, я могу предупредить обе переменные (selname и selcode) и получить их для отображения в окне предупреждения.

Что я хочу сделать, это отправить обе эти переменные обратно в addNewModal в соответствующие поля INPUT, называемые partnerName и partnerCode.

Так что selname перейдет к partnerName, и selcode отправится на partnerCode.

Надеюсь, что я не набрал слишком много или слишком мало. Я не показывал PHP-скрипт, который возвращал данные. Надеюсь, на данный момент это не объяснимо.

Пожалуйста, помогите мне отправить данные обратно в исходное модальное окно.

Answer 1

Изменить якорь ID = getPInfo в класс = getPInfo, поскольку у вас есть несколько якорей. Затем обработайте событие щелчка привязки и извлеките атрибуты данных и установите соответствующие элементы формы в форме addNewModal.Следующее должно работать на основе разметки, которую я вижу до сих пор.

$(function(){ 
    $('body').on('click', 'a.getPInfo', function (e) { 
     var $a = $(e.srcElement || e.target); 
     $('#partnerName').val($a.attr('data-selname')); 
     $('#partnerCode').val($a.attr('data-selcode')); 
     $('#searchPartnerModal').modal('hide'); //assuming bootstrap modal 
    }); 
});