We Keep Coding

Remove empty object from an array javascript

I'm using bootstrap validator to cloning the input and radio elements.
It is working fine, but i have issue while receiving these values as JavaScript array. Because i always have hidden input and radio elements in the DOM so it send empty object.
How i map my array object to receive values
var kids = $(".form--group").map(function() {
return {
kidName: $(this).find('.thevoornaam').val(),
newDob: $(this).find('.date_of_birth').val(),
}
}).get();
console.log(kids)
I'm receiving values like this..
[{kidName: "Test", newDob:"20"},{kidName: "", newDob:""} ]
Always receive second object with empty string.
How can remove the object from array if values are empty or undefined is..
I hope you guys understand my question.
Thanks in advance.

You can use filter to filter out the empty object like this
var kids = $(".form--group").map(function() {
return {
kidName: $(this).find('.thevoornaam').val(),
newDob: $(this).find('.date_of_birth').val(),
}
}).get();
kids = kids.filter(function (kid) {
return kid.kidName && kid.newDob;
});
console.log(kids)

If you want to exclude the item when every property is empty, undefined or 0;
let obj = [{kidName: "Test", newDob:"20"},{kidName: "", newDob:""} ];
let filtered = obj.filter(e=>{
for(let p in e){
if(e[p]){
return true;
}
}
});
console.log(filtered);

