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.
Related
I have this form that users have to fill. When they don't fill the form or if they don't fill it correctly, the request POST is not loading. The request post allows me to save their name and email.
I want to show a bootstrap modal when the form is filled correctly by clicking the button "Download now".
The bootstrap modal says "Congratulations." It is like a success modal to say they have correctly filled the form.
But I have an issue: when nothing is filled in the form or either when it is not filled correctly, the modal is still showing when I click the button "Download now".
How can I make my modal understand that I want it to show only when the user succeed in filling correctly the form? I want the modal to pay attention to the function formValidation() before showing when I am clicking the button "Download now".
HTML CODE:
<form name="myForm" style="width:100%;" id="submit_request_form" enctype="multipart/form-data" onsubmit="return submitClick();">
<div class="form-group">
<label>First and last name:</label>
<input type="text" class="form-control" id="id_name" name="user_name" placeholder="Enter first & last name" required>
</div>
<div class="form-group">
<label>Email address:</label>
<input type="email" id="id_email" name="user_email" class="form-control" placeholder="Enter email" required>
<small class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Download now</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">
<div class="alert alert-success" role="alert">
Congratulations. You will receive an email in few minutes!
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</form>
Javascript:
<script>
function submitClick() {
if (formValidation() == true) {
//POST REQUEST
return true;
} else {
return false;
}
}
function formValidation() {
if (document.myForm.user_name.value == "") {
alert("Please fill in your Name!");
return false;
}
// Validate length of the Name LastName
else if ((document.myForm.user_name.value.length) > 50) {
alert("The name is too long!");
return false;
}
// Validate emails
else if (!/^[a-zA-Z0-9._-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/.test(myForm.user_email.value)) //Regular expressions to validate email
{
alert("Enter Valid Email Address!");
return false;
}
return true;
}
</script>
You'll have to programatically show the modal instead of relying on the automatic behaviour of data-toggle="modal" data-target="#exampleModal".
Remove the data-toggle and data-target attributes on your button and add this somewhere in your submitClick function's if (formValidation() == true) branch, preferably after the POST request has completed (but that's up to you really)
$('#exampleModal').modal()
See https://getbootstrap.com/docs/4.4/components/modal/#via-javascript
I am using laravel and I have an update bootstrap modal. When I clicked the update button, update modal showed up but all the fields are empty like in this picture below
It happened because there is an Enter space in address data from the database. This below is the code of the update button which I copied from inspect element.
<a type="button" class="btn btn-warning btn-circle" data-toggle="modal" data-target="#delivery_update_modal" onclick="delivery_update_modal(
'A9C55478-0BDE-428D-96CA-784A2349F0C7'
, 'packlaring'
, 'pe-ps-18-017'
, 'Document'
, 'Kota Balikpapan'
, 'Perum BDS2, Jl. Merpati Blok S no 14C, RT 33,
Kel. Sungai Nangka, Kec. Balikpapan Selatan,
Kota Balikpapan'
, '2019-05-31 15:00:00.000'
)"><i class="fa fa-edit"></i>
</a>
If I remove the space into one line, it working well.
I tried to remove the space when the user input the data, but it become one row, make the address is difficult to read.
Do you know how to resolve this?
okay. the problem is on this data
'Perum BDS2, Jl. Merpati Blok S no 14C, RT 33,
Kel. Sungai Nangka, Kec. Balikpapan Selatan,
Kota Balikpapan'.
if this is an address. what you need to do is output it using {!! $record->address !!}
you can try this piece of code: apply it to your case and it will work.
//modal form to show all the required inputs and make one field hidden
<div id="updateFormID" class="modal fade" >
<div class="modal-dialog box box-default" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Edit Bank</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form class="form-horizontal" action="{{ url('/update') }}" method="post" role="form">
{{ csrf_field() }}
<div class="modal-body">
<div class="form-group" style="margin: 0 10px;">
<input type="hidden" class="form-control" id="recordid" name="recordid" value="">
<label> Name </label><input type="text" class="form-control" id="name" name="fname" value="">
<label>UserName: </label><select required class="form-control" id="username" name="userName">
<label>Email: </label><select required class="form-control" id="email" name="email">
<label>Address: </label><input type="text" class="form-control" id="address" name="address" value="">
<label>Phone: </label><input type="text" class="form-control" id="phone" name="phone" value="">
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success btn-xs">Update</button>
<button type="button" class="btn btn-secondary btn-xs" data-dismiss="modal">Cancel</button>
</div>
</form>
</div>
</div>
</div>
//link on your view to trigger popup the modal. this link displays record fetch from db. the $record is a array of variable from your controller assign to your view(blade)
<a onclick="updateForm('{{$record->userid}}','{{$record->name}}','{{$record->username}}','{{$record->email}}','{{$record->address}}','{{$record->phone}}')" style="cursor: pointer;"><i class="fa fa-edit"></i>Edit</a>
//javascript function to load modal and assign the record to inputes
function updateForm(r,x,y,z,w,s)
{
document.getElementById('recordid').value = r;
document.getElementById('name').value = x;
document.getElementById('username').value = y;
document.getElementById('email').value = z;
document.getElementById('address').value = w;
document.getElementById('phone').value = s;
$("#updateFormID").modal('show')
}
Might be my opinion but i really do not like your code. It's messy.
But, you can pass your data as json and laravel will escape it.
<a onclick="updateForm(#json($record))" style="cursor: pointer;"><i class="fa fa-edit"></i>Edit</a>
In your javascript
updateForm(object){
//you can use it as object.name or object.whatever
}
Take a look at the laarvel docs on how to pass json data and display it.
https://laravel.com/docs/5.8/blade#displaying-data
You can even use prerry print :-)
-----UPDATE------
If you use jquery, please use jquery!
function updateForm(record)
{
$('#recordid').val(record.userid);
$('#name').val(record.name);
$('#username').val(record.username);
//and so on.
$("#updateFormID").modal('show')
}
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'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!
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.