Search code examples
jqueryformsvalidationfancybox

Form submit validation via fancybox modal & jquery


I want a generic form validation that opens a fancybox modal pop-up, asking yes or no. I want it to work even if there are multiple forms.

Why is the form not submitted?

The HTML - Form:

<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>

The HTML - Modal pop-up:

<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>

The 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();
    }
});

Thanks !


Solution

  • Solved ! The submit button name "submit" is what interferred !