I created a form inside has username and id textbox, I want to display
a success modal that contains the value of username and id after form submit
to let the user see his username and id, And also i have an validation on my form , Now my problem is when i click submit
button with empty textfields the validation appear also the success modal also appear.
here is my sample code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<button type="button" class="btn" data-dismiss="modal" data-toggle="modal" data-target="#exampleModal1" style=" color:#fff; background:#00bcd4" onClick="incrementValue()" value="Increment Value">No</button>
<div class="modal fade right" id="exampleModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="false">
<div class="modal-dialog modal-full-height modal-right" role="document">
<div class="modal-content">
<div class="modal-header blue accent-1">
<h3 class="mt-2" style="color:white;"><i class="fa fa-user-circle"></i> New User :</h3>
<a href="test1.php" button type="btn" class="close" aria-label="Close">
<span aria-hidden="true">×</span></a> </div>
<div class="modal-body" style="height:300px">
<form class="needs-validation " method="post" novalidate >
<div class="row">
<div class="col">
<div class="md-form mt-0">
<input type="text" class="form-control" name="id" placeholder="ID" style="margin-top:-10px" id="id" required >
<div class="invalid-feedback">
Enter ID </div>
</div>
</div>
<div class="col">
<div class="md-form mt-0">
<input type="text" class="form-control" placeholder="Username" name="username" style="margin-top:-10px" id="username" required >
<div class="invalid-feedback">
Enter Username </div>
</div>
</div>
</div>
<div class="text-center mt-2" style="bottom:0; margin-bottom:10px;">
<button type="submit" id="submit" class="btn btn-info" style="width:95%;"
>Log in <i class="fa fa-sign-in ml-1"></i></button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modalSuccess" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" >
<div class="modal-dialog" role="document" style="width:85%" >
<div class="modal-content">
<div class="modal-header blue accent-1">
<h4 class="modal-title" id="myModalLabel" style="color:white;"><i class="fa fa-lock"> Info:</i></h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
display user's username and id here.
</div>
<div class="modal-footer">
<a class="btn btn-primary" href="test1.php" > Confirm</a>
</div>
</div>
</div>
</div>
here is my validation javascript for my form:
<script>
(function() {
'use strict';
window.addEventListener('load', function() {
var forms = document.getElementsByClassName('needs-validation');
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
here is my script for my modal:
<script>
$(document).ready(function(){
$("#submit").click(function(){
$("#modalSuccess").modal();
});
});
</script>
Advance Thanks :)
You have to check if the fields are filled in before calling
$("#modalSuccess").modal();
Also check in the validation script
<script>
(function() {
'use strict';
window.addEventListener('load', function() {
var forms = document.getElementsByClassName('needs-validation');
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if($('#username').val().trim().length > 0 && $('#id').val().trim().length > 0) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}
}, false);
});
}, false);
})();
</script>
And
<script>
$(document).ready(function(){
$("#submit").click(function(){
if($('#username').val().trim().length > 0 && $('#id').val().trim().length > 0) {
$("#modalSuccess").modal();
} else {
alert('Fill in both fields');
}
});
});
</script>
Related
How can I prevent the modal from popping up if all of the required fields are not validated?
As you can see, the validation works in the background, but I'm trying to present a summary of the form in the modal and I don't want it to display if it is not filled out correctly.
I would like the modal to just not display and force the user to correct the needed elements.
window.addEventListener('load', function () {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function (form) {
form.addEventListener('submit', function (event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
// modalOn();
});
}, false);
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css"
integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</head>
<body>
<form class="needs-validation" novalidate>
<div class="mb-3">
<label for="validationCustom01">Name</label>
<input type="text" class="form-control" id="validationCustom01" required>
<div class="invalid-feedback">
Please provide your name.
</div>
</div>
<div class="mb-3">
<label for="validationCustom01">Email</label>
<input type="email" class="form-control" id="validationCustom01" required>
<div class="invalid-feedback">
Please provide a valid email.
</div>
</div>
<div class="mb-3">
<label for="validationCustom01">Phone</label>
<input type="tel" class="form-control" id="phone" pattern="\d{3}-\d{3}-\d{4}" required>
<div class="invalid-feedback">
Please provide a valid phone number.
</div>
</div>
<br>
<button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- <div class="container">
<div class="row">
<div class="col text-center">
<button class="btn btn-primary" id="submit-button">Submit form</button>
</div>
</div>
</div> -->
</form>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/js/bootstrap.min.js"
integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+"
crossorigin="anonymous"></script>
</body>
$('form').submit(function () {
value = true;
var schoolName = $('#addSchoolName').val();
if (schoolName.trim() == '') {
$('#addSchoolName').addClass('border border-danger');
value = false;
}
if (value) {
return true;
}
else { return false;}
});
$("form").bind('ajax:complete', function () {
window.location.reload();
});
$('#close').on('click', function () {
$('#addSchoolName').removeClass('border border-danger');
$('#addSchoolName').val('');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal fade" id="addSchool" tabindex="-1" role="dialog" aria-labelledby="addSchoolTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered cls" role="document">
<div class="modal-content">
<div class="modal-header">
<label class="modal-title" id="addSchoolTitle">Add School Details</label>
</div>
<form asp-action="AddNewSchool" asp-controller="School" asp-antiforgery="true" method="post">
<div class="modal-body form-group row align-items-center">
<div class="col-md-4">
<label for="Name">School Name</label>
</div>
<div class="col-md-8">
<input class="form-control" name="Name" id="addSchoolName" />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary " id="close" data-dismiss="modal">Close</button>
<button type="submit" id="submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
</div>
I am using form inside modal and submitting that form. I want to reload my page So that after form submission the list behind that modal will update. I do not want to use Ajax call for form submission.
<div class="modal fade" id="addSchool" tabindex="-1" role="dialog" aria-labelledby="addSchoolTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered cls" role="document">
<div class="modal-content">
<div class="modal-header">
<label class="modal-title" id="addSchoolTitle">Add School Details</label>
</div>
<form asp-action="AddNewSchool" asp-controller="School" asp-antiforgery="true" method="post">
<div class="modal-body form-group row align-items-center">
<div class="col-md-4">
<label for="Name">School Name</label>
</div>
<div class="col-md-8">
<input class="form-control" name="Name" id="addSchoolName" />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary " id="close" data-dismiss="modal">Close</button>
<button type="submit" id="submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
</div>
and write now I am applying this validation on the form.
#section scripts{
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript">
$('form').submit(function () {
value = true;
var schoolName = $('#addSchoolName').val();
if (schoolName.trim() == '') {
$('#addSchoolName').addClass('border border-danger');
value = false;
}
if (value) {
return true;
}
else { return false;}
});
$("form").bind('ajax:complete', function () {
window.location.reload();
});
$('#close').on('click', function () {
$('#addSchoolName').removeClass('border border-danger');
$('#addSchoolName').val('');
});
</script>
I do not wants to use ajax call for form submission, I want to reload the page after submitting the form inside modal so that the list behind that modal will be updated.
I'm a bit confused because by default it should be reloading on the submit function. This is why we use event.preventDefault at the end. but if you want there is always location.reload
https://www.w3schools.com/jsref/met_loc_reload.asp
How are you ? I'm working on simple project and I want to do a simple trick in my app.
I want to Clear the Input type file Value if the Modal has been Closed
mean if the user decided to Cancel the upload and close the modal I want to reset the input value to be empty and Save All changes Button should be disabled if the value is empty ....
HTML CODE :
<div class="modal fade" id="modal_a" tabindex="-1" role="dialog" aria-labelledby="modal_aLabel" aria-hidden="true"data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="uploadavatar">
<input type="file"
class="custom-file-input"
id="ID12"
name="avatar"
value=""
hidden />
<label role="button" class="btn" for="ID12">
Upload Now
</label>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" id="button1" disabled>Save All changes</button>
</div>
</div>
</div>
</div>
JS CODE :
$(document).on('shown.bs.modal', '#modal_a', function() {
if ($(this).hasClass('show')) {
$('#ID12').on('change', function() {
if ($(this).val() == '') {
$('#button1').prop('disabled', true);
} else {
$('#button1').prop('disabled', false);
}
$(this).attr('value', $(this).val());
});
}
});
$(document).on('hide.bs.modal', '#modal_a', function(e) {
if ($('#ID12').val() != '') {
const CancelUpdateConfirmation = confirm('Are you sure! 🤔 you want to Close the modal and Cancel your Upload? 🙄');
if (!CancelUpdateConfirmation) {
e.preventDefault();
} else {
}
}
});
Like this.
$( document ).ready(function() {
$('#exampleModal').on('hidden.bs.modal', function (e) {
$('#ID12').val('')
$('#button1').prop('disabled', true);
})
$('#exampleModal').on('hide.bs.modal', function (e) {
if ($('#ID12').val() != '') {
const CancelUpdateConfirmation = confirm('Are you sure! 🤔 you want to Close the modal and Cancel your Upload? 🙄');
if (!CancelUpdateConfirmation) {
e.preventDefault();
} else {
}
}
})
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<input type="file"
id="ID12"
name="avatar"
value=""
/>
<button type="submit" class="btn btn-primary" id="button1">Save All changes</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
My goal is to display a fresh modal every time it is opened. Currently, that is only true when the modal window is first displayed after refreshing the page. For the subsequent closing/opening of the modal, it just appends the current content to the end of the previous content, which is still displayed.
It may be worth noting that with this particular configuration of the countless efforts tried, I get an
Uncaught ReferenceError: $ is not defined
in my Javascript console for the line
$(document).ready(function() {
but I'm not sure why. The jQuery library (3.2.1) is initialized for the script type it's being used with after all. Any clue?
<!-- Form -->
<form onsubmit="return false">
<!-- Heading -->
<h3 class="dark-grey-text text-center">
<strong>Calculate your payment:</strong>
</h3>
<hr>
<div class="md-form">
<i class="fa fa-money prefix grey-text"></i>
<input type="text" id="income" class="form-control">
<label for="income">Your income</label>
</div>
<div class="text-center">
<button type="button" class="btn btn-pink" onclick="calculator()" data-toggle="modal" data-target="#exampleModal">Calculate</button>
<script type='text/javascript'>
function calculator() {
let payment = ((document.getElementById("income").value - 18210)*0.1)/12;
payment = Math.round(payment);
if (payment <= 0) {
$('.modal-body').append("$0 per month.");
}
else {
$('.modal-body').append(payment + " or less per month.");
}
}
</script>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">You should be paying:</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div id="test" class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Clear content from modal -->
<script type="text/javascript">
$(document).ready(function() {
$('.exampleModal').on('hidden.bs.modal', function () {
$('.modal-body').clear();
});
});
</script>
<hr>
<label class="grey-text">* This is just an estimate. Please call for a quote.</label>
</fieldset>
</div>
</form>
<!-- Form -->
You should use .html or .text instead of .append
if (payment <= 0) {
$('.modal-body').text("$0 per month.");
}
else {
$('.modal-body').text(payment + " or less per month.");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Form -->
<form onsubmit="return false">
<!-- Heading -->
<h3 class="dark-grey-text text-center">
<strong>Calculate your payment:</strong>
</h3>
<hr>
<div class="md-form">
<i class="fa fa-money prefix grey-text"></i>
<input type="text" id="income" class="form-control">
<label for="income">Your income</label>
</div>
<div class="text-center">
<button type="button" class="btn btn-pink" onclick="calculator()" data-toggle="modal" data-target="#exampleModal">Calculate</button>
<script type='text/javascript'>
function calculator() {
let payment = ((document.getElementById("income").value - 18210)*0.1)/12;
payment = Math.round(payment);
if (payment <= 0) {
$('.modal-body').text("$0 per month.");
}
else {
$('.modal-body').text(payment + " or less per month.");
}
}
</script>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">You should be paying:</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div id="test" class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Clear content from modal -->
<script type="text/javascript">
$(document).ready(function() {
$('.exampleModal').on('hidden.bs.modal', function () {
$('.modal-body').clear();
});
});
</script>
<hr>
<label class="grey-text">* This is just an estimate. Please call for a quote.</label>
</fieldset>
</div>
</form>
<!-- Form -->
Try doing $('modal-body').empty() instead of clear
I have a bootstrap button (I used bootstrap 4) that open a modal and transfer the data that in the button to the form in the modal by the function:
$('#exampleModal').on('show.bs.modal', function (event).
the button is in a div (parent).
when I click on the button the parent event called before the child.
I don't want the parent event to be run.
I need only the popup modal to open.
when I try to open the button by onclick its call first but the data is not transfer.
this is my code example: codepen
this is the html
<div class="row">
<div class="col-12 parent">
I'm the parent!
<div class="child">
I'm the child
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#mdo" data-message="#test message" >Open modal </button>
</div>
</div>
</div>
<!-- Bootstrap Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="form-control-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="form-control-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
this is the script
<script>
$(".parent").click(function(event){
alert("Parent event");
})
/*
if I add this function I cant transfer the data that in the button
$(".child").click(function(event){
alert("Child event");
event.stopPropagation();
$('#exampleModal').modal('show');
})*/
$('#exampleModal').on('show.bs.modal', function (event) {
alert("btn event");
var button = $(event.relatedTarget) // Button triggered the modal
var recipient = button.data('whatever')
var message = button.data('message')
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
modal.find('.modal-body textarea').val(message)
})
</script>
Quite simple in the parent click , check if target is different to the button with data-target='#exampleModal' or not , all that using the .is() jquery function like below :
//get reference to the button
var $button = $("button[data-target='#exampleModal']");
$(".parent").click(function(event){
if (!$(event.target).is($button)) { // be sur button was'nt clicked
alert("Parent event");
}
})
Updated Pen
See below working snippet :
var $button = $("button[data-target='#exampleModal']");
$(".parent").click(function(event){
if (!$(event.target).is($button)) {
alert("Parent event");
}
})
$('#exampleModal').on('show.bs.modal', function (event) {
alert("btn event");
var button = $(event.relatedTarget) // Button triggered the modal
var recipient = button.data('whatever')
var message = button.data('message')
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
modal.find('.modal-body textarea').val(message)
})
body {
background-color: #a3d5d3;
}
.col-12{ background:red; height:100px;}
.child{background:white;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-12 parent">
I'm the parent!
<div class="child">
I'm the child
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#mdo" data-message="#test message" >Open modal </button>
</div>
</div>
</div>
<!-- Bootstrap Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="form-control-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="form-control-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>