我试图将特定的表单字段从表单传递到模态,我的代码我设法传递整个表单,但不能仅针对特定元素。
1)仅从表单中传递spefic字段
2)在我的代码中你可以看到我用新的css类替换了一些css类,我需要用IF检查它们是否存在。
3)如果有人可以向我解释$ .ajax -how强制缓存为假
4)我也有2个按钮分组,如果你点击第一个我想显示让我们说1,2,3,4个字段,如果你点击第二个按钮你得到3,4,5,6个字段,我知道我可以写两个sepparate js,但最好还是告诉你什么是实现这个目标的最佳选择。
现在这是我的js脚本:
function onclick_modal() {
var modalcreate = '<div id="fast-modal">';
modalcreate += '<div id="fastmodal-contain">';
modalcreate += '<div id="modal-data"></div>';
modalcreate += '</div>';
modalcreate += '</div>';
var $html_modal = $(modalcreate);
$('body').append($html_modal);
$html_modal.on('click', function(e){ if($(e.target).attr('id')=="fast-modal") { $(this).remove(); } });
$.ajax({
url: "https://linkwhereformis",
}).done(function(data) {
var $htmldata = $($(data).find('#formid')[0].outerHTML);
$htmldata.find('.dontneedthis').parent().remove();
$htmldata.find( "div" ).removeClass().addClass('grid-tablet-12-12 grid-desktop-12-12');
$htmldata.find( "div ul li span" ).removeClass().addClass('grid-tablet-12-12 grid-desktop-12-12 lajna');
$htmldata.find( "div ul li div" ).removeClass().addClass('grid-tablet-5-7 grid-desktop-6-8');
$htmldata.find('.buttons').html('<button type="submit" class="modalnibutton" data-step="5" id="confirm-form-submit modalbutton">Submit</button>');
$html_modal.find('#modal-data').html( $htmldata );
});
}
$(document).ready(function() {
$('#modallink').click(function(e) {
e.preventDefault();
onclick_modal();
});
$('#modallink2').click(function(e) {
e.preventDefault();
onclick_modal();
});
});
&#13;
.modalnibutton{
float: none;
text-align: center;
display: block;
margin-left: auto;
margin-right: auto;
background: rgba(255, 87, 34, 0.88);
color: white;
border-radius: 3px;
padding: 8px;
padding-left: 27px;
padding-right: 27px;
font-size: 16px;
}
#fast-modal{
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
width: 100%;
height: 100%;
z-index: 9997;
background: rgba(0, 0, 0, 0.42);
overflow-y: scroll;
overflow-x: hidden;
}
#fastmodal-contain {
width: 700px; max-width: 100%; margin: 0 auto; background: #fff; min-height: 100px; margin-top: 50px;
}
#modal-data{
float: left; background: #fff; width: 100%; padding: 15px 0px;
}
#modalbutton {
margin-left: auto;
margin-right: auto;
display: block;
float: none;
border-top: 0;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" title="" style="zoom: 1;" id="modallink">
SUBMIT LINK 1 </a>
<BR><BR>
<a href="#" title="" style="zoom: 1;" id="modallink2">
SUBMIT LINK 2 </a>
&#13;