We Keep Coding

Bootstrap Modal not loading on page load

Hi I have added a bootstrap modal on my site but the problem is it is not launching on $(window).load();
I have also tried adding an alert on window load it works fine but modal isn't loading on page load but yes modal is loaded if I trigger it through a button
For Reference you can check https://theinnovativepackaging.com/
And Modal is as follows
<div id="myDiscountModal" class="modal fade">
<div class="modal-dialog disc-modal">
<div class="modal-content">
<div class="modal-header disc-modal">
<div>
<h5 class="modal-title">SIGNUP TILL NOV 25th and Avail 10% OFF</h5>
</div>
<button type="button" class="close" data-dismiss="modal"><span class="discount-modal-close"><img width="10px" src="<?php echo base_url('/images/close.jpg')?>"></span></button>
</div>
<div class="modal-body">
<div class="row">
<div class=" col-sm-6">
<img width="100%" src="<?php echo base_url('/images/discount-voucher.jpg')?>">
</div>
<div class="col-sm-6">
<p class="my-icon-title popup-content">Start Your Quotation Message with Discount Voucher and Get 10% OFF</p>
<form method="post" id="ajaxDiscountForm" action="javascript:void(0)">
<div class="form-group">
<div class="disc-modal-form-field">
<span class="fa fa-envelope disc-modal-form-field-icon"></span>
<input type="email" name="email" class="form-control" placeholder="Email Address">
</div>
</div>
<div class="form-group">
<div class="disc-modal-form-field">
<span class="fa fa-phone disc-modal-form-field-icon"></span>
<input type="tel" id="" class="form-control" name="phone" placeholder="Phone Number">
</div>
</div>
<div id="discountMessage" style="display: none;"></div>
<button type="submit" id="send_discount_form" class="btn btn-primary">Get Discount</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
And Javascript Added is:
<script type="text/javascript">
$(window).on('load', function() {
$('#myDiscountModal').modal('show');
});
</script>
Anyone who can guide me what could be the possible conflict that its not working ?

There are multiple errors on your website that can be seen in the developer console. I believe many of them (including the one with Bootstrap modal) related to jQuery being imported twice. Try to remove one of them.

Bootstrap modal opens automatically on page load, but how to disable if form is submitted

I have a newsletter modal setup, which works fine. I have it set to launch automatically on page load via some javascript code, but how could I make it so that it doesn't open if you successfully submitted the form inside the modal?
Javascript:
<script type="text/javascript">
$(window).on('load', function() {
$('#newsletter-modal').modal('show');
});
</script>
HTML Modal Code:
<div class="modal fade" id="newsletter-modal">
<div class="modal-dialog modal-lg">
<div class="modal-content primary-modal">
<div class="modal-header">
<h4 class="modal-title"><i class="fas fa-envelope-open-text primary-modal-icon"></i> Subscribe to our Newsletter</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color: #fff;">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body primary-modal-body">
<form method="post" action="">
<div class="col-sm-12">
<div class="form-group col-md-6 col-md-offset-3 primary-modal-form">
<label class="justify-content-center" style="color: rgba(255,255,255,.55); text-align: center;">Your Name</label>
<input type="text" class="form-control" placeholder="John Doe" name="newsletter_name">
</div>
</div>
<div class="col-sm-12">
<div class="form-group col-md-6 col-md-offset-3 primary-modal-form">
<label style="color: rgba(255,255,255,.55); text-align: center;">Your Email</label>
<input type="email" class="form-control" placeholder="johndoe123#gmail.com" name="newsletter_email">
</div>
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-default swalDefaultSuccess" name="signup_newsletter">Subscribe <i class="fas fa-arrow-circle-right primary-modal-subscribe-icon"></i></button>
</div>
</form>
</div>
</div>
</div>
</div>

Check this it will help you:
Dismiss Bootstrap Modal (Forever!) with jQuery Cookie, On Click

