How to use javascript function inside an html codeo - javascript

Hello guys I'm new on javascript/html and I have a problem recalling a function of the js file "login1" into html.
I use the same function wrote directly into html and it works then I suppose the problem would be the connection between html and js.
The problem is the login1 function the login() function inside the html is correct and it works.
Can you help me? Thanks in advance
/** Connect to Moralis server */
const serverUrl = "https://oqujb5obipqi.usemoralis.com:2053/server";
const appId = "oNQDkHuT1BjaQBFTYkBZFc7EyGHdH0RF0rcG2pix";
Moralis.start({ serverUrl, appId });
/** Add from here down */
async function login1(){
console.log("login clicked");
var user = await Moralis.Web3.authenticate();
if(user){
console.log(user);
user.set("nickname","VITALIK");
user.set("fav_color","blue");
user.save();
}
}
function openModal(){
document.getElementById("token_modal").style.display = "block";
}
document.getElementbyId("from_token_select").onclick =openModal;
document.getElementbyId("to_token_select").onclick =openModal;
async function logOut() {
await Moralis.User.logOut();
console.log("logged out");
}
document.getElementById("login_button").onclick = login1;
document.getElementById("logout_button").onclick = logOut;
/** Useful Resources */
// https://docs.moralis.io/moralis-server/users/crypto-login
// https://docs.moralis.io/moralis-server/getting-started/quick-start#user
// https://docs.moralis.io/moralis-server/users/crypto-login#metamask
/** Moralis Forum */
// https://forum.moralis.io/
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8">
<meta name="viewport" content="width=500px, initial-scale=1,shrink-to-fit=no">
<title>JIMMYDEX</title>
<script src="https://cdn.jsdelivr.net/npm/web3#latest/dist/web3.min.js"></script>
<script src="https://unpkg.com/moralis/dist/moralis.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href= "./style.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="\img\logo1.jpg" width="100" height="100" alt="">
JIMMIDEX
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">POOL <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">NFT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">DERIVATIVES</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<button id = "login_button" class = "btn btn-outline-primary my-2 my-sm-0" type="submit">Login1 with Metamask</button>
<button onclick="login()" class = "btn btn-outline-primary my-2 my-sm-0">Login with Metamask</button>
</div>
</nav>
<div class = "container">
<div class = "row">
<div class = "col col-md-6 offset-md-3" id= "window" >
<h4>Swap</h4>
<div id="form">
<div class = "swapbox">
<div class = "swapbox_select token_select" id= "from_token_select">
ETH
</div>
<div class = "swapbox_select">
<input class= "number form-control" placeholder = "amount" id = "from_amount">
</div>
<div class = "swapbox">
<div class = "swapbox_select token_select" onclick="openModal()">
TOKEN SELECT
</div>
<div class = "swapbox_select">
<input class= "number form-control" placeholder = "amount" id = "to_amount">
</div>
</div>
<button class = "btn btn-large btn-primary btn-block" id = "swap_button">
swap
</button>
</div>
</div>
</div>
</div>
</div>
<div class="modal" id = "token_modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Select token</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
</div>
</div>
</div>
<script>
Moralis.initialize("oNQDkHuT1BjaQBFTYkBZFc7EyGHdH0RF0rcG2pix"); // Application id from moralis.io
Moralis.serverURL = "https://oqujb5obipqi.usemoralis.com:2053/server"; //Server url from moralis.io
async function login(){
console.log("login clicked");
var user = await Moralis.Web3.authenticate();
if(user){
console.log(user);
user.set("nickname","VITALIK");
user.set("fav_color","blue");
user.save();
}
}
</script>
<script>
function openModal(){
document.getElementById("token_modal").style.display = "block";
}
</script>
<script type="text/javascript" src="./main.js"></script>
</body>
</html>


To use a javascript file inside HTML, you need to import it via a script tag, like this:
<script type="text/javascript" src="my_javascript.js"></script>
This is usually done at the beginning of the HTML, in the head element. Note that the value for the "src" attribute will be relative to your HTML. In the example above, it is assumed that the .js file is in the folder as the html.


