appending a json file with javascript - javascript

I have an existing json file (data.json) that I would like to append with information captured from a form.
I have the form outputting json but I am not sure how to go about getting this to add to my existing json file.
So the form looks like this:
<form id="test" action="#" method="post">
<div class="form-group">
<label for="department">Department:</label>
<input class="form-control" type="text" name="department" id="department" />
</div>
<div class="form-group">
<label for="role">Role title:</label>
<input class="form-control" type="text" name="role" id="role" />
</div>
<div class="form-group">
<label for="pay_status">Pay status:</label>
<input class="form-control" type="text" name="pay_status" id="pay_status"/>
</div>
<div class="form-group">
<label for="typicalposts">Typical number of posts in a year:</label>
<input class="form-control" type="text" name="typicalposts" id="typicalposts"/>
</div>
<div class="form-group">
<label for="email">Restrictions:</label>
<input class="form-control" type="text" name="restrictions" id="restrictions" />
</div>
<div class="form-group">
<label for="recruitment_date">Recruitment date:</label>
<input class="form-control" type="date" name="recruitment_date" id="recruitment_date" />
</div>
<div class="form-group">
<label for="weblink">Weblink:</label>
<input class="form-control" type="text" name="weblink" id="weblink" />
</div>
<div class="text-center">
<p>
<input type="submit" value="Send" class="btn btn-primary center_block" />
</p>
</div>
</form>
<pre id="output" ></pre>
And the js I have to turn this data to json is:
(function() {
function toJSONString( form ) {
var obj = {};
var elements = form.querySelectorAll( "input, select, textarea" );
for( var i = 0; i < elements.length; ++i ) {
var element = elements[i];
var name = element.name;
var value = element.value;
if( name ) {
obj[ name ] = value;
}
}
return JSON.stringify( obj );
}
document.addEventListener( "DOMContentLoaded", function() {
var form = document.getElementById( "test" );
var output = document.getElementById( "output" );
form.addEventListener( "submit", function( e ) {
e.preventDefault();
var json = toJSONString( this );
output.innerHTML = json;
}, false);
});
})();
This shows the json in #output for the moment, I would like what is being shown here to be appended to data.json instead
Thanks for your help

