Sunday, June 2, 2024
 Popular · Latest · Hot · Upcoming
40
rated 0 times [  45] [ 5]  / answers: 1 / hits: 15055  / 11 Years ago, wed, january 1, 2014, 12:00:00

I am trying to show modal on submit of form with some condition such as:



form have two text field, if one of them is filled then modal will be shown to user with some info and If both field are not filled then form will not bo going to submit
For this I did this but not getting success..



jsfiddle: jsFidle Link



<div id=modal-3 class=modal fade tabindex=-1 role=dialog aria-labelledby=myModalLabel aria-hidden=true>
<div class=modal-content>
<div class=modal-header>
<button type=button class=close data-dismiss=modal aria-hidden=true>×</button>

<h3 id=myModalLabel>Modal header</h3>
</div>

<div class=modal-body>
<p>do you want to save partial info</p>
</div>

<div class=modal-footer>
<button class=btn data-dismiss=modal aria-hidden=true id=finishNow>Finish Now</button>
<button class=btn btn-primary data-dismiss=modal id=doItLater>Do It Later</button>
</div>
</div>
</div>


<a href=#modal-3 role=button class=btn data-toggle=modal id=confirmButton>Confirm</a>



<form name=asd action=asdd name=formName id=refrenceSubmit >
<input type=text name=name11 id=nameField value=/>
<input type=text name=name22id=phoneField value=/>
<input type=submit name=name33value=Submit />
</form>


js:



$(function(){
$(#refrenceSubmit).submit(function(){

var inputFieldsCount=0;
$(this).find('input[type=text]').each(function(){
if($(this).val() != ) inputFieldsCount+=1;
});

if(!inputFieldsCount){
alert(You must fill in at least one field);
return false;
}else if(inputFieldsCount<2){
$('#confirmButton').click()
$('#showModelContainer').show()
$('#doItLater').click(click,function (e) {
$('#refrenceSubmit').submit()
}
});
return false;
}
});
});


EDITED JAVASCRIPT:



$(function(){
$(#submitAndContinue).click(function(evt){

var inputFieldsCount=0;
$('.refrenceSubmit').find('input[type=text]').each(function(){
if($(this).val() != ) inputFieldsCount+=1;
});

if(!inputFieldsCount){
alert(You must fill in at least one field);
evt.preventDefault();
}else if(inputFieldsCount<5){

$('#modal-3').modal('show');
evt.preventDefault();
}
else {
$('#modal-3').modal('hide'); //in-case is showing
}
});

$('#doItLater').on(click,function (e) {
$('#saveAndContinue').val('saveAndContinue');
$('.refrenceSubmit').submit();
});
});

More From » jquery

 Answers
32

Your original HTML code in jsfiddle was hiding the enclosing container of the modal. Also, there was a syntax error in the JavaScript. Here is a new jsfiddle that fixes those issues and also shows how to trigger the modal, and then manually submit when a button in the modal is clicked.





Code:



$(function(){
$(#refrenceSubmit).submit(function(evt){

var inputFieldsCount=0;
$(this).find('input[type=text]').each(function(){
if($(this).val() != ) inputFieldsCount+=1;
});

if(!inputFieldsCount){
alert(You must fill in at least one field);
evt.preventDefault();
}else if(($('#nameField').val()==)&&
($('#phoneField').val()!=)){

$('#modal-3').modal('show');
evt.preventDefault();
}
else {
$('#modal-3').modal('hide'); //in-case is showing
}


});

$('#doItLater').click(click,function (e) {
$('#nameField').val(not clear what you intended, but this sets value in name field);
$('#refrenceSubmit').submit();
});

});


It's was not clear what you want to do, but this should give you a starting point. If you want to hook in to the modal, you can bind to click events on the modal's buttons, or you can watch for the modal close event.



Also, be aware that returning false to cancel a submit event is deprecated. Instead use preventDefault.


[#49081] Tuesday, December 31, 2013, 11 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
jenamackennac

Total Points: 304
Total Questions: 110
Total Answers: 107

Location: Ecuador
Member since Thu, Jun 4, 2020
4 Years ago
jenamackennac questions
Fri, Feb 18, 22, 00:00, 2 Years ago
Wed, Apr 21, 21, 00:00, 3 Years ago
Thu, Apr 1, 21, 00:00, 3 Years ago
Tue, Feb 2, 21, 00:00, 3 Years ago
;