We Keep Coding

How to display multiple object values in alert box using javascript

function myFunction()
{
alert(document.getElementById("myname").value+','+document.getElementById("myphone")+','+document.getElementById("mycountry")+','+document.getElementById("myemail"));
}

it seems pretty straightforward to me
I just refactor a bit your function
function myFunction() {
const message = ['myname', 'myphone', 'mycountry', 'myemail']
.map(id => document.getElementById(id).value)
.join(',')
alert(message);
}
<div>
<input id="myname" placeholder="myname" />
<input id="myphone" placeholder="myphone" />
<input id="mycountry" placeholder="mycountry" />
<input id="myemail" placeholder="myemail" />
</div>
<div>
<button onclick="myFunction()">Show alert</button>
</div>

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 store a value from a date and time form

I have a reminder app I am working on and I'm not able to store the date and time, only the name and a description. For now I just need to get it into local storage and then deal with retrieving the later.
let reminders = [];
const addReminders = (ev) => {
ev.preventDefault();
let reminder = {
ReminderInput: document.getElementById('ReminderInput').value,
InfoInput: document.getElementById('InfoInput').value
}
localStorage.setItem('ReminderInput', JSON.stringify(ReminderInput));
localStorage.setItem('InfoInput', JSON.stringify(InfoInput));
localStorage.setItem('DateInput' JSON.stringify(DateInput));
}
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('btn').addEventListener('click', addReminders);
});
<form id="todoForm">
<label for="ReminderInput">Reminder</label>
<input class="u-full-width" type="text" id="ReminderInput">
<label for="DateInput">Date</label>
<input class="u-full-width" type="datetime-local" id="DateInput">
<label for="InfoInput">Additional Information</label>
<textarea class="u-full-width" type="text" placeholder="Remember to..." id="InfoInput"></textarea>
<button type="button" id="btn" class="button-primary">Add Reminder</button>
</form>

Hers' the code that needs to be corrected, screenshot to show it works:
let reminder = {
ReminderInput: document.getElementById('ReminderInput').value,
InfoInput: document.getElementById('InfoInput').value,
DateInput: document.getElementById('DateInput').value
}
localStorage.setItem('ReminderInput', JSON.stringify(reminder.ReminderInput));
localStorage.setItem('InfoInput', JSON.stringify(reminder.InfoInput));
localStorage.setItem('DateInput',JSON.stringify(reminder.DateInput));
}

Sumbit user name and surname and go to the next page

I can't figure out how to connect function that will save name and surname in local storage and go to the other page. If you could point out the problem I would be very grateful :)
index.html
<form id="from" action="" method="post">
<div>
<pre> <label for="name">Име</label></pre>
<input id="name" name="name" type="text" required>
<br>
<pre><label for="surname"> Презиме </label></pre>
<input id="surname" surname="surname" type="text" required>
<br><br>
</div>
<button onclick="sumbit()"> Започни тест </button>
</form>
script.js
let infs = [];
const addInf= (ev)=>{
ev.preventDefault(); //to stop the form submitting
let inf = {
id: Date.now(),
name: document.getElementById('name').value,
surname: document.getElementById('surname').value
}
infs.push(inf);
document.forms[0].reset(); // to clear the form for the next entries
//saving to LS
localStorage.setItem('MyInfList', JSON.stringify(infs) );
}
document.addEventListener('DOMContentLoaded', ()=>{
document.getElementById('btn').addEventListener('click', addInf);
});

Try this, use window.location for redirecting to another page, it has same functionality as href.
<form id="from" action="" method="post">
<div>
<pre> <label for="name">Име</label></pre>
<input id="name" name="name" type="text" required>
<br>
<pre><label for="surname"> Презиме </label></pre>
<input id="surname" surname="surname" type="text" required>
<br><br>
</div>
<a><button id="btn"> Започни тест </button> </a>
</form>
<script>
let infs = [];
const addInf = (ev) => {
ev.preventDefault(); //to stop the form submitting
let inf = {
id: Date.now(),
name: document.getElementById('name').value,
surname: document.getElementById('surname').value
}
infs.push(inf);
//saving to LS
localStorage.setItem('MyInfList', JSON.stringify(infs));
document.forms[0].reset(); // to clear the form for the next entries
window.location = "quiz.html"
}
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('btn').addEventListener('click', addInf);
});
</script>

How to send multiple forms data in one shot to server using angularjs?

Hi I am developing web application in angularjs. I have two forms in one html page. Below is the structure.
<form name="form1">
<input type="text" name="fname" />
<input type="text" name="lname" />
<input type="submit" value="Next" />
</form>
<form name="form2">
<input type="text" name="address" />
<input type="text" name="state" />
<input type="submit" value="Next" />
</form>
On clicking on the next submit button of first form i want to validate first form and i want to scroll to second form and disable the first form.
On clicking on the next submit button of form2 i want to validate second form and i want to submit data to server using $http from both forms(form1 and form2).
May i know is this is possible to achieve this? Also may i know is this is the right way i am following or something else i have to do with above requirement? Any suggestion or help would be greatly appreciated. Thank you.