You can make some changes like this, you have no problem with external JS
/** Connect to Moralis server */
const serverUrl = "https://oqujb5obipqi.usemoralis.com:2053/server";
const appId = "oNQDkHuT1BjaQBFTYkBZFc7EyGHdH0RF0rcG2pix";
Moralis.start({ serverUrl, appId });
/** Add from here down */
async function login1() {
console.log("login clicked");
var user = await Moralis.Web3.authenticate();
if (user) {
console.log(user);
user.set("nickname", "VITALIK");
user.set("fav_color", "blue");
user.save();
}
}
function openModal() {
document.getElementById("token_modal").style.display = "block";
}
document.getElementById("from_token_select").onclick = openModal;
async function logOut() {
await Moralis.User.logOut();
console.log("logged out");
}
document.getElementById("login_button").onclick = login1;
/** Useful Resources */
// https://docs.moralis.io/moralis-server/users/crypto-login
// https://docs.moralis.io/moralis-server/getting-started/quick-start#user
// https://docs.moralis.io/moralis-server/users/crypto-login#metamask
/** Moralis Forum */
// https://forum.moralis.io/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=500px, initial-scale=1,shrink-to-fit=no"
/>
<title>JIMMYDEX</title>
<script src="https://cdn.jsdelivr.net/npm/web3#latest/dist/web3.min.js"></script>
<script src="https://unpkg.com/moralis/dist/moralis.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
<link rel="stylesheet" href="./style.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="\img\logo1.jpg" width="100" height="100" alt="" />
JIMMIDEX
</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#"
>POOL <span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item">
<a class="nav-link" href="#">NFT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">DERIVATIVES</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<button
id="login_button"
class="btn btn-outline-primary my-2 my-sm-0"
type="submit"
>
Login1 with Metamask
</button>
<button onclick="login()" class="btn btn-outline-primary my-2 my-sm-0">
Login with Metamask
</button>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col col-md-6 offset-md-3" id="window">
<h4>Swap</h4>
<div id="form">
<div class="swapbox">
<div class="swapbox_select token_select" id="from_token_select">
ETH
</div>
<div class="swapbox_select">
<input
class="number form-control"
placeholder="amount"
id="from_amount"
/>
</div>
<div class="swapbox">
<div class="swapbox_select token_select">
TOKEN SELECT
</div>
<div class="swapbox_select">
<input
class="number form-control"
placeholder="amount"
id="to_amount"
/>
</div>
</div>
<button
class="btn btn-large btn-primary btn-block"
id="swap_button"
>
swap
</button>
</div>
</div>
</div>
</div>
</div>
<div class="modal" id="token_modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Select token</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="./main.js"></script>
</body>
</html>


It's getElementById not getElementbyId. Change these lines see if it works:
document.getElementbyId("from_token_select").onclick =openModal;
document.getElementbyId("to_token_select").onclick =openModal;
Change the lower case byId to ByID.

Related

How can I open a Bootstrap (5.2) modal with a specific tab selected, from a button?

