Develop Reference

Only allow numbers and a period in one case and numbers and a comma in another

I have a text input and I am trying to restrict it based on the lang attribute. If the lang is set to fr I want to only allow numbers and a single comma in the input and if it's set to en I want to only allow numbers and a single period in the input. I've got it working for fr so far, so I'm basically just wondering what the replace pattern would be for en.
function formatNum(lang, $this, val) {
let pattern = '';
if (lang === 'fr') {
// allow only numbers and a single comma
pattern = $this.val().replace(/[^0-9,]/g, '').replace(/(,.*?),(.*,)?/, '$1');
} else {
// allow only numbers and a single period
}
if (pattern !== $this.val()) $this.val(pattern);
}
$(function() {
$('input').keyup(function() {
let $this = $(this),
lang = $this.parent().attr('lang'),
val = $this.val();
formatNum(lang, $this, val);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div lang="fr">
<h3>French</h3>
<input type="text" />
</div>
<div lang="en">
<h3>English</h3>
<input type="text" />
</div>

I admit this is likely not a direct answer - parsing a number with internationalization is "hard" in JavaScript and doing this on a keyup event to an input is likely a challenge, breaking as the format gets injected. There ARE ways but...
I suggest you parse it as you enter it and put the text of the format (using standard local string method) in another element and replace the text after the change event fires.
Forgive me refactoring your function but it was doing multiple things which breaks the S in SOLID principles so I just returned the formatted number and used it.
I also added an example of a data attribute which might be more standardized than the "lang" attribute.
Other "ways" would be to store the formatted string in a data attribute (instead of the span) and work from that - the challenge is to "show" yet "parse" - and creating a parsing function for every language (or even a few) is going to be a challenge in my opinion.
function formatNum(lang, val) {
let number = parseFloat(val);
let formattedNumber = number.toLocaleString(lang)
return formattedNumber;
}
$(function() {
$('.number-input').on('keyup', function() {
let $this = $(this),
lang = $this.parent().attr('lang'),
val = $this.val();
lang == "" ? lang : $this.data("language");
let formatted = formatNum(lang, val);
$this.next(".output-of-entry").html(formatted);
}).on('change', function() {
$(this).val($(this).next(".output-of-entry").text());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div lang="fr-FR">
<h3>French</h3>
<input class="number-input" type="text" />
<span class="output-of-entry"></span>
</div>
<div lang="en-US">
<h3>English</h3>
<input class="number-input" type="text" />
<span class="output-of-entry"></span>
</div>
<div>
<h3>English using data</h3>
<input data-language="en-US" class="number-input" type="text" />
<span class="output-of-entry"></span>
</div>

Retrieve multiple value from HTML input and store in JSON key, value[Array]

Good evening all!
I am currently working with google maps api.
The google maps asks for a json format to set directions.
Everything works fine if i make my own json object, but i would like to retrieve data from input fields and store it in the json object.
Right now i can retrieve 1 value from the input field and store it. But i woud like to retrieve multiple values. This is needed to set an direction on the maps. I need to find a way to store the multiple values in an json object as array. Correct my if i wrote some things wrong, i am not a expert :)
"key" : "Array"
See below for the example + Code
This is what i need to try to get:
A user comes to the page and sees 2 input fields, he fills in Amsterdam and Rome but he always needs Paris. So the user press the + icon. Another input field appears and he fills in Paris. when the user submits this below must be the json result from the input fields
"locatie" : ["Berlin", "Amsterdam", "Paris", "Rome"]
This is is my form:
<form onsubmit="return make_json(this);">
Locatie: <input type="text" name="locatie">
<input type="submit" name="" value="Make Trip">
</form>
My js function:
function make_json(form) {
var json = {
"locatie" : form.locatie.value
// this is what works and what i would like to retrieve from multiple input fields
//"locatie" : ["Paris", "Amsterdam"]
};
return json;
}
In the google maps api i call the function and use the json:
var jsonArray = make_json();

You can declare an array and push the values to it when the button is clicked.
// Declare location array
var locations = [];
// Button bindings
var locationButton = document.getElementById("addNewLocation");
locationButton.onclick = addNewLocation;
var displayJsonButton = document.getElementById("displayJsonObject");
displayJsonButton.onclick = displayJsonObject;
// Button functions
function addNewLocation() {
var location = document.getElementById("locationText").value;
locations.push(location);
document.getElementById("locationText").value = "";
}
function makeJsonObject() {
var json = {
location : locations
}
return json;
}
function displayJsonObject() {
var obj = makeJsonObject();
console.log(obj.location);
}
<input id="locationText" type="text" />
<button id="addNewLocation">Add</button>
<button id="displayJsonObject">Display JSON</button>
The results will be populated in the console. I have also returned the JSON object for you in the displayJsonObject() function, which you could use to pass to the API.

You can also try this, if you want to keep showing the locations entered before adding new location.
function addInput() {
var input = document.createElement('input');
input.setAttribute("type", "text");
input.setAttribute("name", "locatie[]");
inputs.appendChild(input);
}
function make_json() {
var form = document.querySelector("form");
var values = [];
var locations = form['locatie[]'];
if (locations.length) {
locations.forEach(function(input) {
values.push(input.value);
});
} else {
values.push(locations.value);
}
var json = {
"locatie": values
};
console.log(json);
return json;
}
<form>
Locatie:
<div id="inputs">
<input type="text" name="locatie[]">
</div>
<button onClick="addInput()">+</button>
<input type="submit" value="Make Trip" onClick="make_json(this)">
</form>
Note: Take care of UI. If user enters more number of inputs, UI may deform.

How to get the value of textbox using id in javascript

I want to get the value of input boxes based on id and name.
Since my id is having comma its not accepting. When i remove comma and one of the id,it shows perfectly.
But, I will get the id as "Text,Demo_1" only. How can i get the value based on this id??
here is the code
HTML
<div id="Text,Demo_1" class="span12">
<label>Notes or Concerns</label>
<div class="control-group">
<input type="text" value="hi" name="view1" class="recommend">
<input type="text" value="hi2" name="view1" class="recommend">
<input type="text" value="hi3" name="view1" class="recommend">
</div>
</div>
Js part
$(function() {
var values = $('#Text,Demo_1 input[name="view1"]').map(function() {
return this.value;
}).get();
alert(values);
});

Get value by Name :
$("[name='view1']").val()
Get value by ID :
$("#[textbox_ID]").val()
Get all text values in array
var inputTypes = [];
$('.control-group input[name="view1"]').each(function(){
inputTypes.push($(this).val());
});

Use an array,
$(function () {
var values = [];
$('#TextDemo_1 input[name="view1"]').each(function () {
values.push($(this).val());
});
console.dir(values);
});

You should escape your comma with \\
var values = $('#Text\\,Demo_1 input[name="view1"]').map(function () {
return this.value;
}).get();
Demo: http://jsfiddle.net/M8Jmz/
But while it works you should consider changing an id to a proper identifier.

Use jQuery selectors to match the begining and end of the ID:
var values = $("div[id^='Text'][id$='Demo_1'] input[name='view1']").map(function() {
...
Edit: Explanation.
[id^='Text'] => Every element which id starts with "Text"
[id$='Demo_1'] => Every element which id ends with "Demo_1"
Putting them together will select every element that match both rules.

var values = $('input[name="view1"]').val();

How to store JSON in a variable

How to store data as JSON like a database,
so that when a user registers the information should be stored in a variable?
Example:
My HTML form consists of input text fields firstname, lastname. Clicking the register button of the form should store the values of firstname and lastname in a variables.
How can I do this:
var txt = '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';

Sounds like you want to go from values in HTML to a JSON string. Assuming <form> looks like this
<form>
<input type="text" name="nm1[]"/><input type="text" name="nm2[]"/>
<input type="text" name="nm1[]"/><input type="text" name="nm2[]"/>
</form>
You can use getElementsByName twice, build an Object and JSON.stringify it
var nm1 = document.getElementsByName('nm1[]'),
nm2 = document.getElementsByName('nm2[]'),
i, o = {
employees: []
};
for (i = 0; i < nm1.length; ++i) {
if (nm1[i].value && nm2[i].value)
o.employees.push({
firstName: nm1[i].value,
lastName: nm2[i].value
});
}
JSON.stringify(o);
DEMO (open console)

You can add data to the actual data structure by appending it to the employees array like
dataobj.employees.push({"firstName":$('input[name=firstn]').val(),
"lastName":$('input[name=lastn]').val() });
Of course, this requires that the JSON was parsed into the dataobj in the first place. It must be serialized again if you want to send it by GET. But it can be POSTed directly as a data object!
You can of course also start with an empty array, initializing dataobj like
var dataobj={ employee: [] };
before the above uptdating command comes into action.
A very late edit ...
Just in case there should be multiple firstname / lastname input fields, then the following will do a "much better" job (as it will have a look at all fields and collect only those where at least one of the names is set):
var dataobj={employees:[]};
function shw(){
$('#out').text(JSON.stringify(dataobj).replace(/{/g,'\n{'));}
$(function(){
$('#clr').click(function(){dataobj.employees=[];shw()});
$('#go').click(function(){
var ln=$('input[name=lastn]').toArray(); // ln: JS-Array of DOM elements
$('input[name=firstn]').each(function(i,fn){ // for each fn DOM-element ...
var f=fn.value,l=ln[i].value; // get values as strings
if (f+l>'') dataobj.employees.push({firstName:f,lastName:l}); // push name object
});shw();})
shw();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="firstn" value="John"><input type="text" name="lastn" value="Doe"><br>
<input type="text" name="firstn" value="Anna"><input type="text" name="lastn" value="Smith"><br>
<input type="text" name="firstn" value="Peter"><input type="text" name="lastn" value="Jones">
<input type="button" id="go" value="append names">
<input type="button" id="clr" value="clear">
<pre id="out"></pre>

Easily use Jquery
var jsonArray;
jsonArray.push($("#firstname").val();
jsonArray.push($("#lastname").val();
var myJsonString = JSON.stringify(jsonArray);

You can use the push method of array to push JSON data. This is shown here - appending-to-a-json-object. Before the data needs to be submitted (say to process.php), stringify it.

How can I create dynamic controls and put their data into an object?

I created a div and a button. when the button clicked, there will be a group of element(included 1 select box and 2 text inputs) inserted into the div. User can add as many group as they can, when they finished type in data of all the group they added, he can hit save button, which will take the value from each group one by one into the JSON object array. But I am stuck in the part how to get the value from each group, so please help, thank you.
The code for the div and the add group button function -- AddExtra() are listed below:
<div id="roomextra">
</div>
function AddExtra() {
$('#roomextra').append('<div class=extra>' +
'<select id="isInset">' +
'<option value="Inset">Inset</option>' +
'<option value="Offset">OffSet</option>' +
'</select>' +
'Length(m): <input type="text" id="insetLength">' +
'Width(m): <input type="text" id="insetWidth">' +
'Height(m): <input type="text" id="insetHeight">' +
'</div>');
}
function GetInsetOffSetArray (callBack) {
var roomIFSDetail = [{
"IsInset": '' ,
"Length": '' ,
"Width": '' ,
"Height": ''
}];
//should get all the value from each group element and write into the array.
callBack(roomIFSDetail);
}

This should just about do it. However, if you're dynamically creating these groups, you'll need to use something other than id. You may want to add a class to them or a data-* attribute. I used a class, in this case. Add those classes to your controls so we know which is which.
var roomIFSDetail = [];
var obj;
// grab all of the divs (groups) and look for my controls in them
$(.extra).each(function(){
// create object out of select and inputs values
// the 'this' in the selector is the context. It basically says to use the object
// from the .each loop to search in.
obj = {
IsInset: $('.isInset', this).find(':selected').val() ,
Length: $('.insetLength', this).val() ,
Width: $('.insetWidth', this).val() ,
Height: $('.insetHeight', this).val()
};
// add object to array of objects
roomIFSDetail.push(obj);
});

you'd better not to use id attribute to identity the select and input, name attribute instead. for example
$('#roomextra').append('<div class=extra>' +
'<select name="isInset">' +
'<option value="Inset">Inset</option>' +
'<option value="Offset">OffSet</option>' +
'</select>' +
'Length(m): <input type="text" name="insetLength">' +
'Width(m): <input type="text" name="insetWidth">' +
'Height(m): <input type="text" name="insetHeight">' +
'</div>');
}
and then, usr foreach to iterate
$(".extra").each(function() {
var $this = $(this);
var isInset = $this.find("select[name='isInset']").val();
var insetLength = $this.find("input[name='insetLength']").val();
// ... and go on
});

A common problem. A couple things:
You can't use IDs in the section you're going to be repeating, because IDs in the DOM are supposed to be unique.
I prefer to use markup where I'm writing a lot of it, and modify it in code rather than generate it there.
http://jsfiddle.net/b9chris/PZ8sf/
HTML:
<div id=form>
... non-repeating elements go here...
<div id=roomextra>
<div class=extra>
<select name=isInset>
<option>Inset</option>
<option>OffSet</option>
</select>
Length(m): <input id=insetLength>
Width(m): <input id=insetWidth>
Height(m): <input id=insetHeight>
</div>
</div>
</div>
JS:
(function() {
// Get the template
var container = $('#roomextra');
var T = $('div.extra', container);
$('#addGroup').click(function() {
container.append(T.clone());
});
$('#submit').click(function() {
var d = {};
// Fill d with data from the rest of the form
d.groups = $.map($('div.extra', container), function(tag) {
var g = {};
$.each(['isInset', 'insetLength', 'insetWidth', 'insetHeight'], function(i, name) {
g[name] = $('[name=' + name + ']', tag).val();
});
return g;
});
// Inspect the data to ensure it's what you wanted
debugger;
});
})();
So the template that keeps repeating is written in plain old HTML rather than a bunch of JS strings appended to each other. Using name attributes instead of ids keeps with the way these elements typically work without violating any DOM constraints.
You might notice I didn't quote my attributes, took the value attributes out of the options, and took the type attributes out of the inputs, to keep the code a bit DRYer. HTML5 specs don't require quoting your attributes, the option tag's value is whatever the text is if you don't specify a value attribute explicitly, and input tags default to type=text if none is specified, all of which adds up to a quicker read and slimmer HTML.

Use $(".extra").each(function() {
//Pull info out of ctrls here
});
That will iterate through all of your extra divs and allow you to add all values to an array.