We Keep Coding

When I click a button in navbar or other button it redirects me to a page called undefined but what I want to do is open a bootstrap modal

When I click a button in navbar or other button it redirects me to a page called undefined but what I want to do is to open a bootstrap modal
Explaining a little bit more I created a button on the page and when I put the <a> element inside the button it redirects to undefined page and I don't even have a href reference in there.
<!--button-->
<button class="au-btn au-btn-icon au-btn--blue">
<a data-toggle="modal" data-target="#uploadModal"><i class="zmdi zmdi-plus"></i>Adicionar Item</a>
</button>
<!--Modal-->
<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="myMediulModalLabel">
<div class="modal-dialog modal-md">
<div style="color:white;background-color:#008CBA" class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h2 style="color:white" class="modal-title" id="myModalLabel">Upload Items</h2>
</div>
<div class="modal-body">
<form enctype="multipart/form-data" method="post" action="additems.php">
<fieldset>
<p>Name of Item:</p>
<div class="form-group">
<input class="form-control" placeholder="Name of Item" name="item_name" type="text" required>
</div>
<p>Price:</p>
<div class="form-group">
<input id="priceinput" class="form-control" placeholder="Price" name="item_price" type="text" required>
</div>
<p>Choose Image:</p>
<div class="form-group">
<input class="form-control" type="file" name="item_image" accept="image/*" required/>
</div>
</fieldset>
</div>
<div class="modal-footer">
<button class="btn btn-success btn-md" name="item_save">Save</button>
<button type="button" class="btn btn-danger btn-md" data-dismiss="modal">Cancel</button>
</form>
</div>
</div>
</div>
</div>

Why do you need anchor inside button . This is the reason its not working
:-
simply replace
<button class="au-btn au-btn-icon au-btn--blue">
<a data-toggle="modal" data-target="#uploadModal"><i class="zmdi zmdi-plus"></i>Adicionar Item</a></button>
with
<button class="au-btn au-btn-icon au-btn--blue" data-toggle="modal" data-target="#uploadModal">
<i class="zmdi zmdi-plus"></i>Adicionar Item</button>

onclick listener working only in particular order?