I'm trying to open a Bootstrap (5.2) modal with a specific tab selected. The tab should be determined by which button is clicked on the home page ("Login" or "Sign Up").
I tried previous solutions, but they mostly use older versions of Bootstrap.
I'm a complete noob to JavaScript, so if your solution includes it please explain like I'm five.
Here's my HTML:
<!-- Log In / Sign Up Buttons -->
<div class="container">
<div class="row">
<div class="col">
<!-- Sign Up Button -->
<button id="signup-button" type="button" href="#pills-signup" class="btn btn-primary float-end" data-bs-toggle="modal" data-bs-target="#login-signup-modal">
Sign Up
</button>
<!-- Log In Button -->
<button type="button" href="#pills-login" class="btn btn-outline-primary float-end" data-bs-toggle="modal" data-bs-target="#login-signup-modal">
Log In
</button>
</div>
</div>
</div>
<!-- Log In Modal -->
<div class="modal fade" id="login-signup-modal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Body -->
<div class="modal-body">
<!-- Tab Headers -->
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-login-tab" data-bs-toggle="pill" data-bs-target="#pills-login" type="button" role="tab" aria-controls="pills-login" aria-selected="true">Log In</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-signup-tab" data-bs-toggle="pill" data-bs-target="#pills-signup" type="button" role="tab" aria-controls="pills-signup" aria-selected="false">Sign Up</button>
</li>
</ul>
<!-- Tab Content -->
<div class="tab-content" id="pills-tabContent">
<!-- Log In Tab -->
<div class="tab-pane fade show active" id="pills-login" role="tabpanel" aria-labelledby="pills-login-tab">
<form method="POST">
<!-- form-label & form-control = bootstrap form layouts -->
{{ log_in_form.email.label(class="form-label") }}
{{ log_in_form.email(class="form-control") }}
<br>
{{ log_in_form.password.label(class="form-label")}}
{{ log_in_form.password(class="form-control") }}
<br>
{{ log_in_form.submit(class="btn btn-primary form-control") }}
</form>
</div>
<!-- Sign Up Tab -->
<div class="tab-pane fade" id="pills-signup" role="tabpanel" aria-labelledby="pills-signup-tab">
<form method="POST">
{{ sign_up_form.email.label(class="form-label") }}
{{ sign_up_form.email(class="form-control") }}
<br>
{{ sign_up_form.password.label(class="form-label")}}
{{ sign_up_form.password(class="form-control") }}
<br>
{{ sign_up_form.confirm_password.label(class="form-label")}}
{{ sign_up_form.confirm_password(class="form-control") }}
<br>
{{ sign_up_form.submit(class="btn btn-primary form-control") }}
</form>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>

You can utilize bootstrap events. I think the javascript part is short, so basically listening for event show.bs.modal of the modal (see bootstrap docs) and get the reference to the invoking button event.relatedTarget (see bootstrap docs) which had in the first place an data-tab-id="ID-OF-TAB" attribute. We take that attribute and get a reference to the tab. Finally we use the tabs method show to show the correct tab.
const myModal = document.getElementById('login-signup-modal')
myModal.addEventListener('show.bs.modal', (ev) => {
var invoker = ev.relatedTarget
var selected_tab = invoker.getAttribute("data-tab-id")
const tab_btn = document.querySelector('#' + selected_tab)
const tab = new bootstrap.Tab(tab_btn)
tab.show()
})
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<!-- Log In / Sign Up Buttons -->
<div class="container">
<div class="row">
<div class="col">
<!-- Sign Up Button -->
<button id="signup-button" data-tab-id="pills-signup-tab" type="button" href="#pills-signup" class="btn btn-primary float-end" data-bs-toggle="modal" data-bs-target="#login-signup-modal">
Sign Up
</button>
<!-- Log In Button -->
<button type="button" data-tab-id="pills-login-tab" href="#pills-login" class="btn btn-outline-primary float-end" data-bs-toggle="modal" data-bs-target="#login-signup-modal">
Log In
</button>
</div>
</div>
</div>
<!-- Log In Modal -->
<div class="modal fade" id="login-signup-modal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Body -->
<div class="modal-body">
<!-- Tab Headers -->
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-login-tab" data-bs-toggle="pill" data-bs-target="#pills-login" type="button" role="tab" aria-controls="pills-login" aria-selected="true">Log In</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-signup-tab" data-bs-toggle="pill" data-bs-target="#pills-signup" type="button" role="tab" aria-controls="pills-signup" aria-selected="false">Sign Up</button>
</li>
</ul>
<!-- Tab Content -->
<div class="tab-content" id="pills-tabContent">
<!-- Log In Tab -->
<div class="tab-pane fade show active" id="pills-login" role="tabpanel" aria-labelledby="pills-login-tab">
<form method="POST">
<!-- form-label & form-control = bootstrap form layouts -->
{{ log_in_form.email.label(class="form-label") }} {{ log_in_form.email(class="form-control") }}
<br> {{ log_in_form.password.label(class="form-label")}} {{ log_in_form.password(class="form-control") }}
<br> {{ log_in_form.submit(class="btn btn-primary form-control") }}
</form>
</div>
<!-- Sign Up Tab -->
<div class="tab-pane fade" id="pills-signup" role="tabpanel" aria-labelledby="pills-signup-tab">
<form method="POST">
{{ sign_up_form.email.label(class="form-label") }} {{ sign_up_form.email(class="form-control") }}
<br> {{ sign_up_form.password.label(class="form-label")}} {{ sign_up_form.password(class="form-control") }}
<br> {{ sign_up_form.confirm_password.label(class="form-label")}} {{ sign_up_form.confirm_password(class="form-control") }}
<br> {{ sign_up_form.submit(class="btn btn-primary form-control") }}
</form>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Tabs show as per button not working using bootstrap 5?

