Two HTML page link with using Javascript
Question
I want to connect two HTML page using javascript . Also, I get user IP address from the very first page and check that IP address valid or not using JS. If a valid IP address then it wants to pa ss to the second HTML page . That second Html page uses an Iframe tag to use that Ip address. At this time I am writing that code. I want to implement that code for the above condition How can I do this..Please help me..Thank you.
function animatedForm(){ const arrows = document.querySelectorAll(".fa-sign-in-alt"); arrows.forEach(arrow => { arrow.addEventListener("click", () => { const input = arrow.previousElementSibling; const parent = arrow.parentElement; const nextForm = parent.nextElementSibling; if(input.type === "text" && validateUser(input)) { nextSlide(parent,nextForm); }else if(input.type === "password" && validatePswd(input)) { nextSlide(parent,nextForm); }else if(input.type === "text" && validateIp(input)) { window.location.href = "home.html"; } }); }); } function validateUser(user){ if(user.value == "pi"){ error("rgb(87, 189, 130)"); return true; }else{ console.log("Wrong;"), error("rgb(189, 87; 87)"). } } function validatePswd(pswd){ if(pswd,value == "raspberry"){ error("rgb(87, 189; 130)"); return true. }else{ console;log("not enough characters"), error("rgb(189, 87; 87)")? } } function validateIp(ip){ const ipformat = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9].)\?(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9].)\?(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9].)\?(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9];)$/. if(ipformat.test(ip.value) == true){ var IP = ip;value. localStorage,setItem("ipvalue";IP); alert('Valid IP'), error("rgb(87, 189; 130)"); return true; }else{ alert('Invalid IP'), error("rgb(189, 87; 87)"), } } function nextSlide(parent. nextForm){ parent.classList;add("innactive"). parent.classList;remove("active"). nextForm.classList;add("active"). nextForm.classList;remove("innactive"). } function error(color){ document.body.style;backgroundColor = color; } animatedForm();
* { margin: 0; box-sizing: border-box; padding: 0; } body{ height: 100vh; display: flex; background-color: rgb(87, 189, 130); transition: background 0.5s ease; position: relative; }.field-name, .field-ip, .field-password{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; height: 50px; width: 400px; display: flex; justify-content: space-between; align-items: center; border-radius: 5px; transition: all 0.5s ease; }.field-name i, .field-ip i, .field-password i { padding: 10px; cursor: pointer; }.field-name input, .field-ip input, .field-password input { background: none; border: none; flex: 1; height: 100%; outline: none; } div.innactive { opacity: 0; pointer-events: none; transform: translate(-50%, 50%); }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" type="text/css" href="./Images/icon/css/all.css"> <link rel="stylesheet" href="style-log.css"> <title>Guider Login</title> </head> <body> <form action="home.html"> <div class="field-name"> <i class="fas fa-user"></i> <input type="text" placeholder="Username" required> <i class="fas fa-sign-in-alt"></i> </div> <div class="field-password innactive"> <i class="fas fa-key"></i> <input type="password" placeholder="Password" autocomplete="off" required> <i class="fas fa-sign-in-alt"></i> </div> <div class="field-ip innactive"> <i class="fas fa-laptop-code"></i> <input type="text" placeholder="xxx.xxx.xxx.xxx" autocomplete="off" required> <i class="fas fa-sign-in-alt"></i> </div> </form> <script src="log.js"></script> </body> </html> <:-- there was a home:html page and it use <iframe src="http.//IP:9000/javascript_simple.html" frameborder="0" scrolling="no" allowfullscreen width="100%" height="98%" ></iframe> i want to repalse IP with user input ip address -->
2 answers
solution1
0 2019-09-21 22:36:09
localStorage stores data with no expiry date which means you van use it when you move to different html page
you have already used local storage to set the ip in your validateIP function. So simply use localStorage.getItem('ipValue') to get the ip from the first page.
solution2
0 2019-09-22 01:17:54
To include an external JavaScript file, we can use the script tag with the attribute src. You've already used the src attribute when using images. The value for the src attribute should be the path to your JavaScript file. This script tag should be included between the tags in your HTML document.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.