$(document).ready(function ()
{
/* get id of form to work with */
$('.show-lookup').click(function()
{
var pairedId = $(this).attr('id').split('-');
var lookupToDisplay = '#lookup-' + pairedId[1];
$('.overlay').show();
$(lookupToDisplay).show();
$('.js-popup-focus').focus();
});
/* put value selected in lookup into field in main form */
$('.lookup-popup input').on('change', function()
{
var fieldname = $(this).attr('name');
var pairedId = $(this).parent().attr('id').split('-');
var selOption = $('input[name='+fieldname+']:checked').val();
$("#entry-"+pairedId[1]).val(selOption);
});
/* for checkbox version, append selected values to field in main form */
$('.lookup-multiselect input').on('change', function()
{
var pairedId = $(this).parent().attr('id').split('-');
//event.preventDefault();
var selOptions = $(".category input:checkbox:checked").map(function(){
return $(this).val();
}).get(); // <----
//console.log(selOptions);
var selectedString = selOptions.toString();
$("#entry-"+pairedId[1]).val(selOptions);
});
$('.close-button').click(function()
{
$(this).parent().hide();
var pairedId = $(this).parent().attr('id').split('-');
$('.overlay').hide();
$("#entry-"+pairedId[1]).focus();
});
});
button {
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
border-radius: 2px;
border: 0;
padding: 6px;
margin: 0;
display: inline-block;
color: #fff;
background-color: #333;
position: relative;
height: 36px;
min-width: 64px;
font-family: "Roboto","Helvetica","Arial",sans-serif;
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0;
overflow: hidden;
will-change: box-shadow;
transition: box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1);
outline: none;
cursor: pointer;
text-decoration: none;
text-align: center;
line-height: 36px;
vertical-align: middle;
}
.right {
float: right;
}
.lookup-popup, .lookup-multiselect {
display: none;
z-index: 99999;
padding: 1em;
border: 1px solid #666;
border-radius: 5px;
position: absolute;
top: 6em;
left: 35%;
width: 70%;
-webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
background: rgba(237, 237, 237, 1);
}
body {
font-family: Open Sans, Calibri, Helvetica, sans serif;
padding: 2em;
}
.overlay {
display: none;
position: fixed;
text-align: center;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.7;
background: #333;
}
.lookup-popup {
padding: 0.5em;
display: none;
z-index: 99999;
background-color: #fff;
position: absolute;
top: 5em;
left: 25%;
width: 20%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
<input type="text" class="order-entry js-initial-focus" id="entry-r1" placeholder="place" tabindex="1">
<button class="show-lookup" id="popup-r1" tabindex="2">Search</button>
</p>
<div class="overlay"> </div>
<div class="lookup-popup" id="lookup-r1">
<button class="close-button right"><i class="material-icons">close</i></button>
<strong>Select...</strong>
<form action="#" id="form-r1" name="form-r1" method="post">
<input class="js-popup-focus" type="radio" name="place" id="antwerp" value="Antwerp" tabindex="3"> <label for="antwerp">Antwerp</label><br>
<input type="radio" name="place" id="berlin" value="Berlin" tabindex="3"> <label for="berlin">Berlin</label><br>
<input type="radio" name="place" id="cairo" value="Cairo" tabindex="3"> <label for="cairo">Cairo</label><br>
<input type="radio" name="place" id="duss" value="Düsseldorf" tabindex="3"> <label for="duss">Düsseldorf</label><br>
</form>
</div>
<p>
<input type="text" class="order-entry js-initial-focus" id="entry-r2" placeholder="place" tabindex="1">
<button class="show-lookup" id="popup-r2" tabindex="2">Search</button>
</p>
<div class="overlay"> </div>
<div class="lookup-popup" id="lookup-r2">
<button class="close-button right"><i class="material-icons">close</i></button>
<strong>Select...</strong>
<form action="#" id="form-r2" name="form-r2" method="post">
<input type="radio" name="place" id="exeter" value="Exeter" tabindex="3"> <label for="exeter">Exeter</label><br>
<input type="radio" name="place" id="frankfurt" value="Frankfurt" tabindex="3"> <label for="frankfurt">Frankfurt</label><br>
<input type="radio" name="place" id="ghent" value="Ghent" tabindex="3"> <label for="ghent">Ghent</label><br>
<input class="js-popup-focus" type="radio" name="place" id="hamburg" value="Hamburg" tabindex="3"> <label for="hamburg">Hamburg</label><br>
</form>
</div>
Если вы используете предоставленные классы и идентификаторы, jQuery будет перебирать различные элементы формы и сопоставлять их с соответствующими всплывающими окнами.
Используйте entry-r1, entry-r2 и т. Д. В качестве идентификатора для полей ввода.Используйте lookup-r1, lookup-r2 и т. Д. В качестве идентификатора для соответствующего всплывающего окна.Используйте form-r1, form-r2 и т. Д. В качестве идентификатора формы в всплывающем окне.