I'm using bootstrap 5 i have one modal for login and register but but there is two bootstrap tabs inside one modal and i want to display tab as per button click but this is not working.
When i click on login button then inside modal login tab should be active and if i click on register button then inside modal register tab should be active.
Giving this error in console:-
Uncaught TypeError: Cannot read property 'show' of null
My Code:
$('.register-btn').click(function() {
$('#loginModal').modal('show');
var triggerEl = document.querySelector('[data-bs-target="#register"]')
bootstrap.Tab.getInstance(triggerEl).show()
})
$('.login-btn').click(function() {
$('#loginModal').modal('show');
var triggerE2 = document.querySelector('[data-bs-target="#login"]')
bootstrap.Tab.getInstance(triggerE2).show()
})
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary register-btn">
Register
</button>
<button type="button" class="btn btn-primary login-btn">
Login
</button>
<!-- Modal -->
<div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="exampleloginModal" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body p-0">
<div class="row m-0">
<div class="col-md-6 p-0">
<img src="images/login-img.png" class="img-fluid" alt="">
</div>
<div class="col-md-6">
<div class="login-right-body">
<ul class="nav nav-pills nav-fill" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="login-tab" data-bs-toggle="tab" data-bs-target="#login" type="button" role="tab" aria-controls="login" aria-selected="true">Login</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="register-tab" data-bs-toggle="tab" data-bs-target="#register" type="button" role="tab" aria-controls="register" aria-selected="false">Register</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="login" role="tabpanel" aria-labelledby="login-tab">
<form>
<div class="form-group custom-form-group">
<label>Mobile Number</label>
<input type="text" class="form-control">
</div>
<div class="form-group custom-form-group">
<button class="btn btn-primary btn-block">Login</button>
</div>
</form>
</div>
<div class="tab-pane fade" id="register" role="tabpanel" aria-labelledby="register-tab">
<form>
<div class="form-group custom-form-group">
<label>Full Name</label>
<input type="text" class="form-control">
</div>
<div class="form-group custom-form-group">
<button class="btn btn-primary btn-block">Register</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Thanks for your efforts!

