th:onchange="javascript:showPIIDoc();" - javascript

I am new to thymeleaf.
This is my select statement in thymeleaf
<select id="provider" class="form-control" th:onchange="'javascript:showPIIDoc();'">
<option th:value="0" >Select a Service Provider</option>
<option th:each="provider : ${user.providers}" name="name" th:value="${provider.id}" th:text="${provider.name}" >[name]</option>
</select>
this is my javascript
<script>
function showPIIDoc()
{
alert('in here');
}
</script>
After running on server i cannot see the alert. Please help me.

There is nothing special about your onchange attribute with the tag, that requires Thymeleaf.
Change it to
<select id="provider" class="form-control" onchange="showPIIDoc()">
<option th:value="0" >Select a Service Provider</option>
<option th:each="provider : ${user.providers}" name="name" th:value="${provider.id}" th:text="${provider.name}" >[name]</option>
</select>

Related

How to get data attribute values from html select?

I want to create a form where if I choose a name from a selection.
The next input field will be autofilled.
It works with the value of the selected item, but I can't get it work with data tags.
Here is some simplified HTML:
<select class="select" id="test " name="" onchange="myFunction(event)">
<option disabled selected>Choose Database Type</option>
<option data-adr="xyz" value="id1">Test name1</option>
<option data-adr="fsd" value="id2">Test name2</option>
<option data-adr="sss" value="id3">Test name3</option>
</select>
<input class="form-control" id="myText" type="text" value="-">
JavaScript (this works):
function myFunction(e) {
document.getElementById("myText").value = e.target.value;
}
JavaScript (this doesn't work):
function myFunction(e) {
document.getElementById("myText").value = e.target.options[event.target.selectedIndex].dataset.adr;
}
The second JavaScript example works, but only if I don't use the class="select" tag on the selection. So there must be something in the CSS that could interfere with the JavaScript part?
Is there another method to get the data tag from the selected item?
Pass in the select as the parameter, then do select.options[select.selectedIndex] to get the element. This limits the amount of code needed for the job. The rest is self explanatory.
function myFunction(e) {
document.getElementById("myText").value = e.options[e.selectedIndex].getAttribute("data-adr");
}
<select class="select" id="test " name="" onchange="myFunction(this)">
<option disabled selected>Choose Database Type</option>
<option data-adr="xyz" value="id1">Test name1</option>
<option data-adr="fsd" value="id2">Test name2</option>
<option data-adr="sss" value="id3">Test name3</option>
</select>
<input class="form-control" id="myText" type="text" value="-">

How to create button to change the alert using JQuery and JavaScript?

I want to create a selection button. There are two options, traveled date and issued date. So when the user click traveled date. There will be an alert for traveled date and vice versa to the issued date. I already create the function inside the selection button but, the alert still didn't work?
function myFunction() {
document.getElementById("myInput").alert("try");
}
function myFunction1() {
document.getElementById("myButton").alert("fefetry");
}
<select class="form-control" name="insurance_id">
<option value="" id="myInput" onclick="myFunction()">Travel Date</option>
<option value="" id="myButton" onclick="myFunction1()">Issued Date</option>
</select>
You can refactor it by listening event on change of select[name=insurance_id] then alert value accordingly like below
$("select[name=insurance_id]").on("change", function(){
alert($(this).val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" name="insurance_id">
<option value="Travel Date" >Travel Date</option>
<option value="Issued Date" >Issued Date</option>
</select>
You don't need the document.getElementByID() since you assigned the click handler in the HTML tag.
Change your javascipt code to
<script>
function myFunction() {
alert("try");
}
function myFunction1() {
alert("fefetry");
}
</script>
You don't use onclick on options but onchange listener on select.
Supposed that you don't use the options value you can use them as the alert placeholder:
<select class="form-control" name="insurance_id" onchange="alert(this.options[this.selectedIndex].value);">
<option value="try" id="myInput">Travel Date</option>
<option value="fefetry" id="myButton">Issued Date</option>
</select>
Alternatively, you can use data_attributes and dataset property to fetch it:
<select class="form-control" name="insurance_id" onchange="alert(this.options[this.selectedIndex].dataset.alert);">
<option data-alert="try" value="" id="myInput">Travel Date</option>
<option data-alert="fefetry" value="" id="myButton">Issued Date</option>
</select>
alert is a global Window method but you are trying to access that on an element.
You can try something like the following way:
<select class="form-control" name="insurance_id" onchange="myFunction(this)">
<option value="" id="myInput">Travel Date</option>
<option value="" id="myButton">Issued Date</option>
</select>
<script>
function myFunction(sel) {
var text = sel.options[sel.selectedIndex].text
alert(text);
}
myFunction(document.querySelector('select'));
</script>
Using jQuery:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" name="insurance_id">
<option value="" id="myInput">Travel Date</option>
<option value="" id="myButton">Issued Date</option>
</select>
<script>
$('select').change(function(){
alert($(this).find('option:selected').text());
}).trigger('change');
</script>

AngularJS ng-model on select input doesn't work

I'm starting with AngularJS and tried to do a and get its value with Angular, but it doesn't work.
<div id="app_container" ng-controller="ArticlesController as control">
<select name="sortby" id="sortby" ng-model="sortBy"> {{sortBy}}
<option name="Date" value="Date">Date</option>
<option name="Vues" value="Vues">Vues</option>
<option name="Note" value="Note">Note</option>
<option name="Catégorie" value="Catégorie">Catégorie</option>
<option name="Tags" value="Tags">Tags</option>
</select>
<div>
Here I want to display the value of the select input, but it displays nothing. I can't access this value from the controller neither, and I don't understand why.
I have a ng-repeat on the same page that works perfectly well.
I even tried to copy past the example from angularjs.org, even this doesn't work...
Since you are using controller as syntax, you need to use ng-model="controlsortBy"
DEMO
var app = angular.module('testApp',[]);
app.controller('ArticlesController',function(){
var control = this;
control.print = function(){
console.log(control.sortBy);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp">
<div id="app_container" ng-controller="ArticlesController as control">
<select name="sortby" id="sortby" ng-change="control.print()" ng-model="control.sortBy">
<option name="Date" value="Date">Date</option>
<option name="Vues" value="Vues">Vues</option>
<option name="Note" value="Note">Note</option>
<option name="Catégorie" value="Catégorie">Catégorie</option>
<option name="Tags" value="Tags">Tags</option>
</select>
<h1> {{control.sortBy}}</h1>
<div>

Possible to assign tab value to html form element?

I am curious if it possible to assign a tab character as value to an html dropdown list. This is my current markup:
<select id="delimiter-select" class="form-control form-control-sm csv-select">
<option value=",">Comma (,)</option>
<option value=";">Semi-Colon (;)</option>
<option value="|">Pipes (|)</option>
<option value="Tab">Tab</option>
</select>
Where the value Tab is I would like that to be a tab character that I can eventually pass to JS.
There is a HTML entity for the Tab character, &Tab; or , use that:
document.getElementById("delimiter-select").onchange = function (e) {console.log(` Separator is ${e.target.value} separating`)}
<select id="delimiter-select" class="form-control form-control-sm csv-select">
<option value=",">Comma (,)</option>
<option value=";">Semi-Colon (;)</option>
<option value="|">Pipes (|)</option>
<option value="&Tab;">Tab</option>
</select>
Use as the tabulation HTML entity
console.log($('#input').val() + 'Test');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="input" value=" ">

ng-click not working in IE but works fine in CHROME

<select id="from" multiple="multiple" name="list" ng-model="selectedVal">
<optgroup label= "{{geo.Geo}}" ng-repeat="geo in Geographies">
<option id="{{country.CountryKey}}" ng-repeat="country in geo.Country" ng-click="arrayPush()">{{country.CountryDescription}}</option>
</optgroup>
</select>
arrayPush() is not being called when I am clicking a specific option
$scope.arrayPush = function(){alert("Hello!");}
I just found-out the answer to my question
<select id="from" multiple="multiple" name="list" ng-model="selectedVal" ng-change="arrayPush()">
<optgroup label= "{{geo.Geo}}" ng-repeat="geo in Geographies">
<option id="{{country.CountryKey}}" ng-repeat="country in geo.Country" >{{country.CountryDescription}}</option>
</optgroup>
</select>
Instead of using ng-click in option, use an ng-model and ng-change in select. Works in both Chrome and IE

Categories