I've been studying Angular.js for my term exams and was working on the following code related to Angular.js forms.
<!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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular-csp.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<title>Practical 12</title>
</head>
<body>
<div ng-app="formApp" ng-controller="formCtrl">
<form name="festForm" novalidate ng-submit="sendForm(x)">
<h2>Registration form for tech event</h2>
<table>
<tr>
<td>
<label for="fname">First Name</label>
<input type="text" name="fname" id="fname" ng-model="x.fname" >
<!-- <span ng-show="festForm.fname.$error.required">*enter first name</span> -->
</td>
</tr>
<tr>
<input type="submit" value="SUBMIT">
</tr>
</table>
</form>
<p>{{userdata}}</p>
</div>
<script>
var app=angular.module("formApp",[])
app.controller("formCtrl",function($scope){
$scope.userdata="";
$scope.sendForm=function(fest){
$scope.msg="Form Validated"
$scope.userdata=angular.copy(fest);
console.log(fest)
}
})
</script>
</body>
</html>
Following is the output of the following code
I am not able to understand the flow how my argument fest passed in the sendform function gets converted into javascript object.
Related
i am attempting to show the same header (menus) at all my webpages. There is a youtube video on this. (same title as above).
but i cannot seem to get it going.
With reference to my code (mainmenu.js), if i attempt to enclose the part after this.innerHTML, i would get a error display of my VS Code.
Could this be the issue?? why the VS code error display?
index.html
!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>Login</title>
</head>
<body>
<div class="center">
<h1 align="center">Please Login </h1>
<form action='mainpage.html' method="post">
<!-- <label for="useremail">Email :</label>
<input type='email' id='useremail' name='useremail'><br></br>
<label for="userpw">Password :</label>
<input type='password' id='userpw' name='userpw'>
<br><br> -->
<table align="center">
<tr>
<td>
<input type="email" placeholder ='Email Address' name='' autofocus size="30" required>
</td>
</tr>
<tr>
<td>
<input type='password' placeholder ='Password' name='' size = "30" required>
</td>
</tr>
<tr>
<td>
<input type='submit' value = 'Login' size="30">
<input type='submit' value ='Forget' width='30'>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
mainpage.html
<!DOCTYPE html>
<html lang="en">
<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>Main Page</title>
<!--<link rel="stylesheet" href="style.css"> -->
<script type=module scr=mainmenu.js></script>
<mainheader></mainheader>
</html>
mainmenu.js
class mainmenu extends HTMLElement {
connectedCallback() {
this.innerHTML =
<h1>
test
</h1>
// <header>
// <nav>
// <ul>
// <li>Lists</li>
// <li>Sales</li>
// <li>Purchases</li>
// <li>Received</li>
// <li>Payments</li>
// <li>Adjustments</li>
// <li>Reports</li>
// </ul>
// </nav>
// </header>
}
}
customElements.define('mainheader',mainmenu)
this is what you want to do
class MyHeader extends HTMLElement {
connectedCallback() {
this.innerHTML =
`
<header>
<nav>
<ul>
<li>Lists</li>
<li>Sales</li>
<li>Purchases</li>
<li>Received</li>
<li>Payments</li>
<li>Adjustments</li>
<li>Reports</li>
</ul>
</nav>
</header>
`
}
}
customElements.define('my-header', MyHeader)
<!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>Document</title>
</head>
<body>
<my-header></my-header>
</body>
</html>
At first it worked but then it stopped working can't find the error please help!
When you write in the correct username and password it only puts it in the url and doesn't work.
The demo version has css ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
DEMO <----------------------------------------------------------------
/*This Script allows people to enter by using a form that asks for a
UserID and Password*/
function pasuser(form) {
if (form.identifier.value=="GG") {
if (form.pass.value=="123") {
window.location('https://www.google.com/');
} else {
alert("Invalid Password");
}
} else { alert("Invalid UserID");
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="/style.css">
<script src="/server.js"></script>
<title></title>
</head>
<body>
<div class="box">
<h2>Login</h2>
<form>
<div class="inputBox">
<input type="text" name="identifier" required="">
<label>Username</label>
</div>
<div class="inputBox">
<input type="password" name="pass" required="">
<label>Password</label>
</div>
<input type="button" value="Submit" onclick="pasuser(form)">
</form>
</div>
</body>
</html>
window.location is not a function. try window.location.assign(.....
/*This Script allows people to enter by using a form that asks for a
UserID and Password*/
function pasuser(form) {
if (form.identifier.value=="GG") {
console.log(form.identifier.value)
if (form.pass.value=="123") {
window.location.assign('https://www.google.com/');
} else {
alert("Invalid Password");
}
} else { alert("Invalid UserID");
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="/style.css">
<script src="/server.js"></script>
<title></title>
</head>
<body>
<div class="box">
<h2>Login</h2>
<form>
<div class="inputBox">
<input type="text" name="identifier" required="">
<label>Username</label>
</div>
<div class="inputBox">
<input type="password" name="pass" required="">
<label>Password</label>
</div>
<input type="button" value="Submit" onclick="pasuser(form)">
</form>
</div>
</body>
</html>
So I'm a bit new to web programming, and I'm trying to include a jQuery widget (pop-up calender when you click on the textbox) on my website. When I open the html script in chrome locally the widget works fine, but on my website it doesn't work at all.
When I visit my website as a regular user, Chrome says "Not Secure" before the https://________ . Maybe this has something to do with it?
Sorry for the big block of code but I don't know where the mistake in my script is.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="appointment">
</head>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/dwyl/html-form-send-email-via-google-script-without-server/master/style.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
<body>
<h2 class="content-head is-center">SET UP AN APPOINTMENT <em>(Optional)</em></h2>
<aside>
<p> We can meet you on campus or at our office!
<br>
<br>
Please use the form below to schedule an appointment.
</p>
</aside>
<!-- START FORM -->
<form id="gform" method="POST" class="pure-form pure-form-stacked"
action="https://script.google.com/macros/s/AKfycbyFvR4QUsL6wSpQbv283kcZuyKDM_vTGbSeqvM91UykoFah9s4/exec">
<fieldset class="pure-group">
<label for="name">Name* : </label>
<p>
<input id="name" firstNname="firstName" placeholder="First Name" /> </p>
<br>
<p><input id="name" lastNname="lastName" placeholder="Last Name" /></p>
</fieldset>
<fieldset class="pure-group">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<p>Date: <input type="text" id="datepicker"></p>
</fieldset>
<input type="submit" value="Submit" action="https://script.google.com/macros/s/AKfycbyFvR4QUsL6wSpQbv283kcZuyKDM_vTGbSeqvM91UykoFah9s4/exec" >
</form>
<!-- POST SUBMISSION -->
<div style="display:none;" id="thankyou_message">
<h2>Thank you for getting in touch with us.
We look forward to meeting with you!</h2>
</div>
<!-- Submit the Form to Google Using "AJAX" -->
<script data-cfasync="false" type="text/javascript"
src="https://cdn.rawgit.com/dwyl/html-form-send-email-via-google-script-without-server/master/form-submission-handler.js"></script>
<!-- <script data-cfasync="false" type="text/javascript"
src="/form-submission-handler.js"></script> -->
<script data-cfasync="false" type="text/javascript"
src="https://cdn.rawgit.com/dwyl/html-form-send-email-via-google-script-without-server/master/form-submission-handler.js"></script>
<!-- END -->
</body>
</html>
It is not working, because you placed JS/jquery multiple times. This version should work:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="appointment">
</head>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/dwyl/html-form-send-email-via-google-script-without-server/master/style.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
<body>
<h2 class="content-head is-center">SET UP AN APPOINTMENT <em>(Optional)</em></h2>
<aside>
<p> We can meet you on campus or at our office!
<br>
<br>
Please use the form below to schedule an appointment.
</p>
</aside>
<!-- START FORM -->
<form id="gform" method="POST" class="pure-form pure-form-stacked"
action="https://script.google.com/macros/s/AKfycbyFvR4QUsL6wSpQbv283kcZuyKDM_vTGbSeqvM91UykoFah9s4/exec">
<fieldset class="pure-group">
<label for="name">Name* : </label>
<p>
<input id="name" firstNname="firstName" placeholder="First Name" /> </p>
<br>
<p><input id="name" lastNname="lastName" placeholder="Last Name" /></p>
</fieldset>
<fieldset class="pure-group">
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<p>Date: <input type="text" id="datepicker"></p>
</fieldset>
<input type="submit" value="Submit" action="https://script.google.com/macros/s/AKfycbyFvR4QUsL6wSpQbv283kcZuyKDM_vTGbSeqvM91UykoFah9s4/exec" >
</form>
<!-- POST SUBMISSION -->
<div style="display:none;" id="thankyou_message">
<h2>Thank you for getting in touch with us.
We look forward to meeting with you!</h2>
</div>
<!-- Submit the Form to Google Using "AJAX" -->
<script data-cfasync="false" type="text/javascript"
src="https://cdn.rawgit.com/dwyl/html-form-send-email-via-google-script-without-server/master/form-submission-handler.js"></script>
<!-- <script data-cfasync="false" type="text/javascript"
src="/form-submission-handler.js"></script> -->
<!-- END -->
</body>
</html>
There are some resources with http:// url are included in your source code, So that is why it's showing "Not Secure".
I would suggest to include all your Javascript libraries related to your functionality at the bottom of your html.
I don't know what's wrong. This code is correct but when I run it in my local machine I recognize that the input field is missing!
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>slider demo</title>
<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="header">
<h1>jQuery Mobile Example</h1>
</div>
<div role="main" class="ui-content">
<label for="slider-0">Input slider:</label>
<input type="range" name="slider-0" id="slider-0" value="60" min="0" max="100">
</div>
</body>
</html>
You need to set protocol because by default browser will set file://
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
IMPORTANT - it is a bad practise to specify the protocol, use this only on local machine
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>slider demo</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="header">
<h1>jQuery Mobile Example</h1>
</div>
<div role="main" class="ui-content">
<label for="slider-0">Input slider:</label>
<input type="range" name="slider-0" id="slider-0" value="60" min="0" max="100">
</div>
</body>
</html>
I am new to BootStrap 3 and am having problems with my divs overlapping. I'm probably missing something simple, but can't seem to find the problem. Here is the html.
You can also find a working copy of what I am trying to do in Bootstrap at wibberding.info/SolarTime.
Thanks for any help you can give.
<!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">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<title>Solar Time</title>
<link rel="icon" type="image/ico" href="favicon.ico">
</head>
<body>
<div class="jumbotron">
<div class="container clearfix">
<h1 id="clock">Solar Time</h1>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-8">
<p>This web app allows you to find Solar Time in two ways:</p>
<p> 1. Find Solar Time by reading the location data from your device. You will have to have this turned on. </p>
<p> 2. By entering a longitude. You can find the longitude of your zipcode here.</p>
</div>
<div class="col-md-4">
<form id="form">
<input id="device" type="radio" name="locationData" value="device" checked onchange="solarTime.checkLocationMethod()">
<label for="device">Use my device location.</label><br>
<input id="latLong" type="radio" name="locationData" value="latLong" onchange="solarTime.checkLocationMethod()">
<label for="latLong">Enter Longitude</label>
<input type="text" size="10" maxlength="30" id="longitude" onFocus="solarTime.changeToLong()"></input> (Enter postive longitude for East and negative for West. All of the United States is negative.) <br>
<input type="button" onclick="solarTime.checkLocationMethod()" value="Find Solar Time" />
</form>
</div>
</div>
</div>
</body>
</html>
So it looks like I missed a closing DIV tag. It now works :-) Thank you everyone for your help . . .