We Keep Coding

How to dynamically provide the id to my input field as that of my transliteration id in vue js html?

I am doing a project. In one case I need to dynamically add input fields. In that case, for the first input field transliteration is working. For the second input field onwards transliteration is not working. Because transliteration id works only for one input field. So, how can I able to change id of input field and transliteration id dynamically? I am beginner in javascript and I am not able to sort out the problem. Please help me.
So, the code for dynamically adding input fields is
<div class="row" v-for="(book, index) in seziure" :key="index">
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Date </label>
<input type="date" class="form-control" v-model="book.date" >
</div>
</div>
<div class="col-md-8">
<div class="form-group label-floating">
<label class="control-label"> Details</label>
<input type="text" class="form-control" v-model="book.details" id="transliterateTextarea2">
</div>
</div>
</div>
<a #click="addNewRow">Add Another </a>
So, whenever I clicks Add Another #addNewRow I am getting a new input field but transliteration is not working. I think problem arises because id="transliterateTextarea2" works for only one input field.
So, when I click on #addNewRow how can I able to change the transliteration id.
My script is
addForm = new Vue({
el: "#addForm",
data: {
seziure:[
{
date: null,
details: null,
},
],
},
methods: {
addNewRow: function() {
this.seziure.push({ date: null, details: null, });
},
},
})
My transliteration script is
<script type="text/javascript">
// Load the Google Transliterate API
google.load("elements", "1", {
packages: "transliteration"
});
function onLoad() {
var options = {
sourceLanguage:
google.elements.transliteration.LanguageCode.ENGLISH,
destinationLanguage:
[google.elements.transliteration.LanguageCode.MALAYALAM],
shortcutKey: 'ctrl+g',
transliterationEnabled: true
};
// Create an instance on TransliterationControl with the required
// options.
var control =
new google.elements.transliteration.TransliterationControl(options);
// Enable transliteration in the textbox with id
// 'transliterateTextarea'.
var ids = [ "transliterateTextarea2" ];
control.makeTransliteratable(ids);
}
google.setOnLoadCallback(onLoad);
</script>
So, here I have added a transliteration id as var ids = [ "transliterateTextarea2" ];
THIS ID is actually working for first input field only. So, when I click #addNewRow, an input field comes but transliteration is not working
So, when I click on#addNewRow how can I dynamically add id's. So, that I can get transliteration for that input fields too.
Please help me to have an answer.
I need transliteration works for, each new input fields i am adding.
Kindly have a help on the same. Hoping for a help

