将表单字段传递给模态

时间:2016-06-03 10:30:28

标签: javascript jquery ajax


我试图将特定的表单字段从表单传递到模态,我的代码我设法传递整个表单,但不能仅针对特定元素。

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;
&#13;
&#13;

0 个答案:

没有答案