The goal of my code is to create a resume builder using HTML, CSS and JavaScript. Once the user "clicks" create resume, a new window should open with the content enter styled in a resume format of my choosing. I cannot use HTML to style the resume.
The issue I am having is my styling will not populate in an on-the-fly created with JavaScript. At this point, I have only tried to center the first name (I am testing to see if my code is correct). I am not receiving any errors, however, nothing is changing. I am not sure if it is because I am only doing the first name and I need to format the other content, or if I am actually coding something wrong.
I have created the HTML for the users to enter their information and the JavaScript to populate the information. No errors!
I added a function to center align the firstName. No errors! However, nothing happens!?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WEB-115 Final Project</title>
<style>
body {
background-color: peru;
}
h1 {
text-align: center;
padding: 60px;
background: forestgreen;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Build Your Resume</h1>
<form>
<div id="myinfo">
<h2>Personal Information:</h2>
<label>Enter your first name:</label><br>
<input type="text" id="firstName"><br><br>
<label>Enter your last name:</label><br>
<input type="text" id="lastName"><br><br>
<label>Enter your preferred name:</label><br>
<input type="text" id="preName"><br><br>
<label>Enter your email address:</label><br>
<input type="text" id="email"><br><br>
<label>Enter your phone number:</label><br>
<input type="text" id="number"><br><br>
<label>Enter your state:</label><br>
<input type="text" id="state"><br><br>
<label>Enter your city:</label><br>
<input type="text" id="city"><br><br>
<label>Enter your zipcode:</label><br>
<input type="text" id="zip"><br><br>
<p>About Me</p>
<textarea rows="15" cols="33" id="aboutMe">Tell us about the position you are looking for!</textarea><br><br>
</div>
<div id="myEdu">
<h2>Enter Educational History:</h2>
<label>Start Date:</label>
<input type="date" id="eduStart"><br><br>
<label>End Date:</label>
<input type="date" id="eduEnd"><br><br>
<label>Name of school:</label><br>
<input type="text" id="school"><br><br>
<label>Degree type:</label><br>
<input type="text" id="degree"><br><br>
<label>Field of study:</label><br>
<input type="text" id="major"><br><br>
</div>
<div id="myJob">
<h2>Enter job information:</h2>
<label>Start Date:</label>
<input type="date" id="jobStart"><br><br>
<label>End Date:</label>
<input type="date" id="jobEnd"><br><br>
<p>Position Details:</p>
<textarea rows="5" cols="33" id="details">Click Here!</textarea><br><br>
</div>
<div id="extra">
<h2>Please Enter Your Skills:</h2>
<textarea rows="15" cols="33" id="skills">Click Here!</textarea><br><br>
<h2>Links:</h2>
<p>Please provide links to any websites or blogs.</p>
<textarea rows="15" cols="33" id="links">Click Here!</textarea><br><br>
</div>
<input type="button" id="btnSubmit" value="Create Resume">
</form>
<script src="projectJS.js"></script>
</body>
</html>
JavaScript:
/*style*/
function myFunction () {
let fName = document.getElementById("firstName");
fName.style.textAlign = "center";
}
/*button*/
document.getElementById("btnSubmit").addEventListener('click',myWindow)
/*function to create resume*/
function myWindow()
{
/*get HTML first name*/
fName = document.getElementById("firstName").value;
/*get HTML last name*/
lName = document.getElementById("lastName").value;
/*get HTML preferred name*/
pName = document.getElementById("preName").value;
/*get HTML email address*/
eAddress = document.getElementById("email").value;
/*get HTML phone number*/
phoneNum = document.getElementById("number").value;
/*get HTML state*/
stateAdd = document.getElementById("state").value;
/*get HTML city*/
cityAdd = document.getElementById("city").value;
/*get HTML zip code*/
zipCode = document.getElementById("zip").value;
/*get HTML about me*/
about = document.getElementById("aboutMe").value;
/*get HTML Edu start date*/
schoolStart = document.getElementById("eduStart").value;
/*get HTML Edu end date*/
schoolEnd = document.getElementById("eduEnd").value;
/*get HTML School*/
schoolName = document.getElementById("school").value;
/*get HTML degree type*/
degreeType = document.getElementById("degree").value;
/*get HTML major*/
fieldStudy = document.getElementById("major").value;
/*get HTML job start date*/
jStart = document.getElementById("jobStart").value;
/*get HTML job end date*/
jEnd = document.getElementById("jobEnd").value;
/*get HTML job details*/
jobDetails = document.getElementById("details").value;
/*get HTML skills*/
mySkills = document.getElementById("skills").value;
/*get HTML links*/
webPage = document.getElementById("links").value;
myText = ("<html>\n<head>\n<title>WEB-115 Final Project</title>\n</head>\n<body>");
myText += (fName);
myText += (lName);
myText += (pName);
myText += (eAddress);
myText += (phoneNum);
myText += (stateAdd);
myText += (cityAdd);
myText += (zipCode);
myText += (about);
myText += (schoolStart);
myText += (schoolEnd);
myText += (schoolName);
myText += (degreeType);
myText += (fieldStudy);
myText += (jStart);
myText += (jEnd);
myText += (jobDetails);
myText += (mySkills);
myText += (webPage);
myText += ("</body>\n</html>");
flyWindow = window.open('about:blank','myPop','width=400,height=200,left=200,top=200');
flyWindow.document.write(myText);
}
Firstly, you can check style works or not with a file or an inline style:
// If you use css file style
// myText = (`<html>\n<head>\n<title>WEB-115 Final Project</title><link rel="stylesheet" type="text/css" href="styles1.css">\n</head>\n<body>`);
// Else if you use inline style
let style = `body {
color: blue;
}
.text-center {
text-align: center;
}
`;
myText = (`<html>\n<head>\n<title>WEB-115 Final Project</title><style>${style}</style>\n</head>\n<body>`);
myText += `<div class="text-center">${fName}</div>`;
Then, if you want to use a function to do this job, you can control it by set a global flyWindow variable like my way:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WEB-115 Final Project</title>
<style>
body {
background-color: peru;
}
h1 {
text-align: center;
padding: 60px;
background: forestgreen;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Build Your Resume</h1>
<form>
<div id="myinfo">
<h2>Personal Information:</h2>
<label>Enter your first name:</label><br>
<input type="text" id="firstName"><br><br>
<label>Enter your last name:</label><br>
<input type="text" id="lastName"><br><br>
<label>Enter your preferred name:</label><br>
<input type="text" id="preName"><br><br>
<label>Enter your email address:</label><br>
<input type="text" id="email"><br><br>
<label>Enter your phone number:</label><br>
<input type="text" id="number"><br><br>
<label>Enter your state:</label><br>
<input type="text" id="state"><br><br>
<label>Enter your city:</label><br>
<input type="text" id="city"><br><br>
<label>Enter your zipcode:</label><br>
<input type="text" id="zip"><br><br>
<p>About Me</p>
<textarea rows="15" cols="33" id="aboutMe">Tell us about the position you are looking for!</textarea><br><br>
</div>
<div id="myEdu">
<h2>Enter Educational History:</h2>
<label>Start Date:</label>
<input type="date" id="eduStart"><br><br>
<label>End Date:</label>
<input type="date" id="eduEnd"><br><br>
<label>Name of school:</label><br>
<input type="text" id="school"><br><br>
<label>Degree type:</label><br>
<input type="text" id="degree"><br><br>
<label>Field of study:</label><br>
<input type="text" id="major"><br><br>
</div>
<div id="myJob">
<h2>Enter job information:</h2>
<label>Start Date:</label>
<input type="date" id="jobStart"><br><br>
<label>End Date:</label>
<input type="date" id="jobEnd"><br><br>
<p>Position Details:</p>
<textarea rows="5" cols="33" id="details">Click Here!</textarea><br><br>
</div>
<div id="extra">
<h2>Please Enter Your Skills:</h2>
<textarea rows="15" cols="33" id="skills">Click Here!</textarea><br><br>
<h2>Links:</h2>
<p>Please provide links to any websites or blogs.</p>
<textarea rows="15" cols="33" id="links">Click Here!</textarea><br><br>
</div>
<input type="button" id="btnSubmit" value="Create Resume">
</form>
<!-- <script src="projectJS.js"></script> -->
<script>
/*button*/
document.getElementById("btnSubmit").addEventListener('click', myWindow)
/*function to create resume*/
function myWindow() {
/*get HTML first name*/
fName = document.getElementById("firstName").value;
/*get HTML last name*/
lName = document.getElementById("lastName").value;
/*get HTML preferred name*/
pName = document.getElementById("preName").value;
/*get HTML email address*/
eAddress = document.getElementById("email").value;
/*get HTML phone number*/
phoneNum = document.getElementById("number").value;
/*get HTML state*/
stateAdd = document.getElementById("state").value;
/*get HTML city*/
cityAdd = document.getElementById("city").value;
/*get HTML zip code*/
zipCode = document.getElementById("zip").value;
/*get HTML about me*/
about = document.getElementById("aboutMe").value;
/*get HTML Edu start date*/
schoolStart = document.getElementById("eduStart").value;
/*get HTML Edu end date*/
schoolEnd = document.getElementById("eduEnd").value;
/*get HTML School*/
schoolName = document.getElementById("school").value;
/*get HTML degree type*/
degreeType = document.getElementById("degree").value;
/*get HTML major*/
fieldStudy = document.getElementById("major").value;
/*get HTML job start date*/
jStart = document.getElementById("jobStart").value;
/*get HTML job end date*/
jEnd = document.getElementById("jobEnd").value;
/*get HTML job details*/
jobDetails = document.getElementById("details").value;
/*get HTML skills*/
mySkills = document.getElementById("skills").value;
/*get HTML links*/
webPage = document.getElementById("links").value;
// If you directly use a css file style
// myText = (`<html>\n<head>\n<title>WEB-115 Final Project</title><link rel="stylesheet" type="text/css" href="styles1.css">\n</head>\n<body>`);
// Else if you use inline style
// let style = `body {
// color: blue;
// }
// .text-center {
// text-align: center;
// }
// `;
// myText = (`<html>\n<head>\n<title>WEB-115 Final Project</title><style>${style}</style>\n</head>\n<body>`);
// myText += `<div class="text-center">${fName}</div>`;
// Else if you want to set it by a function
myText = (`<html>\n<head>\n<title>WEB-115 Final Project</title>\n</head>\n<body>`);
myText += `<div id="firstName">${fName}</div>`;
myText += (lName);
myText += (pName);
myText += (eAddress);
myText += (phoneNum);
myText += (stateAdd);
myText += (cityAdd);
myText += (zipCode);
myText += (about);
myText += (schoolStart);
myText += (schoolEnd);
myText += (schoolName);
myText += (degreeType);
myText += (fieldStudy);
myText += (jStart);
myText += (jEnd);
myText += (jobDetails);
myText += (mySkills);
myText += (webPage);
myText += ("</body>\n</html>");
flyWindow = window.open('about:blank', 'myPop', 'width=400,height=200,left=200,top=200');
flyWindow.document.write(myText);
myFunctionToSetCenterFirstName();
}
// Create global variable flyWindow to set style by a javascript function
var flyWindow;
// Then set style by this function
function myFunctionToSetCenterFirstName() {
let fName = flyWindow.document.getElementById("firstName");
fName.style.textAlign = "center";
}
</script>
</body>
</html>
Successful people are patient people, believe it!
Related
When users click submit, I've coded an error message to appear under each input field that is missing a value using DOM selectors. I also disabled the email file that opens when submit is clicked, using preventDefault().
However, when the user types into the text area, the messages don't disappear. I tried using a 'keydown' event, but I couldn't get it to work.
HTML code:
<body>
<header class="header">
<form action="mailto:me#fakeemail.com">
<fieldset>
<legend>Personal details</legend>
<p>
<label>
Full name:
<input type="text" name="fullname" id="fullname">
</label>
</p>
<p class="errormsg" id="nameerrormsg">Please enter your name above</p>
<p>
<label>
Street Address:
<input type="text" name="streetaddr" id="streetaddr">
</label>
</p>
<p class="errormsg" id="addrerrormsg">Please enter your street address</p>
</fieldset>
<input type="submit" value="Submit it!" class="submitIt" onsubmit="return checkForm();">
</form>
<br>
<script src="inline-error.js" charset="utf-8"></script>
<div class="returnHome">
Return Home
</div>
</header>
</body>
Javascript code:
var submitIt = document.querySelector(".submitIt");
submitIt.addEventListener("click", function checkForm(event) {
var fNameInput = document.querySelector("#fullname")
var streetAddInput = document.querySelector("#streetaddr")
if (fNameInput.value == "") {
var nameErrorMsg = document.querySelector("#nameerrormsg").style.display = "block";
event.preventDefault();
}
if (streetAddInput.value == "") {
var addrErrorMsg = document.querySelector("#addrerrormsg").style.display = "block";
event.preventDefault();
}
})
To see an immediate result in the code in its current state, hide the error messages before checking the input values.
var submitIt = document.querySelector('.submitIt');
submitIt.addEventListener('click', function checkForm(event) {
var nameErrorMsg = document.querySelector('#nameerrormsg');
var addrErrorMsg = document.querySelector('#addrerrormsg');
nameErrorMsg.style.display = 'none';
addrErrorMsg.style.display = 'none';
var fNameInput = document.querySelector('#fullname');
var streetAddrInput = document.querySelector('#streetaddr');
if (fNameInput.value == '') {
nameErrorMsg.style.display = 'block';
event.preventDefault();
}
if (streetAddrInput.value == '') {
addrErrorMsg.style.display = 'block';
event.preventDefault();
}
});
Having said that, here are some additional suggestions:
Use CSS for styling elements (not JavaScript)
Discourage inline JavaScript
Store DOM elements outside the scope of the event listener so you don't have to query the DOM every time you click
Consider utilizing the required attribute on the inputs for a quick win on styling
So...
<!-- form.html -->
<head>
<link rel="stylesheet" href="form.css">
</head>
<body>
<header class="header">
<form>
<fieldset>
<legend>Personal details</legend>
<p>
<label for="fullname">Full name:
<input type="text" name="fullname" id="fullname" required>
</label>
</p>
<p class="errormsg" id="nameerrormsg">Please enter your name above</p>
<p>
<label for="streetaddr">Street Address:
<input type="text" name="streetaddr" id="streetaddr" required>
</label>
</p>
<p class="errormsg" id="addrerrormsg">Please enter your street address</p>
</fieldset>
<input type="submit" value="Submit it!" class="submitIt">
</form>
</header>
<button id="returnhome">Return Home</button>
<script src="inline-error.js"></script>
</body>
/* form.css */
input:valid {
border: none;
}
input:invalid:required {
border: 1px solid red;
}
.errormsg {
display: none;
}
.show {
display: block;
}
// inline-error.js
var submitIt = document.querySelector('.submitIt');
var nameInput = document.querySelector('#fullname');
var nameError = document.querySelector('#nameerrormsg');
var addrInput = document.querySelector('#streetaddr');
var addrError = document.querySelector('#addrerrormsg');
var returnHome = document.querySelector('#returnhome');
returnHome.addEventListener('click', e => {
e.preventDefault();
history.back();
});
submitIt.addEventListener('click', event => {
const nameValue = nameInput.value;
const addrValue = addrInput.value;
if (!nameValue || !addrValue) {
event.preventDefault();
}
if (!nameValue) {
nameError.classList.add('show');
} else {
nameError.classList.remove('show');
}
if (!addrValue) {
addrError.classList.add('show');
} else {
addrError.classList.remove('show');
}
});
I want to create an HTML application form and send it to applicants through email. each individual has to download the file, fill it out separately and send it back to me.
Is it possible to embed a save button and overwrite the changes permanently ? all I could find was save the changes locally (or as a separate file) which is not what I want. here is a simple form I could find on w3schools:
<form action="/action_page.php">
<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="Save">
</form>
I found this code instead. all I had to do was change the output to html and style it the way I want. though it saves the changes as a new file but that's ok. I couldn't find anything else :
<!DOCTYPE html>
<html>
<head>
<title>Save form Data in a Text File using JavaScript</title>
<style>
* {
box-sizing: border-box;
}
div {
padding: 10px;
background-color: #f6f6f6;
overflow: hidden;
}
input[type=text], textarea, select {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type=button]{
width: auto;
float: right;
cursor: pointer;
padding: 7px;
}
</style>
</head>
<body>
<div>
<!--Add few elements to the form-->
<div>
<input type="text" id="txtName" placeholder="Enter your name" />
</div>
<div>
<input type="text" id="txtAge" placeholder="Enter your age" />
</div>
<div>
<input type="text" id="txtEmail" placeholder="Enter your email address" />
</div>
<div>
<select id="selCountry">
<option selected value="">-- Choose the country --</option>
<option value="India">India</option>
<option value="Japan">Japan</option>
<option value="USA">USA</option>
</select>
</div>
<div>
<textarea id="msg" name="msg" placeholder="Write some message ..." style="height:100px"></textarea>
</div>
<!--Add to button to save the data.-->
<div>
<input type="button" id="bt" value="Save data to file" onclick="saveFile()" />
</div>
</div>
</body>
<script>
let saveFile = () => {
// Get the data from each element on the form.
const name = document.getElementById('txtName');
const age = document.getElementById('txtAge');
const email = document.getElementById('txtEmail');
const country = document.getElementById('selCountry');
const msg = document.getElementById('msg');
// This variable stores all the data.
let data =
'\r Name: ' + name.value + ' \r\n ' +
'Age: ' +age.value + ' \r\n ' +
'Email: ' + email.value + ' \r\n ' +
'Country: ' + country.value + ' \r\n ' +
'Message: ' + msg.value;
// Convert the text to BLOB.
const textToBLOB = new Blob([data], { type: 'text/plain' });
const sFileName = 'formData.txt'; // The file to save the data.
let newLink = document.createElement("a");
newLink.download = sFileName;
if (window.webkitURL != null) {
newLink.href = window.webkitURL.createObjectURL(textToBLOB);
}
else {
newLink.href = window.URL.createObjectURL(textToBLOB);
newLink.style.display = "none";
document.body.appendChild(newLink);
}
newLink.click();
}
</script>
</html>
I'm trying to display details inputted into the form in the div on the same page, when the submit button is clicked, it doesn't display.
<script type="text/javascript">
function checkinput(){
var a,b,c,d;
a = document.getElementById("fname").value;
b = document.getElementById("lname").value;
c = document.getElementById("address").value;
d = document.getElementById("email").value;
document.getElementById('output').innerHTML = a + b + c + d ;
}
</script>
<form id = "myform" onsubmit ="return false" >
<p>Firstname : <input type="text" name="Firstname" id="fname" value=""></p>
<p>Last name : <input type="text" name="lastname" id="lname" value=""></p>
<p>Address : <input type="text" name="Address" id = "address" value=""></p>
<p>Email : <input type="email" name="Email" id = "email" value=""></p>
<button onclick = "check()">submit</button>
</form>
<div id="output" style="width: 200px; height: 200px;border: 1px solid black">
</div>
I expect details inputted in the form to display in the div element below.
Just rename the method you try to call when button is clicked.
<button onclick="checkinput()">submit</button>
To put every part on its own line, add the "" between them
document.getElementById('output').innerHTML =
a + "<br/>" + b + "<br/>" + c + "<br/>" + d;
UPD
you can set the default type of the button to the "button" as it was recommended above and in this case, you don't need to handle the "onsubmit" event for the form
<form id="myform">
<p>Firstname : <input type="text" name="Firstname" id="fname" value=""></p>
<p>Last name : <input type="text" name="lastname" id="lname" value=""></p>
<p>Address : <input type="text" name="Address" id="address" value=""></p>
<p>Email : <input type="email" name="Email" id="email" value=""></p>
<button type="button" onclick="checkinput()">submit</button>
</form>
After that, you can use different js functions depending on your purposes
// Strait forward - just get names from the array and use the values
// in any way you like
function checkinput1() {
let html = "";
for(let name of ["fname", "lname", "address", "email"]) {
html += document.getElementById(name).value + "<br/>";
}
document.getElementById('output').innerHTML = html;
}
// If you need just to concatenate values
function checkinput2() {
document.getElementById('output').innerHTML = `${document.getElementById('fname').value}
<br/>${document.getElementById('lname').value}
<br/>${document.getElementById('address').value}
<br/>${document.getElementById('email').value}`;
}
// When you want to get all values from the form inputs and don't
// care about their real names. You can also skip the empty values, so
// no empty lines will be added to the result
function checkinput3(){
let values = [];
for(let elem of document.querySelectorAll('#myform input')){
if(elem.value) values.push(elem.value);
}
document.querySelector('#output').innerHTML = values.join('<br/>');
}
I'm performing some validation checks on some inputs from the user. I was wondering how do I check that the email entered by the user contains an # symbol and a '.' as well as characters before and after the # symbol. Thanks in advance for answering.
<!DOCTYPE html>
<html>
<head>
<script language="JavaScript">
function showInput() {
var comment = document.getElementById("com").value;
var first = document.getElementById("fname").value;
var last = document.getElementById("lname").value;
var dateOfVisit = document.getElementById("date").value;
var firstError = document.getElementById('firstNameError');
var lastError = document.getElementById('lastNameError');
var displayEl = document.getElementById('displayname');
if (!first) {
firstError.setAttribute('style', 'display: block; color: red');
} else {
firstError.setAttribute('style', 'display: none;');
}
if (!last) {
lastError.setAttribute('style', 'display: block; color: red');
} else {
lastError.setAttribute('style', 'display: none;');
}
displayEl.innerHTML =
first + " " + last + " visited this on " + dateOfVisit + " and said '" + comment || 'not a thing...' + "'";
}
</script>
<title>Great Pyramid of Giza</title>
</head>
<body>
<h2>Leave A Review!</h2>
<p>Have you been to this wonder of the world? If so, leave a review.</p>
<form>
First Name:<br>
<input type = "text" name="firstname" id="fname"><br>
<span style="display: none;" id="firstNameError">First name is required!</span>
Last Name:<br>
<input type = "text" name="lastname" id="lname"><br>
<span style="display: none;" id="lastNameError">Last name is required!</span>
Email Address:<br>
<input type = "text" name="email"><br>
Date of Visit:<br>
<input type = "text" name="date" id="date"><br>
Comment:<br>
<input type = "text" name="comment" size="70" id="com"><br>
</form>
<input type = "submit" value="Submit" onclick="showInput();">
<h2>Comments:</h2>
<p><span id='displayname'></span></p>
</body>
</html>
You can create a email input and validate against that instead of using any regex...
function isEmail(email) {
var input = document.createElement('input')
input.type = 'email'
input.value = email
return input.validity.valid
}
console.log(isEmail('admin#example.com'))
console.log(isEmail('#example.com'))
But why bother??? just use <input type="email"> and skip all javascript nonsens
<form>
<input type="text" name="firstname" required autocomplete="given-name">
<input type="text" name="lastname" required autocomplete="family-name">
<input type="email" name="email" autocomplete="email">
<input type="date" min="2018-04-21" name="date">
<textarea name="comment"></textarea>
<input type="submit">
</form>
ps, use form.onsubmit instead of btn.onclick (way better)
read more about constraint validation and inputs
I have a form on a webpage that I want a user to be able to fill out, hit submit, and it displays something like "User: [name] has a [event] event at [location] with details [description]" in a comment section below. So multiple entries will just load under each other. Right now when I hit submit, it will only submit the description text and nothing else. My function getInfo() should be displaying multiple values but is not. How can I remedy this. Full code linked below
https://github.com/tayrembos/Nav/blob/master/back.html
<script type="text/javascript">
function getInfo() {
text = name.value;
text = words.value;
document.getElementById("para").innerHTML += '<p>'+ text
document.getElementById("words").value = "Enter comment"
document.getElementById('name').value = "Enter name"
}
</script>
<form method="POST" name='myform'>
<p>Enter your name:
<textarea id='name' rows="1" cols="20">Enter name</textarea>
<textarea id='name' rows="1" cols="20">Enter name</textarea>
<textarea id='words' rows="10" cols="20">Enter comment</textarea>
<input type="button" onclick="getInfo()" value="Submit!" /> <br>
<p id="para"></p>
i use append from jquery(vote if it really solves your problem).
function myFunction() {
var x = document.getElementById("product");
var txt = "";
var all = {};
var i;
for (i = 0; i<x.length-1; i++) {
//txt = txt + x.elements[i].value + "<br>";
all[x.elements[i].name]= x.elements[i].value;
}
$("p").append(JSON.stringify(all, null, 2));
//var myObj = { "name":"John", "age":31, "city":"New York" };
//document.getElementById("demothree").innerHTML = myObj;
//var myJSON = JSON.stringify(all);
//window.location = "server.php?x=" + myJSON;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<form id="product">
Expire: <input type="text" name="pexpire" value="3:45"><br>
Old Price: <input type="text" name="poldprice" value="30"><br>
Price: <input type="text" name="pprice" value="28"><br>
Category: <input type="text" name="pcategory" value="Ενδύματα"><br>
Variaty: <input type="text" name="pvariaty" value="Τζιν"><br>
City: <input type="text" name="pcity" value="Δράμα"><br>
Store: <input type="text" name="pstore" value="Groove"><br>
Picture: <input type="text" name="ppicture" value="aaa"><br>
</form>
<button onclick="myFunction()">Submit</button>
<p id="list"></p>