Trying to figure out why my last input won't update.
Here's my JSFiddle
https://jsfiddle.net/Lzcvukq8/
I think there's something wrong with my JS
function calculatorController($scope){
// Sixteen oz
$scope.costPerCanSixteen = function(){
return $scope.priceSixteen/(24*$scope.casesSixteen);
};
};
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<div id="sixteen-oz" ng-controller="calculatorController">
<div class='hr'></div>
<h1>One</h1>
<form class="form-horizontal">
<div class="form-group">
<label for="inputCases" class="col-sm-6 control-label">Amount of Cases</label>
<div class="col-sm-offset-1 col-sm-5">
<input type="number" min="0.01" step="0.01" max="2500" class="form-control" ng-model="casesSixteen"/>
</div>
</div>
<div class="form-group">
<label for="inputCost" class="col-sm-6 control-label">Cost Per Case</label>
<div class="col-sm-offset-1 col-sm-5">
<input type="number" min="0.01" step="0.01" max="2500" class="form-control" placeholder="29.40" ng-model="priceSixteen"/>
</div>
</div>
<div class="form-group">
<label for="canCost" class="col-sm-6 control-label">Cost Per Can</label>
<div class="col-sm-offset-1 col-sm-5">
<input type="text" class="form-control answer-to-input" value="{{ costPerCanSixteen() }}"/>
</div>
</div>
</form>
</div>
index.html
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="js/app.js"></script>
<body>
<div ng-app="myApp" ng-controller="calculatorController">
<input type="text" ng-model="priceSixteen"/>
<input type="text" ng-model="casesSixteen"/>
<button ng-click="costPerCanSixteen()">click</button>
<p>{{costPerCanSixteen}}</p>
</div>
</body>
</html>
app.js
var app = angular.module("myApp", []);
app.controller("calculatorController", function($scope) {
$scope.costPerCanSixteen = function(){
var priceSixteen = $scope.priceSixteen;
var casesSixteen = $scope.casesSixteen;
$scope.costPerCanSixteen = priceSixteen/(24*casesSixteen);
};
});
another way..
script.js
function calculatorController($scope){
$scope.costPerCanSixteen = function(){
var costPerCanSixteen = 0;
var priceSixteen = $scope.priceSixteen;
var casesSixteen = $scope.casesSixteen;
costPerCanSixteen = priceSixteen/(24*casesSixteen);
return costPerCanSixteen;
};
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body ng-app ng-controller="calculatorController">
<form>
<div class="total">
<!-- Calculate the total price of all chosen services. Format it as currency. -->
<input type="text" ng-model="priceSixteen"/>
<input type="text" ng-model="casesSixteen"/>
Total: <span>{{costPerCanSixteen() | currency}}</span>
</div>
</form>
<!-- Include AngularJS from Google's CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Related
I am making a code that requests course grades and sends them to a spreadsheet. I am familiar with Javascript; however, I am less familiar with HTML. Because not every person is taking the same courses or even the same number of courses, I wanted to send each student a custom url that contains the parameters of their name and what courses they are taking. That way the information could be populated into the HTML page and all the student would need to do is type in their grades for the corresponding courses. Then when submitted, it would send that information to a spreadsheet and handled accordingly. However, I am unsure of how I could pass parameters on to an HTML page. I am sure that it is simple but I dont know how to do it. If someone could provide some guidance it would be greatly appreciated. Below I have included the main HTML file that dictates the output. I am also including links to the other code. https://script.google.com/d/1c2XOZc5bmlnxT0ayWfYpJd4d6pKmZ8rgSiEZ-9NJ8CZIhvdjpEqSJ5X6/edit?usp=sharing
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<?!= include('JavaScript'); ?>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-6">
<form id="myForm" onsubmit="handleFormSubmit(this)">
<p class="h4 mb-4 text-center">Input Grades Below</p>
<div class="form-row">
<div class="form-group col-md-6">
<label for="class001" id = "class_01" hidden>Class1</label>
<input type="text" class="form-control" id="grade001" name="grade00" placeholder="Grade" hidden>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="class002" id = class_02 hidden>Class2</label>
<input type="text" class="form-control" id="grade002" name="grade002" placeholder="Grade" hidden>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="class003" id = "class_03" hidden>Class3</label>
<input type="text" class="form-control" id="grade003" name="grade003" placeholder="Grade" hidden>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="class004" id = class_04 hidden>Class4</label>
<input type="text" class="form-control" id="grade004" name="grade004" placeholder="Grade" hidden>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="class005" id = class_05 hidden>Class5</label>
<input type="text" class="form-control" id="grade005" name="grade005" placeholder="Grade" hidden>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="class006" id = class_06 hidden>Class6</label>
<input type="text" class="form-control" id="grade006" name="grade006" placeholder="Grade" hidden>
</div>
</div>
<script>
//Script to to implement to change class labels
</script>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</form>
<div id="output"></div>
</div>
</div>
</div>
</body>
</html>
You can use google.script.url.getLocation() to get the current URL parameters and hash.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<script>
// URL = https://script.google.com/macros/s/SCRIPTKEY/exec?parameter=value#hash
google.script.url.getLocation(function(location) {
console.log(location.parameters); // {parameter: ["value"]}
console.log(location.hash); // "hash"
});
</script>
</body>
</html>
I have a thymeleaf template for form input where I use a js script. When in template it works fine but when I try to exclude it to external file it stops working. Probably I don't import it correctly but don't know what to change here because everything seems normal. Here are template and script (langSelect.js) files
<!DOCTYPE HTML>
<html xmlns:th="https://www.thymeleaf.org">
<header>
<title th:text="#{input.form.title}"></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</header>
<body>
<h1 th:text="#{input.form}"></h1>
<div class="col-md-6">
<form action="#" th:action="#{/register}" th:object="${userForm}" method="post">
<div class="form-row">
<div class="form-group col">
<label th:text="#{first.name}"></label>
<input type="text" th:unless="${#fields.hasErrors('firstName')}" class="form-control"
th:placeholder="#{first.name}" th:field="*{firstName}">
<input type="text" th:if="${#fields.hasErrors('firstName')}" class="form-control alert-danger"
th:placeholder="#{first.name}" th:field="*{firstName}">
<span th:if="${#fields.hasErrors('firstName')}" th:errors="*{firstName}"></span>
</div>
<div class="form-group col">
<label th:text="#{last.name}"></label>
<input type="text" th:unless="${#fields.hasErrors('lastName')}" class="form-control"
th:placeholder="#{last.name}" th:field="*{lastName}">
<input type="text" th:if="${#fields.hasErrors('lastName')}" class="form-control alert-danger"
th:placeholder="#{last.name}" th:field="*{lastName}">
<span th:if="${#fields.hasErrors('lastName')}" th:errors="*{lastName}"></span>
</div>
</div>
<div class="form-group">
<label th:text="#{email}"></label>
<input type="text" th:unless="${#fields.hasErrors('email')}" class="form-control"
th:placeholder="#{email}" th:field="*{email}">
<input type="text" th:if="${#fields.hasErrors('email')}" class="form-control alert-danger"
th:placeholder="#{email}" th:field="*{email}">
<span th:if="${#fields.hasErrors('email')}" th:errors="*{email}"></span>
</div>
<div class="form-group">
<label th:text="#{password}"></label>
<input type="text" th:unless="${#fields.hasErrors('passwordsEqual')}" class="form-control"
th:placeholder="#{password}" th:field="*{password}">
<input type="text" th:if="${#fields.hasErrors('passwordsEqual')}" class="form-control alert-danger"
th:placeholder="#{password}" th:field="*{password}">
<span th:if="${#fields.hasErrors('passwordsEqual')}" th:errors="*{password}"></span>
</div>
<div class="form-group">
<label th:text="#{password.repeat}"></label>
<input type="text" th:unless="${#fields.hasErrors('passwordsEqual')}" class="form-control"
th:placeholder="#{password.repeat}" th:field="*{passwordRepeat}">
<input type="text" th:if="${#fields.hasErrors('passwordsEqual')}" class="form-control alert-danger"
th:placeholder="#{password.repeat}" th:field="*{passwordRepeat}">
<span class="error" th:if="${#fields.hasErrors('passwordsEqual')}" th:errors="*{passwordsEqual}"></span>
</div>
<input class="btn-primary" type="submit" value="Submit"/> <input class="btn-primary" type="reset"
value="Reset"/>
</form>
<p></p>
<p></p>
<p></p>
<span th:text="#{lang.change}"></span>
<select id="locales">
<option value=""></option>
<option value="en" th:text="#{lang.eng}"></option>
<option value="ru" th:text="#{lang.ru}"></option>
<script type="javascript" src="langSelect.js"></script>
</select>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
</body>
</html>
$(document).ready(function () {
$("#locales").change(function () {
var selectedOption = $('#locales').val();
var queryString = window.location.search;
var urlParams = new URLSearchParams(queryString);
if (selectedOption !== '') {
var newUrl;
if (urlParams.has('lang')) {
var reExp = /lang=\w+/;
newUrl = queryString.replace(reExp, "lang=" + selectedOption);
} else {
if (queryString.includes('?')) {
newUrl = queryString.concat("&lang=" + selectedOption);
} else {
newUrl = queryString.concat("?lang=" + selectedOption);
}
}
window.location.replace(newUrl);
}
});
});
Please use th:src like this:
<script th:src="#{/js/langSelect.js}"></script>
Assuming you have your file inside the js folder, which is in your static folder - because the static folder is assumed to be the root path.
If you have your file directly under the static folder, try this:
<script th:src="#{langSelect.js}"></script>
Also, note that you don`t have to import your script on the exact place it is needed.
Your script will run automatically, when your page has completed loading - so it basically does not matter where you put it, but usually before the closing body tag is considered a good practice (so there together with the other scripts).
I've got a form that I'd like to be able to download offline, that should be compatible with most, if not all browsers (IE10,11 especially). I've seen a couple of solutions that don't work on IE or Chrome.
I've been trying to figure out how to do it in JQuery. A user is meant to fill out the form, and when they submit, the form should download a CSV file locally.
Unfortunately, I'm unable to use a server or any PHP, so I've resorted to JQuery/JavScript.
Here's what I have so far:
HTML5 Form:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap-theme.min.css">
</head>
<body>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<div class="container-fluid">
<form action="" id="formCsv" style="padding-top: 20px">
<div class="form-group row">
<label for="clientName" class="col-lg-1">Client Name</label>
<div class="col-lg-3">
<input type="text" name="Name" class="form-control" id="clientName" required>
</div>
</div>
<div class="form-group row">
<label for="clientEmail" class="col-lg-1">Client Email</label>
<div class="col-lg-3">
<input type="email" name="Email" class="form-control" id="clientEmail" >
</div>
</div>
<div class="form-group row">
<label for="clientCountry" class="col-lg-1">Client Country</label>
<div class="col-lg-3">
<input type="text" name="Country" class="form-control" id="clientCountry" >
</div>
</div>
<div class="form-group row">
<label for="clientState" class="col-lg-1">Client State</label>
<div class="col-lg-3">
<input type="text" name="State" class="form-control" id="clientState" >
</div>
</div>
<input class="btn btn-primary" id="Submit" type="button" value="Submit">
</form>
</div>
<div id="results"></div>
<script src="formArray.js"></script>
</body>
</html>
JavaScript file that takes inputs and creates array (formArray.js)
$(document).ready(function () {
$("#Submit").click(function (e) {
var x = $("form").serializeArray();
$.each(x, function (i, field) {
$("#results").append(field.name + ":" + field.value+ '</br>');
});
});
});
How would I then have it so that when a user clicks "submit", a correctly formatted CSV file is generated?
I have two forms in the same page and one appears when clicking on the icon the login disappear and the signup appear. I am using spring mvc so I want when entering /register the function which toggle the forms work.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>Login Form</title>
<link rel="stylesheet" th:href="#{/css/bootstrap.min.css}"
href="../static/css/reset.css"/>
<link rel='stylesheet prefetch'
href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900|RobotoDraft:400,100,300,500,700,900'/>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'/>
<!--<link rel="stylesheet" href="../static/css/style.css"/>-->
<link rel="stylesheet" th:href="#{/css/style.css}"
href="../static/css/style.css"/>
</head>
<body>
<!-- Mixins-->
<!-- Pen Title-->
<div class="container">
<div class="card"></div>
<div class="card">
<h1 class="title">Login</h1>
<form action="login" th:action="#{/login}" th:object="${login}" method="post" >
<div class="input-container">
<input type="email" id="email" th:field="*{email}" required="required"/>
<label for="email">email</label>
<div class="bar"></div>
</div>
<div class="input-container">
<input type="password" id="Password" th:field="*{password}" required="required"/>
<label for="Password">Password</label>
<div class="bar"></div>
</div>
<div class="button-container">
<button type="submit" name="action" value="login"><span>Go</span></button>
</div>
<div class="footer">Forgot your password?</div>
</form>
</div>
<div class="card alt">
<div class="toggle"></div>
<h1 class="title">Register
<div class="close"></div>
</h1>
<form action="register" th:action="#{/register}" th:object="${register}" method="post">
<div class="input-container">
<input type="text" id="firstName" th:field="*{firstName}" required="required"/>
<label for="firstName">First Name</label>
<div class="bar"></div>
</div>
<div class="input-container">
<input type="text" id="lastName" th:field="*{lastName}" required="required"/>
<label for="lastName">Last Name</label>
<div class="bar"></div>
</div>
<div class="input-container">
<input type="email" id="email_" th:field="*{email}" required="required"/>
<label for="email">Email</label>
<div class="bar"></div>
</div>
<div class="input-container">
<input type="password" id="Password_" th:field="*{password}" required="required"/>
<label for="Password">Password</label>
<div class="bar"></div>
</div>
<div class="button-container">
<button type="submit" name="action" value="register"><span>Next</span></button>
</div>
</form>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script th:src="#{/js/index.js}"></script>
</body>
</html>
JavaScript code :
$('.toggle').on('click', function() {
$('.container').stop().addClass('active');
});
$('.close').on('click', function() {
$('.container').stop().removeClass('active');
});
i want for example when entering /register it retrieve the register form instead of login
One way to do that is to create a /register controller that will return a parameter:
#RequestMapping("/register")
public ModelAndView register() {
ModelAndView mv = new ModelAndView("your_form_page")
mv.addObject("isRegister", true);
return mv;
}
Then you can add a hidden field and use it in the javascript to toggle the divs:
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
xmlns:th="http://www.thymeleaf.org">
<head>
<!-- imports omitted -->
<script type="text/javascript">
$(document).ready(function () {
if ($("#isRegister").val()) {
$("#register").show();
$("#signUp").hide();
} else {
$("#register").hide();
$("#signUp").show();
}
});
</script>
</head>
<body>
<input id="isRegister" type="hidden" th:value="${isRegister}" disabled="disabled"/>
<div id="signUp">
Sign Up Form
</div>
<div id="register">
Register Form
</div>
</body>
</html>
Of course you can move the Javascript piece of code to your ".js" file. The important here is to have the hidden input field that will be accessible in the Javascript to toggle the DIVs.
I want to create a edit profile Form. But my task is that my editprofile.js doesn't execute. But I give editprofile.js path in between head tag.
But It doesn't load the JavaScript file, how connect node JavaScript with AngularJS JavaScript?
<!DOCTYPE html>
<html ng-app="payloads">
<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>Payload | Edit</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!-- load jquery -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<!-- SPELLS -->
<script src="/editprofile.js"></script>
<!-- load angular -->
</head>
<div id="column-content">
<img alt="payload" src="/images/logo.png">
<myspan>Payload</myspan>
</div>
<body ng-controller="myCtrl">
<div style="float:right; position:fixed ; right:0 ; bottom:0">
<img>
</div>
<!-- You only need this form and the form-basic.css -->
<form class="form-basic" method="post" action="/kyc/edit">
<div class="form-row">
<div class="fontSize">KYC</div>
</div>
<div class="form-row">
<div class="greyColor">Know Your Customer</div>
</div>
<div class="form-row">
<div class="ss-required-asterisk" aria- hidden="true">* Required</div>
</div>
<div class="form-row">
<label>
<span>LegalName*</span>
<input type="text" name="name" ng-model="name" required>
</label>
</div>
<div class="form-row">
<label>
<span>CNIC Number*</span>
<input name="cnic" ng-model="cnic" required>
</label>
</div>
<div class="form-row">
<label>
<span>Father Name*<br></span>
<input name="fatherName" ng-model="fatherName" required>
</label>
</div>
<div class="form-row">
<label>
<span>Occupation*</span>
<input name="occupation" ng-model="occupation" required>
</label>
</div>
<div class="form-row">
<label>
<span>NTN Number</span>
<input name="ntn" ng-model="ntn">
</label>
</div>
<div class="form-row">
<div class="fontSize">Contact Details</div>
</div>
<div class="form-row">
<button type="submit">Save Changes</button>
</div>
</form>
</body>
</html>
editprofile.js
This is JavaScript file that show the user profile data in input text field.
var app = angular.module('payloads', []);
var userController = require('./controllers/userController').profileDataArray;
var profiledata = [];
profiledata = profiledata.concat(userController());
app.controller('myCtrl', function($scope) {
$scope.name = profiledata[0];
$scope.cnic = profiledata[1];
$scope.fatherName = profiledata[2];
$scope.occupation = profiledata[3];
$scope.ntn = profiledata[4];
});
With the require call in editprofile.js you appear to be trying to load server-side NodeJS code from within your client-side UI code. That doesn't work.
Your client and server need to be able to communicate, most likely over AJAX (e.g. using Angular's $http methods on the client and using http.createServer on the server side).