First thing, you are creating non-unique ids, which is just wrong in html. You should use :id="'transliterateTextarea_' + index". But also your initialization script for transliteration will not register the new input element without rerunning it each time you add an element.
Turn your whole transliteration script into a function and in your addNewRow add something like this:
this.seziure.push({ date: null, details: null, });
this.$nextTick(()=>{yourTransliterationInitializingFunction(this.seziure.length)})
And in yourTransliterationInitializingFunction make sure to use the proper id (that's why we pass the parameter there):
function yourTransliterationInitializingFunction(idNo){
...
var ids = [ "transliterateTextarea_" + idNo ];
...
}

HTML data into JavaScript function issue

I have the following code that uses a weather plugin (https://a12k.io/reallysimpleweather), my problem is that I am wondering how to use the data that is gathered from a user via the HTML form element like below,
<script>var input = document.getElementById('cityInput').value;</script>
<script>
reallySimpleWeather.weather({
//var city = "Bend, Or";
wunderkey: '', // leave blank for Yahoo API
location: input,
woeid: '', // "Where on Earth ID" optional alternative to location
unit: 'f', // 'c' also works
success: function(weather) {
html = '<h2>'+weather.temp+'°'+weather.units.temp+'</h2>';
html += '<ul><li>'+weather.city+', '+weather.region+'</li>';
html += '<li>'+weather.currently+'</li>';
html += '<li>'+weather.wind.direction+' '+weather.wind.speed+' '+weather.units.speed+'</li></ul>';
document.getElementById('weather').innerHTML = html;
},
error: function(error) {
document.getElementById('weather').innerHTML = '<p>'+error+'</p>';
}
});
</script>
</head>
<body>
<div class="container-fluid">
<div id="weather"></div>
<form>
City: <input type="text" name="city" id="cityInput">
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
I'm unsure as to if my issue is caused because of how the page and the API I am calling might be loading, but when I open it all up in a browser I am currently just getting an error from the plugin that says "There is a problem receiving the latest weather. Try again." Im not sure if this is caused because it is not able to update itself once it is initially loaded or if its because I am incorrectly storing the variable wrong in
location: input,
Whenever I hit "submit" nothing changes expect the URL itself changes to add city=%27Bend%2C+OR%27
at the end or whatever the city entered is.

Get the value using JavaScript and put where you want:
<form action="begin-create-done.html" method="get">
City: <input type="text" name="city" id="cityInput">
<input type="submit" value="Submit">
</form>
In JavaScript:
var value = document.getElementByName( "city" ).value;
// or
// var value = document.getElementById( "cityInput" ).value;
reallySimpleWeather.weather({
wunderkey: '',
location: value,
woeid: '',
unit: 'f',
success: function(weather) {
html = '<h2>'+weather.temp+'°'+weather.units.temp+'</h2>';
html += '<ul><li>'+weather.city+', '+weather.region+'</li>';
html += '<li>'+weather.currently+'</li>';
html += '<li>'+weather.wind.direction+' '+weather.wind.speed+' '+weather.units.speed+'</li></ul>';
document.getElementById('weather').innerHTML = html;
},
error: function(error) {
document.getElementById('weather').innerHTML = '<p>'+error+'</p>';
}
});
Please, note that you will need to use the "id" attribute of the input tag to be able to catch this input through JavaScript. Not that inside your code will already used the document.getElementById() function. You will need an div to insert the html generated by the success function and this div must have the id attribute set to "weather".
Also, note that reallySimpleWeather.weather is a function that receives an object with various attributes. You can't set an variable inside this object. It is a syntax error. You must declare it before the reallySimpleWeather.weather call. Take a look above.

I'd give the input an ID (e.g. <input type="text" name="city" id="city">)to make it easy to select say with:
var city = document.getElementById('city');
Then change the line in your plugin call to reference the value:
location: city.value,

Give your input city an id and than you use getElementById to put that city in place for your location variable

AngularJS Filter, set class of of label and input field with validation

I have an Angular app with a list of F1 drivers. I want to put a filter on the table, so I can get drivers by their first or by their last name.
To make this I use following design:
Normally the label and the line of the input are black. I want to check if the input value only is a String value (a-zA-Z). I use following code in my partial view:
<div class="form-group col-xs-5 col-md-3">
<label class="control-label" for="inputError">input must be [a-zA-Z]</label>
<div class="form-control-wrapper">
<input ng-model="nameFilter" type="text" name="nameFilter" class="form-control empty" placeholder="Search Driver name...">
<span class="material-input"></span>
</div>
</div>
This input value is bound with following filter (declared in my controller.js)
$scope.searchFilter = function (driver) {
var re = new RegExp($scope.nameFilter, 'i');
if(! (/[^a-zA-Z]+/).test($scope.nameFilter)){
$scope.nameFilter.class ='control-label';
}
return !$scope.nameFilter || re.test(driver.Driver.givenName) || re.test(driver.Driver.familyName);
};
But this doesn't work.. What am I missing?

Regex
Your Regular expression is wrong, check out its validity here
change it from
/[^a-zA-Z]+/
to
/^[A-Za-z]+$/

JQuery can't get value of dynamically added fields

I have a hidden div with a simple form:
<div id="mb_clookup" style="display: none;">
<strong><font color="#0066CC">Search for existing customers</font></strong><br /><br />
<font color="#FFF">
Postcode: <input type="text" name="cl_zipcode" id="cl_zipcode" />
<span id="cl_search">Search</span>
</font>
</div>
This is displayed when the user clicks a button on the page. The user puts in the ZIP code, click on search and a JSON query is called. I have managed to make the Search button work with .live() but I cannot get the value of the input field. Here is the code:
$(document).ready(function(){
$(document).on( "click", "#cl_search", function() {
var pc = $('#cl_zipcode').val();
if(pc === '') {
alert('Please type in a post code first.');
}
else {
// JSON
}
});
});
Th pc variable comes up empty. I tried:$(this).find('#cl_zipcode').val() this comes up with undefined.
Please advise.

You can use the following
var pc= $("#mb_clookup").find('#cl_zipcode').val();
or
var pc= $("#mb_clookup :input").val();
check fiddle

With regard to $(this).find('#cl_zipcode').val() the input elements is beside the clicked span, so your find will search from the span on down (and it contains nothing aside from the text).
You need to move up the DOM first before you find it.
$(this).parent().find('#cl_zipcode').val()
Please note that as IDs are unique, so your original code is actually fine (so long as you only have one of these added): http://jsfiddle.net/TrueBlueAussie/djqfharu/
If you load more than one of these (you mention dynamic adding of fields) you will need to switch to classes to identify the elements.
e.g
$(document).ready(function(){
$(document).on( "click", ".cl_search", function() {
var pc = $(this).parent().find('.cl_zipcode').val()
if(pc === '') {
alert('Please type in a post code first.');
}
else {
// JSON
}
});
});
This is because browser keeps a fast-lookup dictionary, of IDs vs DOM elements, so only a single entry is retained per ID. The upshot of that is that jQuery can only ever find the first matching element for a search of a duplicated ID. The solution there is to switch to using classes and class-based searched.
I strongly suggest you post the rest of your code as the part shown is not the problem in isolation.

i thing your html code wrong. Becouse tag not in use tag
tag not support HTML5..
change this
<div id="mb_clookup" style="display:block;">
<strong><font color="#0066CC">Search for existing customers</font></strong><br /><br />
<span style="color="#FFF">
Postcode: <input type="text" name="cl_zipcode" id="cl_zipcode" />
<span id="cl_search">Search</span>
</span>
</div>
good luck

Your code is working fine i checked it in jsfiddle by removing display none attribute. You can check it here
HTML
<div id="mb_clookup">
<strong><font color="#0066CC">Search for existing customers</font></strong><br /><br />
<font color="#FFF">
Postcode: <input type="text" name="cl_zipcode" id="cl_zipcode" />
<button id="cl_search">Search</button>
</font>
</div>
JS
$(document).ready(function(){
$(document).on( "click", "#cl_search", function() {
var pc = $('#cl_zipcode').val();
if(pc === '') {
alert('Please type in a post code first.');
}
else {
alert(pc);
}
});
});

AngularJS display alert depending on input value

I am coding a CRUD application in Angular and Web API.
In the create/edit form (same template), I need to display an error message if 2 input fields don't have the same number of comma ','.
I found a way to make it work but I don't like it, I think it needs to be "angularized" but I don't know how.
Controller:
$scope.isColumnCountOk = true;
$scope.checkColumnCountOk = function () { $scope.isColumnCountOk = AdminUtils.isColumnCountOk($scope.item.columnSqlNames, $scope.item.columnTitles) };
Template:
<input type="text" class="form-control" ng-model="item.columnTitles" placeholder="Report Column 1,Report Column 2,Report Column 3,..." ng-blur="checkColumnCountOk()" required />
<div ng-hide="isColumnCountOk">
<br />
<div class="alert alert-danger" ><strong>Warning. </strong>Mismatch between column numbers</div>
</div>
I would like to get rid of the $scope.isColumnCountOk and have the function called directly from the template, without storing the return value in the scope.
Any advice?
Bruno

I think both of these ways should work...
$scope.isColumnCountOk = function () {
return AdminUtils.isColumnCountOk($scope.item.columnSqlNames, $scope.item.columnTitles);
};
<div ng-hide="isColumnCountOk()">
...
</div>
Or
$scope.isColumnCountOk = AdminUtils.isColumnCountOk;
<div ng-hide="isColumnCountOk(item.columnSqlNames, item.columnTitles)">
...
</div>