I want to pass select/drop-down data into the bootstrap modal with use of java-script. I am using the modal as confirmation message.
My Select/Drop-down is,
<select class="form-control" id="project" name="project_id">
<option value="1"> ABCD </option>
<option value="2"> EFGH </option>
<option value="3"> IJKL </option>
<option selected="selected" value="#">Please Select</option>
</select>
and I am calling the Bootstrap Modal using javascript as below,
$('#project').change(function(){
var e = document.getElementById("project");
var p_id = e.options[e.selectedIndex].value;
var p_name = e.options[e.selectedIndex].text;
$('#myModal').modal('show');
});
The Bootstrap Modal is as below,
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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" id="myModalLabel"></h4>
</div>
<div class="modal-body modal-mt-hgt">
<form action="" method="post">
<p> Are you sure to comment on <b id="p_name">...PROJECT NAME HERE</b> </p>
Enter Your Comment : <textarea rows="3"></textarea>
<input type="hidden" name="country" value="">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Add Task</button>
</div>
<?= form_close(); ?>
</div>
</div>
</div>
What I want to do is pass/show var p_id into the hidden field and show var p_name in side the <b id="p_name"></b> of the modal.
Further p_id, p_name can get when user selects any option from the Select/Drop-down using the javascript function above and Only thing I need to do is how to show Project Name on the Modal and assign p_id into the hidden field of the Modal
Best regards
I'm pretty new to all of this so this probably isn't the best solution, but it's a solution.
$('#project').on('change', function() {
var p_id = $(this).val();
var p_name = $(this).find(':selected').text();
$('#myModal').on('show.bs.modal', function ()
{
$(this).find('#p_name').text(p_name);
$(this).find('#p_id').val(p_id);
});
$('#myModal').modal('show');
});
You'll need to add a class or ID to the hidden field so it can be identified. Above I've given it an ID of p_id.
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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" id="myModalLabel"></h4>
</div>
<div class="modal-body modal-mt-hgt">
<form action="" method="post">
<p> Are you sure to comment on <b id="p_name">...PROJECT NAME HERE</b> </p>
Enter Your Comment : <textarea rows="3"></textarea>
<input type="hidden" id="p_id" name="country" value="">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Add Task</button>
</div>
<?= form_close(); ?>
</div>
</div>
</div>
I think it's all self explanatory but if not, we add the check to see when the project Dropdown changes, we then assign the value and text of the selected item using the $(this) variable to state that it's within the #project drop down ID.
Next up, we add a listener to see when the modal gets shown, from there we can then manipulate the modal how we want. In this example we set the p_name text and set the value of p_id.
Related
I have a dynamic table, and in the button value I store value of each id.
I want to pass my button value to a modal popup view and do a database query in the backend. I will do that via node.js and EJS template. I know I can probably do this via using jQuery, but I don't know the details.
The <%= ProInfoList[j].Id %> is my node.js loop to get each data id.
This is button code to trigger modal view:
<button data-toggle="modal" data-target="#myModal" class="dropbtn"
value="<%= ProInfoList[j].Id %>"
style="background-color:transparent; border:0;margin-bottom: -10px">
<a>Delete</a>
</button>
I would like to use a hidden form field to achieve my goal, but it didn't work.
The form action="/delProInfo/del" is my backend node.js function.
This is my modal code:
<div id="myModal" class="modal fade">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<p>Do you want to delete the data ?</p>
<p class="text-warning"><small>If you sure to delete, please write some comments.</small></p>
<input type="text" size="50"></input>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" class="btn btn-default" data-dismiss="modal">Close</button><br><br>
<form action="/delProInfo/del" method="POST" novalidate>
<input type="hidden" name="Id" value="" />
<button class="btn btn-primary">Sure to Delete</button>
</form>
</div>
This may help.
<button data-toggle="modal" data-target="#myModal" class="dropbtn"
title="<%= ProInfoList[j].Id %>"
style="background-color:transparent; border:0;margin-bottom: -10px">
<a>Delete</a>
</button>
Add a attributes name as title and assign id into title attribute
<div id="myModal" class="modal fade">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<p>Do you want to delete the data ?</p>
<p class="text-warning"><small>If you sure to delete, please write some comments.</small></p>
<input type="text" size="50"></input>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" class="btn btn-default" data-dismiss="modal">Close</button><br><br>
<form action="/delProInfo/del" method="POST" novalidate>
<input type="hidden" name="Id" class="hiddenValue" value="" />
<button class="btn btn-primary">Sure to Delete</button>
</form>
</div>
</div>
</div>
</div>
When you will click on dropbtn button then you can get attribute name as title and set this value into hidden input type.
<script type="text/javascript">
$(document).ready(function(){
$('.dropbtn').click(function(){
var title = $('.dropbtn').attr('title')
$('.hiddenValue').val(title);
})
})
</script>
I used fade dialog to display a form, and it can submit the form via ajax to create a new record in database.
And I am trying to refresh my page after ajax success. However, the page do not refresh with using Javascript(E.g. location.replace etc).
Ajax:
function callDatabase(action)
{
var pn = $('#PN').val();
var pp = $('#PP').val();
$.ajax({
type:"POST",
url:"databaseFunction.php",
data:{action: action, pn: pn, pp: pp},
success:function(msg){
window.location.reload();
}
});
}
HTML:
p>
<button class="btn btn-primary" data-toggle="modal" data-target="#addData">Insert Data</button>
</p>
<!-- Modal -->
<div class="modal fade" id="addData" tabindex="-1" role="dialog" aria-labelledby="addLabel">
<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" id="addLabel">Insert Data</h4>
</div>
<form id="insertForm" >
<div class="modal-body">
<div class="form-group">
<label for="PN">ProductName</label>
<input type="string" class="form-control" id="PN" placeholder="ProductName">
</div>
<div class="form-group">
<label for="PP">ProductPrice</label>
<input type="string" class="form-control" id="PP" placeholder="ProductPrice">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" onclick="callDatabase('insert')" class="btn btn-primary">Save</button>
</div>
</div>
</form>
</div>
</div>
</div>
How can I refresh the page after I submitted the form?
You can change 'type=submit' to 'type=button'. Because a form will call submit-Event of form, if you already call ajax to submit, you should cancel submit of form.
I want to pass a variable value to a modal box I call on the same page but have not been able to do it.
Code to open modal box is as below
<li style="font-style:bold" title="rate on skill" class="skill_rating">
<a data-toggle="modal" title="Add this item" class="open-AddBookDialog" href="#addBookDialog" data-id='<?php echo $skill_id2[$q]?>'>
<i class="fa fa-anchor" aria-hidden="true"></i> </a><?php echo $skilltemp2[$q2] ?></li>
Modal Box code as below
<div class="modal fade" id="addBookDialog" tabindex="-1" role="dialog" aria-labelledby="addBookDialog"><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" id="myModalLabel">Search</h4>
</div>
<div class="modal-body">
<div class="form-group">
<input type="text" name="bookId" id="bookId" value=""/>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"><span>Search</span></button>
</div>
</div>
</div>
Javascript before the closing body tag is as below
<script type="text/javascript">
$(document).on("click", ".open-AddBookDialog", function () {
var myBookId = $(this).data('id');
$(".modal-body #bookId").val( myBookId );
});
</script>
I saw a couple of answers at stackoverflow (like:Passing data to a bootstrap modal )but I have not been able to customize it as per my requirement.
Pardon me if its is too simple. I am a noob
This is working in my case. Yes it is not in PHP but i have put static value for Data-Id.
$('body').on('click', '.open-AddBookDialog', function() {
var myBookId = $(this).data('id');
$("#addBookDialog #bookId").val( myBookId );
});
Example JSFIDDLE
Javascript variables and modal box's value of bookId need to be re-defined. A possible use case as below.
Body Code
Modal Box
<div class="modal fade" id="takeaction" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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" id="myModalLabel">Display Apply Id in modal box in a dynamic way? </h4>
</div>
<div class="form-inline container hidden-xs hidden-sm">
<input type="number" value="<?php echo $apply?>" class="form-group" placeholder="Job Code">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"><span>Confirm</span></button>
</div>
</div>
</div>
</div>
Javascript Code
<script type="text/javascript">
$('#takeaction').on('show.bs.modal', function(e) {
var apply = $(e.relatedTarget).data('apply');
$(e.currentTarget).find('input[name="apply"]').val(apply);
});
</script>
I have been doing this some time now. I have an anchor tag that opens a pop up modal and passes the dropdown value to that modal which I already accomplished.
Now In my modal, I need to use the value on the textbox which is hidden (but not for now) to a mysql query.
I'm thinking on how Can i put that value in textbox to a php variable.
Need help please.
Here's my javascript for the opening of modal.
<script type="text/javascript">
$('#modalRegister').on('show.bs.modal', function(e) {
var modal = $(this),
datestart = $('#datestart').val();
modal.find('#myVal').val(datestart);
})
</script>
Now my Modal
<div id="modalRegister" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="text-align-last: center">Register</h4>
</div>
<div class="modal-body">
<input type="text" id="myVal" value=""/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Im thinking of doing a query there to cast a table and put the results on that table. The where clause if <input type="text" id="myVal" value=""/>
I want to open a modal when my input type "Verwijderen" is pressed. But it doesn't show up? What am I doing wrong? Even W3schools examples don't work in Fiddle for example. I am missing something I guess but what?
<td colspan="2">
<input type="submit" style="width:140px;" value="Opslaan"/>
<input
type="submit"
style="width:140px;"
id="cancelForm"
class="ketchUp-default"
value="Annuleren"/>
<input
type="submit"
id="deleteEvent"
value="Verwijderen"
style="width:140px;"
class="ketchUp-default"
data-toggle="modal"
data-target="confirm-delete"/>
<div
class="modal fade"
id="confirm-delete"
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">Confirm Delete</h4>
</div>
<div class="modal-body">
<p>You are about to delete one track, this procedure is irreversible.</p>
<p>Do you want to proceed?</p>
<p class="debug-url"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger btn-ok">Delete</button>
</div>
</div>
</div>
</div>
Are you using BootStrap 3? I think your mistake is that you are not using the "#" ID selector in your data-target on your input. Change your input code to this:
<input
type="submit"
id="deleteEvent"
value="Verwijderen"
style="width:140px;"
class="ketchUp-default"
data-toggle="modal"
data-target="#confirm-delete"/>
Here is a working plunk.
Your input is a submit, so your page is submitting the form, and the modal does not have time to be shown.
Try to convert your submit button to a simple button (not submit), and your modal will be shown.
<input
type="button"
id="deleteEvent"
value="Verwijderen"
style="width:140px;"
class="ketchUp-default"
data-toggle="modal"
data-target="confirm-delete"/>