**index.html**
<!DOCTYPE html>
<html lang="en">
<head>
<script src="script.js"></script>
</head>
<body>
<table>
<tr>
<td>Student Name</td>
<td><input type="text" id="sname" required /></td>
</tr>
<tr>
<td>Course</td>
<td>
<select id="course" required>
<option value="Python">Python</option>
<option value="Java">Java</option>
<option value="Oracle">Oracle</option>
</select>
</td>
</tr>
</table>
<input type="button" value="Register" id="submit" onclick="display()" />
<div id="greet"></div>
</body>
</html>
script.js
function display(){
var name = document.getElementById("sname")
var subject = document.getElementById("course")
var greet = document.getElementById("greet")
if(!name.value){
greet.innerHTML = "Name cannot be empty"
} else {
greet.innerHTML = `Hi, ${name.value}. You have successfully registered for the ${subject.value} course.`
}
return false
}
I want to pass the test cases of online platform judge
but It is throwing the error Error Message : illegal character
But according to me the code is correct. Please help to understand way I am getting this error.
Related
when i make two seprate html than addrow are through an error and get all value null but if i do eveything in one html than everything work fine.. please help me out
can i use onr js file in two html??
if i can use than why its through an error
my index.html code are
<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
</head>
<body>
<p>Fname</p>
<br>
<input type="text" id="name">
<p>Lname</p>
<br>
<input type="text" id="Lname">
<p>Age:</p>
<br>
<input type="text" id="age">
<p>Email:</p>
<br>
<input type="text" id="email">
<br>
<br>
<button onclick="add()">submit</button>
<script type="text/javascript" src="add.js"></script>
</body>
</html>
secoand html file are detail.html
<!DOCTYPE html>
<html>
<head>
<title>Info List</title>
<style type="text/css">
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table style="width: 100%;" >
<tr>
<th>Fname</th>
<th>Lname</th>
<th>Age</th>
<th>Email</th>
</tr>
<tr>
<td id="one"></td>
<td id="two"></td>
<td id="three"></td>
<td id="four"></td>
</tr>
</table>
<script type="text/javascript" src="add.js"></script>
</body>
</html>
my js file add.js are
function add(){
fname = document.getElementById('name').value
Lname = document.getElementById('Lname').value
age = document.getElementById('age').value
email = document.getElementById('email').value
console.log("helloooo")
redirect()
addRow(fname,Lname,age,email)
}
function redirect(){
window.location.assign("detail.html")
}
function addRow(f,l,a,e){
let fname = document.getElementById('one')
let lname = document.getElementById('two')
let age = document.getElementById('three')
let email = document.getElementById('four')
fname.innerHTML = f;
lname.innerHTML = l;
age.innerHTML = a;
email.innerHTML = e;
}
You could just put all the code in the same html file:
<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
</head>
<body>
<p>Fname</p>
<br>
<input type="text" id="name">
<p>Lname</p>
<br>
<input type="text" id="Lname">
<p>Age:</p>
<br>
<input type="text" id="age">
<p>Email:</p>
<br>
<input type="text" id="email">
<br>
<br>
<button onclick="add()">submit</button>
<table style="width: 100%;" >
<tr>
<th>Fname</th>
<th>Lname</th>
<th>Age</th>
<th>Email</th>
</tr>
<tr>
<td id="one"></td>
<td id="two"></td>
<td id="three"></td>
<td id="four"></td>
</tr>
</table>
<script type="text/javascript" src="add.js"></script>
</body>
</html>
But really, I think your best bet would be to look into some modern framework like react.js or Angular - what you can do with only html+vanilla js is a bit limiting.
I have started learning AngularJS and facing issue while injecting a service which is in another file. I have tried many ways but nothing is working out.
This is my index.html:
` <!DOCTYPE html>
<html ng-app="employeedirectory" ng-controller="homeController as vm">
<head>
<title>Employee Directory</title>
<link type="text/css" rel="stylesheet" href="./../bootstrap.min.css" />
</head>
<body>
<div class="container" >
<br/>
<h1 align="center">Employee Directory</h1><br/><br/>
<table class="table">
<thead>
<tr>
<td>Name</td>
<td>Email</td>
<td>Date of Birth</td>
<td>Department</td>
<td>Gender</td>
<td>Age</td>
</tr>
</thead>
<tbody>
<tr>
<form>
<td>
<input class="form-control" ng-model="employee.name" required placeholder="Name" />
</td>
<td>
<input type="email" ng-model="employee.email" required class="form-control" placeholder="abc#xyz.com" />
</td>
<td>
<input type="text" ng-model="employee.dob" id="datepicker" class="form-control" required placeholder="YYYY-MM-DD" />
</td>
<td>
<input ng-model="employee.department" required class="form-control" placeholder="Department" />
</td>
<td>
<input ng-model="employee.gender" required class="form-control" placeholder="Gender" />
</td>
<td>
<input type="number" ng-model="employee.age" disabled class="form-control" placeholder="Age" />
</td>
<td>
<button class="btn btn-primary btn-md" ng-click="vm.addEmployee()">Add Employee</button>
<td><button class="btn btn-info btn-md" ng-click="updateEmployee()">Update Employee</button></td>
</td>
</form>
</tr>
</tbody>
</table>
</div>
<script src="./../angular.min.js"></script>
<script src="./home.controller.js"></script>
</body>
</html>`
This is my controller:
(function () {
'use strict';
angular.module('employeedirectory', [])
.controller('homeController', ['homeService',homeController]);
function homeController() {
var vm = this;
vm.addEmployee = function () {
console.log("in add employee");
// homeService.addEmployee();
}
}
})();
this is my service
(function () {
'use strict';
angular
.module('employeedirectory')
.service('homeService', homeService);
function homeService() {
// var service = {};
// service.addEmployee = function (details) {
// console.log("in home service");
// };
// return service;
}
})();
I am getting this error:
angular.min.js:123 Error: [$injector:unpr] http://errors.angularjs.org/1.6.4/$injector/unpr?p0=homeServiceProvider%20%3C-%20homeService%20%3C-%20homeController
at angular.min.js:6
at angular.min.js:45
at Object.d [as get] (angular.min.js:43)
at angular.min.js:45
at d (angular.min.js:43)
at e (angular.min.js:43)
at Object.invoke (angular.min.js:43)
at S.instance (angular.min.js:94)
at n (angular.min.js:69)
at g (angular.min.js:61)
you have to reference your service in the index.html
<html>
<head>
<title>Employee Directory</title>
<link type="text/css" rel="stylesheet" href="./../bootstrap.min.css" />
</head>
<body>
// .....
<script src="./../angular.min.js"></script>
<script src="./home.controller.js"></script>
<script src="./homeService.js"></script>
</body>
This way the controller will know what you are trying to inject.
I'm trying to validate a form with an array and a loop. I created empty span elements in each required field. Then, in JavaScript I set up this:
var name = document.querySelector('#Name').value,
firstLastName = document.querySelector('#firstLastName').value,
secondLastName = document.querySelector('#secondLastName').value,
username = document.querySelector('#username').value,
dateBirth = document.querySelector('#dateBirth').value,
email = document.querySelector('#email').value,
gender = document.querySelector('#gender').value,
password = document.querySelector('#password ').value,
passwordConfirmation = document.querySelector('#passwordConfirmation').value,
span = document.getElementsByTagName("span"),
personalData = [name, firstLastName, secondLastName, username, dateBirth, email, gender, password, passwordConfirmation],
arrayLength = personalData.length;
for (var i = 0; i < arrayLength; i++) {
if (personalData[i]== '') {
var message = '*Required'
span[i].innerHTML = message; /* THIS PART IS NOT WORKING */
}else {
var message = ''
span[i].innerHTML = message; /* THIS PART IS NOT WORKING */
}
}
Any idea what the problem is? I'm new on this.
Here's the HTML 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">
<title>Regsitrar</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body class="container-fluid">
<header class="row">
<img class="col-md-2" src="./img/cenfotec-logo.png" alt="Music Logo" width="167px" height="80px"/>
<h1 class="col-md-6">Welcome!</h1>
</header>
<section id="form" class="row">
<form class="col-md-6 col-md-offset-3" id="registrationForm" name="RegistrationForm">
<h2>Registration</h2>
<table>
<tr>
<td >
<input type="text" placeholder="Name" id="Name"> <br>
<span id="errorName" class="span"></span>
</td>
<td>
<input type="text" placeholder="Last Name" id="firstLastName">
<span id="errorFirstLastName" class="span"></span>
</td>
<td>
<input type="text" placeholder="Second Last Name" id="secondLastName">
<span id="errorSecondLastName" class="span"></span>
</td>
</tr>
<tr>
<td colspan="3">
<input type="text" placeholder="Username" id="username">
</td>
</tr>
<tr>
<td colspan="3">
<label for="dateBirth">Date of Birth: </label>
</td>
</tr>
<tr>
<td colspan="3">
<input type="date" id="dateBirth">
</td>
</tr>
<tr>
<td colspan="3">
<input type="email" placeholder="Email Address" id="email">
</td>
</tr>
<tr>
<td colspan="3">
<select id="gender">
<option value="">--Select Gender--</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</td>
</tr>
<tr>
<td colspan="3">
<input type="password" placeholder="Password" id="password">
</td>
</tr>
<tr>
<td colspan="3">
<input type="password" placeholder="Confirm Password" id="passwordConfirmation">
</td>
</tr>
<tr>
<td colspan="3">
<input type="button" value="Create Account" id="btnRegistration">
</td>
</tr>
</table>
</form>
</section>
<script type="text/javascript" src="js/logicIU.js"></script>
</body>
</html>
It seems pretty wired to me that getElementsByTagName not working on span element.
For working code you can try this
<span class='.span'>Data1</span>
<span class='.span'>Data2</span>
var x = document.getElementsByClassName(".span");
x[1].innerHTML = 'works';
Here JsFiddle https://jsfiddle.net/s4cdLrcg/1/
If you are getting undefined error on span elements probably you loading script before the dom elements finishs its loading.
Try to Load your script at bottom of your html page then it will work.
You can look at the snippet below which confirms you don't have any issues with your script.
You should place the scripts after the html elements same as the below snippet.
Note: I have put the scripts inside the validate() function so that, when you type something and click the button, you can see the validation message removed.
But this snippet will work without the function as you did above.
<div>
<input type="text" id="Name" /> <span></span>
</div>
<div>
<input type="text" id="firstLastName" /> <span></span>
</div>
<div>
<input type="text" id="secondLastName" /> <span></span>
</div>
<div>
<input type="text" id="username" /> <span></span>
</div>
<input type="button" value="Validate" onclick="validate()" />
<script>
function validate() {
var name = document.querySelector('#Name').value,
firstLastName = document.querySelector('#firstLastName').value,
secondLastName = document.querySelector('#secondLastName').value,
username = document.querySelector('#username').value,
//dateBirth = document.querySelector('#dateBirth').value,
//email = document.querySelector('#email').value,
//gender = document.querySelector('#gender').value,
//password = document.querySelector('#password ').value,
//passwordConfirmation = document.querySelector('#passwordConfirmation').value,
span = document.getElementsByTagName("span"),
personalData = [name, firstLastName, secondLastName, username], //, dateBirth, email, gender, password, passwordConfirmation],
arrayLength = personalData.length;
for (var i = 0; i < arrayLength; i++) {
var message = '';
if (personalData[i] == '') {
message = '*Required';
}
span[i].innerHTML = message; /* THIS PART IS NOT WORKING */
}
}
validate();
</script>
You need to place your code inside function (i.e)
<input type="button" value="Validate" onclick="validate()" />
function validate(){
//Your code
}
Alright so I have this assignment for my class and I'm not entirely sure what I'm doing wrong. I need to insert an initPage() function to the sbutton that calls saveMailingInfo() and it has to run when the page loads. I also need to write a saveMailingInfo() function that creates an 3 year expiration date and loops through each element of the mailing form. I was certain I did it right but I don't get the alert when I test it. Any ideas?
/* this function attachs the event handler under both event models */
function addEvent(object, evName, fnName, cap) {
if (object.attachEvent)
object.attachEvent("on" + evName, fnName);
else if (object.addEventListener)
object.addEventListener(evName, fnName, cap);
}
function writeCookie(cName, cValue, expDate, cPath, cDomain, cSecure) {
if (cName && cValue != "") {
var cString = cName + "=" + escape(cValue);
if (expDate)
cString += ";expires=" + expDate.toGMTString();
if (cPath) cString += ";path=" + cPath;
if (cDomain) cString += ";domain=" + cDomain;
if (cSecure) cString += ";secure";
document.cookie = cString;
}
function saveMailingInfo() {
var expire = new Date();
expire.setFullYear(expire.getFullYear() + 3);
var allFields = document.mailingForm.elements;
for (var i = 0; i < allFields.length; i++) {
if (allFields[i].type == "text") {
writeCookie(allFields[i].id, allFields[i].value, expire);
}
if (allFields[i].nodename == "SELECT") {
writeCookie(allFields[i].id, allFields[i].selectedIndex, expire);
}
if (allFields[i].type == "radio") || allFields[i].type == "checkbox") {
writeCookie(allFields[i].id, allFields[i].checked, expire);
}
}
}
alert("Cookie has been written!");
}
addEvent(window, "load", initpage, false);
function initPage(){
document.getElementById("sbutton").onclick = saveMailingInfo;
console.log(document.cookie);
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- DW6 -->
<head>
<!--
-->
<title>Cakes by Emily</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="main.css" type="text/css" />
<script type="text/javascript" src="cakeForm.js"></script>
</head>
<body >
<div class="head" id="header">
<p><img src="cake.jpg" alt="cake picture" /><img src="logo.gif" alt="Cakes by Emily" width="400" height="125" /></p>
<div class="links" id="navigation">
Home
Cakes
Pastries
Pies
Mailing List
</div>
</div>
<div class="mainContent">
<p>Enter your info to be added to our email list with reminders about getting that birthday
cake you want! Remember at Cakes by Emily, we aim to make every birthday the best!</p>
<form name="mailingForm" >
<table>
<tr>
<td>
First:
</td>
<td> <input type="text" name="firstName" id="firstName"><BR>
</td>
</tr>
<tr>
<td>
Last:
</td>
<td><input type="text" name="lastName" id="lastName" ><BR>
</td>
</tr>
<tr>
<td>
E-Mail:
</td>
<td><input type="text" name="email" id="email" ><BR>
</td>
</tr>
<tr>
<td>
Birthday (mm/dd/yyyy):
</td>
<td><input type="text" name="birthday" id="birthday" ><BR>
</td>
</tr>
<tr>
<td>
Favorite Cake:
</td>
<td>
<select id="favoriteCake">
<option value="ButterCream">Butter Cream</option>
<option value="Chocolate">Chocolate</option>
<option value="Vanilla">Vanilla</option>
<option value="RedVelvet">Red Velvet</option>
</select><BR>
</td>
</tr>
<tr>
<td>
Frequency of Emails:
</td>
<td><input type="radio" name="frequency" id="frequency1" >Email me monthly<BR>
<input type="radio" name="frequency" id="frequency2" >Email me quarterly<BR>
<input type="radio" name="frequency" id="frequency3" >Email me near my birthday<BR>
</td>
</tr>
</table>
<input type="submit" id="sbutton" name="sbutton" value="Join our mailing List" />
<input type="reset" value="Reset the form" />
</form>
</div>
<div class="footer">
</div>
</body>
</html>
hi guys pls help me with this i dont know how to start to send this function to the php database. pls help me i need to send the right box to the database tnx the function of the jquery is working but i cannot think of how do i insert this to the database pls help me with this:) tnx all move options(text) two the next box and insert to the php database.
select.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery move listbox items from left to right example</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script language="javascript" type="text/javascript">
function move_list_items(sourceid, destinationid)
{
$("#"+sourceid+" option:selected").appendTo("#"+destinationid);
}
//this will move all selected items from source list to destination list
function move_list_items_all(sourceid, destinationid)
{
$("#"+sourceid+" option").appendTo("#"+destinationid);
}
</script>
<style type="text/css">
select {
width:200px;
height:100px;
}
</style>
</head>
<body>
<form action="submit.php" method="post">
<table cellpadding="5" cellspacing="5">
<tbody>
<tr>
<td colspan="2">
<select id="from_select_list" multiple="multiple" name="from_select_list">
<option value="apple">Apple</option><option value="mango">Mango</option> <option value="bannana">Bannana</option> <option value="grapes">Grapes</option>
</select>
</td>
<td colspan="2">
<select id="to_select_list" multiple="multiple" name="to_select_list">
<option value="winder">Winter</option> <option value="summer">Summer</option> <option value="rainy">Rainy</option> <option value="Spring">Spring</option>
</select>
</td>
</tr>
<tr>
<td><input id="moveright" type="button" value="Move Right" onclick="move_list_items('from_select_list','to_select_list');" /></td>
<td><input id="moverightall" type="button" value="Move Right All" onclick="move_list_items_all('from_select_list','to_select_list');" /></td>
<td><input id="moveleft" type="button" value="Move Left" onclick="move_list_items('to_select_list','from_select_list');" /></td>
<td><input id="moveleftall" type="button" value="Move Left All" onclick="move_list_items_all('to_select_list','from_select_list');" /></td>
<input type="submit" name="submit" />
</tr>
</tbody>
</table>
</body>
</html>
connection.php
<?php
$dbhost = "localhost";
$dbuser = "root";
$dbpass = "";
$db = "copy";
$conn = mysqli_connect($dbhost,$dbuser,$dbpass,$db);
?>
submit.php
<?php
include 'connection.php'
?>
change the select option name into array then only u can get all the selected items
<td colspan="2">
<select id="to_select_list" multiple="multiple" name="to_select_list[]">
<option value="winder">Winter</option> <option value="summer">Summer</option> <option value="rainy">Rainy</option> <option value="Spring">Spring</option>
</select>
</td>
in submit.php you can check like this
echo '<pre>';
print_r($_POST);