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="name22"id="phoneField" value=""/>
<input type="submit" name="name33"value="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();
});
});
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="name22"id="phoneField" value=""/>
<input type="submit" name="name33"value="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();
});
});
-
2
Note that the correct term is
modal, notmodel. Using "modal" in title might get better responses in future questions since model usually means something pletely different. I changed that for you on this question. – kaliatech Commented Jan 1, 2014 at 22:42
2 Answers
Reset to default 3Your 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.
- http://jsfiddle/kc8zb/9/
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.
I just changed your code a little bit
code will turn on modal on submit... check it out
$(function(){
$('form').on('submit', function () {
$('#modal-3').modal('show');
return false;
});
});
Here is the fixing up: I've changed your object a little :)
(function () {
var confirmSubmitManager = {
init: function () {
this.submitButton = null;
this.confirmButton = null;
this.modalContainerView = null;
this.isFormPrestine = false;
this.form = null;
this.inputs = [];
this.cache();
this.bindEvents();
return this;
},
cache: function() {
this.submitButton = $("input[type=submit]");
this.confirmButton = $("#doItLater");
this.modalContainerView = $("#modal-3");
this.inputs = $("#refrenceSubmit > input[type=text]");
this.form = $("#refrenceSubmit");
},
bindEvents: function () { // attach event handlers
this.submitButton.on('click', this.validateSubmit);
this.confirmButton.on('click', this.confirm);
},
validateSubmit : function() {
var self = confirmSubmitManager;
var dirtyInputs = 0;
for (var input in self.inputs) {
if ($(self.inputs[input]).val() == "") {
dirtyInputs++;
}
}
if (dirtyInputs > 0) {
alert("You must fill in at least one field");
self.isFormPrestine = false;
} else {
self.isFormPrestine = true;
}
// incase the inputs are pristeen
self.modalContainerView.modal('show');
return false;
},
confirm: function () {
var self = confirmSubmitManager;
if(self.isFormPrestine)
self.form.submit();
}
};
window.load = confirmSubmitManager.init();
})(jQuery);