Im trying to pass specific form field from form into modal, with my code I managed to pass the whole form, but cant achive to target only specific elements.
1) Pass only spefic field from form.
2)In my code you can see that im replacing some css class with new one, and i need to check with IF , are they exist or not.
3) and if someone can explain to me $.ajax -how to force the cache to false.
4) Also i have 2 button trigers, if you click on first i want to show let's say 1,2,3,4 fields, and if you click on second button you get 3,4,5,6 fields, i know that i can write two sepparate js, but it would be better to hear from you what is best option to achive this.
This is mine js script for now:
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();
});
});
.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;
}
<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>
</div>