I'm using the jSignature plugin to add signature capture to a simple Bootstrap modal window - the signature capture displays correctly and I can draw and save the signature without any issues. Here's a screenshot showing the signature modal window in action:
At present the user must enter their signature then click the Save button below the signature for it to be saved. They then have to click the Submit button to submit the form which updates a database etc.
Here's the html code for the modal window:
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Approver Signature</h4>
</div>
<div class="modal-body">
<form id="saveEvent" action="update.php" method="post">
<div class="form-group">
<input type="hidden" name="id" value="123456">
<input type="hidden" id="hiddenSigData" name="hiddenSigData" />
<label for="yourName">Approver Name</label>
<input type="text" class="form-control" id="managerName" name="managerName" placeholder="Manager's Name" value="Peter Rabbit">
<label for="managerNotes">Approver Notes</label>
<input type="text" class="form-control" id="managerNotes" name="managerNotes" placeholder="Manager's Notes" value="">
</div>
<div class="form-group">
<label for="yourSignature">Approver Signature</label>
<div id="signature"></div>
<button type="button" class="btn btn-default" onclick="$('#signature').jSignature('clear')">Clear</button>
<button type="button" class="btn btn-primary" id="btnSave">Save</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-success">Submit</button>
</div>
</form>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
We have found them many users are forgetting to click the Save button to first save the signature and simply clicking the Submit button which submits the form but doesn't include the signature, and by the time we notice it's too late to get the signature again.
Here's the Javascript that runs when the signature Save button is clicked:
$(document).ready(function() {
$('#btnSave').click(function() {
var sigData = $('#signature').jSignature('getData', 'default');
$('#hiddenSigData').val(sigData);
console.log('jSignature saving signature');
});
})
We're looking for a way, when the Submit button is pressed, to automatically save the signature first and then submit the form. Not sure if this is possible or how to achieve this?
You can use an event handler.
$("#saveEvent").submit(function(){
var sigData = $('#signature').jSignature('getData', 'default');
$('#hiddenSigData').val(sigData);
console.log('jSignature saving signature');
});
You're done!
Related
I am trying to submit the form.I am using ng-submit.After clicking a particular user inside table i am calling modal popup with firstName.
Here is the code for html.
<form ng-submit="submitPunch()" class="form" ng-show="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-
hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Employee Punch In</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12 col-lg-12 form-group mgl15">
<label for="type">Employee</label><br>
<input type="hidden" ng-model="formData.employeeId">
{{firstName}} /* Here i want to show only firstName but i want to pass corresponding id of the employee with formData */
</div>
<div class="col-md-6 col-lg-6 form-group mgl15">
<label for="PIN">{{'label.Enter_Pin'|i18next}} <span
class="text-red">*</span></label>
<input class="form-control" id="pin" ng-model="formData.pin"
type="text" required>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-
dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" ng-
disabled="submitStatus==='success'">Submit</button>
</div>
</form>
Here is how i am passing firstName to modal
Controller.js
$scope.testpopup = function(employee){
$scope.firstName = employee.firstName;
$scope.employeeId=employee.id;
console.log($scope.employeeId);//Here i am getting id
$(".testmodal").modal("show");
}
Now i want to send employee id along with pin.But if i bind employeeId with formData it is not taking.I want to pass id along with pin for saving.Can anyone tell how to bind id with formData?If i put console($scope.formData) it is showing only pin entered but not employee id.
Here's a fiddle that I've made.
$scope.testpopup = function(employee){
$(".modal").modal("show");
$scope.selectedEmployee = employee;
}
If this does not match with your intent, please give me feedback.
But I recommend you to use uib-modal.
.
.
.
UPDATE
Another fiddle is here.
Is this more close with your purpose?
Here's the code of an Angular 4 component used to collect contact information from visitors:
.html:
<form (submit)="onCreateContact()">
<div class="form-group">
<input type="text" [(ngModel)]="contactname" name="contactname" class="form-control form-control-lg" placeholder="Name">
</div>
<div class="form-group">
<input type="email" [(ngModel)]="contactemail" name="contactemail" class="form-control form-control-lg" placeholder="Email">
</div>
<div class="form-group">
<input type="text" [(ngModel)]="contactphone" name="contactphone" class="form-control form-control-lg" placeholder="Phone">
</div>
<input type="submit" class="btn btn-outline-light btn-block" data-toggle="modal" data-target='#addContactModal'>
</form>
<!-- Modal -->
<div class="modal fade" id="addContactModal" tabindex="-1" role="dialog" aria-labelledby="addContactModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="addContactModalLabel">Contact</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Thanks for contacting us! We will get in touch with you shortly.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
.ts:
onCreateContact() {
let contact = {
contactname: this.contactname,
contactemail: this.contactemail,
contactphone: this.contactphone
}
return this.http.post('api/contacts/add', contact).map(res => res.json()).subscribe(data => {
if(data.success) {
console.log(data);
} else {
console.log('Failed to add contact');
}
}
);
}
All contact fields are required; the data is not passed to the backend if not all fields are filled.
Currently, the Bootstrap modal popups every time I press the submit button, even when the data is not passed. How can I show it only when the data is actually passed to the server?
You are toggling the modal when the user clicks on the submit button.
What you need to do is, toggle the modal from component class(.ts) after getting the response from the backend.
So in your ".ts" file add below line under the imports section
declare var $: any;
Then toggle modal after receiving response from backend as below
onCreateContact() {
return this.http.post('api/contacts/add', contact).map(res => res.json()).subscribe(data => {
if(data.success) {
console.log(data);
$('#addContactModal').modal('show'); // Add this line
} else {
console.log('Failed to add contact');
$('#errorModalId').modal('show'); // If you are planning to show error modal when something goes wrong.
}
});
}
Don't forget to remove data-toggle and data-target attribute from submit button.
Hope this helps.
I have a form like below,
<form id="compose" method="post" name="new_message">
<div id="new_message">
<div>
<label class="required" for="new_message_subject">Subject</label>
<input type="text" class="form-control" required="required" name="new_message[subject]" id="new_message_subject">
</div>
<div>
<label class="required" for="new_message_receiver">To</label>
<select class="form-control" name="new_message[receiver]" id="new_message_receiver">
<option value="2">fnamexxxxx lname</option>
<option value="5">tester testerlast</option>
<option value="7">bummer bumlast</option>
</select>
</div>
<div>
<label class="required" for="new_message_content">Content</label>
<textarea class="form-control" required="required" name="new_message[content]" id="new_message_content"></textarea>
</div>
<div>
<button class="btn btn-primary" name="new_message[Compose]" id="new_message_Compose" type="submit">Compose</button>
</div>
<input type="hidden" name="new_message[_token]" id="new_message__token">
</div>
and using the preventDefault() I have stopped the form submission and then used a bootstrap modal to for a confirmation message and you can see my Jquery function and the bootstrap modal below.
<script>
document.getElementById("compose").addEventListener("submit", function(event){
event.preventDefault();
var title = $("#new_message_subject").val();
var to = $("#new_message_receiver :selected").text();
var message = $("#new_message_content").val();
$('#title').text(title);
$('#to').text(to);
$('#message').text(message);
$('#myModal').modal('show');
$('#send').click(function(){
// avoid preventDefault() and submit form code here
});
});
</script>
<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Message send confirmation</h4>
</div>
<div class="modal-body">
<h4 id="title"></h4>
<p><b>To</b></p>
<p id="to"></p>
<p><b>Message</b></p>
<p id="message"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" id="send" class="btn btn-primary">Send</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
The scenario is when a user click the form submit button, then the bootstrap modal pops up and ask to confirm the form submission and if a user clicks the Send button, id="send" then form needs to do its action / submission.
Now what I am trying to do is when the user is click the Send button in the modal the form needs to be submitted. I have tried few ways of doing this but could not avoid the preventDefault() and submit the form.
Your script code should be as below.
<script>
$("#compose").submit(function (objEvent) {
objEvent.preventDefault();
var title = $("#new_message_subject").val();
var to = $("#new_message_receiver :selected").text();
var message = $("#new_message_content").val();
$('#title').text(title);
$('#to').text(to);
$('#message').text(message);
$('#myModal').modal('show');
$(this)[0].submit();
})
</script>
I would like to use "confirm password form" (it is at bootstrap - modal) nested on a site tour step. Actually i have just did it. But the problem is i cant merge 2 different functions on one button which "confirms password" and the "next" step.
The purpose of merging these functions:
When a user confirms password normally closes the modal box and works fine thanks to this code below.
<script>
$(function(){
$("#basicModal").modal();
$(".update-password").click(function(){
var new_password = $("#new-password").val();
var confirm_password = $("#confirm-password").val();
if(new_password==""){
$("#new-password").focus();
return;
}
if(confirm_password==""){
$("#confirm-password").focus();
return;
}
});
setTimeout(function(){
$("#basicModal").modal('hide');
},25000);
$("#upd-btn").click(function(){
$("#basicModal").modal();
});
})
But it shouldnt close anymore and continue to next step.. So i try to merge them but i dont have enough code experience to solve this by myself.. so i need you to support me on this problem guys.. while you are reading i ll keep up to try.. thank you all..
related code of the "button" and the "next" link is here below
<div class="" id="step-id-1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Create your password pls.</h4>
</div>
<form action="<?php echo $_SERVER['PHP_SELF'] ?>" method="post">
<div class="modal-body">
<p>You should fill the field with password </p>
<p><input type="password" class="form-control input-lg" id="new-password" required placeholder="Yeni Şife.." name="new-password" /></p>
<p><input type="password" class="form-control input-lg" id="confirm-password" required placeholder="Repeat you password pls.." name="confirm-password" /></p>
<?php if($flag){ ?>
<div style="padding:5px 10px; color:#fff; background:#F00">Passwords are unmatched, refill the form please</div>
<?php } ?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
**<button type="submit" class="btn btn-primary update-password">Confirm your password</button>**
</div></form>
**Next step**
</div>
</div>
</div>
Have the one function call the other, or create a 3rd function that calls both and call that 3rd function with the button.
I'm just learning about bootstrap..I need help from anyone who know how to send variable value to a modal..
to make it even clearer, I have a table with action column. the action column consist of edit and delete button. if the edit button clicked, then a modal with edit form appear ( I put the modal in the same file with the modal trigger button). my question is, how do I send the ID of the following data to the edit form in the modal???
here is the code of edit(update) data:
<a data-target="#modal-edit-user" data-toggle="modal"> <i class=" glyphicon glyphicon-edit">
and here is the modal code:
<div id="modal-edit-user" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel"><b>Form Edit Data User</b></h4>
</div>
<div class="modal-body">
<form name="tambah_user" method="POST" action="../controller/edit_user.php">
<?php echo $id_user;?>
<div class="controls control-group">
<input class="form-control" type="text" name="nama_user" placeholder=" nama user">
<br><input class="form-control" type="text" name="alamat" placeholder=" alamat user">
<br><input class="form-control" type="text" name="kota" placeholder=" kota">
<br><input class="form-control" type="text" name="no_telp" placeholder=" nomor telepon user">
<br><input class="form-control" type="text" name="username" placeholder=" username login user">
<br><input class="form-control" type="text" name="password" placeholder="password login user">
</div>
<div class="modal-footer">
<a class="btn btn-default" data-dismiss="modal">Batal</a>
<input type="submit" name="sumbit" value="Simpan" class="btn btn-primary">
</div>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
I hope there is someone who can explain me the answer.. thanks a lot :-)
You can do that with Javascript. Just add a click event listener and update the form, when edit button is clicked. Something like this:
$(document).ready(function () {
$('.user-edit').click(function () {
$('span.user-id').text($(this).data('id'));
});
});
Here is a quick fiddle of how you could go about it.