My files are hosted on a server that I dont have access too which is why I would like to do this via js
So BBC News have an HTML document at http://www.bbc.co.uk/news. Would it be a good idea if it was possible for my browser to edit the page and save it back to the server?
It is absolutely impossible to do what you want, because it would require that any old browser could edit any old file on any old server.
In order to change data on the server, you have to have the cooperation of the server (which you say you don't have).

Related

How clear form after submit

I made some little project with adding element to DOM. It's working but I don't know how to clear form after submit. I need to assign a blank value? At what point? Sorry, Im new, please don't bite. Thanks.
const addElement = (e, node, txt, attr, value) => {
e.preventDefault();
const element = document.createElement(node);
if(txt){
const text = document.createTextNode(txt);
element.appendChild(text);
}
if(attr){
element.setAttribute(attr, value)
}
document.querySelector('.content').appendChild(element);
}
const addForm = document.querySelector('.form--add');
addForm.addEventListener('submit', (e) => addElement(
e,
addForm.elements.node.value,
addForm.elements.text.value,
addForm.elements.attr.value,
addForm.elements.value.value,
));
<div class="form-container">
<form class="form form--add">
<h1 class="form__title">Add element to DOM</h1>
<input type="text" class="form__input" name="node" placeholder="element html" required>
<input type="text" class="form__input" name="text" placeholder="txt in element html">
<input type="text" class="form__input" name="attr" placeholder="attr" required>
<input type="text" class="form__input" name="value" placeholder="attr value" required>
<button class="form__button">Add element</button>
</form>
<form class="form form--search">
<h1 class="form__title">Search DOM</h1>
<input type="text" class="form__input" placeholder="szukana nazwa elementu" required>
<input type="submit" class="form__button" value="znajdź i pokaż informacje">
</form>
</div>
<div class="result"></div>
<div class="content"></div>
<footer class="footer">Stopka</footer>
<script src="main.js"></script>
Thank you
Try addForm.reset()
or
declare an id for suppose form_id then paste below code after submit
document.getElementById("form_id ").reset();
addForm.addEventListener('submit', (e) => addElement(
e,
addForm.elements.node.value,
addForm.elements.text.value,
addForm.elements.attr.value,
addForm.elements.value.value,
addForm.getElementsByTagsName('input').forEach(el => {
el.value = ''
})
));

How do I group inputs in Local storage to be one "Event" categorized by my Date time input

In my app I collect information from the user and store it in Local storage using javascript like this.
Event Name (1 to 20 characters):
<input type="text" id="eventname" name="eventname" required
minlength="1" maxlength="20" size="20">
<label for="datetime">Event Date and Time:</label>
<input type="datetime-local" id="date" name="date" required
minlength="1" maxlength="20" size="20">
<label for="eventlocation">Event Location (1 to 20 characters):</label>
<input type="text" id="location" name="location" required
minlength="1" maxlength="20" size="20">
<label for="notes">Notes (0 to 50 characters): </label>
<input type="text" id="notes" name="notes" required
minlength="0" maxlength="50" size="50">
<script src="app.js"></script>
I then have an app.js document which puts it into local storage
const locationTxt = document.querySelector('#location');
locationTxt.addEventListener('change', (event) => {
localStorage.setItem('location', event.target.value);
function getSavedData() {
console.log('location', localStorage.getItem('location'));
(except i have these fucntions for each of the inputs.)
How Would i go about taking all these inputs in locale storage and displaying it as 1 event that is able to be categorized by time?
One way would be to store event data in an object:
{
'01-02-1900': [
... // Array of events
],
'01-01-1900': [
... // Array of events
],
...
}
And then using JSON.parse and JSON.stringify to read/write to localStorage. 😊
For instance:
/**
* This override localStorage in Stack Snippet
*/
const customStorage = { data: {} };
customStorage.getItem = index => customStorage.data[index] || null;
customStorage.setItem = (index, payload) =>
(customStorage.data[index] = payload);
/**
* Replace customStorage with localStorage below.
*/
const inputs = document.querySelectorAll("input");
const storageIndex = "myTestStorage";
const storeInLocal = formData => {
const { date, event } = formData;
const toStore = JSON.parse(customStorage.getItem(storageIndex)) || {};
if (!toStore[date]) toStore[date] = [];
toStore[date].push(event);
customStorage.setItem(storageIndex, JSON.stringify(toStore));
};
const readForm = () => {
let values = {};
inputs.forEach(({ name, value }) => {
values[name] = value;
});
const { date, eventname, location, notes } = values;
return {
date,
event: {
eventname,
location,
notes
}
};
};
const outputStorage = () => {
const storage = customStorage.getItem(storageIndex) || "";
document.getElementById("output").innerText = storage;
};
document.getElementById("eventForm").addEventListener("submit", e => {
e.preventDefault();
const formData = readForm();
storeInLocal(formData);
outputStorage();
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Store form data in localStorage</title>
<link
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
rel="stylesheet"
/>
<style>
pre {
white-space: pre-wrap;
}
</style>
</head>
<body>
<main id="app" role="main" class="container">
<form id="eventForm">
<div class="form-group row">
<label for="eventname">Event Name</label>
<div class="col-sm-6">
<input
type="text"
id="eventname"
name="eventname"
required
minlength="1"
maxlength="20"
/>
</div>
</div>
<div class="form-group row">
<label for="datetime">Event Date and Time:</label>
<div class="col-sm-6">
<input
type="datetime-local"
id="date"
name="date"
required
minlength="1"
maxlength="20"
/>
</div>
</div>
<div class="form-group row">
<label for="eventlocation">Event Location</label>
<div class="col-sm-6">
<input
type="text"
id="location"
name="location"
required
minlength="1"
maxlength="20"
/>
</div>
</div>
<div class="form-group row">
<label for="notes">Notes</label>
<div class="col-sm-6">
<input
type="text"
id="notes"
name="notes"
required
minlength="0"
maxlength="50"
/>
</div>
</div>
<button type="submit" class="btn btn-primary">Save</button>
</form>
<h1 class="h4">Output</h1>
<p>Hit "save" multiple times, and change the date occasionally.
<p>
<pre id="output"></pre>
</p>
</main>
</body>
</html>

Trying to implement closure on event handler? Error: undefined

I have trying to get the values out of a form when the register button is clicked.
setupFormUI() and the relevant form fields are saved in variables
$($rego_form).on("submit", getRegistrationFormValue); is called - a handler should be able to have access to setupFormUI() variables (closure) but it seems to not do anything
ISSUE: getRegistrationFormValue doesn't log anything. I can make it work if I pass arguments to the function... but I want to use
closure
setupFormUI();
function setupFormUI() {
var $name = $("#name");
var $age = $("#age");
var $department = $("#department");
var $position = $("#position");
var $rego_form = $("#rego-form");
$($rego_form).on("submit", getRegistrationFormValue);
}
function getRegistrationFormValue() {
// alert("asdasd");
var name = $name.val();
var age = $age.val();
var department = $department.val();
var position = $position.val();
console.log("----->", name, age, position, department);
}
html
<form id="rego-form">
<div class="row">
<div class="col-md-5">
<div class="form-group">
<label>Company (disabled)</label>
<input type="text" class="form-control" disabled placeholder="Company" value="Creative Code Inc.">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>name</label>
<input type="text" id="name" class="form-control" placeholder="name" value="michael">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="exampleInputEmail1">Age</label>
<input id="age" class="form-control" placeholder="age">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Department Name</label>
<input type="text" id="department" class="form-control" placeholder="department" value="Marketing">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Position</label>
<input type="text" id="position" class="form-control" placeholder="position" value="social media manager">
</div>
</div>
</div>
<button type="submit" id="rego-user-btn" class="btn btn-info btn-fill pull-right">Register</button>
<div class="clearfix"></div>
</form>
You need the variables to be in scope, you can use an anonymous closure as a callback to achieve this.
setupFormUI();
function setupFormUI() {
var $name = $("#name");
var $age = $("#age");
var $department = $("#department");
var $position = $("#position");
var $rego_form = $("#rego-form");
$rego_form.on("submit", function(){
var name = $name.val();
var age = $age.val();
var department = $department.val();
var position = $position.val();
console.log("----->", name, age, position, department);
});
}
An alternative to the accepted answer — give the "handler" a meaningful context of this with Function.prototype.bind(), or maybe just use the ES6 class.
setupFormUI();
function setupFormUI() {
var args = {
$name: $("#name"),
$age: $("#age"),
$department: $("#department"),
$position: $("#position"),
$rego_form: $("#rego-form")
}
args.$rego_form.submit(getRegistrationFormValue.bind(args));
}
function getRegistrationFormValue(e) {
var name = this.$name.val();
var age = this.$age.val();
var department = this.$department.val();
var position = this.$position.val();
console.log("----->", name, age, position, department);
e.preventDefault();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="rego-form" action="#">
<input id="name" value="John Doe" />
<input id="age" value="37" />
<input id="department" value="Some dept" />
<input id="position" value="Debt collector" />
<button type="submit">Submit</button>
</form>
This is no closure, if the variable in setupFormUI is referenced, it is a closure.
getRegistrationFormValue is just a variable whose function is passed directly to the event trigger (and is asynchronous), note that it is not executed in setupFormUI, nor is it defined in setupFormUI, When it is executed, it has nothing to do with setupFormUI.
Mike Zinn's answer defines an anonymous function in setupFormUI, which in turn refers to the variable in setupFormUI, which is a closure.

Second callback does not work

I call postAjax on button click, which calls signupUser, this works fine, but then I want signupUser to call showWelcomeMessage which for some reason it doesn't work. I get no error in the console but ´no success message shows up in the HTML´. I am also thinking that maybe the way I am targeting the html is not correct ( and there is no problem with the callback itself ) and that´s why I do not see any message.
NOTE: The sSuccessMessage should show up on the LOGIN page (html div), cause after succesfull signup, SIGNUP page ( html div ) gets hidden and LOGIN shows up.
Please help me find what´s wrong.
// GLOBAL ARRAY for storing any DATA from the SERVER
var ajDataFromServer = [];
/************************************************************************/
/************************************************************************/
/************************************************************************/
// Main ajax function using callback for posting data to the server
function postAjax( sUrl , frmData, callback ){
var ajax = new XMLHttpRequest();
ajax.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var ajDataFromServer = JSON.parse(this.responseText);
callback( ajDataFromServer, showSuccessMessage );
}
}
ajax.open( "POST", sUrl , true );
var jFrm = new FormData( frmData );
ajax.send( jFrm )
}
// DO the SIGNUP, POST data to the SERVER with AJAX
btnSignupForm.addEventListener("click", function (e) {
//var lblErrorMessage = e.target.parentNode.nextSibling.contains.classList("lblErrorMessage");
postAjax("api_signup_users.php", frmSignup, signupUser);
});
function signupUser( ajUserDataFromServer, showSuccessMessage ) {
if ( ajUserDataFromServer.status == "ok" ) {
//console.log( "SIGNUP SUCCESFULL" );
pageLogin.style.display = "flex";
pageSignup.style.display = "none";
showSuccessMessage( "Account succesfully created - Signup please" );
} else {
//console.log( "SIGNUP FAIL - TRY AGAIN" );
pageViewProducts.style.display = "none";
pageLogin.style.display = "none";
pageSignup.style.display = "flex";
lblSignupErrorMessage.innerHTML = "";
var sSignupErrorMessage = "Signup Failed - Try again";
lblSignupErrorMessage.insertAdjacentHTML( 'beforeend', sSignupErrorMessage );
}
}
/************************************************************************/
/************************************************************************/
/************************************************************************/
function showSuccessMessage ( sSuccessMessage ) {
var lblErrorMessage = document.querySelector(".lblErrorMessage");
lblErrorMessage.innerHTML = "";
var sSuccessMessage = sSuccessMessage.fontcolor( "#549839" );
lblErrorMessage.insertAdjacentHTML('beforeend', sSuccessMessage);
}
Here is the HTML part:
<!-- SIGNUP for USERS and ADMIN -->
<div id="pageSignup" class="page popup">
<div class="wrapper">
<h3>SIGNUP</h3>
<form class="form" id="frmSignup">
<input type="text" name="txtEmailorPhoneNumber" placeholder="Mobile number or Email" required>
<input type="text" name="txtName" placeholder="Name" required>
<input type="text" name="txtLastName" placeholder="Lastname" required>
<input type="password" name="txtPassword" placeholder="Password" required>
<div class="lblFileUpload">
<p>Select your picture:</p>
<input type="file" name="fileUserImage" required>
</div>
<button type="button" class="btnForm" id="btnSignupForm">Signup</button>
<div class="lblFormExtention">
<p class="pyesAccount">Already have an account?</p>
<button type="button" class="btnShowPage" id="btnLogin" data-showThisPage="pageLogin">Login</button>
</div>
</form>
<h3 class="lblErrorMessage" id="lblSignupErrorMessage"></h3>
</div>
</div>
<!-- ********************************************************************** -->
<!-- ********************************************************************** -->
<!-- ********************************************************************** -->
<!-- LOGIN for USERS and ADMIN -->
<div id="pageLogin" class="page popup">
<div class="wrapper">
<h3>LOGIN</h3>
<form class="form" id="frmLogin">
<input type="text" name="txtEmailorPhoneNumber" placeholder="Mobile number or Email" required>
<input type="text" name="txtPassword" placeholder="Password" required>
<button type="button" class="btnForm" id="btnLoginForm">Login</button>
<div class="lblFormExtention">
<p class="pnoAccount">Don´t have an account?</p>
<button type="button" class="btnShowPage" id="btnSignup">Signup</button>
</div>
</form>
<h3 class="lblErrorMessage" id="lblLoginErrorMessage"></h3>
</div>
</div>
<!-- ********************************************************************** -->
<!-- ********************************************************************** -->
<!-- ********************************************************************** -->
<!-- SUBSCRIBE for USERS -->
<div id="pageSubscribe" class="page popup">
<div class="wrapper">
<h3>SUBSCRIBE TO OUR NEWSLETTER</h3>
<form class="form" id="frmSubscribe">
<input type="text" name="txtEmail" placeholder="Email" required>
<input type="text" name="txtName" placeholder="Name" required>
<input type="text" name="txtLastName" placeholder="Lastname" required>
<input type="text" name="txtAddress" placeholder="Address" required>
<div id="mapinForm">
<!-- Generated dynamically -->
</div>
<button type="button" class="btnForm" id="btnSubscribeForm">Subscribe</button>
</form>
<h3 class="lblErrorMessage" id="lblSubscribeErrorMessage"></h3>
</div>
</div>
When you query element via document.querySelector(".lblErrorMessage") you get your first element of that class which is <h3 class="lblErrorMessage" id="lblSignupErrorMessage"></h3> and it's hidden at the time you call showSuccessMessage().
You probably need to query element by its ID, using document.getElementById()
Update:
If you don't want to query each element by ID, your solution will be to update every .lblErrorMessage element:
function showSuccessMessage ( sSuccessMessage ) {
Array.prototype.forEach.call(document.querySelectorAll(".lblErrorMessage"), function (el) {
el.innerHTML = "";
el.insertAdjacentHTML('beforeend', sSuccessMessage.fontcolor( "#549839" ));
// or simply use the following form:
// el.innerHTML = sSuccessMessage.fontcolor( "#549839" );
});
}
It works this way, however I am not sure if this is the most optimal way.
function showSuccessMessage ( sSuccessMessage ) {
var alblMessages = document.getElementsByClassName( "lblMessage" );
for ( var i = 0; i < alblMessages.length; i++ ) {
alblMessages[i].insertAdjacentHTML('beforeend', sSuccessMessage.fontcolor( "#549839" ));
}
}

Update css settings with an object received

I am trying to modify my css with settings which I received from an object.
I send the object after the user select the options from a form.
Now I want to use this to change my layout, but I don't know exactly how.
My template looks like this
div class="btn btn-primary" ng-click="showMenu()">Layout Settings</div>
<div ng-show="themeSelected">
<form>
<div class="row">
<div>
<div class="form-group">
<label>Background color for views</label>
<input type="text" name="background_color" id="background_color" ng-model="selectedLayout.background_color" class="form-control" />
</div>
<div class="form-group">
<label>Background image</label>
<input type="file" name="background_image" id="background_image" ng-model="selectedLayout.background_image" class="form-control" style="width:25%" />
</div>
<div class="form-group">
<label>Buttons color</label>
<input type="text" name="buttons_color" id="buttons_color" ng-model="selectedLayout.buttons_color" class="form-control" />
</div>
<div class="form-group">
<label>Buttons size</label>
<input type="text" name="buttons_size" id="buttons_size" ng-model="selectedLayout.buttons_size" class="form-control" placeholder="13px" style="width:5%" />
</div>
<div class="form-group">
<label>Buttons font color</label>
<input type="text" name="buttons_font_color" id="buttons_font_color" ng-model="selectedLayout.buttons_font_color" class="form-control" />
</div>
<div class="form-group">
<label>Headers size</label>
<input type="text" name="headers_size" id="headers_size" ng-model="selectedLayout.headers_size" class="form-control" placeholder="13px" style="width:5%" />
</div>
<div class="form-group">
<label>Headers color</label>
<input type="text" name="headers_color" id="headers_color" ng-model="selectedLayout.headers_color" class="form-control" />
</div>
<div class="form-group">
<label>Info size</label>
<input type="text" name="info_size" id="info_size" ng-model="selectedLayout.info_size" class="form-control" placeholder="13px" style="width:5%" />
</div>
<div class="form-group">
<label>Info font color</label>
<input type="text" name="info_font_color" id="info_font_color" ng-model="selectedLayout.info_font_color" class="form-control" />
</div>
</div>
</div>
</form>
<button class="btn btn-primary" ng-click="saveChanges(selectedLayout)">Save</button>
<button class="btn btn-primary" ng-click="cancel()">Cancel</button>
<div style="color: red" ng-show="errors.length > 0">{{errors}}</div>
</div>
And when I press Save button all those defined above are in an object. Now I want to use those settings to actually change my layout.
This is my controller where i defined the saveChanges
'use strict';
(function () {
angular.module('routerApp').controller('LayoutController', function ($scope,layoutRepository) {
$scope.showMenu = function() {
$scope.themeSelected = true;
};
$scope.cancel = function() {
$scope.themeSelected = false;
};
$scope.saveChanges = function (selectedLayout) {
layoutRepository.saveLayoutInfo(selectedLayout);
$scope.themeSelected = false;
};
$scope.selectedLayout = {};
window.model = $scope.selectedLayout;
});
}());
This is the layoutRepository
'use strict';
(function () {
angular.module('routerApp').factory('layoutRepository', function ($http) {
return {
saveLayoutInfo: function (selectedLayout) {
console.log(selectedLayout);
$http({
method: "POST",
url: "/api/LayoutSettings",
data: selectedLayout,
cache: false
});
}
};
});
}());
You can use this. It will take your data, retrieve the classnames, keys and values from it and appends it to the correct element:
var data = data.split("\n"); //split the received data on a new line
for (var i = 0; i < data.length; i++)
{
var className = data[i].substr(0, data[i].indexOf("_")); //classname = part before the "_"
var csskey = data[i].substr(data[i].indexOf("_")+1, data[i].indexOf(":");
var cssvalue = data[i].substr(data[i].indexOf(":")+1).trim().replace("\"",""); strip whitespaces and quotations
loadCSSIntoControl(className, {key:csskey, value : cssvalue });
}
function loadCSSIntoControl(classname, css)
{
if (css.key == "size")
{
css.key = "font-size";
}
//iterate over all elements using Array.prototype.map
Array.prototype.map.call(document.querySelectorAll("."+classname), function(elem) {
elem.style[css.key.replace("_", "-")] = css.value; //replace underscore with dash
});
}
Note: if the first part isn't a class name, you can easily change this to another type of selector.
Bind the settings to a scope (are they an object/json? Your output seems odd)
<button data-ng-style="{
background: selectedLayout.buttons_color,
color: selectedLayout.buttons_font_color,
fontSize: selectedLayout.buttons_size
}">Button</button>
This is assuming the data looks like this:
selectedLayout = {
buttons_color: "rgb(83, 255, 0)",
buttons_font_color: "rgb(255, 247, 0)",
buttons_size: "11px",
headers_color: "rgb(187, 52, 202)",
headers_size: "18px",
info_font_color: "rgb(17, 15, 15)",
info_size: "12px"
}

Categories