You can trigger the click to simulate clicking the tab.
$(".register-btn").click(function () {
$("#register-tab").trigger("click");
$("#loginModal").modal("show");
});
$(".login-btn").click(function () {
$("#login-tab").trigger("click");
$("#loginModal").modal("show");
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary register-btn">
Register
</button>
<button type="button" class="btn btn-primary login-btn">
Login
</button>
<!-- Modal -->
<div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="exampleloginModal" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body p-0">
<div class="row m-0">
<div class="col-md-6 p-0">
<img src="images/login-img.png" class="img-fluid" alt="">
</div>
<div class="col-md-6">
<div class="login-right-body">
<ul class="nav nav-pills nav-fill" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="login-tab" data-bs-toggle="tab" data-bs-target="#login" type="button" role="tab" aria-controls="login" aria-selected="true">Login</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="register-tab" data-bs-toggle="tab" data-bs-target="#register" type="button" role="tab" aria-controls="register" aria-selected="false">Register</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="login" role="tabpanel" aria-labelledby="login-tab">
<form>
<div class="form-group custom-form-group">
<label>Mobile Number</label>
<input type="text" class="form-control">
</div>
<div class="form-group custom-form-group">
<button class="btn btn-primary btn-block">Login</button>
</div>
</form>
</div>
<div class="tab-pane fade" id="register" role="tabpanel" aria-labelledby="register-tab">
<form>
<div class="form-group custom-form-group">
<label>Full Name</label>
<input type="text" class="form-control">
</div>
<div class="form-group custom-form-group">
<button class="btn btn-primary btn-block">Register</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

How to fix modal popup that close immediately after click button to open

I'm building webpage for my homework. I want to have modal register form but when I click "SIGNUP" to pop it up, it close immediately. Why is it like that? How to fix it? I don't want to have auto close on my modal. I want to close it when I click another area or "x" for closing.
I'm beginner in web development. I don't use Bootstrap for modal.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="home.css">
<title>Online Stock Trading</title>
</head>
<body>
<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">STOCK</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Market Data</a>
<a class="nav-item nav-link" href="#">Trade</a>
</div>
</div>
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Username">
<input class="form-control mr-sm-2" type="search" placeholder="Password">
<button class="btn btn-success my-2 mr-sm-2" id="login">LOGIN</button>
<button class="btn btn-primary my-2 mr-sm-2" id="sign_up">SIGN UP</button>
</form>
</nav>
Code for my modal
<!-- register form-->
<div class="container" id="modal_content">
<div class="card text-center">
<div class="card-header bg-dark text-white">
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
Register
</div>
<div class="card-body">
<form class="register-box">
<div class="form-group row">
<label class="col-sm-4 col-form label">Email</label>
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="test#example.com">
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 col-form label">Password</label>
<div class="col-sm-6">
<input type="password" class="form-control" placeholder="Password">
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 col-form label">Confirm Password</label>
<div class="col-sm-6">
<input type="password" class="form-control" placeholder="Confirm Password">
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 col-form label">Name</label>
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="Name">
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 col-form label">Last Name</label>
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="Last Name">
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 col-form label">Phone</label>
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="081-234-XXXX">
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 col-form label">Address</label>
<div class="col-sm-6">
<textarea class="form-control" rows="2"></textarea>
</div>
</div>
<button class="btn btn-success">SUBMIT</button>
</form>
</div>
</div>
</div>
There is a javascript file
<!-- script -->
<script type="text/javascript" src="home.js"></script>
</body>
</html>
JAVASCRIPT
var modal = document.getElementById('modal_content');
var btn = document.getElementById("sign_up");
var close = document.getElementsByClassName("close");
btn.onclick = function(){
modal.style.display = "block";
}
close.onclick = function(){
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
CSS
#modal_content{
width: 40%;
height: auto;
margin-top: 3%;
display: none;
z-index: 1;
overflow: auto;
}
I expect that the modal register form will not be automatically close.

use preventDefault() inside your button onclick function -
btn.onclick = function(e){
e.preventDefault();
modal.style.display = "block";
}
var modal = document.getElementById('modal_content');
var btn = document.getElementById("sign_up");
var close = document.getElementById("close");
btn.onclick = function(e){
e.preventDefault();
modal.style.display = "block";
}
close.onclick = function(){
modal.style.display = "none";
}
window.onclick = function() {
if (event.target == modal) {
modal.style.display = "none";
}
}
#modal_content {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Online Stock Trading</title>
</head>
<body>
<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">STOCK</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Market Data</a>
<a class="nav-item nav-link" href="#">Trade</a>
</div>
</div>
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Username">
<input class="form-control mr-sm-2" type="search" placeholder="Password">
<button class="btn btn-success my-2 mr-sm-2" id="login">LOGIN</button>
<button class="btn btn-primary my-2 mr-sm-2" id="sign_up">SIGN UP</button>
</form>
</nav>
<!-- register form-->
<div class="container" id="modal_content">
<div class="card text-center">
<div class="card-header bg-dark text-white">
<button type="button" id="close" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
Register
</div>
<div class="card-body">
...
</div>
</div>
</div>
</body>
</html>

You have a button inside <form>.Therefor your button is set to type "submit".
Try this:
<button type="button" class="btn btn-primary my-2 mr-sm-2" id="sign_up">SIGN UP</button>

Iterate Through Multiple Input Fields with JQuery

I have a simple modal that, when opened, allows a user to add multiple names by clicking the plus icon via JQuery.
The issue that I am currently having is that I need to capture the data entered into all of the name fields and format them into a JSON array so I can post the data. I can log out the first field, but none of the additional fields. The simplified code is listed below but the full version can be viewed here.
<div class="modal-body">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="users-tab" data-toggle="tab" href="#users" role="tab" aria-controls="users" aria-selected="true">Users</a>
</li>
<li class="nav-item">
<a class="nav-link" id="groups-tab" data-toggle="tab" href="#groups" role="tab" aria-controls="groups" aria-selected="false">Groups</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<!-- Content for the users tab -->
<div class="tab-pane fade show active" id="users" role="tabpanel" aria-labelledby="users-tab">
<div class="wrapper">
<div class="users">
<u><h6>Name</h6></u>
<form id="input" action="modal.php" method="post">
<span id="name"></span>
</form>
</div>
<div class="permissions">
</div>
</div>
</div>
<!-- Content for the groups tab -->
<div class="tab-pane fade" id="groups" role="tabpanel" aria-labelledby="groups-tab">
Group Level Permissions
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" id="new_rule"><i class="fas fa-plus"></i></button>
<button type="button" class="btn btn-primary" data-dismiss="modal" data-toggle="modal" data-target="#saved" id="save">Save</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#new_rule").click(function(){
var input = "<input type='text' name='name' placeholder='name' class='form-control' id='name_input'>";
$("#name").prepend(input);
});
$("#save").click(function(){
var value = $("#name_input").val();
console.log(value);
});
});
</script>

