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).
Related
I am creating an UI, where I am entering some useful information. I use a form tag to set it up.
I have the basic form created and it can be seen as below
Since I have made use of form, when I click the Add project details, it directly hits the endpoint assigned (We are usigng springboot+thymeleaf)
Desirable Result:
When I click on Add Project details I should get text fields as shown below :
A student can create multiple projects, so each time Add project details is clicked, a new div with Id, projectname, grade has to be created.
NOTE: just a plain student can be created without any projects, but one student can have multiple projects too. I am failing in adding the UI components there. Each time I click add project details, it redirects to form submission and does not open the required div into the page.
Please provide me some guidelines here.
<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</link>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<!-- Include https://datatables.net/ -->
<link href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css" rel="stylesheet">
</link>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript"
src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<!-- drag select for list of worklogs -->
<style>
.noselect {
user-select: none;
}
.ds-selected {
outline: 1px solid black;
outline-offset: 0px;
color: rgb(0, 0, 0);
font-weight: bold;
}
</style>
</head>
<body>
<div th:fragment="inputdata">
<div class="container-md">
<a>Student and Project Details</a>
<div class="row justify-content-md-end">
<form>
<div class="row">
<div class="col-2">
<a>Enter unique studentId</a>
</div>
<div class="col-3">
<input type="text" class="form-control" name="studentid" id="studentid" placeholder="studentid"
required="required">
</div>
</div>
<div class="row">
<div class="col-2">
<a>Enter Name</a>
</div>
<div class="col-3">
<input type="text" class="form-control" name="name" id="name" placeholder="name"
required="required">
</div>
</div>
<div class="row">
<div class="col-2">
<a>birth date</a>
</div>
<div class="col-3">
<input type="date" class="form-control" name="birthdate" id="birthdate"
placeholder="birthdate" required="required">
</div>
</div>
<div class="row">
<div class="row-2">
<button class="btn btn-primary"> Add project details </button>
</div>
</div>
<div class="row" id= "flexibleDiv">
<div class="col-2">
<label >Project </label>
</div>
<div class="col-2">
<input type="text" class="form-control" name="id" id="id"
placeholder="id" required="required">
</div>
<div class="col-2">
<input type="text" class="form-control" name="name" id="name"
placeholder="name" required="required">
</div>
<div class="col-2">
<input type="text" class="form-control" name="grade" id="grade"
placeholder="grade" required="required">
</div>
</div>
<br>
<br>
<br>
<div class="row">
<div class="row-2">
<input type="submit" id="submitButton" class="btn btn-primary btn-sml" value="Enter to DB">
</div>
</div>
</form>
</div>
</div>
<script>
</script>
</div>
</body>
</html>
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>
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>
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.