By doing it in PHP you prevent people from mucking about with the JS which is 'client-side'.
Additionally, you can only set the cookie if the subscribe works, ie after you've validated the email etc.
On the page PHP
if (isset($_POST['newsletter_email'])) {
//you subscribe stuff here
$_SESSION['subscribed']=true;
}
then wrap your modal js in
if (!isset($_SESSION['subscribed'])) {
///output your onload js.
}

Dynamically replace href

I have the following lines of code in my website - CodePen.
What I am trying to do, is make it so that the user must fill in the form first, before downloading an item:
<div class="container">
<!-- Trigger the modal with a button -->
Download Item #1
Download Item #2
<!-- Modal -->
<div class="modal fade" id="myModal" 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">Modal Header</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
How can I make it so that when the user selects the first or second button on the page, it will send this information to the submit button?

You could store the link in a variable. Then, when the button is clicked, check if the fields are empty (and apply any validation rules). If not empty, apply the submit to the form.
$link = 'example.com/download.pdf';
$('.button').click(function(){
// CHECK THE FIELDS ARE NOT EMPTY
// APPLY YOUR OWN VALIDATION
if($field1 = $('.field1').val() != '' && $('.field2').val() != ''){
// DO WHAT YOU NEED TO DO WITH THE LINK
$('form').submit();
}
})
On a side note, it's possible that you were down-voted (not by myself) for not providing us with your attempts to solve your own problem. You provided us with your html but not any of your tested logic.

You add a click handler to your button in JavaScript :
var fieldsAreReadyToBeSent = function() {
// Validation code goes here
// return true if valid & false if invalid
};
document.querySelector("[type=submit]").addEventListener("click", function() {
if(!fieldsAreReadyToBeSent()) {
event.preventDefault();
}
});
The method event.preventDefault() prevents your your form from being submitted if it is considered invalid!
A demo :
var fieldsAreReadyToBeSent = function() {
return false; // FOR THIS DEMO, ALWAYS RETURN FALSE
};
document.querySelector("[type=submit]").addEventListener("click", function() {
if(!fieldsAreReadyToBeSent()) { // FOR THIS DEMO, THIS IS ALWAYS TRUE
event.preventDefault();
}
});
<div class="container">
<!-- Trigger the modal with a button -->
Download Item #1
Download Item #2
<!-- Modal -->
<div class="modal fade" id="myModal" 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">Modal Header</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>

bootstrap modal remote content error

I have 3 different files the index.php, register.php and login.php. In the index.php there is an anchor that will show the modal with remote content from login.php which works perfectly, and in login.php there is an option that will change the content of the modal which load remotely from register.php but when I click it, it show's javascript error in the console.
console error : Uncaught TypeError: undefined is not a function bootstrap.js:868
I am using jquery 1.10.1 and bootstrap 3.1.1
index.php
<script src="common/js/jquery.js"></script>
<script src="common/bootstrap/js/bootstrap.js"></script>
<div class="account_link">
Sign In
</div>
<div id="dialog" class="modal fade" role="dialog" tabindex="-1" area- hidden="true" aria-labelledby="signin">
<div class="modal-dialog">
<div class="modal-content" style="width:320px">
</div>
</div>
</div>
login.php
<html>
<head></head>
<body>
<form name="signin" method="post">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="signin">Sign In</h4>
</div>
<div class="modal-body">
<div class="login_control clearfix">
<label>Email</label>
<input type="email" name="email" id="email" placeholder="Email" class="textfield"/>
</div>
<div class="login_control clearfix">
<label>Password</label>
<input type="password" name="password" id="password" placeholder="Password" class="textfield"/>
</div>
<p><input type="checkbox"/><span>Remember me on this computer</span></p>
Not a member? Sign Up
Forgot Password
</div>
<div class="modal-footer">
<button type="submit" class="login_btn">Sign In</button>
</div>
</form>
</body>
</html>
register.php
<html>
<head></head>
<title>Create Account</title>
<body>
<form method="post" name="frm-signup">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="signin">Sign In</h4>
</div>
<div class="modal-body">
<div class="clearfix">
<label>Email</label>
<input type="email" class="textfield" name="reg_email" placeholder="Email"/>
</div>
<div class="clearfix">
<label>Password</label>
<input type="password" class="textfield" name="reg_fname" placeholder="First Name"/>
</div>
<div class="clearfix">
<label>Confirm Password</label>
<input type="password" class="textfield" name="reg_fname" placeholder="First Name"/>
</div>
</div>
<div class="modal-footer">
<div class="clearfix">
<button type="submit" name="sign-up">Create Account</button>
</div>
</div>
</form>
</body>
</html>
does anyone know how can I achieve this?
Thanks.