You can bind all your values to a common object. I am enabling the second form after submitting the first form. In second forms submit function, you just have to loop through the values of common object and append it to formData. If you don't have any reason for having two forms, you can consolidate it into one.
Note: I have not added any form validations. For adding form validations, please refer https://codepen.io/sevilayha/pen/xFcdI
HTML:
<form name="form1" ng-submit="enableForm2()">
<input type="text" name="fname" ng-model="obj.fname" />
<input type="text" name="lname" ng-model="obj.lname" />
<input type="submit" value="Next" />
</form>
<form name="form2" ng-show="enableForm" ng-submit="finalSubmit()">
<input type="text" name="address" ng-model="obj.address" />
<input type="text" name="state" ng-model="obj.state" />
<input type="submit" value="Next" />
</form>
JS:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$scope.obj = {};
$scope.enableForm = false;
$scope.enableForm2 = function() {
$scope.enableForm = true;
}
$scope.finalSubmit = function() {
$http({
method: 'POST',
url: YourURL,
withCredentials: true,
headers: {
'Content-Type': undefined
},
data: {},
transformRequest: function(data, headersGetter) {
var formData = new FormData();
angular.forEach($scope.obj, function(value, key) {
formData.append(key, value);
})
return formData;
}
}).then(function(data) {
$scope.enableForm=false;
}).catch(function(data, status) {
})
}
});

You can acheive it vai an Ajax Call not by direct Submit. Moreover Form Submit is not required. (Adding Form tag is optional)
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.4/angular-material.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>Personal Info</p>
<input type="text" ng-model="form1.fname" name="fname"/>
<input type="text" ng-model="form1.lname" name="lname"/>
<input type="button" ng-click="SubmitForm()" value="Next"/>
<p>Address Info</p>
<input type="text" ng-model="form2.address" name="address"/>
<input type="text" ng-model="form2.state" name="state"/>
<input type="button" ng-click="SubmitForm()" value="Next"/>
</div>
<script>
var app = angular.module('myApp', ['ngMaterial']);
app.controller('myCtrl', function ($scope, $http, $q, HTTPService) {
$scope.form1 = {
fname: '',
lname: ''
};
$scope.form2 = {
address: '',
state: ''
};
$scope.SubmitForm = function () {
let submitFormData = {
form1: $scope.form1,
form2: $scope.form2
};
HTTPService.SubmitData(submitFormData);
}
});
app.factory('HTTPService', function ($http, $q) {
return {
SubmitData: function (formData) {
let apiUrl = 'http://localhost:2000/...';
var req = {
method: 'POST',
url: apiUrl + "SaveData.php",
headers: {
"Content-Type": "application/json",
"Authorization": '',
"Access-Control-Allow-Origin": "*"
},
data: formData
};
var result = $http(req)
.then(function(response) {
return angular.fromJson(response.data);
}, function(response) {
return null;
});
return result;
},
};
});
</script>
</body>
</html>

Using $scope also you will get values of fields which are not in same form.

HTML Code
<div ng-app="App" ng-controller="Ctrl">
<form name="myForm">
<!-- first nested form -->
<div ng-form="form1">
<label><p>Personal Info</p></label>
<input type="text" name="fname" ng-model="myForm.fname"/>
<input type="text" name="lname" ng-model="myForm.lname"/>
</div>
<!-- second nested form -->
<div ng-form="form2">
<label><p>Address Info</p></label>
<input type="text" name="address" ng-model="myForm.address"/>
<input type="text" name="state" ng-model="myForm.state"/>
</div>
<!-- etc. -->
<input type="submit" ng-click="SubmitForm()" value="Next"/>
</form>
</div>
JS/Controller code
var app = angular.module('App');
app.controller('Ctrl', function ($scope) {
$scope.SubmitForm = function () {
var SubmitForm = $scope.myForm;
console.log(SubmitForm);
}
});

You can do someting like below
<form name="form1" ng-submit="moveNext(user)">
<input type="text" ng-model="user.fname" name="fname" required/>
<input type="text" ng-model="user.fname" name="lname" required/>
<input type="submit" value="Next"/>
</form>
<form name="form2" ng-submit="submit(addressData)">
<input type="text" ng-model="addressData.address" name="address"/>
<input type="text" ng-model="addressData.state" name="state"/>
<input type="submit" value="Next"/>
</form>
and in Controller
$scope.userDetails = {};
$scope.addressDetails = {};
$scope.moveNext = function(userData){
$scope.userDetails = userData //Save user Data here and implement logic to scroll to next form and validation
}
$scope.submit = function(addressData){
$scope.addressDetails = addressData;
// and validate the form and Submit data to server here as per your requirement
}