I ma trying to display username in modal text box using onclick button
I have a button from there on onclick i am calling onclick="getUserName(this.id)"
this.id
gives me name which i want to set in
modal textbox userName
Here is my function
function getUserName(username) {
$('#editUserPopUp').bind('show',function(){
alert(username);
$("#userName").val(username);
});
}
I am getting username in alert(username)
but how do i set thsi value to my modal, username text field
Here is my Modal
<div class="modal fade" id=editUserPopUp tabindex="-1"
role="dialog" aria-labelledby="helpModalLabel" aria-hidden="true">
<div class="modal-dialog ">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Update Password</h4>
</div>
<div class="modal-body">
<form class="EditUserBody" role="form" id="usermanagement_editUser="novalidate" method="POST">
<div class="input-group col-md-8">
<span class="input-group-addon">User Name</span>
<input class="form-control" id="userName" type="text" class="input-medium" disabled />
</div>
</form>
</div>
</div>
</div>
</div>
This should work.
But you should also take a look at the Bootstrap documentation about modal windows. There is a section explaining how to vary modal content.
Varying modal content based on trigger button
Use event.relatedTarget and HTML data-* attributes (possibly via jQuery) to vary the contents of the modal depending on which button was clicked.
function getUserName(username) {
var $modal = $('#editUserPopUp'),
$userName = $modal.find('#userName');
$userName.val(username);
$modal.modal("show");
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<button onclick="getUserName(this.id)" id="Foo Bar">Open Modal</button>
<div class="modal fade" id=editUserPopUp tabindex="-1"
role="dialog" aria-labelledby="helpModalLabel" aria-hidden="true">
<div class="modal-dialog ">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Update Password</h4>
</div>
<div class="modal-body">
<form class="EditUserBody" role="form" id="usermanagement_editUser="novalidate" method="POST">
<div class="input-group col-md-8">
<span class="input-group-addon">User Name</span>
<input class="form-control" id="userName" type="text" class="input-medium" disabled />
</div>
</form>
</div>
</div>
</div>
</div>
I think the problem is you are using show event,instead try call shown event after all, like so :
function getUserName(username) {
$('#editUserPopUp').modal('show');
$('#editUserPopUp').on('shown', function () {
alert(username);
$("#userName").val(username);
})
}
p/s : did't test it. Hope this help. Comment if did't work.
Related
In Laravel 8 app, I'm using a model to add items. In my view file, I'm doing it as follows
Create new item
<div class="modal fade" id="add-item-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="loginmodal-container">
.... <form comes here>
</div>
</div>
</div>
As said, this works for adding items.
I now also want to use a similar logic for editing items. So I have added the following on my page
<em class="fa fa-pencil"></em>
<div class="modal fade" id="add-item-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="loginmodal-container">
.... <form comes here>
</div>
</div>
</div>
The problem however is that I need to pass the id of the current item (I wish to edit) to the modal box so that the modal can display the values for the item I wish to update.
How can this be done?
You can usedataattribute to pass some data into Bootstrap modal.
Buttons in the loop
#foreach()
<a data-toggle="modal" data-id="{{$member->name}}" href="#UserDialog" class="user_dialog">Details</a>
#endforeach
Bootstrap model
<div class="modal hide" id="UserDialog">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>some content</p>
<input type="text" name="user_name" id="user_name" value=""/>
</div>
</div>
And little JavaScript
$(document).on("click", ".user_dialog", function () {
var UserName = $(this).data('id');
$(".modal-body #user_name").val( UserName );
});
That's it
Little demo here : http://jsfiddle.net/Au9tc/6247/
The variables to note are title and category_description. For context here is my Add feature, both values are correct since it adds to my table.
My problem is my edit button, it shows the title data but not the category_description. As seen in the screenshot, my description column has a value.
AJAX
$('#addCategory').on('shown.bs.modal', function(e) {
var id = $(e.relatedTarget).data('id');
// var category_id = $(e.relatedTarget).data('id');
var title = $(e.relatedTarget).data('title');
var category_description = $(e.relatedTarget).data('category_description');
// var category_description_2 = $(e.relatedTarget).data('category_description');
var action = $(e.relatedTarget).data('action');
if (action !== undefined) {
if (action === "edit") {
$("#title").removeAttr("readonly");
$("#category_description").removeAttr("readonly");
// set modal title
$(".modal-title").html("Update Category");
$("#createBtn").text("Update");
// pass data to input fields
$("#id_hidden").val(id);
$("#title").val(title);
$("#category_description").val(category_description);
// hide button
$("#createBtn").removeClass("d-none");
}
} else {
$(".modal-title").html("Add Category");
// pass data to input fields
$("#title").removeAttr("readonly");
$("#title").val("");
$("#category_description").removeAttr("readonly");
$("#category_description").val("");
// hide button
$("#createBtn").removeClass("d-none");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" integrity="undefined" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="undefined" crossorigin="anonymous"></script>
<div class="modal fade" id="addCategory" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title text-center font-weight-bold"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"> × </span>
</button>
</div>
<div class="modal-body">
<form method="POST" id="postForm">
<input type="hidden" id="id_hidden" name="id" />
<div class="form-group">
<label for="title"> Title <span class="text-danger">*</span></label>
<input type="text" name="title" id="title" class="form-control">
</div>
<div class="form-group">
<label for="title"> Description <span class="text-danger">*</span></label>
<textarea name="category_description" id="category_description" class="form-control"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" id="createBtn" class="btn btn-primary"> Save </button>
</div>
<div class="result"></div>
</div>
</div>
</div>
as you can see from these lines:
$("#title").val(title);
$("#category_description").val(category_description);
both variables are being declared but only the title shows up. What seems to be missing? any help would be appreciated.
The thing is that i need to display both, modal dialog when page load and also with a button toggle. Now the button toggle is working fine, I'm using bootstrap 3.3.7 in wordpress site built with my own template. But i can't reach display the modal dialog on page load. I have enqueue bootstrap.min.js with a jquery dependencies, for the rest functions os my site all working like expective. This is the code that I'm using for.
var jqmodalshow = jQuery.noConflict();
jqmodalshow(document).ready(function(){
jqmodalshow("#myModal").modal('show');
});
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">BUTTON</button>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Subscribe our Newsletter</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>Subscribe to our mailing list to get the latest updates straight in your inbox.</p>
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Name">
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email Address">
</div>
<button type="submit" class="btn btn-primary">Subscribe</button>
</form>
</div>
</div>
</div>
</div>
</body>
The issue is because the HTML you wrote to create the modal was malformed. You had repeated the same id in two locations which is invalid, and you'd nested copies of .modal and .modal-dialog. The JS is valid and working.
If you fix the HTML issues then the code works fine.
jQuery($ => {
$("#myModal").modal('show');
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">BUTTON</button>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Subscribe our Newsletter</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>Subscribe to our mailing list to get the latest updates straight in your inbox.</p>
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Name">
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email Address">
</div>
<button type="submit" class="btn btn-primary">Subscribe</button>
</form>
</div>
</div>
</div>
</div>
You have two elements with the id myModal that probably gives you an error. You have to give them different ids:
<div id="myModalDialog" class="modal fade" role="dialog">
…
<div id="myModal" class="modal fade">
…
and then the JS:
var jqmodalshow = jQuery.noConflict();
jqmodalshow(document).ready(function(){
jqmodalshow("#myModalDialog").modal('show');
jqmodalshow("#myModal").modal('show');
});
So I have a ASP .NET MVC application in which users should be able to add content to a page. This content can be things like a location, photos, ...
I have a dropdownlist in my View with all the different content options. When an option is selected, the page should show a modal form where they can enter details based on the type of content they selected.
My modalform is constructed like this:
<div class="modal fade" id="locationModal" tabindex="-1" role="dialog" aria-labelledby="Login" aria-hidden="true">
<div class="modal-dialog">
<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">Map</h4>
</div>
<div class="modal-body">
<!-- The form is placed inside the body of modal -->
<form id="locationForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Address</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="address" />
</div>
</div>
<div class="form-group">
<div class="col-xs-5 col-xs-offset-3">
<button type="submit" class="btn btn-primary">Add location</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
It's easy to fire up the modal with a button with the data-toggle and data-target attributes like this:
<p class="text-center">
<button id="addLocation" class="btn btn-default" data-toggle="modal" data-target="#locationModal"></button>
</p>
But how do I achieve this form to be shown when selecting a value from the dropdown list? I have added a JS function to the OnChange of my dropdownlist select but I don't know how to fire up the modal form.
Thanks in advance
You can load the modal using javascript on the change event of the dropdown.
Just check this link :
Bootstrap Modal doesn't show
I'm using Bootstrap framework v3.3.0 for my website.
I'm dealing with multiple modal dialog boxes. In one dialog there is one form having one textfield, one date control and one file control. After submitting the form successfully I hide this modal and show another modal with success message. On this modal there is one button having text "Submit another form". When user clicks on this button the dialog containing success message get close and the modal dialog containing form opens but it contains the previous values that I filled in. I don't want these values again. I want to clear these fields. How should I do this?
Following is the code:
HTML code:
<div class="modal fade" id="newModal" 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">Submit Form</h4>
</div>
<div class="modal-body" style="max-height: 300px; overflow-y: auto;">
<br/>
<!-- The form is placed inside the body of modal -->
<form id="request_form" method="post" class="form-horizontal" enctype="multipart/form-data" action="">
<div class="form-group">
<label class="col-sm-4 col-sm-offset-1 control-label">Reg ID <span style="color:#FF0000">*</span> :</label>
<div class="col-sm-5">
<input type="text" class="form-control" name="reg_id" id="reg_id"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 col-sm-offset-1 control-label">Reg Date<span style="color:#FF0000">*</span> :</label>
<div class="col-sm-5">
<input type="text" class="form-control date_control" id="reg_date" name="reg_date" value="" placeholder="yyyy-mm-dd">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 col-sm-offset-1 control-label">Upload Image<span style="color:#FF0000">*</span> :</label>
<div class="col-sm-5">
<input type="file" name="reg_image" id="reg_image" accept="image/*" capture="camera" />
</div>
</div>
<div class="form-group">
<div class="col-sm-5 col-sm-offset-5">
<button type="submit" class="btn btn-success" id="btn_receipt_submit">Submit</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="modal fade" id="successModal" 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">Your Request Uploaded Successfully</h4>
</div>
<div class="modal-body" style="max-height: 300px; overflow-y: auto;">
<h4 style="font-weight:bold;text-align: center;">Thank you!</h4>
<p style="text-align: justify;">Your request has been successfully submitted.</p>
<div class="modal-footer" style="text-align:center;">
<button type="button" class="btn btn-danger" id="btn_exit">Exit</button>
<button type="button" class="btn btn-success" data-dismiss="modal" id="btn_scan_another">Scan Another Receipt</button>
</div>
</div>
</div>
</div>
</div>
The jQuery code :
$(document).ready(function() {
$("#btn_scan_another").on("click", function(event){
event.preventDefault();
$('#successModal').modal('hide');
$('#newModal').modal('show');
});
});
Thanks.
You could add something like:
$('#newModal').find('form')[0].reset();
before showing it
You actually don't have any JS code that does what you want.
Have you tried anything?
How about this:
$('#newModal').on('hidden.bs.modal', function(){
$(this).find('form')[0].reset();
});