weixin_33730836 2016-06-03 10:30 采纳率: 0%
浏览 27

将表单字段传递给模态


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>
  • 写回答

0条回答 默认 最新

    报告相同问题?

    悬赏问题

    • ¥15 数据量少可以用MK趋势分析吗
    • ¥15 使用VH6501干扰RTR位,CANoe上显示的错误帧不足32个就进入bus off快慢恢复,为什么?
    • ¥15 大智慧怎么编写一个选股程序
    • ¥100 python 调用 cgps 命令获取 实时位置信息
    • ¥15 两台交换机分别是trunk接口和access接口为何无法通信,通信过程是如何?
    • ¥15 C语言使用vscode编码错误
    • ¥15 用KSV5转成本时,如何不生成那笔中间凭证
    • ¥20 ensp怎么配置让PC1和PC2通讯上
    • ¥50 有没有适合匹配类似图中的运动规律的图像处理算法
    • ¥15 dnat基础问题,本机发出,别人返回的包,不能命中