Check the strings before you create the objects:
$(document).ready(function(){
var kids = $(".form--group").map(function() {
var kidName = $(this).find('.thevoornaam').val();
var dob = $(this).find('.date_of_birth').val();
var result_arr = [];
if(kidName || dob)
{
var obj = {kidName: kidName, newDob: dob}
result_arr.push(obj);
}
return result_arr;
}).get();
console.log(kids)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form--group">
<input class="thevoornaam" value="Test Name" />
<input class="date_of_birth" value="Test Date" />
</div>
<div class="form--group">
<input class="thevoornaam" value="" />
<input class="date_of_birth" value="" />
</div>
<div class="form--group">
<input class="thevoornaam" value="Test Name" />
<input class="date_of_birth" value="Test Date" />
</div>

get each div id in for loop

In a for loop based on divs count I need to select each div child so I got to get the id of the div.
this is what I have tried:
var json = [{
'orderId': order,
'attributes': [],
'services': []
}];
var divLength = $('#stepchild div').length;
for (i = 0; i < divLength; i++) {
var fields = {};
$('#divID input').each(function() {
fields[this.name] = $(this).val();
})
$('#divID select').each(function() {
fields[this.name] = $(this).val();
})
json[0]['attributes'].push(fields);
}
<div id="form0">
<input type="text" class="field1">
</div>
<div id="form1">
<input type="text" class="field1">
</div>
<div id="form2">
<input type="text" class="field1">
</div>

You can use a loop like this (basic example):
$('div').each(function()
{
console.log($(this).attr('id'))
})
refs:
https://api.jquery.com/attr/
https://api.jquery.com/jQuery.each/

$('target').each(function()
{
console.log($(this).attr('id'))
});
this will run for each target match . in your case 'div' is your target . you can use find , child attribute for sub search

Welcome to Stack Overflow
You need to use map function here in order to collect ID or value inside the textbox.
Here is an example to get ID:
var json = [{
'orderId': 'order',
'attributes': [],
'services': []
}];
function getDivID()
{
var values = $("#stepchild div").map(function (i, e) {
return $(e).attr('id');
}).get();
json[0]['attributes'].push(values);
console.log("json[0]['attributes'] is now : " + json[0]['attributes']);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="stepchild">
<div id="form0">
<input type="text" class="field1">
</div>
<div id="form1">
<input type="text" class="field1">
</div>
<div id="form2">
<input type="text" class="field1">
</div>
</div>
<button onclick="getDivID()">Click here to get div ID</button>
Using .map() function you can also collect value form each element inside div :
var json = [{
'orderId': 'order',
'attributes': [],
'services': []
}];
function getValue() {
var values = $("#stepchild input").map(function (i, e) {
return $(e).val();
}).get();
json[0]['attributes'].push(values);
console.log("json[0]['attributes'] is now : " + json[0]['attributes']);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="stepchild">
<div id="form0">
<input type="text" class="field1" value="abc">
</div>
<div id="form1">
<input type="text" class="field1" value="xyz">
</div>
<div id="form2">
<input type="text" class="field1" value="something">
</div>
</div>
<button onclick="getValue()">Click here to get value</button>
refs:
http://api.jquery.com/map/

Disclaimer : I know the question is about jquery, but I would like to provide the non-jQuery version :
If you just want the IDs in a list, you can use this :
[...document.querySelectorAll('div')].map(div => div.id)
Or if you need to loop over them and do some processing for each, you can use this :
[...document.querySelectorAll('div')].forEach(div => {
// process the div element here with div.id beeing the ID
});

Within $.fn.each, you can access the current element id with this.id or with the parameter element.id.
Keep in mind that $() will give you a collection. You can write your code like this:
const json = [{
'orderId': order,
'attributes': [],
'services': [],
}];
$('#stepchild div').each(function (index, element) {
let fields = {};
$(element).find('input, select').each(function () {
fields[this.name] = $(this).val();
});
json[0]['attributes'].push(fields);
});

How can I automatically associate a json object key with a multidimensional form field?

I am trying to dynamically populate form fields based on whether or not a json array key exists with the same name.
This is json returned over an ajax call to the server:
{
"title":"My Item Title",
"product_description":{
"1":{
"name":"My Item",
"description":"My Description"
}
},
"image":"main.jpg",
"additional_image":[
{
"image":"img1.jpg",
"sort":1
},
{
"image":"img2.jpg",
"sort":2
}
],
"model":"123",
"quantity":"1"
}
My html form is like this:
<form>
<input type="text" name="title"/>
<input type="text" name="product_description[1][name]"/>
<input type="text" name="product_description[1][description]"/>
<input type="text" name="image"/>
<input type="text" name="additional_image[0][image]"/>
<input type="text" name="additional_image[0][sort]"/>
<input type="text" name="additional_image[1][image]"/>
<input type="text" name="additional_image[1][sort]"/>
<input type="text" name="model"/>
<input type="text" name="quantity"/>
</form>
And my current javascript is like this. There is probably a better way than using "for ...in" as the "key" only returns the parent "product_description" structure and not the underlying object. I try to check for the object, but it is not dynamic.
$.ajax({
url: 'path/to/callback',
type: 'get',
dataType: 'json',
...
success: function(json) {
for (var key in json) {
if (json.hasOwnProperty(key)) {
if (typeof(json[key]) == 'object') {
var obj = json[key];
for (var prop in obj) {
if (obj.hasOwnProperty(prop)) {
if (typeof(json[key]) == 'object') {
var obj2 = obj[prop];
for (var prop2 in obj2) {
$('input[name="'+key+'['+prop+']['+obj[prop]+'['+prop2+']"]').val(json.key);
}
}
}
}
} else {
$('input[name="'+key+'"]').val(json.key);
}
}
}
}
});

One way to solve this is to use underscore's template function.
This function allows you to inject values from a JSON object into a prepared string.
For your solution you can extract the appropriate value from the JSON by creating a dummy string and using the template function.
Example Plunkr here
The bit that does all the work is:
var fields = $('form input[type="text"]');
$.each(fields, function(idx, item) {
item.value = _.template('<%=' + item.name + '%>')(json);
});
This code takes an input field:
<input type="text" name="json.object.array[0].value"/>
and creates a template string: <%=json.object.array[0].value%>
Then it passes that string to underscore and you get the value :)
(Don't forget to include underscore in your html page)

Merging List of JSONs into one JSON in javascript

I have an HTML form and I'm trying to stringify and parse its content into JSON on submission using javascript
for example:
<form id="form1" enctype="multipart/form-data">
<input type="hidden" name="presented" value="1" />
<input type="checkbox" name="RESPONSE" value="ch1">ch1</input>
<input type="checkbox" name="RESPONSE" value="ch2">ch2</input>
<input type="checkbox" name="RESPONSE" value="ch3">ch3</input>
<input id="submit_button" name="submit" type="submit"/>
</form>
and the javascript:
$(document).ready(function () {
$("#submit_button").click(function (e) {
e.preventDefault();
var formData = JSON.parse(JSON.stringify(jQuery('#form1').serializeArray()));
alert(JSON.stringify(formData));
});
});
I'm getting an output like this (considering that only the first two checkboxes are checked):
[{"name":"presented","value":"1"},
{"name":"RESPONSE","value":"ch1"},
{"name":"RESPONSE","value":"ch2"}]
but I'm expecting this result in one JSON with arrays for duplicated keys:
{"presented" : "1", "RESPONSE" : ["ch1", "ch2"]}
jsfiddle here

You will need to write your own serializer. For example to group values of the elements with the same name you could do something like this using Array.prototype.reduce:
$("#submit_button").click(function (e) {
e.preventDefault();
var formData = jQuery('#form1').serializeArray().reduce(function(prev, curr) {
if (prev.hasOwnProperty(curr.name)) {
prev[curr.name] = $.isArray(prev[curr.name]) ? prev[curr.name] : [prev[curr.name]]
prev[curr.name].push(curr.value);
}
else {
prev[curr.name] = curr.value;
}
return prev;
}, {});
document.querySelector('pre').innerHTML = JSON.stringify(formData, null, 4);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" enctype="multipart/form-data">
<input type="hidden" name="presented" value="1" />
<input type="checkbox" name="RESPONSE" value="ch1">ch1</input>
<input type="checkbox" name="RESPONSE" value="ch2">ch2</input>
<input type="checkbox" name="RESPONSE" value="ch3">ch3</input>
<input id="submit_button" name="submit" type="submit"/>
</form>
<pre></pre>

I think that your new object's value should always be an array for consistency. Here's how to build it:
var arr = [{"name":"presented","value":"1"},
{"name":"RESPONSE","value":"ch1"},
{"name":"RESPONSE","value":"ch2"}];
var newObj = {};
arr.forEach(function(item){
if(!newObj.hasOwnProperty(item.name)){
newObj[item.name] = [];
}
newObj[item.name].push(item.value);
});
And here's a way to build it exactly like you want it:
var newObj = {};
arr.forEach(function (item) {
if (!newObj.hasOwnProperty(item.name)) {
newObj[item.name] = item.value;
} else {
if (Object.prototype.toString.call(newObj[item.name]) !== '[object Array]') {
var newItem = newObj[item.name];
newObj[item.name] = [newItem];
}
newObj[item.name].push(item.value);
}
});

Think other than JSON parsing library. It's very simple Java Program using String.split() method that convert Json String into name> without using any library.

Getting HTML form values

How can I get the value of an HTML form to pass to JavaScript?
Is this correct? My script takes two arguments one from textbox, one from the dropdown box.
<body>
<form name="valform" action="" method="POST">
Credit Card Validation: <input type="text" id="cctextboxid" name="cctextbox"><br/>
Card Type: <select name="cardtype" id="cardtypeid">
<option value="visa">Visa</option>
<option value="mastercard">MasterCard</option>
<option value="discover">Discover</option>
<option value="amex">Amex</option>
<option value="diners">Diners Club</option>
</select><br/>
<input type="button" name="submit" value="Verify Credit Card" onclick="isValidCreditCard(document.getElementById('cctextboxid').value,document.getElementById('cardtypeid').value)" />
</body>

HTML:
<input type="text" name="name" id="uniqueID" value="value" />
JS:
var nameValue = document.getElementById("uniqueID").value;

If you want to retrieve the form values (such as those that would be sent using an HTTP POST) you can use:
JavaScript
function getData(form) {
var formData = new FormData(form);
// iterate through entries...
for (var pair of formData.entries()) {
console.log(pair[0] + ": " + pair[1]);
}
// ...or output as an object
console.log(Object.fromEntries(formData));
}
document.getElementById("myForm").addEventListener("submit", function (e) {
e.preventDefault();
getData(e.target);
});
Example: https://codepen.io/kevinfarrugia/pen/Wommgd?editors=1111
Alternatively you could use the below less recommended options:
form-serialize (https://code.google.com/archive/p/form-serialize/)
serialize(document.forms[0]);
jQuery
$("form").serializeArray()

I found this the most elegant solution.
function handleSubmit(e) {
e.preventDefault();
const formData = new FormData(e.target);
const formProps = Object.fromEntries(formData);
}

Here is an example from W3Schools:
function myFunction() {
var elements = document.getElementById("myForm").elements;
var obj ={};
for(var i = 0 ; i < elements.length ; i++){
var item = elements.item(i);
obj[item.name] = item.value;
}
document.getElementById("demo").innerHTML = JSON.stringify(obj);
}
The demo can be found here.

document.forms will contain an array of forms on your page. You can loop through these forms to find the specific form you desire.
var form = false;
var length = document.forms.length;
for(var i = 0; i < length; i++) {
if(form.id == "wanted_id") {
form = document.forms[i];
}
}
Each form has an elements array which you can then loop through to find the data that you want. You should also be able to access them by name
var wanted_value = form.someFieldName.value;
jsFunction(wanted_value);

This is a developed example of https://stackoverflow.com/a/41262933/2464828
Consider
<form method="POST" enctype="multipart/form-data" onsubmit="return check(event)">
<input name="formula">
</form>
Let us assume we want to retrieve the input of name formula. This can be done by passing the event in the onsubmit field. We can then use FormData to retrieve the values of this exact form by referencing the SubmitEvent object.
const check = (e) => {
const form = new FormData(e.target);
const formula = form.get("formula");
console.log(formula);
return false
};
The JavaScript code above will then print the value of the input to the console.
If you want to iterate the values, i.e., get all the values, then see https://developer.mozilla.org/en-US/docs/Web/API/FormData#Methods

My 5 cents here, using form.elements which allows you to query each field by it's name, not only by iteration:
const form = document.querySelector('form[name="valform"]');
const ccValidation = form.elements['cctextbox'].value;
const ccType = form.elements['cardtype'].value;

A one liner for ES6
getFormData = (selector) => Object.fromEntries(new FormData(document.querySelector(selector)))
console.log('Output of getFormData:')
console.log(getFormData('#myTargetForm'))
<!DOCTYPE html>
<html>
<body>
<h2>Get Form Data as Javascript Object</h2>
<form id="myTargetForm">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Define this function in your Javascript:
getFormData = (selector) => Object.fromEntries(new FormData(document.querySelector(selector)))
Then just call with any selector e.g.:
getFormData('#myTargetForm')

Expanding on Atrur Klesun's idea... you can just access it by its name if you use getElementById to reach the form. In one line:
document.getElementById('form_id').elements['select_name'].value;
I used it like so for radio buttons and worked fine. I guess it's the same here.

This is the answer of your question.
You can pass the values of the form fields to the function by using this.<<name of the field>>.value.
And also changed input submit to button submit. Called the function from form.
<body>
<form name="valform" method="POST" onsubmit="isValidCreditCard(this.cctextbox.value, this.cardtype.value)">
Credit Card Validation: <input type="text" id="cctextboxid" name="cctextbox"><br/>
Card Type:
<select name="cardtype" id="cardtypeid">
...
</select>
<br/>
<button type="submit">Verify Credit Card</button>
</body>
Technically you can do it in your function by using document.getElementById("cctextboxid"). But his solution is concise and simple code.

I know this is an old post but maybe someone down the line can use this.
// use document.form["form-name"] to reference the form
const ccForm = document.forms["ccform"];
// bind the onsubmit property to a function to do some logic
ccForm.onsubmit = function(e) {
// access the desired input through the var we setup
let ccSelection = ccForm.ccselect.value;
console.log(ccSelection);
e.preventDefault();
}
<form name="ccform">
<select name="ccselect">
<option value="card1">Card 1</option>
<option value="card2">Card 2</option>
<option value="card3">Card 3</option>
</select>
<button type="submit">Enter</button>
</form>

Please try to change the code as below:
<form
onSubmit={e => {
e.preventDefault();
e.stopPropagation();
const elements = Array.from(e.currentTarget);
const state = elements.reduce((acc, el) => {
if (el.name) {
acc[el.name] = el.value;
}
return acc;
}, {});
console.log(state); // {test: '123'}
}}
>
<input name='test' value='123' />
</form>

Several easy-to-use form serializers with good documentation.
In order of Github stars,
jquery.serializeJSON
jquery-serialize-object
form2js
form-serialize

<form id='form'>
<input type='text' name='title'>
<input type='text' name='text'>
<input type='email' name='email'>
</form>
const element = document.getElementByID('#form')
const data = new FormData(element)
const form = Array.from(data.entries())
/*
form = [
["title", "a"]
["text", "b"]
["email", "c"]
]
*/
for (const [name, value] of form) {
console.log({ name, value })
/*
{name: "title", value: "a"}
{name: "text", value: "b"}
{name: "email", value: "c"}
*/
}

It's easy with one for-of loop you can get all field values even checkboxes values also.
In your HTML you should bind a handlSubmit() on your forms onsubmit event
<form name="contact_form"
id="contact-form"
class="form-controller"
onsubmit="handleSubmit(event)"
>
in your javascript your code should apply the following logic no matter what name your assigned to your fields.
const handleSubmit = (event)=> {
event.preventDefault();
const formData = new FormData(event.target);
formObj = {};
for (const [fieldName] of formData) {
const fieldValue = formData.getAll(fieldName);
formObj[fieldName] = fieldValue.length == 1 ? fieldValue.toString() : fieldValue
}
console.log('formObj',formObj)
}

Quick solution to serialize a form without any libraries
function serializeIt(form) {
return (
Array.apply(0, form.elements).map(x =>
(
(obj =>
(
x.type == "radio" ||
x.type == "checkbox"
) ?
x.checked ?
obj
:
null
:
obj
)(
{
[x.name]:x.value
}
)
)
).filter(x => x)
);
}
function whenSubmitted(e) {
e.preventDefault()
console.log(
JSON.stringify(
serializeIt(document.forms[0]),
4, 4, 4
)
)
}
<form onsubmit="whenSubmitted(event)">
<input type=text name=hiThere value=nothing>
<input type=radio name=okRadioHere value=nothin>
<input type=radio name=okRadioHere1 value=nothinElse>
<input type=radio name=okRadioHere2 value=nothinStill>
<input type=checkbox name=justAcheckBox value=checkin>
<input type=checkbox name=justAcheckBox1 value=checkin1>
<input type=checkbox name=justAcheckBox2 value=checkin2>
<select name=selectingSomething>
<option value="hiThere">Hi</option>
<option value="hiThere1">Hi1</option>
<option value="hiThere2">Hi2</option>
<option value="hiThere3">Hi3</option>
</select>
<input type=submit value="click me!" name=subd>
</form>

<script>
var inputs = document.getElementById("form_id_here").elements;
for (i = 0; i < inputs.length; i++) {
if (inputs[i].type === "text" || inputs[i].type === "textarea") {
console.log(inputs[i].value); // Get value of input tag which you have entered.
}
}
</script>

Some answers above didn't cater for forms with multiple fields with the same name e.g.multiple <input name="categories[]"> so I made this quickly. It expects field with the same name that you want to collect as an array to end in [] as a convention but could be updated to handle other scenarios.
function getFormValues(form) {
const formData = new FormData(form);
return Array.from(formData.entries()).reduce((prev, [inputName, val]) => {
return {
...prev,
[inputName]: inputName.endsWith('[]')
? prev[inputName]
? [...prev[inputName], val]
: [val]
: val,
};
}, {});
}
// alternative if you don't like reducers and nested ternary statements
function getFormValues(form) {
const formData = new FormData(form);
const values = {};
for (const [inputName, val] of formData.entries()) {
if (inputName.endsWith('[]')) {
values[inputName] = values[inputName] ? [...values[inputName], val] : [val];
} else {
values[inputName] = val;
}
}
return values;
}
// then attach this to form submit
function onSubmit(e) {
e.preventDefault();
const values = getFormValues(e.target);
// etc...
}
values gives something like { "single": "something", "categories[]": ["one", "two"] }

<input type="text" id="note_text" />
let value = document.getElementById("note_text").value;