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).
Related
I have a script element with HTML content to be added dynamically to page
I've tried adding it using jQuery with the following code:
let template = jQuery.validator.format($.trim($('#customTemplate').html()));
$($(template()).html()).appendTo('.custom-class');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js" integrity="sha512-37T7leoNS06R80c8Ulq7cdCDU5MNQBwlYoy1TX/WUsLFC2eYNqtKlV0QjH7r8JpG/S0GUMZwebnVFLPd6SU5yg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/html" id="customTemplate">
<div class="col-sm-4">
<div class="form-group">
<label>Days: <span class="text-danger">*</span></label>
<input type="date" name="Days" placeholder="Days..." class="form-control required data-required">
</div>
</div>
</script>
Why the trim?
Why not a template
This works
let template = $('#customTemplate')[0].content;
$('.custom-class').append(template)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<template id="customTemplate">
<div class="col-sm-4">
<div class="form-group">
<label>Days: <span class="text-danger">*</span></label>
<input type="date" name="Days" placeholder="Days..." class="form-control required data-required">
</div>
</div>
</template>
<div class="custom-class"></div>
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'm trying to add the jSignature widget to a standard Bootstrap form, but so far nothing is appearing on the form (other form fields show fine).
Here's my form:
<form id="saveEvent" action="index.php" method="post">
<div class="form-group">
<label for="yourName">Your Name</label>
<input type="text" class="form-control" id="yourName" name="yourName" placeholder="Your Name">
</div>
<div class="form-group">
<label for="yourSignature">Your Signature</label>
<div id="signature"></div>
</div>
<hr />
<button type="reset" class="btn btn-default">Reset</button>
<button type="submit" class="btn btn-default">Submit</button>
</form>
I'm including all the files at the bottom of the page in the correct order:
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jSignature.min.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="assets/js/flashcanvas.js"></script>
<![endif]-->
<script>
$(document).ready(function() {
$("#signature").jSignature()
})
</script>
but the signature canvas doesn't show. Here's a screenshot of what I'm seeing if that helps:
I'm not getting any server errors or console errors so quite stumped at the moment - this is my first go at using jSignature.
Upon further inspection with the dev tools I noticed that the height of the signature div was 0px. I ended up adding this to the script:
$(document).ready(function() {
$("#signature").jSignature({
height: 200
});
$("#signature").resize();
})
and this is at least showing the signature capture now.
Hi now this code is working please check to properly your code is correct
Ref this code
$('#signature').signature();
#signature{
width:300px;
height:200px;
border:solid 1px red;
}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/south-street/jquery-ui.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link type="text/css" href="http://keith-wood.name/css/jquery.signature.css" rel="stylesheet">
<script type="text/javascript" src="http://keith-wood.name/js/jquery.signature.js"></script>
<form id="saveEvent" action="index.php" method="post">
<div class="form-group">
<label for="yourName">Your Name</label>
<input type="text" class="form-control" id="yourName" name="yourName" placeholder="Your Name">
</div>
<div class="form-group">
<label for="yourSignature">Your Signature</label>
<div id="signature"></div>
</div>
<hr />
<button type="reset" class="btn btn-default">Reset</button>
<button type="submit" class="btn btn-default">Submit</button>
</form>
I am trying to validate a form and display the validation result just under the text fields on submission of form as below.
But i am not able to validate the input field on submit , but i am able to validate onBlur, i tried both ways, see belo the codes for onSubmit and onBlur respectively.
My codes for this is:
formSumbit.html
<!DOCTYPE html>
<html lang="en" ng-app="testapp">
<head>
<meta charset="utf-8"/>
<title>BoilerPlate</title>
<link rel="stylesheet" type="text/css" href="/reset.css"></link>
<link rel="stylesheet" type="text/css" href="/lib/bootstrap/css/bootstrap.css"></link>
<script src="/lib/angular/angular.js" ></script>
<script src="/lib/angular/angular-route.js" ></script>
<script src="/jquery.min.js" ></script>
<script src="/lib/bootstrap/js/bootstrap.js" ></script>
<script>
var app=angular.module('testapp', ['ngRoute']);
app.controller('signupController', ['$scope', function($scope) {
$scope.submitted = false;
$scope.signupForm = function() {
console.log("hi");
if ($scope.signup_form.$valid) {
// Submit as normal
} else {
$scope.signup_form.submitted = true;
}
}
}]);
</script>
<style type="text/css">
.error{color:red}
</style>
</head>
<body>
<div>
<form name="signup_form" ng-submit="signupForm()" novalidate >
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" ng-model="testform.name" required class="form-control" id="name" placeholder="Name"/>
<div class="error" ng-show="signup_form.name.$dirty && signup_form.name.$error.required && signup_form.submitted">
<small class="error">
Your name is required.
</small>
</div>
</div>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" name="email" ng-model="testform.email" class="form-control" id="email" placeholder="Enter email"/>
<div class="error" ng-show="signup_form.email.$dirty && signup_form.email.$invalid && signup_form.submitted">
<small class="error" ng-show="signup_form.email.$error.email">
Your email not valid
</small>
</div>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</body>
</html>
But i am able to do the validation in on Blur event. see the code below which is working on onBlur.
<!DOCTYPE html>
<html lang="en" ng-app="testapp">
<head>
<meta charset="utf-8"/>
<title>BoilerPlate</title>
<link rel="stylesheet" type="text/css" href="/reset.css"></link>
<link rel="stylesheet" type="text/css" href="/lib/bootstrap/css/bootstrap.css"></link>
<script src="/lib/angular/angular.js" ></script>
<script src="/lib/angular/angular-route.js" ></script>
<script src="/jquery.min.js" ></script>
<script src="/lib/bootstrap/js/bootstrap.js" ></script>
<script>
var app=angular.module('testapp', ['ngRoute']);
app.controller('signupController', ['$scope', function($scope) {
}]);
</script>
<style type="text/css">
.error{color:red}
</style>
</head>
<body>
<div>
<form name="signup_form" novalidate >
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" ng-model="testform.name" required class="form-control" id="name" placeholder="Name"/>
<div class="error" ng-show="signup_form.name.$dirty && signup_form.name.$error.required">
<small class="error">
Your name is required.
</small>
</div>
</div>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" name="email" ng-model="testform.email" class="form-control" id="email" placeholder="Enter email"/>
<div class="error" ng-show="signup_form.email.$dirty && signup_form.email.$invalid">
<small class="error" ng-show="signup_form.email.$error.email">
Your email not valid
</small>
</div>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</body>
</html>
Try this:
Example
<form name="form" ng-app>
<div class="control-group" ng-class="{true: 'error'}[submitted && form.email.$invalid]">
<label class="control-label" for="email">Your email address</label>
<div class="controls">
<input type="email" name="email" ng-model="email" required />
<span class="help-inline" ng-show="submitted && form.email.$error.required">Required</span>
<span class="help-inline" ng-show="submitted && form.email.$error.email">Invalid email</span>
</div>
</div>
<button type="submit" class="btn btn-primary btn-large" ng-click="submitted=true">Submit</button>
</form>
Try to set the controller on the container div
<div ng-controller="signupController">
Check this example
http://codepen.io/sevilayha/pen/xFcdI