I added a breakpoint at login function. When I submit the form, the login function should be called; but it's not called. And when I log in, the page doesn't redirect to window.location. I want the page to be redirected if the login credentials are the same as the one in local storage. I know we shouldn't validate your code client side. But for now, let's just ignore that.
var db = window.localStorage;
function signUp() {
var signupFormDt = document.querySelector('#signup-form');
var email = signupFormDt.querySelector('input[name="email"]');
var password = signupFormDt.querySelector('input[name="password"]');
var userName = signupFormDt.querySelector('input[name="name"]');
db.setItem(userName.name, userName.value);
db.setItem(email.name, email.value);
db.setItem(password.name, password.value);
}
function login() {
var loginFormDt = document.querySelector('#login-form');
var logEmail = loginFormDt.querySelector('input[type="email"]');
var logPass = loginFormDt.querySelector('input[type="password"]');
if (db.email == logEmail.value && db.password == logPass.value) {
window.location = 'http://www.google.com';
} else {
window.location = "http://www.google.com";
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!--Link to StyleSheet-->
<link rel="stylesheet" href="../css/style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<h1>
</h1>
<nav>
<ul class="clearfix">
<li>
<a href="#">
<h4>Home</h4>
</a>
</li>
<li>
<a href="../html/about.html">
<h4>About</h4>
</a>
</li>
<li>
<a href="#">
<h4>Contact</h4>
</a>
</li>
<li>
<a href="#">
<h4 id="social">Social</h4>
<div class="arrow"></div>
<ul>
<li>Twitter</li>
<li>Facebook</li>
<li>Instagram</li>
<li>Snapchat</li>
<li>Tumblr</li>
</ul>
</a>
</li>
</ul>
<!-- end of ul of main nav-->
</nav>
<!--end of nav-->
</div>
<!--end of container-->
</header>
<main>
<section>
<h3>login Page</h3>
<div id="login">
<p>Myselfie Tech</p>
<form method="Post" id="login-form">
<p>
<input type="email" name="email" id="email" placeholder="email" required>
</p>
<p>
<input type="password" name="password" id="password" placeholder="password" required>
</p>
<p>
<button type="submit" onsubmit="login()">Submit Query</button>
</p>
<p>
<button onclick="window.location='../html/index.html'">Back</button>
</p>
</form>
</div>
</section>
</main>
<footer>
<p>
<center><small>©Copyright 2017 programmers inc.</small></center>
</p>
</footer>
<!--Link to Javascript-->
<script src="../javascript/scripts1.js"></script>
</body>
</html>
A button element does not have an onsubmit attribute. You should put that attribute on the form tag for it to work. Also make sure that the form submission is cancelled, since you want to control the navigation differently, with window.location:
Add return:
<form onsubmit="return login();">
Add return false, and .href after location:
function login() {
var loginFormDt = document.querySelector('#login-form');
var logEmail = loginFormDt.querySelector('input[type="email"]');
var logPass = loginFormDt.querySelector('input[type="password"]');
if (db.email == logEmail.value && db.password == logPass.value) {
window.location.href = 'http://www.google.com';
} else {
window.location.href = "http://www.google.com";
}
return false; // <------
}
Try using input tag instead of button for submit
something like
<input id="clickMe" type="button" value="Submit Query" onclick="login()" />
Related
Heyy,
i'm a beginner in writing with java script and i'm trying to copy Instagram, soo I need help in form and validation stuff and I also want to save it with local Storage.
I can't find the Problem in my Code and I don't know how to write the local Storage Code.
scripts.js
const VornameInput = document.getElementById("Vorname-input");
const NachnameInput = document.getElementById("Nachname-input");
const GeburtstagInput = document.getElementById("Geburtstag-input");
const ueberMichInput = document.getElementById("ueber-mich");
const SpeicherButton = document.getElementById("enter-button");
const EmailInput =document.getElementById("email-input");
const EingabeInput = document.getElementById("Eingabe");
SpeicherButton.addEventListener("click", enterEvent);
const Vorname = VornameInput.value;
const Nachname = NachnameInput.value;
const Geburtstag = GeburtstagInput.value;
const ueberMich = ueberMichInput.value;
const Email = EmailInput.value;
function felderInKonsoleAusgeben () {
console.log("Vorname:", Vorname);
console.log("Nachname:", Nachname);
console.log("Geburtstag:", Geburtstag);
console.log("UeberMich:", ueberMich);
console.log("Email:", EmailInput);
}
function validierung(Vorname,Nachname,Geburtstag) {
if (VornameInput.value == "" || NachnameInput.value == "" || isNaN(Number(GeburtstagInput.valueAsNumber))){
alert ("Bitte fülle alle Felder aus! ");
return false;
}
else
alert ("Eingaben wurden gespeichert");
return true; }
function validierungEmail (EmailInput){
var validRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+#[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
if (input.value.match(validRegex)) {
alert("Gültige Email Adresse!");
return true;
} else {
alert("Ungültige Email Adresse!");
return false; }
function enterEvent(evt) {
evt.preventDefault();
felderInKonsoleAusgeben();
validierung(Vorname, Nachname, Geburtstag);
validierungEmail(EmailInput);
}
html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Das wird einmal ein Instagram Clone" />
<meta name="keywords" content="Instagram, Instagram 2.0, Clone" />
<meta name="author" content="Emily Schlachter" />
<link rel="stylesheet" href="css/style.css" />
<script src="scripts.js" defer></script>
<title>Instagram 2.0</title>
</head>
<body>
<header>
<div > <a href="instagram-clone_schlachter.html"> <h1>Gramml</h1> </a ></div>
</header>
<ul id="navibereich">
<li id="navi01"> <h2>Mein Profil </h2> </li>
<li id="navi02"> <h2>Entdecken</h2> </li>
<li id="navi01"> <h2>Upload Picture</h2> </li>
</ul>
<div class="label">
<label>Suche:</label>
<input type="text"/>
</div>
<main>
<!-- Eingabefeld -->
<div class="Eingabe" id="Eingabe">
<div class="field">
<input id="Vorname-input" type="text" name="vorname-input" placeholder="Vorname" />
</div>
<div class="field">
<input id="Nachname-input" type="text" name="Nachname-input " placeholder="Nachname" />
</div>
<div class="field">
<input id="email-input" type="text" name="email-input" placeholder="Email-Adresse" />
</div>
<div class="field">
<input id="Geburtstag-input" type="date" name="Geburtstag-input" placeholder="Geburtsdatum" />
</div>
<label>Über mich: <br> </label>
<textarea name="ueber-mich" id="ueber-mich" cols="40" rows="5" maxcols="35" placeholder="Über mich:" > </textarea>
</div>
<div class="Formelles">
<p> <input type="checkbox" name="AGB" value="News"> Datenschutzerklärung und AGB akzeptieren. </p>
</div>
<button id="enter-button" class=" button" type="submit">
Speichern
</button>
</main>
</body>
</html>
I just want to get a validation formand to save the Input in local Storage.
Thanks for your help!
You can add all needed information into an obejct like
const personInfo = {
"vorname": VornameInput.value,
"nachname": ...,
"geburtstag": ...,
"uebermich": ...,
"email": ...
}
Then you can store this object with a key in the local storage with
localStorage.setItem('personInfo',JSON.stringify(personInfo));
To get it back use
const pInfo = localStorage.getItem('personInfo');
Have a look here https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage to learn more about localstorage
I have created a login page that allows you to log in using username and password. However, it is currently so that you are always redirected to the "profile" page and there is then checked by PHP whether the login data are correct, because the data are on the DB.
Therefore I have the idea with a validate function directly on the loginpage to check if the data is correct and then I just create a session.
Does anyone have an idea how I can do this?
Here is the code:
<?php session_start();?>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Login</title>
<link href="bootstrap_style.css" rel="stylesheet" id="bootstrap-css"> <!-- maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <!-- //maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js or bootstrap.js-->
<script src="jquery.js"></script> <!-- //cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper fadeInDown">
<div id="formContent">
<!-- Tabs Titles -->
<!-- Icon -->
<div class="fadeIn first">
<img src="default_logo2.png" id="icon" alt="User Icon" onclick="window.open('url', '_blank');"/>
</div>
<!-- Login Form -->
<form action="searchpage.php" method="post" onsubmit="validateForm(event);">
<input type="text" id="login" class="fadeIn second" name="username" placeholder="username">
<input type="password" id="password" class="fadeIn third" name="password" placeholder="password">
<input type="submit" class="fadeIn fourth" value="Log In">
</form>
<!-- Remind Passowrd -->
<div id="formFooter">
<a class="underlineHover" style="color:red" id="warning"></a>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
function validateForm(event) {
var input_username = document.getElementById("login");
var input_password = document.getElementById("password");
if (input_username.value == '' || input_username.value.charAt(0) == ' ' || input_password.value == '') {
event.preventDefault();
document.getElementById("warning").innerHTML = "Fill empty fields!";
}
else {
return true;
}
}
</script>
with this I reach the DB:
$pdo = new PDO('mysql:host=localhost;dbname=ausleihe', 'root', '');
and that is the SELECT:
$login_session = "SELECT * FROM login WHERE username = '".$hereshouldbetheusernamefromform."' AND password = '".herethepasswordfromform."'";
If you need more code or have questions, ask me!
Thx
Client-side JavaScript cannot directly access a Host-side PHP program except through AJAX calls. Only the Host-side software has access to Host-side databases.
So, the JavaScript for my project stopped working after including the materialize JavaScript code needed to make my nav bar turn into a hamburger on mobile devices. I've tried placing my file at the bottom of the html, before the navbar script, and after it. Each time is the same, the hamburger and materialize js works but my js file that I'm using for password validation does not.. Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Register Page</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Our own style sheet -->
<link rel="stylesheet" href="style.css">
<!-- For icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.sidenav');
var instances = M.Sidenav.init(elems);
});
</script>
</head>
<body>
<nav>
<div class="nav-wrapper">
Logo
<i class="material-icons">menu</i>
<ul class="right hide-on-med-and-down">
<li>Home</li>
<li>About</li>
<li>Register</li>
<li>Contact</li>
</ul>
</div>
</nav>
<ul class="sidenav" id="mobile-demo">
<li>Home</li>
<li>About</li>
<li>Register</li>
<li>Contact</li>
</ul>
<div class="contact-box">
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">account_circle</i>
<input id="icon_prefix" type="text" class="validate">
<label for="icon_prefix">Full Name</label>
</div>
<div class="input-field col s12">
<i class="material-icons prefix">email</i>
<input id="icon_prefix" type="email" class="validate">
<label for="icon_prefix">Email</label>
</div>
<div class="input-field col s12">
<i class="material-icons prefix">password</i>
<input id="psw" type="password" name="psw" class="validate" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" required>
<label for="icon_prefix">Password</label>
</div>
<button class="btn waves-effect waves-light" type="submit" name="action">Submit
<i class="material-icons right">send</i>
</button>
</div>
</form>
</div>
</div>
ss3
<div id="message">
<h5>Password must contain the following:</h5>
<p id="letter" class="invalid">A <b>lowercase</b> letter</p>
<p id="capital" class="invalid">A <b>capital (uppercase)</b> letter</p>
<p id="number" class="invalid">A <b>number</b></p>
<p id="length" class="invalid">Minimum <b>8 characters</b></p>
</div>
<script type="text/javascript" src="validation.js"></script>
</body>
</html>
And here's the validation.js file:
// Script for validating password. This code was authored by w3schools at the url: https://www.w3schools.com/howto/howto_js_password_validation.asp
var myInput = document.getElementById("psw");
var letter = document.getElementById("letter");
var capital = document.getElementById("capital");
var number = document.getElementById("number");
var length = document.getElementById("length");
// When the user clicks on the password field, show the message box
myInput.onfocus = function() {
document.getElementById("message").style.display = "block";
}
// When the user clicks outside of the password field, hide the message box
myInput.onblur = function() {
document.getElementById("message").style.display = "none";
}
// When the user starts to type something inside the password field
myInput.onkeyup = function() {
// Validate lowercase letters
var lowerCaseLetters = /[a-z]/g;
if(myInput.value.match(lowerCaseLetters)) {
letter.classList.remove("invalid");
letter.classList.add("valid");
} else {
letter.classList.remove("valid");
letter.classList.add("invalid");
}
// Validate capital letters
var upperCaseLetters = /[A-Z]/g;
if(myInput.value.match(upperCaseLetters)) {
capital.classList.remove("invalid");
capital.classList.add("valid");
} else {
capital.classList.remove("valid");
capital.classList.add("invalid");
}
// Validate numbers
var numbers = /[0-9]/g;
if(myInput.value.match(numbers)) {
number.classList.remove("invalid");
number.classList.add("valid");
} else {
number.classList.remove("valid");
number.classList.add("invalid");
}
// Validate length
if(myInput.value.length >= 8) {
length.classList.remove("invalid");
length.classList.add("valid");
} else {
length.classList.remove("valid");
length.classList.add("invalid");
}
}
Am I placing my JavaScript file in the wrong area? I've tried placing it in the body with the same results too. Any help with this would be greatly appreciated :)
Please put your JS file at the end in the <body> tag. like this,
<body>
...
...
<div id="message">
<h5>Password must contain the following:</h5>
<p id="letter" class="invalid">A <b>lowercase</b> letter</p>
<p id="capital" class="invalid">A <b>capital (uppercase)</b> letter</p>
<p id="number" class="invalid">A <b>number</b></p>
<p id="length" class="invalid">Minimum <b>8 characters</b></p>
</div>
...
...
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.sidenav');
var instances = M.Sidenav.init(elems);
});
</script>
<!-- my own JavaScript file -->
<script type="text/javascript" src="validation.js"></script>
</body>
And also please use a listener in your file to know that the entire document is first loaded so that your code will get the DOM which it is looking for.
window.addEventListener('load', (event) => {
// Script for validating password. This code was authored by w3schools at the url: https://www.w3schools.com/howto/howto_js_password_validation.asp
var myInput = document.getElementById("psw");
var letter = document.getElementById("letter");
var capital = document.getElementById("capital");
...
...
});
You can also use DOMContentLoaded if you are not concerned about the stylesheet loading.
I'm trying to add an error checker whenever I place an invalid email and/or password. What I want to happen if I provide an invalid email or password the page should provide a window alert about the error.
My .js code
(function(){//initialize the firebase app
var config = {
assume there are credentials here
};
firebase.initializeApp(config);
var auth = null;
var loginBtn= document.getElementById('btnLogin');
firebase.auth.Auth.Persistence.SESSION;
//Login
loginBtn.addEventListener('click', e => {
e.preventDefault();
if( $('#email').val() != '' && $('#password').val() != '' ){
//login the user
var data = {
email: $('#email').val(),
password: $('#password').val()
};
firebase.auth().signInWithEmailAndPassword(data.email, data.password)
.then(function(authData) {
auth = authData;
})
.catch(function(error) {
console.log("Login Failed!", error);
window.alert("Login Failed!", error);
});
}
});
})();
My issue is that the window alert does not execute. I already tried an else statement it won't work as well.
html code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login | DIABEATIS by Team Buendia</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="images/icons/diabeatis.jpg" />
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/util.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<script src="https://www.gstatic.com/firebasejs/7.6.1/firebase-app.js" ></script>
<script src="https://www.gstatic.com/firebasejs/7.6.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.6.1/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.6.1/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.6.1/firebase-storage.js"></script>
</head>
<body>
<div class="limiter">
<div class="container-login100">
<div class="wrap-login100 p-t-30 p-b-20">
<form id="loginForm" method="POST">
<img src="images/icons/diabeatis.jpg" width="70%" style="margin: 0px auto 20px;display: block;" alt="AVATAR">
<span class="login100-form-title p-b-40">
<font face="Montserrat">By Team Buendia</font>
</span>
<div class="wrap-input100 validate-input m-t-25 m-b-35" data-validate="Enter username">
<font face="Montserrat">Email</font>
<input class="input100" type="text" name="loginEmail" style="font-family:Montserrat;" id="email">
<span class="focus-input100"></span>
</div>
<div class="wrap-input100 validate-input m-b-50" data-validate="Enter password" >
<font face="Montserrat">Password</font>
<input class="input100" type="password" name="loginPassword" id="password">
<span class="focus-input100"></span>
</div>
<button type="submit" class="login100-form-btn" style="background-color:blue; font-family:Montserrat; cursor:pointer; font-weight:bold" id="btnLogin">Login</button>
<ul class="login-more p-t-40">
<font face="Montserrat">Don't have an account?</font>
<li class="m-b-8">
<a href="signup.html" class="txt2" style="color:#01703D">
<font face="Montserrat">Create Account</font>
</a>
</li>
<font face="Montserrat">Are you a doctor? Login here</font>
<li class="m-b-8">
<a href="" class="txt2" style="color:#01703D">
<font face="Montserrat">DIABEATIS for Doctors</font>
</a>
</li>
<font face="Montserrat">By Logging in you agree to our Terms & Conditions, as well as, our privacy and policy</font>
<br>
<li class="m-b-8">
<a href="toc.html" class="txt2" style="color:#01703D">
<font face="Montserrat">Terms & Conditions</font>
</a>
</li>
<li class="m-b-8">
<a href="privacypolicy.html" class="txt2" style="color:#01703D">
<font face="Montserrat">Privacy and Policy</font>
</a>
</li>
</ul>
</form>
</div>
</div>
</div>
<script src="signin.js"></script>
<script>
firebase.auth().onAuthStateChanged(function(user){
if(user){
window.location.href = "patientDashboard.html";
console.log(user);
}
else{
console.log('no user present');
}
});
</script>
</body>
</html>
It is probably because you assign the submit type to your button and the POST method to your form. Therefore your form is probably submitted before the signInWithEmailAndPassword() Firebase method is triggered and/or the Promise it returns is resolved.
Changing the type to button, as follows, should do the trick:
<button type="button" class="login100-form-btn" style="background-color:blue; font-family:Montserrat; cursor:pointer; font-weight:bold" id="btnLogin">Login</button>
See the W3 specification for more detail.
Good day! I am using iframe and instead of an src to another page for its contents, I used the iframe's id to call a Javascript action but nothing shows. Here is my code:
#(title: Html, nav: String = "")(content: Html)
<!DOCTYPE html>
<html>
<head>
<title>Impact Analysis Knowledge Management Tool</title>
<style>
.menu {
width:25%;
height:100%;
}
.mainContent {
width:75%;
height:100%;
}
</style>
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/bootstrap.css")">
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/main.css")">
<link rel="shortcut icon" type="image/png" href="#routes.Assets.at("images/favicon.png")">
<link href='#routes.Assets.at("stylesheets/css/ui-lightness/jquery-ui-1.10.4.css")' rel="stylesheet">
<script src='#routes.Assets.at("javascripts/jquery-ui-1.10.4.js")'></script>
<script type="text/javascript">
var doc = document.getElementById('frame').contentWindow.document;
doc.open();
doc.write('<div class="container"> <div class="content"> <div class="row"> <div class="span14"> #content </div> </div> </div> </div>');
doc.close();
</script>
</head>
<body>
<div class="topbar">
<div class="fill">
<div class="container">
<a class="brand" href="#routes.Application.index()">Home</a>
<ul class="nav">
<li class="#("active".when(nav == "add tag"))">
Add Tag
</li>
<li class="#("active".when(nav == "view edit"))">
View/Edit Tag
</li>
<li class="#("active".when(nav == "log"))">
Log Information
</li>
<li class="#("active".when(nav == "map"))">
Web Map
</li>
</ul>
<p align="right"> Log-out </p>
</div>
</div>
</div>
<iframe class="menu" src="#routes.Tags.map(false)" ></iframe>
<iframe id="frame" class="mainContent" src="about:blank" ></iframe>
</body>
</html>
The left iframe has no problem but the other side (where there is no src) is empty. I checked the console and it says Uncaught TypeError: Cannot read property 'contentWindow' of null. Please help me figure this out. Thanks a lot.
EDIT
This is the page-source.
<link rel="stylesheet" href="/assets/stylesheets/jquery-ui.css">
<script src="/assets/javascripts/jquery-1.10.2.js"></script>
<script src="/assets/javascripts/jquery-ui-1.10.4.js"></script>
<script src='/assets/javascripts/jquery-1.7.1.min.js' type="text/javascript"></script>
<script>
$(function() {
var availableTags = ["rule 14","rule 15","rule 13","domestic route","block time","working crew","daily schedule","rule 1"];
var scntDiv = $('#addMore');
var i = $('#addMore p').size();
$('#addRT').live('click', function() {
$('<p>'+
'<input id="tags'+i+'" type="text" name="relatedTags.tag.name" placeholder="Name" required /> '+
'<textarea name="relatedTags.relatedNotes" placeholder="Notes"></textarea> '+
'<select name="relatedTags.relationship"> <option value="parent"> parent </option>'+
'<option value="child"> child </option>'+
'<option value="peer"> peer </option>'+
'</select> '+
'Remove</p>').appendTo(scntDiv);
$( "#tags"+i ).autocomplete({
source: availableTags
});
i++;
return false;
});
$('#remRT').live('click', function() {
if( i > 0 ) {
$(this).parents('p').remove();
i--;
}
return false;
});
});
function checkDuplicates() {
if ( $.trim( $('#name').val() ) == '' ) {
alert('Invalid name.');
return false;
}
else {
var availableTags = ["rule 14","rule 15","rule 13","domestic route","block time","working crew","daily schedule","rule 1"];
var input = document.getElementById('name').value;
input = input.replace(/\s+/g,' ').trim().toLowerCase();
var found = $.inArray(input, availableTags);
if(found != -1) {
alert("Tag already exists.");
return false;
} else { //does not contain the value
var k = $('#addMore p').size();
for (var i=0; i<k; i++) {
for (var j=0; j<k; j++) {
if (i!=j){
if (document.getElementById('tags'+i).value==document.getElementById('tags'+j).value &&
document.getElementById('tags'+i).value!="" && document.getElementById('tags'+j).value!="") {
alert("Duplicate entries found.");
document.getElementById('tags'+i).select();
return false;
}
}
}
}
return true;
}
}
}
</script>
<!DOCTYPE html>
<html>
<head>
<title>Impact Analysis Knowledge Management Tool</title>
<style>
.menu {
float:left;
width:20%;
height:100%;
}
.mainContent {
float:left;
width:79%;
height:100%;
}
</style>
<link rel="stylesheet" media="screen" href="/assets/stylesheets/bootstrap.css">
<link rel="stylesheet" media="screen" href="/assets/stylesheets/main.css">
<link rel="shortcut icon" type="image/png" href="/assets/images/favicon.png">
<link href='/assets/stylesheets/css/ui-lightness/jquery-ui-1.10.4.css' rel="stylesheet">
<script src='/assets/javascripts/jquery-ui-1.10.4.js'></script>
</head>
<body>
<div class="topbar">
<div class="fill">
<div class="container">
<a class="brand" href="/index">Home</a>
<ul class="nav">
<li class="active">
Add Tag
</li>
<li class="">
View/Edit Tag
</li>
<li class="">
Log Information
</li>
<li class="">
Web Map
</li>
</ul>
<p align="right"> Log-out </p>
</div>
</div>
</div>
<iframe class="menu" src="/map?editable=false" ></iframe>
<iframe id="frame" class="mainContent" src="about:blank"></iframe>
<script type="text/javascript">
$(function(){
var doc = document.getElementById('frame').contentWindow.document;
doc.open();
doc.write("<div class='container'> <div class='content'> <div class='row'> <div class='span14'>
<p align="right"> Logged in as: <b>user1</b> </p>
<h1> Add Tag </h1>
<form action="/addTag" method="POST" id="form" onsubmit="return checkDuplicates(this);">
<fieldset>
<legend>Add Tag</legend>
<div class="clearfix " id="name_field">
<label for="name">Name</label>
<div class="input">
<input type="text" id="name" name="name" value="" >
<span class="help-inline"></span>
<span class="help-block">Maximum length: 100, Required</span>
</div>
</div>
<div class="clearfix " id="notes_field">
<label for="notes">Impact Analysis Notes</label>
<div class="input">
<textarea id="notes" name="notes" ></textarea>
<span class="help-inline"></span>
<span class="help-block">Maximum length: 200</span>
</div>
</div>
</fieldset>
<fieldset>
<legend>Related Tags</legend>
<div id="profiles">
<div id="addMore" class="twipsies well profile">
</div>
<div class="manage">
<a class="addProfile btn success" id="addRT">Add related tag</a>
</div>
</div>
</fieldset>
<div class="actions">
<input type="submit" class="btn primary" value="Add Tag">
Cancel
</div>
</form>
<script type="text/javascript" charset="utf-8">
$('.addProfile').live('click', function(e) {
var template = $('.profile_template')
template.before('<div class="twipsies well profile">' + template.html() + '</div>')
renumber()
})
$('#form').submit(function() {
$('.phone_template').remove()
$('.profile_template').remove()
})
var renumber = function(phones) {
$('.profile').each(function(i) {
$('input', this).each(function() {
$(this).attr('name', $(this).attr('name').replace(/relatedTags\[.+?\]/g, 'relatedTags[' + i + ']'))
})
})
}
</script>
</div> </div> </div> </div>');
doc.close();
});
</script>
</body>
</html>
What happens is a syntax error because the #content is also an HTML. The quotation marks are messed up. Please help me. Thank you so much.
Well, you use jQuery is a tag... so I'll use a jQuery :)
What about:
$('#frame').contents().find('body').append('<div>your content</div>');
Or:
$('#frame').contents().find('body').html('<div>your content</div>');
Difference between the both examples?
.append(): http://api.jquery.com/append/
.html() : http://api.jquery.com/html/
run your javascript when the page is loaded.
$(function(){
var doc = document.getElementById('frame').contentWindow.document;
doc.open();
doc.write('<div class="container"> <div class="content"> <div class="row"> <div class="span14"> #content </div> </div> </div> </div>');
doc.close();
});