I have a dynamically created table https://imgur.com/a/NDkVX on click of tick mark a modal opens https://imgur.com/a/0RI1W on click of accept the values must be inserted into database but this happens if i do it in order from top to bottom i.e from 1st person then next..if I start from random point like I click the accept button of 4th person in the starting then null values are inserted..please help me?
<!-- html code for tick button and accept -->
<td>
<button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#{{pl.id}}_1"><i class="fa fa-check" aria-hidden="true" style="color:green"></i></button>
<!-- Modal -->
<div class="modal fade" id= "{{pl.id}}_1" 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">Do You want to accept <b>{pl.employee.emp_name|title }} </b> leave?</h4>
</div>
<form action={% url 'm_manage:accept' %} method="POST">
{% csrf_token %}
<div class="modal-body">
<p><input type="checkbox" name="email" id="email" > Notify Via Email<br></p>
<p><label for="message">Message </label>
<textarea rows="3" name="message" id="message" class="form-control input-md"></textarea></p>
</div>
<div class="modal-footer" id="{{pl.id}}">
<button type="button" class="btn btn-success" id="accept_{{pl.id}}" data-dismiss="modal">Accept</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
</td>
<!--my jQuery call---->
$(document).on('click','[id^="accept_"]', function(e){
e.preventDefault();
var v_id=$(this).closest('div').attr('id');
// tried msg
var msg=$('#message').val();
// tried getElementbyId
// var msg_1=document.getElementById("message").value;
var check=$('#email').is(':checked');
console.log(msg);
// console.log(msg_1);
console.log(check);
console.log(v_id);

Identifier in HTML must be unique, duplicate identifiers creates invalid HTML.
You can use class selector to target elements and DOM traversal method to target desired elements.
Additionally use data-* custom attribute to store arbitrary data which can be fetched using .data() method.
Modify you HTML as
<!-- Modal -->
<div class="modal fade" id= "{{pl.id}}_1" role="dialog" data-id="{{pl.id}}">
<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">Do You want to accept <b>{pl.employee.emp_name|title }} </b> leave?</h4>
</div>
<form action={% url 'm_manage:accept' %} method="POST">
{% csrf_token %}
<div class="modal-body">
<p><input type="checkbox" name="email" class="email" > Notify Via Email<br></p>
<p><label for="message">Message </label>
<textarea rows="3" name="message" class="message" class="form-control input-md"></textarea></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success accept" data-dismiss="modal">Accept</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
Script
$(document).on('click', '.accept', function (e) {
e.preventDefault();
var modal = $(this).closest('.modal');
var v_id = modal.data('id');
var msg = modal.find('.message').val();
var check = modal.find('.email').is(':checked');
console.log(v_id, msg, check);
});

#Bootstrap 3.2.0 #modal-dialogs #jquery

following is the code for which modal-dialog is not popping up.I am using Bootstrap 3.2.0 and jquery is also above 1.9.0.Help me out if i am missing something.And please let me know for any further information and Thanks in advance.
<div class="modal fade" id = "login" 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></button>
<h4 class="modal-title" id="myModal">Login or Registeration </h4>
</div>
<div class="modal-body">
<form action="#" method="POST">
<div class="form-group">
<input type="email" class="form-control" placeholder="Email">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password">
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Login">
<input type="submit" class="btn btn-primary" value="Register">
</div>
</form>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-primary" data-dismiss="modal">
Forgot Password?</a>
</div>
</div>
</div>
</div>
<div class="jumbotron" id="home">
<div class="container-fluid">
<h1>The Design Store</h1>
<p>fdgdhfjgkhloj;jlkhhjgfdshjkl
sgdhfjgkhkjlrtyguuhjkoxcvbn
dgfhmb,nm,asdfghjkl;';lklkjhjhgfddfghjhg'..</p>
<p>wefrgdthyjgukiosdfghjkgh
ssdfghjklertyuwertyuicvbnm,
sdfghjklsdfghjkljjhgfdsdfghjkjhgddsadfg</p>
<p>My Account</p>
</div>
</div>

Everything is correct as far as markup (link below to view). Make sure you are including the jquery.js script before the bootstrap.js script.
Working demo of your code
<div class="modal fade" id="login" 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></button>
<h4 class="modal-title" id="myModal">Login or Registeration </h4>
</div>
<div class="modal-body">
<form action="#" method="POST">
<div class="form-group">
<input type="email" class="form-control" placeholder="Email">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password">
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Login">
<input type="submit" class="btn btn-primary" value="Register">
</div>
</form>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-primary" data-dismiss="modal">
Forgot Password?</a>
</div>
</div>
</div>
</div>
<div class="jumbotron" id="home">
<div class="container-fluid">
<h1>The Design Store</h1>
<p>fdgdhfjgkhloj;jlkhhjgfdshjkl sgdhfjgkhkjlrtyguuhjkoxcvbn dgfhmb,nm,asdfghjkl;';lklkjhjhgfddfghjhg'..
</p>
<p>wefrgdthyjgukiosdfghjkgh ssdfghjklertyuwertyuicvbnm, sdfghjklsdfghjkljjhgfdsdfghjkjhgddsadfg
</p>
<p>My Account</p>
</div>
</div>

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 model covered by modal backdrop

I have simple html page to show bootstrap modal, however when I launch the model -
it gets covered by modal backdrop,
I checked the z- index of myModal - 1040 and that of modal backdrop is 1030
checked all posts in stackoverflow but none of them solve my issue
please help
<html>
<head>
<link href="" rel="stylesheet">
<link href="Content/bootstrap.min.css" rel="stylesheet">
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
</head>
<body>
Launch demo modal
<div id="myModal" class="modal hide fade in" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">X</button>
<h3 id="myModalLabel">Log in</h3>
</div>
<div class="modal-body">
<form class="modal-form" id="loginform">
<input type="text" name="username" placeholder="login" id="username">
<input type="text" name="password" placeholder="password" id="userpassword">
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-success">Login</button>
</div>
</div>
</body>
</html>​

You forgot a few things, which are:
the <div class="modal-dialog">
the <div class="modal-content">
You also added some unecessary things which are:
the hide class on the <div id="myModal" class="modal fade in" aria-hidden="true">
the in class on the <div id="myModal" class="modal fade in" aria-hidden="true">
Your working code will look like this:
Launch demo modal
<div id="myModal" class="modal fade in" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">X</button>
<h3 id="myModalLabel">Log in</h3>
</div>
<div class="modal-body">
<form class="modal-form" id="loginform">
<input type="text" name="username" placeholder="login" id="username">
<input type="text" name="password" placeholder="password" id="userpassword">
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-success">Login</button>
</div>
</div>
</div>
</div>
Here's a JsFiddle to show it in a working environment.
To read everything about the modal, please check this
Hope this helps!

Remove the hide class from your modal.
JSFdiddle
Launch demo modal
<div id="myModal" class="modal fade in" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">X</button>
<h3 id="myModalLabel">Log in</h3>
</div>
<div class="modal-body">
<form class="modal-form" id="loginform">
<input type="text" name="username" placeholder="login" id="username">
<input type="text" name="password" placeholder="password" id="userpassword">
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-success">Login</button>
</div>
</div>