Please help me with this :
I have a form with a submit button . Now i want to open a modal window on click event of this button . In the modal i need to show a text box for inserting something in DB with 2 buttons : Cancel and Push . On click of push i want data to be inserted in the db and form to be submitted !!!
Somehow i am unable to achieve this
<form action="post_data.php" method="post">
<!-- some elements -->
<input type ="submit" value = "Push data">
</form>
I am using bootstrap-modal.js
But the problem i am facing is my form points to x.php and now if I need to open a bootstrap model then i need to provide attributes : href="mymodal_id" and data-toggle="modal" for my submit button . If i do that my page does absolutely nothing :( :(
Please Help
Any help wil be appreciated . Thanks in advance
Use an <a> to trigger your modal:
Launch demo modal
And then put your submit and cancel button inside that modal:
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Pushing to DB</h3>
</div>
<div class="modal-body">
<p>You are going to push data</p>
</div>
<div class="modal-footer">
<button type="button" class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button type="submit" class="btn btn-primary" value="Push data">Push data</button>
</div>
</div>
Related
Im trying to fix a strange error with my code with the Bootstrap 4 Modal code. I've simply just copied and pasted the code from here: https://getbootstrap.com/docs/4.0/components/modal/#events
This is for an automotive website and Im trying to pass stock and VIN via the data attribute as requested. The question is how this works with a foreach loop. It works on a single Wordpress page or post but won't pull the data from each section of the loop.
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-stock="<?php echo $vehicle['stock_number'];?>">Check Availability</button>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Stock</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
And my Jquery code
(function($) {
$('#exampleModal').on('modal.fade.show', function (event) {
alert( "clicked" );
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('stock') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use $ here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})})( jQuery );```
Functionality wise this works, just not within the dynamic pages that are being generated in the foreach loop. The buttons have the proper data-attribute applied but the data doesn't seem to pass to the modal from the loop. I have a development page up where you can take a live look here, the button in question is the "Check Availability" http://windsor.sixomedia.ca/inventory/New/
Try this
var recipient = button.data('data-stock');
Hope that helps.
I have a small form for barcode scanning. I scan the barcode of a product and a bootstrap box will appear. Into the modal i post barcode number of product. And inside the modal there is another form, which will retrieve barcode number of product and will fill some inputs and insert it into the mysql database table.
<form name="barkod_oku" id="barkod_oku" action="" method="post" >
<input name="sto_barkod" id="sto_barkod" value="" autofocus placeholder="Barkod Numarası">
<input type="hidden" name="alis_fatura_no" value="<?php echo $finalcode1 ;?>">
</form>
This is the form which i post 2 values into the modal box.
And this is the modal box which i want to see. ( İ haven't put otehr inputs into the modal yet.Later i will put.)
<div class="modal fade" id="myModal" 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"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<input name="barkod_no" value="<?php echo $sto_barkod1; ?>">
<input name="fatura_no" value="<?php echo $stok_kodu1; ?>">
</div>
</div>
</div>
</div>
And also i use this javascript to open the modal box:
<script>
$('#barkod_oku').submit(function () {
$('#myModal').modal('show');
});
</script>
Shortly everything works fine i think but modal is not staying on the screen. It appears and then disappears in one second. What is the missing point that i can not see to hold the modal on screen?
You need to use Prevent the default action of a submit button
$('#barkod_oku').submit(function () {
event.preventDefault();
$('#myModal').modal('show');
});
I am trying to send data on button on modal using jQuery, first time it is working well but when I click second time it execute twice and for third time it execute 3 times, I want to execute that button only once, what is wrong exactly?
my modal
`<div id="Modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content modal-sm">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">product</h4>
</div>
<div class="modal-body">
<label>Quantity</label>
<input type="text" class="form-control" id="qty" value="">
<label>Note:</label>
<input type="text" class="form-control" id="note" value="">
</div>
<div class="modal-footer">
<button id="" type="button" class="btn btn-primary mdismiss" data-dismiss="modal">Add</button>
</div>
</div>
</div>
</div>`
my jQuery :
`
$('#btnbtn').click(function(){
$('#Modal').modal('show');
$('#addbutton').click(function(){
alert();
});
});`
You are adding click handler multiple time whenever you are clicking on #btnbtn button. No need of attaching click event handler to #addbutton on each click. Change your code like below:
$('#btnbtn').click(function(){
$('#Modal').modal('show');
});
$('#addbutton').click(function(){
alert();
});
Instead of using .click() when binding the button you can use one(). It will only execute once.
$('#btnbtn').click(function(){
$('#Modal').modal('show');
$('#addbutton').one('click', function(){
alert();
});
});`
I have a button and I am trying to pass value to a model.Inside button I have name="className" value="CPS210-CompSci-I (4)" button is type submit.
<button type="submit" data-toggle="modal" data-target="#myModal"
class="btn btn-info btn-md" name="className" value="CPS210-CompSci-I (4)">
<span class="glyphicon glyphicon-comment"></span> Comment
</button>
I have a model. Inside model I have php $className =$POST['className'];
echo "$className";
<div ng-app class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><?php echo "Note for $firstname $lastname" ?></h4>
</div>
<div class="modal-body">
<div class="form-group">
<textarea class="form-control" ng-model="note"
placeholder="Here you can write a a note for the student. " id="message"
required data-validation-required-message="Please enter a Goal"></textarea>
<p class="help-block text-danger"></p>
<label class="light">
</div>
<hr>
<?php $className = $_POST['className'];
echo "$className";
?>
<h4>Note Regarding:{{note}} </h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Variables are only added to the $_POST array after a form has been submitted. You're page must "refresh" before the array is filled. When the modal triggers and opens a new modal box on the scree, this is not considered a page refresh, therefore the value of the button you clicked is not added to the array.
You either need to put your button inside a form tag, which will trigger the modal to open when the page "refreshes" and the value in that key exists. This would be annoying and defeat the whole purpose of bootstrap modals.
You're other, more likely option, is to use javascript to move the value in the button to the spot in the modal when the button is clicked.
$('button[name="className"]').click(function(){
var className = $(this).val();
$('#class-name').html(className);
});
And edit your modal where you want the class name to this:
<hr>
<p id="class-name"></p>
<h4>Note Regarding:{{note}} </h4>
I am using Codeigniter framework and twitter bootstrap for my development purpose. Here I encountered a problem where I have to edit a form in the modal box. How can I pass data to the form displayed in twitter bootstrap modal box?. Please help me with a possible solution.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Header of Modal</h3>
</div>
<div class="modal-body">
<form class="form-element">
Title: <input type="text" class="form-title" value="initial title" /><br />
Something Else: <input type="text" class="form-element2" value="initial value" /><br />
<div class="some-box">
The elements inside the box
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
Click here to change title
Click here to change Element2
Click here to change div's contents
<script>
$(".changeTitle").click(function(){
$(".form-title").val("New title");
});
$(".changeElement").click(function(){
$(".form-element2").val("New value of element");
});
$(".changeDiv").click(function(){
$(".some-box").html("New Contents of the div element");
});
</script>