I have 2 forms on page. And I want to add confirm for users if they change their profile information and wish to leave the page without saving information. I use jQuery.
I want to show the modal window with two buttons - leave the page and stay on the page
Also when the user clicks on the save button - the page reloads. But I don't need to show confirmation if user clicks on save button. Only if user wants to leave the page without saving profile info
first form
<div class="form-group">
<input autocomplete="off" type="text" required="" class="form-control" value="candidate77" name="cand_name" placeholder="Write Full Name">
<input class="file-caption-name" placeholder="Select file">
<select class="select-generat form-control select2-hidden-accessible" name="cand_salary_type" tabindex="-1" aria-hidden="true">
<option value="34" selected="selected">Monthly</option>
<option value="35">Weekly</option>
<option value="36">Hourly</option>
<option value="37">Yearly</option>
</select>
<textarea name="cand_intro" data-parsley-error-message="Feild is required" class="form-control rich_textarea" cols="30" rows="10" data-origin="textarea">1231</textarea>
<input type="submit" value="Save Information" class="btn n-btn-flat cand_person_save">
</div>
second form
<div class="col-md-12 col-xs-12 col-sm-12">
<div class="row">
<div class="col-md-12 col-lg-12 col-xs-12 col-sm-12">
<div class="form-group">
<div id="dropzone" class="dropzone dz-clickable">
<div class="dz-default dz-message"><span>undefined</span></div>
</div>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<label>Video url (only youtube)</label>
<input type="text" placeholder="Put youtube video link" value="" name="cand_video" class="form-control">
</div>
</div>
</div>
</div>
<div class="col-md-12 col-xs-12 col-sm-12">
<input type="submit" value="Save Portfolio" class="btn n-btn-flat">
</div>
modal form
<div id="openModal" class="modalDialog">
<div>
X
<h2>Are you sure you want to leave this page?</h2>
<p>please save updates</p>
</div>
Leave page
Stay on page
</div>
Jquery code
$(document).ready(function(){
var is_changed = 0;
$(".form-control").on("input", function(){
is_changed = 1;
});
//textarea
$('rich_textarea').on('input propertychange paste', function() {
is_changed = 1;
});
//dropzone
$(".dropzone").on('click', function(){
is_changed = 1;
});
window.onbeforeunload = confirmExit;
function confirmExit() {
if (is_changed == 1) {
$('#openModal').show();
}
}
});
Related
Can I listen for jquery modal close event from another file?
I created the modal in a different PHP file and when I use the event listener in my modal PHP file it works but when I use it like below it doesn't work.
The modal hide function is called in the CreateUserModal.php. What I want to happen is when a user is created successfully the modal closes and triggers a JS function in the user.php page that gets all the users in the system.
Here is my user.php file
<body>
<div>
<div>
<button class="btn btn-primary btn-md" id="add-user">
<i class="fa fa-plus " aria-hidden="true"></i>
</button>
<div class="modal-container"></div>
</div>
<div id="userTable" style="color:black"></div>
<script>
$('#add-user').click(function(e) {
var url = "https://centralamericanmanagement.000webhostapp.com/pages/components/Modals/CreateUser.php";
$('.modal-container').load(url,function(result){
$('#CreateUserModal').modal({show:true});
});
});
$('#CreateUserModal').on('hidden.bs.modal', function() {
console.log('Modal Has been closed');
});
</script>
</div>
</body>
From here when the add-user button is clicked the modal is opened in the modal-container div. The code for that is:
CreateUserModal.php
<link rel="stylesheet" href="../../../styles/pageForms.css">
<div id="CreateUserModal" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content" style="
background-color: transparent;
border: none;
">
<div class="pageForms-form">
<form id="CreateUser" action="//centralamericanmanagement.000webhostapp.com/pages/CreateUser.php" method="POST">
<h2>Create User</h2>
<hr>
<b style='color:red' id="errors"></b><br>
<div class="form-group">
<div class="row">
<div class="col"><input type="text" class="form-control" name="FirstName" placeholder="First Name" required="required"></div>
<div class="col"><input type="text" class="form-control" name="LastName" placeholder="Last Name" required="required"></div>
</div>
</div>
<div class="form-group">
<select class="form-control" id="role" name="role">
<option value="">User Type</option>
<option value="2">User</option>
<option value="1">Admin</option>
</select>
</div>
<div class="form-group">
<input type="email" class="form-control" name="email" placeholder="Email" required="required">
</div>
<div class="form-group">
<input type="password" class="form-control" name="password" placeholder="Password" required="required">
</div>
<div class="form-group">
<input type="password" class="form-control" name="confirm_password" placeholder="Confirm Password" required="required">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-lg" style="width:100%;" name="submit" value="submit">Create</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$("#CreateUser").submit(function(e){
e.preventDefault();
$.ajax({
type: 'post',
url: '//centralamericanmanagement.000webhostapp.com/phpfiles/CreateUser.php',
data: $("#CreateUser").serialize(),
success: function (data) {
var obj = JSON.parse(data)
if(obj['success'] == 0)
{
$("#errors").html(obj['message']);
}
if(obj['success'] == 1)
{
$('#CreateUserModal').modal('hide');
}
}
});
});
</script
You can use the Event-Listener on every Html-Element. For example your modal container. So you could just change this line:
<div class="modal-container"></div>
and give it an id
<div id="modal-container" class="modal-container"></div>
then you change the listener to
$('#modal-container').on('hidden.bs.modal', function() {
console.log('Modal Has been closed');
});
Also wrap '$(document).ready(function() {}' around the event listener initialization.
The problem is, that at the time the event listener ist created, the modal is probably not part of the page. So jquery can't find it and can't init the event listener.
I have an application with multiple tabs/form that will be submitted. Instead of having separate submit function for each form I want to design one dynamic function that will submit any form with submitFrm class. Here is an example of my current code:
$('.frmSubmit').on('submit', submitFrm);
function submitFrm(e) {
e.preventDefault(); // Prevnts default form submit.
var frmID = $(this).prop("id"),
formData = $('#' + frmID).serialize(), //or this way $(this).serialize()
submitBtn = $(this).find(':submit');
if (formData) {
$('#' + frmID).find(':submit').prop('disabled', true); // Disable submit button
// or this submitBtn.prop('disabled', true);
/*
Here is AJAX call.
*/
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="frmTab1" id="frmTab1" class="frmSubmit" autocomplete="off">
<div class="form-group">
<label class="control-label" for="activ"><span class="label label-primary">Active:</span></label>
<select class="form-control" name="frmTab1_active" id="frmTab1_active" required>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
<div class="form-group">
<label class="control-label" for="code"><span class="label label-primary">Code:</span></label>
<input type="text" class="form-control" name="frmTab1_code" id="frmTab1_code" maxlength="4" required>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="submit" name="frmTab1_submit" id="frmTab1_submit" class="btn btn-primary">Submit</button>
</div>
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div id="message" class="alert message-submit"></div>
</div>
</div>
</form>
I'm debating should I use $(this) object to find(), serialize() form data or I should use form id? Is there any difference? I'm also wondering if I use this function from multiple forms to submit data is that good practice? If anyone has any suggestions please let me know.
You could use simply $(this).serialize() like :
$('.frmSubmit').on('submit', submitFrm);
function submitFrm(e) {
e.preventDefault();
var formData = $(this).serialize();
var submitBtn = $(this).find(':submit');
if (formData) {
submitBtn.prop('disabled', true);
}
return false;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="frmTab1" id="frmTab1" class="frmSubmit" autocomplete="off">
<div class="form-group">
<label class="control-label" for="activ"><span class="label label-primary">Active:</span></label>
<select class="form-control" name="frmTab1_active" id="frmTab1_active" required>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
<div class="form-group">
<label class="control-label" for="code"><span class="label label-primary">Code:</span></label>
<input type="text" class="form-control" name="frmTab1_code" id="frmTab1_code" maxlength="4" required>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="submit" name="frmTab1_submit" id="frmTab1_submit" class="btn btn-primary">Submit</button>
</div>
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div id="message" class="alert message-submit"></div>
</div>
</div>
</form>
I have been working on my new application and I use JQuery,HTML5 and Bootstrap 3 to develop my front end pages. However, in all the form in my app I need to show the message to the user after they submit the form. I tried to do the research and see what is the best way to do that but there is a lot of different opinions/options. Here is my example:
$('#frmSave').on('submit', submitFrm);
function submitFrm(e) {
e.preventDefault(); // Prevnts default form submit.
var frmID = e.target.id,
formData = $('#' + frmID).serialize();
$('#' + frmID).find(':submit').prop('disabled', true); // Disable submit button
if (formData) {
$('#frm_message').show().addClass('alert-success').html('Record successully saved!').delay(7000).fadeOut('slow').queue(function() {
$(this).removeClass('alert-success').dequeue();
$('#' + frmID).find(':submit').prop('disabled', false);
});
} else {
$('#frm_message').show().addClass('alert-danger').html('Error!').delay(7000).fadeOut('slow').queue(function() {
$(this).removeClass('alert-danger').dequeue();
$('#' + frmID).find(':submit').prop('disabled', false);
});
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form name="frmSave" id="frmSave" autocomplete="off">
<div class="form-group">
<label class="control-label" for="active"><span class="label label-primary">Active:</span></label>
<select class="form-control" name="frm_active" id="frm_active" required>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
<div class="form-group">
<label class="control-label" for="code"><span class="label label-primary">Code:</span></label>
<input type="text" class="form-control" name="frm_code" id="frm_code" maxlength="4" required>
</div>
<div class="form-group">
<label class="control-label" for="name"><span class="label label-primary">Name:</span></label>
<input type="text" class="form-control" name="frm_name" id="frm_name" maxlength="50" required>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="submit" name="frm_submit" id="frm_submit" class="btn btn-primary">Submit</button>
</div>
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div id="frm_message" class="alert alert-Submit"></div>
</div>
</div>
</form>
While I was researching on the web I noticed that some application do not use time out for the message. They simple just leave the message on the form. To me that was bit confusing and I do not see a purpose of leaving that message on the screen. I use the timer and message disappears after 7 seconds. I'm wondering if there is better way to do this? Or the way I'm doing is one of the ways to go.
When I click on my next button and it goes to step 2 and if I reload the page I would like to make sure it stays on the same div that I am on.
The 2 divs I use are join_form_1 and join_form_2
At the moment it when I reload page it goes back to first div
How can I make it stay on the div I am on?
Codepen Example Here
$(document).ready(function(){
$("#join_form_2").hide();
$("#step_1_link").addClass("active");
$("#next").click(function(){
$("#step_1_link").removeClass("active");
$("#step_2_link").addClass("active");
$("#join_form_1").hide();
$("#join_form_2").show();
});
});
HTML
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="heading-message">
<div class="text-center">
<i class="fa fa-user" aria-hidden="true"></i>
</div>
<div class="text-center">
<h1>Request A Admin Member Login</h1>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
<ol class="steps list-inline">
<li id="step_1_link">
Step 1: Set up a personal account
</li>
<li id="step_2_link">
Step 2: Choose profile picture
</li>
</ol>
<div id="join_form_1">
<div class="form-group">
<label>Username</label>
<input type="text" name="username" value="" class="form-control" placeholder="" />
</div>
<div class="form-group">
<label>Email</label>
<input type="text" name="email" value="" class="form-control" placeholder="" />
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" value="" class="form-control" placeholder="" />
</div>
<div class="form-group">
<label>Confirm Password</label>
<input type="password" name="confirm_password" class="form-control" placeholder="" />
</div>
<div class="form-group">
<button type="button" class="btn btn-default" id="next">Next</button>
</div>
</div><!-- Setup_1 -->
<div id="join_form_2">
<div class="form-group">
<label>Upload A Image</label>
<input type="file" name="userfile" size="50" />
</div>
</div><!-- Setup_1 -->
</div>
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<div class="info-box">
<h2>You'll Love This Forum</h2>
</div>
</div>
</div>
</div>
You can use javascript cookie API here
So when user clicks 'Next'
Cookies.set('active', 'join_form_2');
Than if user clicked in the previous session, show form 2.
if (Cookies.get('active') == 'join_form_2') {
$("#join_form_1").hide();
$("#step_1_link").removeClass("active");
} else {
$("#join_form_2").hide();
$("#step_1_link").addClass("active");
}
Here is working codepen.
The easiest and most reliable way to do this is to use Fragment_identifier along with :target pseudo selector.
This will work even if cookies are disabled. And since you're using bootstrap, it's easy to style <a> tags like buttons.
For example:
if (!window.location.hash) {
window.location.hash = 'step1';
.steps:not(:target) {
display: none;
}
step1
step2
<div id="step1" class="steps">Step1</div>
<div id="step2" class="steps">Step2</div>
I am not able to enter the data to the previous page using ng-model. I moved to the next page after filling some data in textbox, after come to same page I want my data to be entered same as I entered previously, I write the code but its not working please tell me what I am doing wrong and thanks in advance
js code:
$scope.notesPage = function() {
$rootScope.data = {
Name: $scope.prospectName,
};
$location.path('/prospectNotes');
};
$scope.addProspect = function() {
$rootScope.data.ProspectNotes = $scope.notes;
$scope.ProspectNotes = "";
};
function fillFormData() {
$scope.prospectName = $rootScope.data.Name;
}
$scope.addProspectForm = function() {
$location.path('/create');
fillFormData();
}
first html page
<div class="container" id="form-container">
<div class="form-group">
<label for="prospectName"> Prospect Name:
<img src="images/required.gif" alt="Required" class="required-star">
</label>
<input type="text" id="prospectName" name="prospectName" ng-model="prospectName" class="form-control" required>
</div>
<div class="form-group">
<button type="submit" class="col-sm-2 btn btn-primary" ng-click="notesPage()" style="margin-left:10px;"> Next </button>
</div>
</div>
second html page
<div class="container" id="form-container">
<div class="form-group">
<label for="notes"> Notes for Prospect {{data.Name}}</label>
<textarea rows="20" id="notes" name="notes" ng-model="notes" class="form-control"></textarea>
</div>
<div class="form-group">
<input type="button" id="cancel-button" value="Back" class="col-sm-2 btn btn-primary" ng-click="addProspectForm()">
<button type="submit" class="col-sm-2 btn btn-primary" ng-click="addProspect()" style="margin-left:10px;"> Add </button>
</div>
</div>
Use a factory to store your data and then retrieve the same.
check this one:
Can I keep the model value when click browser back button with angularjs?