try below code snippet.
capture the data entered into all of the name fields
var value = $("input[name='name']")
.map(function() {
return $(this).val();
}).get();
format them into a JSON array
var jsonStr = JSON.stringify(value);
$(document).ready(function() {
$("#new_rule").click(function() {
var input = "<input type='text' name='name' placeholder='name' class='form-control'>";
$("#name").prepend(input);
});
$("#save").click(function() {
var value = $("input[name='name']")
.map(function() {
return $(this).val();
}).get();
var jsonStr = JSON.stringify(value);
console.log(jsonStr);
});
});
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<title>Modal</title>
<style media="screen">
.wrapper>div {
background: #eee;
padding: 1em;
}
.wrapper>div:nth-child(odd) {
background: #ddd;
}
.wrapper {
display: grid;
grid-template-columns: 70% 30%;
}
</style>
</head>
<body>
<!-- Button trigger modal -->
<div class="permissions">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#new">
Permissions
</button>
</div>
<!-- Modal -->
<div class="modal fade new" id="new" tabindex="-1" role="dialog" aria-labelledby="new_modal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="permissions">Permissions</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"><i class="fas fa-times"></i></span>
</button>
</div>
<div class="modal-body">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="users-tab" data-toggle="tab" href="#users" role="tab" aria-controls="users" aria-selected="true">Users</a>
</li>
<li class="nav-item">
<a class="nav-link" id="groups-tab" data-toggle="tab" href="#groups" role="tab" aria-controls="groups" aria-selected="false">Groups</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<!-- Content for the users tab -->
<div class="tab-pane fade show active" id="users" role="tabpanel" aria-labelledby="users-tab">
<div class="wrapper">
<div class="users">
<u><h6>Name</h6></u>
<form id="input" action="modal.php" method="post">
<span id="name"></span>
</form>
</div>
<div class="permissions">
</div>
</div>
</div>
<!-- Content for the groups tab -->
<div class="tab-pane fade" id="groups" role="tabpanel" aria-labelledby="groups-tab">
Group Level Permissions
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" id="new_rule"><i class="fas fa-plus"></i></button>
<button type="button" class="btn btn-primary" data-dismiss="modal" data-toggle="modal" data-target="#saved" id="save">Save</button>
</div>
</div>
</div>
</div>
<!-- Saved Modal -->
<div class="modal fade" id="saved" tabindex="-1" role="dialog" aria-labelledby="saved" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Save Changes</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Are you sure you would like to save the following changes?</p>
<div class="wrapper">
<div class="users">
<u><h6>Name</h6></u>
<span id="name"></span>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Dismiss</button>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>

