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 !
Solved ! The submit button name "submit" is what interferred !