表单通过 fancybox modal 提交验证 & jquery

Question

我想要一个通用的表单验证，它会打开一个 fancybox 模式弹出窗口，询问是或否。即使有多种形式，我也希望它能正常工作。

为什么表单没有提交？

HTML - 表格：

<form method="post" action="http://192.168.0.4/jojo_cms/content/upload-delete" class="submit-confirm" id='upload-delete-form-1'>
    <input type="hidden" value="enrouleur-motorise-vektor-1-pour-couverture-a-barre-1-l.jpg" name="filename">
    <button name="submit" class="link" type="submit" value="submit">Delete</button>
</form>

HTML - 模态弹出窗口：

<div id="fancybox-confirm" style="display:none;">
    <p>Sure ?</p>
    <p class="tar">
        <button type="button" class="btn"  id="fancybox-confirm-no" >No</button>
        <button type="button" class="btn btn-primary"  id="fancybox-confirm-yes" >Yes</button>
    </p>
</div>

jQuery :

//creating a 'confirmed' attr = 0 for the forms and defining submit handler
$('form.submit-confirm[id]').attr('confirmed','0').submit(function(e){      

    if($(this).attr('confirmed') == '0') //the form is not confirmed yet
    {
        //setting the target-form attr of the 'Yes' button
        $('#fancybox-confirm-yes').attr('target-form',$(this).attr('id'));          

        //opening the fancybox
        $.fancybox.open({
            src  : '#fancybox-confirm',
            type : 'inline'
        });
        return false;
    }
    else
    {
            console.log('valid!'); //shown in the console when I click 'Yes'
            return; //validating the submission, not working...
    }

});

//The Yes button handler
$('#fancybox-confirm-yes').click(function(){
    if(!!$(this).attr('target-form'))
    {
        formSelector = '#' + $(this).attr('target-form');
        $(formSelector).attr('confirmed','1').submit();
    }
});

谢谢！

Answer 1

我建议简化逻辑，像这样：

创建具有简单按钮的表单（而不是 submit）。

<form method="post" action="" class="submit-confirm" id='upload-delete-form-1'>
    <input type="hidden" value="1.jpg" name="filename">
    <button name="delete" class="link" type="button">Delete</button>
</form>

相同的模态

<div id="fancybox-confirm" style="display:none;">
  <p>Sure ?</p>
  <p class="tar">
    <button type="button" class="btn" id="fancybox-confirm-no" data-fancybox-close>No</button>
    <button type="button" class="btn btn-primary" id="fancybox-confirm-yes">Yes</button>
  </p>
</div>

JS

$('form.submit-confirm[id] button.link').on('click', function(e) {
  $("#fancybox-confirm-yes").data('form-id', $(this).parent().attr('id'));

  $.fancybox.open({
    src  : '#fancybox-confirm',
    type : 'inline'
  });
});

$("#fancybox-confirm-yes").on('click', function() {
  $("#" +  $(this).data('form-id')).submit();
});

演示 - https://codepen.io/anon/pen/xYPypO?editors=1010

Answer 2

已解决！提交按钮名称 "submit" 是什么干扰！

表单通过 fancybox modal 提交验证 & jquery

Form submit validation via fancybox modal & jquery

jquery

forms

validation

fancybox