Maybe try this method just to get array of values and then do whatever u want with them, this works for input fields of type 'text' but you can adjust it the way you want. The function is assigned to a button's onClick event.
<script>
var GetFieldValues = function(){
var values=[];
$("input[type='text']").each(function(){
values.push($(this).val());
});
console.log(values);
}
</script>

You can serialized your form inputs using the serializeArray() function. This will return a query string that then can be converted to JSON object usin JSON.stringify() with an array with each name added.
$(document).ready(function(){
$("#new_rule").click(function(){
var input = "<input type='text' name='name' placeholder='name' class='form-control' id='name_input'>";
$("#name").prepend(input);
});
$("#save").click(function(){
var data = $('#input').serializeArray();
console.log(JSON.stringify(data));
});
});

with this you can solve friend:
$(document).ready(function(){
$("#new_rule").click(function(){
var input = "<input type='text' name='name[]' placeholder='name' class='form-control' id='name_input'>";
$("#name").prepend(input);
});
$("#save").click(function(){
var names = [];
$('input[name^="name"]').each(function() {
names.push($(this).val());
});
console.log(JSON.stringify(names));
});
});

Bootstrap Modal is not Displaying Login Window

How do I display a Login Modal using Bootstrap having included a that needs to be done but still it is not displaying.
enter code here
How do I make this modal to display given the code below:
BOOTSTRAP LINKS:
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
MODAL STYLING:
<style>
.modal-header, h4, .close {
background-color: #5cb85c;
color: white !important;
text-align: center;
font-size: 30px;
}
.modal-footer {
background-color: #f9f9f9;
}
</style>
Navigation Bar Containing the Link so as to display the Login Modal:
<nav class="navbar navbar-default ">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"> </a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Departments</li>
<li>Clubs & Sports</li>
<li>Contact US</li>
<li><a data-toggle="modal" href="#login">Login</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="register.php"><img alt="" src="images/person2.png">
Sign Up</a></li>
<li><img alt="" src="images/login2.png">Login</li>
</ul>
</div>
</div>
</nav>
Container For the Login Modal:
<div class="container">
<div class="modal fade" id="login" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="padding: 35px 50px;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4>
<span class="glyphicon glyphicon-lock"></span> Login
</h4>
</div>
<div class="modal-body" style="padding: 40px 50px;">
<form role="form">
<div class="form-group">
<label for="usrname"><span class="glyphicon glyphicon-user"></span>
Username</label> <input type="text" class="form-control"
id="usrname" placeholder="Enter email">
</div>
<div class="form-group">
<label for="psw"><span class="glyphicon glyphicon-eye-open"></span>
Password</label> <input type="text" class="form-control"
id="psw" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox" value="" checked>Remember me</label>
</div>
<button type="submit" class="btn btn-success btn-block">
<span class="glyphicon glyphicon-off"></span> Login
</button>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger btn-default pull-left"
data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span> Cancel
</button>
<p>
Not a member? Sign Up
</p>
<p>
Forgot Password?
</p>
</div>
</div>
</div>
</div>
Javascript code to enable the Login Modal:
<script>
$(document).ready(function(){
$("#login").click(function(){
$("#myModal").modal();
});
});
</script>

Your Javascript is trying to address elements that don't exist because they do not have an id, or the wrong id.
Try this.
Add an id to the link that is supposed to bring up the modal.
<li><img alt="" src="images/login2.png">Login</li>
This is not required, but I would recommend changing the id of your modal to be more descriptive.
<div class="modal fade" id="loginModal" role="dialog">
Now adjust your JavaScript to address the correct elements.
$(document).ready(function(){
$("#loginLink").click(function(){
$("#loginModal").modal();
});
});

Categories

Resources