I don't think you can call a second modal from the first modal if the first is itself remote.
If you think about it, bootstrap's js will be looking through your DOM when the page is loaded. It will spot your modal anchor and it will attach an event.
However when that event fires, and the remote content is loaded (i.e. login.php is displayed), bootstrap won't go through the new DOM again looking for new modal anchors to which it can attach new events.
You might be better off doing this in your own JS, using the .modal() function in the bootstrap API, and attaching your events after login.php is displayed.
You've probably already read the relevant documentation but here is a link to it anyway, just in case!

load bootstrap modal as alert after inserting data to database

im new to php and still learning. i tried to customized bootstrap template and tried to connect a form to a database.
insert.php
$con=mysqli_connect("localhost","root","","finalproject");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$sql="INSERT INTO stokbarang (Merek, Tipe, Harga)
VALUES
('$_POST[merek]','$_POST[tipe]','$_POST[harga]')";
if (!mysqli_query($con,$sql))
{
die('Error: ' . mysqli_error($con));
}
header("Location: stock.php");
and a page where the form is stock.php, the form is below :
<form name="sentMessage" class="well" id="contactForm" novalidate action = "insert.php" method = "post">
<legend>Masukkan Data</legend>
<div class="control-group">
<div class="controls">
<label>Merek Mobil</label>
<input type="text" class="form-control" placeholder="Merek mobil" id="merek" required
data-validation-required-message="Masukkan Merek mobil" name = "merek"/>
<p class="help-block"></p>
</div>
</div>
<div class="control-group">
<div class="controls">
<label>Tipe Mobil</label>
<input type="text" class="form-control" placeholder="Tipe Mobil" id="email" required
data-validation-required-message="Masukkan tipe mobil" name = "tipe"/>
</div>
</div>
<div class="control-group">
<div class="controls">
<label>Harga</label>
<input type="number" class="form-control" placeholder="Harga"
id="email" required
data-validation-required-message="Masukkan harga mobil" name = "harga"/>
</div>
<br>
<div id="success"> </span></div> <!-- For success/fail messages -->
<br>
<button type="submit" class="btn btn-primary pull-right">Insert</button><br/><br>
</form>
the form is work and i can insert the data by clicking Insert button to database.
Now i want to add a modal as alert after the form is submitted to database in stock.php
i modified the Insert button as following
<button type="submit" class="btn btn-primary pull-right" data-toggle="modal" data-target="#myModal">Insert</button><br/><br>
here is the modal :
<!-- Modal -->
<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" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">SUCCESS</h4>
</div>
<div class="modal-body">
<p>Data Inserted!!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
but it seems like the button only trigger the modal to appear without submit the form to database. Any suggestion to make the modal appear after successful inserting data to database (after redirecting to stock.php)? or maybe there is better way to make alert after redirect? thank you for your time and help :)

change the header location on insert.php as below :
header("Location: stock.php?sucsess=true");
then stock.php on the head :
<script type="text/javascript">
<?php
if ($_GET['sucsess'] =='true'){
echo '$(function() {
$( "#myModal" ).dialog();
});'
}
?>
</script>
here is a demo only for the alert demo