Hello I have this code using javascript & html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Signup Form</title>
<!-- css -->
<link rel="stylesheet" href="style.css">
<style>
.box {
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
</style>
<!-- js -->
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div class="hero is-fullheight is-info is-bold">
<div class="hero-body">
<div class="container">
<h1 class="title has-text-centered">Test</h1>
<div class="box">
<!-- our signup form ===================== -->
<form id="signup-form" #submit.prevent="processForm">
<!-- name -->
<div class="field">
<label class="label">Username</label>
<input
type="text"
class="input"
name="name"
v-model="name">
</div>
<!-- email -->
<div class="field">
<label class="label">Password</label>
<input
type="password"
class="input"
name="email"
v-model="email"
#blur="validateEmail">
<p class="help is-danger" v-if="errors.email">
Please enter a valid email.
</p>
</div>
<!-- submit button -->
<div class="field has-text-right">
<button type="submit" class="button is-danger">
Log In
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
var app = new Vue({
el: '#signup-form',
data: {
name: '',
email: '',
errors: {
name: false,
email: false
}
},
methods: {
processForm: function() {
console.log({ name: this.name, email: this.email });
onclick="test.html";
},
validateEmail: function() {
const isValid = window.isValidEmail(this.email);
this.errors.email = !isValid;
}
}
});
function isValidEmail(email) {
var re = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
</script>
</body>
</html>
And I would want that when I click on the button I can go to the page by the name of test.html I tried to use href = "test.html but it does not work. I think I have to write it in Javascrit but even using action = "test.html" it does not work...
Could you help me please ?
Thank you very much!
It seems like what you're trying to do is redirect to a new page. Try:
window.location = "test.html";
instead of:
onclick="test.html";
to my knowledge, all onclick="test.html" does is create a variable "onclick" with the string value "test.html". Setting window.location with the URL you would like to redirect to will navigate the user to that URL. More on window.location here: https://developer.mozilla.org/en-US/docs/Web/API/Window/location
Related
I am using ajax to upload a file to the server and generate a url for a specific purpose. But whenever the file upload is successful, the page reloads automatically. Even the console shows "File uploaded" for a second and then reloads. Can someone help me sort this problem.
Here is the html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="shortcut ico n" href="favicon.ico" type="image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>InShare - File Sharing Made Easy</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<img src="./logo.png" alt="Inshare logo" class="logo">
<section class="upload-container">
<form action="">
<div class="drop-zone">
<div class="icon-container">
<img src="file.svg" draggable="false" class="center" alt="File Icon">
<img src="file.svg" draggable="false" class="left" alt="File Icon">
<img src="file.svg" draggable="false" class="right" alt="File Icon">
</div>
<input type="file" id="fileInput">
<div class="title">Drop your Files here or, <span id="browseBtn">browse</span></div>
</div>
</form>
<div class="progress-container">
<div class="bg-progress"></div>
<div class="inner-container">
<div class="status">Uploading...</div>
<div class="percent-container">
<span class="percentage" id="progressPercent">0</span>%
</div>
<div class="progress-bar"></div>
</div>
</div>
<div class="sharing-container">
<p class="expire">Link expires in 24 hrs</p>
<div class="input-container">
<input type="text" id="fileURL" readonly>
<img src="./copy-icon.svg" id="copyURLBtn" alt="copy to clipboard icon">
</div>
<p class="email-info">Or Send via Email</p>
<div class="email-container">
<form id="emailForm">
<div class="filed">
<label for="fromEmail">Your email</label>
<input type="email" autocomplete="email" required name="from-email" id="fromEmail">
</div>
<div class="filed">
<label for="toEmail">Receiver's email</label>
<input type="email" required autocomplete="receiver" name="to-email" id="toEmail">
</div>
<div class="send-btn-container">
<button type="submit">Send</button>
</div>
</form>
</div>
</div>
</section>
<div class="image-vector"></div>
<div class="toast">Sample message</div>
<script src="index.js"></script>
</body>
</html>
Here is the ajax section of javascript code:
const uploadFile = () => {
console.log("file added uploading");
files = fileInput.files;
const formData = new FormData();
formData.append("myfile", files[0]);
//show the uploader
progressContainer.style.display = "block";
// upload file
const xhr = new XMLHttpRequest();
xhr.open("POST", uploadURL);
xhr.send(formData);
// listen for response which will give the link
xhr.onreadystatechange = function () {
if (xhr.readyState == XMLHttpRequest.DONE) {
onFileUploadSuccess(xhr.responseText);
}
};
};
const onFileUploadSuccess = (res) => {
fileInput.value = ""; // reset the input
console.log("Uploaded");
// remove the disabled attribute from form btn & make text send
emailForm[2].removeAttribute("disabled");
emailForm[2].innerText = "Send";
progressContainer.style.display = "none"; // hide the box
const { file: url } = JSON.parse(res);
console.log(url);
sharingContainer.style.display = "block";
fileURL.value = url;
};
Even e.preventDefault() has been used to prevent page reload. But still it does. Can someone help me solve this. Thank you in advance..
A few days ago, I started studying DOM and I tried to clone the code the Instagram for practicing. At this moment, I got this error message "Uncaught TypeError: Cannot read properties of null (reading 'vlaue')" This is my DOM(JS file)
const id = document.getElementById('text')
const password = document.getElementById('password')
document.addEventListener('keyup', function(e) {
if(!id.value && !password.value){
let color = document.querySelector('login-btn');
color.style.backgroundColor = "#FF0000";
}
});
and this is my index.html code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
Westagram!
</title>
<link rel="stylesheet" href="style/login.css" type="text/css">
<link rel="stylesheet" href="style/common.css" type="text/css">
<!-- <link rel="stylesheet" href="js/login.js"> -->
</head>
<body>
<!-- 아래 모든 div들을 포함하는 제일 상위 Container -->
<div class="wrapper">
<div class="logo">
<p class="westagram">Westagram</p>
</div>
<!-- 로그인 섹션 -->
<div class="login-container">
<div class="id">
<input type="text" id="text" placeholder="Phone number, username, or email" />
</div>
<div class="pw">
<input type="password" id="password" placeholder="Password">
</div>
<div class="bt">
<button class="login-btn">Log in
</button>
</div>
</div>
<!-- 비밀번호 찾는 섹션 -->
<div class="click">
<a class="find-password">Forgot Password</a>
</div>
</div>
<script src="js/login.js"></script>
</html>
I tried const id = blabla.value
password = blabla.value
Also, I tried using "querySelctor" all of them but still have same issue. Could you help me out this error? I really appreciate it! I struggling with this whole day...
Thank you for helping me out in advance.
I've added an else block, hope you won't mind, it's meant to make the difference. If you are using querySelector you must add the . class symbol, before login-btn like that .login-btn Additionally - you do not close the body tag.
If you set JavaScript in the head tag, you need to use the script tag for that, not link tag. For example, like <script src = "script.js" defer> </script>
Now It's should works fine, Best regards !
const id = document.getElementById("text");
const password = document.getElementById("password");
document.addEventListener("keydown", function (e) {
if (!id.value && !password.value) {
let color = document.querySelector(".login-btn");
color.style.backgroundColor = "#FF0000";
} else {
let color = document.querySelector(".login-btn");
color.style.backgroundColor = "#008000";
}
});
<body>
<div class="wrapper">
<div class="logo">
<p class="westagram">Westagram</p>
</div>
<div class="login-container">
<div class="id">
<input
type="text"
id="text"
placeholder="Phone number, username, or email"
/>
</div>
<div class="pw">
<input type="password" id="password" placeholder="Password" />
</div>
<div class="bt">
<button class="login-btn">Log in</button>
</div>
</div>
<div class="click">
<a class="find-password">Forgot Password</a>
</div>
</div>
<script src="js/login.js"></script>
</body>
you should use identifiers when querySelector is in your code so:
let color = document.querySelector('.login-btn');
I am learning vue and one of the things I would like to do is to clone elements. I was playing with this code:
var multiple = new Vue({
el: '#vue',
data: {
},
methods: {
cloneWidget(e) {
let widgets = document.getElementById('widgets');
let widget = document.getElementById('widget');
clone = widget.cloneNode(true);
clone.id = Math.round(Math.random()*100);
widgets.appendChild(clone);
},
deleteClone(e) {
e.target.parentNode.remove();
}
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="styles.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
</head>
<body>
<h1>Cloning</h1>
<div id="vue">
<form #submit.prevent>
<div id="widgets">
<div id="widget">
<div>
<label for="field1">Field 1:</label>
<input type="text" name="field1">
</div>
<div>
<label for="field2">Field 2:</label>
<input type="text" name="field2">
</div>
<i class="material-icons delete" #click="deleteClone">delete</i>
</div>
</div>
<button #click="cloneWidget">Add Widget</button>
</form>
</div>
<script src="app.js"></script>
</body>
</html>
However, the deleteClone method never gets called outside the original div="widget".
I can't seem to figure out why the event listener is not getting attached to the clones. Will cloneNode() mess up Vue?
With Vue, generally you want to think in terms of data. Here is your example revised, such that a widget is rendered for each object in the widgets array.
In this case, the contents of the array don't make much sense; you would probably want to the properties of each object in the array to match your input fields, but this is just an example to get you going.
var multiple = new Vue({
el: '#vue',
data: {
widgets:[{}]
},
methods: {
addWidget() {
this.widgets.push({})
},
removeWidget(widget) {
this.widgets.splice(this.widgets.findIndex(w => w === widget), 1)
}
}
});
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css" rel="stylesheet"/>
<h1>Cloning</h1>
<div id="vue">
<form #submit.prevent>
<div id="widgets">
<div v-for="widget in widgets">
<div>
<label for="field1">Field 1:</label>
<input type="text" name="field1">
</div>
<div>
<label for="field2">Field 2:</label>
<input type="text" name="field2">
</div>
<i class="material-icons delete" #click="removeWidget(widget)">delete</i>
</div>
</div>
<button #click="addWidget">Add Widget</button>
</form>
</div>
For the most part, you want to stay away from manipulating the DOM directly and let Vue do the work for you.
I have two inputs on my form whose value I would like to change when the document has loaded.
This is my code:
<?php
$base = dirname(dirname(__FILE__));
include($base."/include/db.php");
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>eMail Stationery | Installation for iPhone/iPad</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../font-awesome/css/font-awesome.css" rel="stylesheet">
<link href="../css/plugins/steps/jquery.steps.2.css" rel="stylesheet">
<link href="../css/animate.css" rel="stylesheet">
<link href="../css/style.css" rel="stylesheet">
</head>
<body class="gray-bg">
<div class="">
<center>
<img src="../img/esignia.png">
<h3>iPhone/iPad Installation</h3>
<p>Follow the steps provided to install your signature</p>
</center>
</div>
<div id="wizard">
<h3>Enter your details</h3>
<section>
<center>
<div class="row"></div>
<p><h2>Enter your details</h2></p>
<p>Enter your email address and unique pin number into the fields below to receive an email with a link to your signature.</p>
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4">
<form id="submitForm" method="post">
<center>
<div class="form-group">
<input id="email" name="email" type="email" placeholder="Email address" class="form-control" required>
</div>
<div class="form-group">
<input id="pin" name="pin" type="number" placeholder="Unique PIN" class="form-control" required>
</div>
<button class="btn btn-success">Submit</button>
<p>
</p>
</center>
</form>
</div>
</div>
</center>
</section>
<h3>Copying your signature</h3>
<section>
<center>
<p><h2>Copying your signature</h2></p>
<p>Once you have followed the link we provided in the email, you will see your signature displayed fully on your device's web browser.</p>
<p>Simply highlight all of your signature and copy it to your device's clipboard as demonstrated below.</p>
<p><img src="../img/install/iphone_2.png" width="320px" height="480px"></p>
</center>
</section>
<h3>Locating your signature settings</h3>
<section>
<center>
<p><h2>Locating your signature settings</h2></p>
<p>Great! We've copied your signature and it is now ready to be installed!</p>
<p>We just need to find your mail's signature settings.</p>
<p>These are located at <b>Settings -> Mail, Contacts, Calendars -> Signature</b>
<p><img src="../img/install/iphone_3.png" width="320px" height="480px">
<img src="../img/install/iphone_4.png" width="320px" height="480px"></p>
</center>
</section>
<h3>Installing your signature</h3>
<section>
<center>
<p><h2>Installing your signature</h2></p>
<p>Now that we have your signature settings open, you'll find an empty box ready for your signature to be pasted.</p>
<p>So all you need to do now is paste what we copied earlier into the box.</p>
<p><img src="../img/install/iphone_5.png" width="320px" height="480px"></p>
<p>One final thing you'll need to do is give your phone a quick shake to undo any of the modifications that your device will attempt to make to your signature's HTML code.</p>
<p>This is necessary for your signature to appear <i>exactly</i> how it appeared when you opened it.</p>
<p><img src="../img/install/iphone.gif"></p>
<p class="text-navy"><b>Congratulations, you've now successfully installed your signature to your device!</b></p>
</center>
</section>
</div>
</div>
</div>
<!-- Mainly scripts -->
<script src="../js/jquery-2.1.1.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/plugins/steps/jquery.steps.js"></script>
<script>
$(document).ready(function() {
var email = getUrlParameter("email");
var pin = getUrlParameter("pin");
if(email != undefined && pin != undefined) {
$("#email").val(email);
$("#pin").val(pin);
}
$("#wizard").steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "slideLeft",
autoFocus: true
});
$("#submitForm").submit(function() {
var email = $("input[name='email']").val();
var pin = $("input[name='pin']").val();
$.get("../api/installed.php", {
email: email,
pin: pin
});
});
$("a[href='#finish'").click(function() {
window.location.href = "index.php";
});
});
var getUrlParameter = function getUrlParameter(sParam) {
var sPageURL = decodeURIComponent(window.location.search.substring(1)),
sURLVariables = sPageURL.split('&'),
sParameterName,
i;
for (i = 0; i < sURLVariables.length; i++) {
sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] === sParam) {
return sParameterName[1] === undefined ? true : sParameterName[1];
}
}
};
</script>
</body>
</html>
This does not work.
However, I replicate the same code in chrome's console and it works perfectly. My only assumption is that these controls are being messed with and/or recreated with Bootstrap/jQuery after the document has been loaded.
But I can't figure out where or why, or what I should do.
This might because of DOM not ready, try using below code
$(window).load(function() {
var email = getUrlParameter("email");
var pin = getUrlParameter("pin");
if(email != undefined && pin != undefined) {
$("#email").val(email);
$("#pin").val(pin);
}
}
If still not work try to change your Ids of element to check weather its conflict with other element or not
Im making a simple form with Telerik Appbuilder HTML5 + javascript that takes a users input and logs it to the console when they click the submit button.
ClientClass.js:
function Client() {
this.username = "username",
this.password = "Password",
this.printUsername = function() {
this.username=$("#Username").val()
console.log(this.username);
};
};
Home.html:
<div data-role="view" data-title="Login" data-layout="main" data-model="APP.models.login">
<script src="../scripts/ClientClass.js"></script>
<h1 data-bind="html: title"></h1>
<script src="../scripts/ClientClass.js"></script>
<script>
function printUsername() {
var client = new client();
client.printUsername();
}
</script>
<ul data-role="listview" data-style="inset">
<li>
<label>Username
<input type="text" value="" id="Username" />
</label>
</li>
<li>
<label>Password
<input type="password" value="" />
</label>
</li>
<li>
<label>
<button onclick="printUsername()" type="button">Submit</button>
</label>
</li>
</ul>
</div>
Index.html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/ClientClass.js"></script>
</head>
<body>
<script src="scripts/ClientClass.js"></script>
<script src="scripts/ClientClass.js"></script>
<div data-role="layout" data-id="main">
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</div>
<!-- application views will be rendered here -->
<label>
<input type="password" value="password" />
</label>
<div data-role="footer">
<div data-role="tabstrip">
Home
Settings
Contacts
</div>
</div>
</div>
</body>
</html>
It says in the console:
uncaught type error: undefined is not a function.
Then it says it is at index.html#views/home.html:1 and when I click that and it takes me to sources panel of the debugger. And it says the source is index.html and it says:
(function() {with (this[2]) {with (this[1]) {with (this[0]) {return function(event) {printUsername() }; }}}})
Does anyone see any issues with my html or javascript? Or the way I import the script? Thanks
you are declaring your client as an object, not as a "class". So using new on your object doesn't make quite sense.
So it's up to you or you keep your object and simply remove:
var client = new client();
or you use a class
function Client(){}