Iterate Through Multiple Input Fields with JQuery - javascript

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));
});
});

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>

How to use javascript function inside an html codeo

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.

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>

Pagination in my laravel app showing up twice

I recently added sortable and a delete modal to my project. After adding the delete modal I'm now getting the pagination to render twice.(picture included to illustrate).
My Controller
public function index()
{
$contacts = Contact::sortable('firstName')->paginate(10);
return view('contacts.index', ['contacts' => $contacts]);
}
my index blade
#extends('layouts.master')
#section('content')
<div class="container">
<div style="margin:10px">
</div>
<div class="row">
<div class="col-sm-10">
<div class="form-group {{ $errors->has('search') ? 'has-error' : "" }}">
{{ Form::text('search',NULL, ['class'=>'form-control', 'id'=>'search', 'placeholder'=>'search contacts...']) }}
{{ $errors->first('search', '<p class="help-block">:message</p>') }}
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
{{ Form::button(isset($model)? 'Find' : 'search' , ['class'=>'btn btn-success', 'type'=>'submit']) }}
</div>
</div>
</div>
<div class="row">
<div style="margin-top:10px;">
<h3>Contacts</h3>
</div>
</div>
<div class="row">
<div style="margin-top:10px; margin-bottom:10px;">
<a class="btn btn-sm btn-success" href="{{ route('contacts.create') }}">Create New Contact</a>
</div>
</div>
{{-- #if ($contacts = "")
<div class="row">
<h3>You don't have any contacts saved!</h3>
<div style="margin-top:10px; margin-bottom:10px;">
<a class="btn btn-sm btn-success" href="{{ route('contacts.create') }}">Create New Contact</a>
</div>
#else --}}
<div style="margin:10px">
</div>
<div class="row">
<div class="table-responsive">
<table id='dataTable' class="table table-hover col-sm-12 w-auto">
<thead class="thead-dark">
<tr>
<th>
<h5>#sortablelink('firstName', 'First Name')</h5>
</th>
<th>
<h5>#sortablelink('lastName', 'Last Name')</h5>
<th>
<h5>#sortablelink('email', 'Email')</h5>
<th>
<h5>#sortablelink('phone', 'Phone')</h5>
<th>
<h5>#sortablelink('birthday', 'Birthday')</h5>
<th>
<h5 style='text-align:center;'>#sortablelink('id', 'Action')</h5>
</th>
</tr>
</thead>
<tbody>
#if($contacts->count())
#foreach ($contacts as $key => $value)
<tr>
{{-- Need to add in sort functions for each catagory --}}
<td>{{$value->firstName}}</td>
<td>{{$value->lastName}}</td>
<td>{{$value->email}}</td>
<td>{{$value->phone}}</td>
<td>{{$value->birthday}}</td>
<td>
<a class="btn btn-sm btn-success" style='display:inline-block;' href="{{ route('contacts.show', $value->id)}}">Show</a>
<a class="btn btn-sm btn-warning" style='display:inline-block;' href="{{ route('contacts.edit', $value->id)}}">Edit</a>
{{-- for future editmodal
<a class="btn btn-warning edit"
data-toggle="modal"
data-target="#editModal"
data-id="{{ $value->id }}"
data-firstName="{{ $value->firstName }}"
data-lastName="{{ $value->lastName }}"
data-email="{{ $value->email }}"
data-phone="{{ $value->phone }}"
data-birthday="{{ $value->birthday }}"
>
Edit
</a> --}}
<a class="btn btn-sm btn-second" style='display:inline-block;'
href="{{ route('contacts.createAddress', ['contact_id' => $value->id])}}">Add Address</a>
<a href="#" style='display:inline-block;'
data-id={{$value->id}}
data-firstName={{$value->firstName}}
data-lastName={{$value->lastName}}
class="btn btn-danger delete"
data-toggle="modal"
data-target="#deleteModal">Delete</a>
</td>
</tr>
#endforeach
#endif
</tbody>
</table>
{!! $contacts->appends(\Request::except('page'))->render() !!}
{{-- ############################################ Modals ############################################# --}}
<!-- Edit Modal -- (To be added later once calendar is working) -->
{{-- <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="Delete" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit Contact Information</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="/contacts" method="PUT" id="editForm">
<div class="modal-body">
#crsf
{{ Form::model($contact,['route'=>['contacts.update', $value->id],'method'=>'PATCH']) }}
#include('contacts.form_master')
{{ Form::close() }}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<a class="btn btn-sm btn-success" href="contacts/edit">Update</a>
</div>
</form>
</div>
</div>
</div> --}}
<!-- End Edit Modal -->
<!-- Delete Warning Modal -->
<div class="modal modal-danger fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="Delete" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Delete Contact</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="{{ route('contacts.destroy', 'id') }}" method="post">
#csrf
#method('DELETE')
<input id="id" name="id" type="hidden">
<h5 class="text-center">Are you sure you want to delete this contact?</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-sm btn-danger" id="deleteOK_button" rid="{{ $value->id }}">Yes, Delete Contact</button>
</div>
</form>
</div>
</div>
</div>
<!-- End Delete Modal -->
{{-- ########################################## End Modals ########################################### --}}
</div>
{{-- #endif --}}
</div>
{{ $contacts->links() }}
</div>
#endsection
#section('scripts')
<script type="text/javascript">
$(document).ready(function(){
$('#deleteOK_button').on('click',function(){
var rid = $(this).attr('data-id');
$.post('{{ url('contacts/delete') }}', {
'_token':'{{ csrf_token() }}',
'rid' : rid,
}, function(data){
console.log(data);
}, 'json');
});
});
</script>
#endsection
master blade
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon.ico">
<title>Address Book</title>
<!-- Bootstrap core CSS -->
<!-- Styles -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="navbar-brand">Address Book</div>
{{-- <a class="navbar-brand" href="#">Address Book</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button> --}}
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{{ route('contacts.index')}}">Home <span class="sr-only">(current)</span></a>
</li>
{{-- <li class="nav-item">
<a class="nav-link" href="{{ route('contacts.search')}}">Search</a>
</li> --}}
</ul>
</div>
</nav>
<main role="main">
#yield('content')
</main>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
#yield('script')
</body>
</html>
my webpackmix.js
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
mix.webpackConfig(webpack => {
return { plugins: [new webpack.ProvidePlugin({
$: "jquery",
jQuery: ["jquery", "$"],
"window.jQuery": "jquery",
Popper: ["popper.js", "default"]
})] };
});
I've tried a number of things but I'm a bit out of my league on this issue.
As always, thanks in advance!!!

For a quick review change few things. Also check some of your code is not properly commented or maybe a div is missing.
<div class="row">
<div class="table-responsive">
<table>
//here goes your table data
</table>
// pagination goes here or after the next div
{{ $contacts->links() }}
OR
//you can write this way either
{{ $contacts->appends(request()->except('page'))->links() }}
</div>
</div>
//Modals goes here...
//comment {!! $contacts->appends(\Request::except('page'))->render() !!} if it is not commented

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