I'm building an input form project for my job and I'm running into a problem with persisting a certain input value. When the user creates a new project, they have to give that project a project ID. I have 5 forms that the user goes through and I want them to be able to enter the project ID in once on the first form, and then have it persist to the other 4 forms without them having to type it in again.
This is the html form where I want to pull the project ID and persist it to the rest of my forms.
I want to pull the value using the id "pid" and then when the button at the bottom is clicked with id of 'data' I want the value to be pushed into a variable.
<form action="/metadata" method="POST">
<div class="row">
<div class="col-md-4">
<div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-default">Project ID:</span>
</div>
<input name="project_id" type="text" id="pid" class="form-control">
</div>
</div>
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">Building:</label>
<select name="building" class="form-select" id="inputGroupSelect01">
<option disabled selected>Choose...</option>
{{#each bldgs}}
<option>{{acronym}}</option>
{{/each}}
</select>
</div>
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">Measure Type:</label>
<select name="measure_type" class="form-select" id="inputGroupSelect01">
<option disabled selected>Choose...</option>
<option>AHU DDC</option>
<option>AHU DDC & Scheduling</option>
<option>Data Center</option>
<option>EBCx</option>
<option>EMOCx</option>
<option>Exhaust System Optimization</option>
<option>Holiday Scheduling</option>
<option>Lighting</option>
<option>Optimum Energy</option>
<option>Scheduling</option>
<option>Valves</option>
<option>VFD Supply Fan</option>
<option>Water</option>
<option>Other</option>
</select>
</div>
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">Status:</label>
<select name="status" class="form-select" id="inputGroupSelect01">
<option disabled selected>Choose...</option>
<option>0-Cancelled</option>
<option>1-Planning</option>
<option>2-In Progress</option>
<option>3-In Reporting Period</option>
<option>5-Completed</option>
</select>
</div>
</div>
<div class="col-md-4 mt-5">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-default">Start Date:</span>
</div>
<input placeholder="mm/dd/yy" name="baseline_start_date" type="text" class="form-control" />
<input placeholder="mm/dd/yy" name="reporting_period_start_date" type="text"
class="form-control" />
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-default"># of Days:</span>
</div>
<input placeholder="mm/dd/yy" name="length_baseline_period_days" type="text"
class="form-control" />
<input placeholder="mm/dd/yy" name="length_reporting_period_days" type="text"
class="form-control" />
</div>
</div>
<div class="col-md-4 mt-5">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-default">Staff Lead:</span>
</div>
<select name="staff_lead" class="form-select" id="inputGroupSelect01">
<option disbaled selected>Choose...</option>
<option>Adam Keeling</option>
<option>Amanda Berens</option>
<option>Buddy Bishop</option>
<option>Dave Cooper</option>
<option>Grace Hsieh</option>
<option>John Milton</option>
<option>Matt Stevens</option>
<option>Meagan Jones</option>
<option>Pat Mazur</option>
<option>Richard Shearman</option>
<option>Travis Isakson</option>
</select>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-default">Staff Support:</span>
</div>
<select name="staff_colead" class="form-select" id="inputGroupSelect01">
<option disbaled selected>Choose...</option>
<option>Adam Keeling</option>
<option>Amanda Berens</option>
<option>Buddy Bishop</option>
<option>Dave Cooper</option>
<option>Grace Hsieh</option>
<option>John Milton</option>
<option>Matt Stevens</option>
<option>Meagan Jones</option>
<option>Pat Mazur</option>
<option>Richard Shearman</option>
<option>Travis Isakson</option>
</select>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-default">Analyst:</span>
</div>
<select name="analyst" class="form-select" id="inputGroupSelect01">
<option disabled selected>Choose...</option>
<option>Jeff McComas</option>
<option>Josh Butler</option>
<option>Laura Chiasson</option>
<option>Terrell McRee</option>
</select>
</div>
</div>
</div>
<div class="input-group mt-3">
<div class="input-group-prepend">
<span class="input-group-text">Project Description:</span>
</div>
<textarea rows='5' name="project_description" class="form-control"
aria-label="With textarea"></textarea>
</div>
<div class="input-group mt-3">
<div class="input-group-prepend">
<span class="input-group-text">Nonenergy Benefits:</span>
</div>
<textarea rows='2' name="nonenergy_benefits" class="form-control"
aria-label="With textarea"></textarea>
</div>
<div class="text-end">
<button type="submit" id="data" style="background-color: #bf5700;"
class="btn text-light btn-warning mt-3">Next</button>
</div>
</form>
This is my js file. Each on click is a different page. However each form has the same input of project ID with a class of "project_id". So I try to $(".project_id").val(projectId) but when I move on the next form nothing happens. Each form has an input value with a class of "project_id" and thats where I try to set it based on the input from the first form.
This is a link to the repo if it helps to see all the code.
https://github.com/oballematt/ecm_input_forms
Any advice on how to achieve this is greatly appreciated! Thanks!
const projectId = []
$("#data").on('submit', () => {
projectId.push($('#pid').val())
})
$('.project_id').val(projectId)
$('#tableData').on('click', 'button.addRow', function(e) {
const cloneRow = $('#tableData tbody tr').first();
e.preventDefault();
let data = {
project_id: $(".project_id").last().val(),
imp_or_ann: $(".imp_or_ann").last().val(),
category: $(".category").last().val(),
cost: $(".cost").last().val(),
hours: $(".hours").last().val()
}
$.ajax({
url: '/costs_hours',
type: 'POST',
data: data
}).then(
cloneRow.clone().appendTo('#tableData tbody').find(".cost, .hours").val(''),
$("#next").removeAttr('disabled'),
$("#link").attr('href', '/fundings'),
)
})
$('#tableData').on('click', 'button.addRowF', function(e) {
const cloneRow = $('#tableData tbody tr').first();
e.preventDefault();
let data = {
project_id: $(".project_id").last().val(),
source: $(".source").last().val(),
implementation: $(".implementation").last().val(),
annual: $(".annual").last().val(),
}
$.ajax({
url: '/fundings',
type: 'POST',
data: data
}).then(
cloneRow.clone().appendTo('#tableData tbody').find(".implementation, .annual").val(''),
$("#next").removeAttr('disabled'),
$("#link").attr('href', '/baseline')
)
})
$('#tableData').on('click', 'button.addRowB', function(e) {
const cloneRow = $('#tableData tbody tr').first();
e.preventDefault();
let data = {
project_id: $(".project_id").last().val(),
commodity: $(".commodity").last().val(),
unit: $(".unit").last().val(),
value: $(".value").last().val(),
}
$.ajax({
url: '/baseline',
type: 'POST',
data: data
}).then(
cloneRow.clone().appendTo('#tableData tbody').find(".value").val(''),
$("#next").removeAttr('disabled'),
$("#link").attr('href', '/savings')
)
})
$('#tableData').on('click', 'button.addRowS', function(e) {
const cloneRow = $('#tableData tbody tr').first();
e.preventDefault();
let data = {
project_id: $(".project_id").last().val(),
phase: $(".phase").last().val(),
commodity: $(".commodity").last().val(),
unit: $(".unit").last().val(),
value: $(".value").last().val()
}
$.ajax({
url: '/savings',
type: 'POST',
data: data
}).then(
cloneRow.clone().appendTo('#tableData tbody').find(".value").val(''),
$("#next").removeAttr('disabled'),
$("#link").attr('href', '/')
)
})
To persist values across pages, several solutions can be used : localStorage, queryString, State machines.
Here the problem comes from that val(projectId) is not defined since you reload a new page.
Depending on your constraint for your app, I would advice you to use queryString since it is very straightforward (just add the query in the URL and you can retrieve it with JS).
https://en.wikipedia.org/wiki/Query_string
Related
I'm trying to push input value into an array based on input fields. But the problem I'm facing here is that the last input field will replace all the objects in my array like this:
[
{
"label":"4",
"type":"",
"process":"",
"name":"5",
"col":"6"
},
{
"label":"4",
"type":"",
"process":"",
"name":"5",
"col":"6"
}
]
What I'm expecting it to return is the value of each input in each field separately. This means that instead of seeing the object above, it should be label: 1, name: 2, col: 3 etc etc in the correct order. I'm not sure what I'm missing here because my code makes sense to me. What am I doing wrong?
$(document).ready(() => {
$('.add-field').click(e => {
e.preventDefault();
generateField();
});
$('.form-maker').submit(e => {
e.preventDefault();
const temp = {},
payload = [];
$('.dynamic-group').each((i, group) => {
$(group)
.find('input, select')
.each((ii, field) => {
temp[field.name] = field.value;
});
payload.push(temp);
});
console.log(payload);
});
const generateField = () => {
$('.dynamic-fields').append(
`
<div class="form-inline dynamic-group">
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">Input Label</div>
</div>
<input type="text" class="form-control" placeholder="Input Label" name="label">
</div>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">Input Type</div>
</div>
<select name="type" name="type">
<option value="">Something in here</option>
</select>
</div>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">Process</div>
</div>
<select name="process" name="process">
<option value="">Something in here</option>
</select>
</div>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">Input Name</div>
</div>
<input type="text" class="form-control" placeholder="Input Name" name="name">
</div>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">DB. Col Name</div>
</div>
<input type="text" class="form-control" placeholder="DB. Col Name" name="col">
</div>
</div>
<hr />
`
);
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dynamic-fields"></div>
<button class="add-field">
Add Field
</button>
<button type="submit">
Make Form
</button>
It's because you're referencing the same object every time, so the last thing to get updated wins. You'd want a copy of the object pushed into the array:
$('.dynamic-group').each((i, group) => {
$(group)
.find('input, select')
.each((ii, field) => {
temp[field.name] = field.value;
});
payload.push($.extend(true,{},temp));
});
There are a number of ways to make object copies - in this case I'm using JQuery's extend method to make a true copy of the object, https://api.jquery.com/jquery.extend/
$.extend(true,{},temp)
The temp variable must be placed within the inner loop of each group:
$(document).ready(() => {
$(".add-field").click(e => {
e.preventDefault();
generateField();
});
$(".form-maker").click(e => {
e.preventDefault();
const payload = [];
$(".dynamic-group").each((i, group) => {
const temp = {};
$(group)
.find("input, select")
.each((ii, field) => {
temp[field.name] = field.value;
});
payload.push(temp);
});
console.log(payload);
});
const generateField = () => {
$(".dynamic-fields").append(
`
<div class="form-inline dynamic-group">
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">Input Label</div>
</div>
<input type="text" class="form-control" placeholder="Input Label" name="label">
</div>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">Input Type</div>
</div>
<select name="type" name="type">
<option value="">Something in here</option>
</select>
</div>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">Process</div>
</div>
<select name="process" name="process">
<option value="">Something in here</option>
</select>
</div>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">Input Name</div>
</div>
<input type="text" class="form-control" placeholder="Input Name" name="name">
</div>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">DB. Col Name</div>
</div>
<input type="text" class="form-control" placeholder="DB. Col Name" name="col">
</div>
</div>
<hr />
`
);
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dynamic-fields"></div>
<button class="add-field">
Add Field
</button>
<button class="form-maker" type="submit">
Make Form
</button>
I am selecting multiple options from select and based on the selected options i need to dynamically add rows. How can It be possible. If I select 1 option ata time. I am getting the result. But If I select multiple options, I am not able to get the result.
If I select options 1 and 2 from select. I need to add rows corresponding to options 1 and 2
<div id="addForm">
<div class="row">
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Case Type</label>
<select class="form-control" v-model="selectedType" multiple>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
<div>
<div class="row" v-if="selectedType==='1'">
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Date Released</label>
<input type="date" class="form-control" v-model="released" required="">
</div>
</div>
</div>
<div class="row" v-if="selectedType==='2'">
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Full Name</label>
<input type="date" class="form-control" v-model="fullname" required="">
</div>
</div>
</div>
My vue js code is
new Vue({
el: "#addForm",
data: {
selectedType: '',
address:'',
fullname:'',
released:''
},
methods: {
}
});
I need to select multiple options and based on the same, I need to add the rows dynamically.
Now if I select one option I am able to achieve the result as shown in my code (Above code) but,
I need to select multiple options and based on the options selected, I need to add rows dynamically. ie. If i choose option 1 and 2, i need to add the rows for both options 1 and 2.
Please help me to have a solution.
First of all, selectedType shouldn't be a string but an array. You should have received a warning in the console. Secondly, you will never get more than 1 match if you're using === since you're only looking for if the value matches, you need to use some kind of array value finder like include
https://codesandbox.io/s/0pwjq98j5v
<template>
<div id="addForm">
<div class="row">
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Case Type</label>
<select #change="show" class="form-control" v-model="selectedType" multiple>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
<div>
</div>
<div class="row" v-if="selectedType.includes('1')">
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Date Released</label>
<input type="date" class="form-control" v-model="released" required="">
</div>
</div>
</div>
<div class="row" v-if="selectedType.includes('2')">
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Full Name</label>
<input type="date" class="form-control" v-model="fullname" required="">
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
selectedType: [],
address: "",
fullname: "",
released: ""
};
},
methods: {
show() {
console.log(this.selectedType);
}
}
};
</script>
selectedType should be an array, and use selectedType.includes() in the condition of v-if.
const app = new Vue({
el: "#addForm",
data: {
selectedType: [],
address:'',
fullname:'',
released:''
},
methods: {
}});
<div id="addForm">
<div class="row">
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Case Type</label>
<select class="form-control" v-model="selectedType" multiple>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
<div>
<div class="row" v-if="selectedType.includes('1')">
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Date Released</label>
<input type="date" class="form-control" v-model="released" required="">
</div>
</div>
</div>
<div class="row" v-if="selectedType.includes('2')">
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Full Name</label>
<input type="date" class="form-control" v-model="fullname" required="">
</div>
</div>
</div>
<div id="addForm">
<div class="row">
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Case Type</label>
<select class="form-control" v-model="selectedType" multiple>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
<div>
<div class="row" v-if="selectedType==='1'">
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Date Released</label>
<input type="date" class="form-control" v-model="released" required="">
</div>
</div>
</div>
<div class="row" v-if="selectedType==='2'">
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Full Name</label>
<input type="date" class="form-control" v-model="fullname" required="">
</div>
</div>
</div>
My vue js code is
new Vue({
el: "#addForm",
data: {
selectedType: '',
address:'',
fullname:'',
released:''
},
methods: {
}
});
I need to select multiple options and and based on the the same i need to add the rows dynamically.
Now if I select one option I am able to achieve the result as shown in my code (ABOVE CODE)
BUT,
I need to select multiple options and based on the options selected, I need to add rows dynamically. ie. If i choose option 1 and 2, i need to add the rows for both options 1 and 2.
Please help me to have a solution..
You can do it like this
Template:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div id="addForm">
<div class="row">
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Case Type</label>
<select class="form-control" v-model="selectedType" multiple>
<option v-for="type in types" :value="type.option">{{type.option}}</option>
</select>
</div>
</div>
<div>
<div class="row" v-for="type in types" v-if="selectedType.indexOf(type.option) !== -1">
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">{{type.label}}</label>
<input type="date" class="form-control" v-model="type.value" required>
</div>
</div>
</div>
</div>
Script
new Vue({
el: "#addForm",
data: {
selectedType: [],
types: [
{option: 1, label: 'Date Realeased', value: ''},
{option: 2, label: 'Full Name', value: ''},
{option: 3, label: 'Address', value: ''}
]
},
methods: {
}
});
summary:
set up an array types which contains objects holding the properties that will be bound to the inputs.
loop through this types[] and render the div using v-if onlý if the currently iterated item's option is present in selectedType[].
Here is the working fiddle
Try this one, Hope its help you.
Template Code
<div id="app">
<div id="addForm">
<div class="row">
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Case Type</label>
<select class="form-control" v-model="selectedType" multiple>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
<div v-for="item in selectedType">
<div class="row" v-if="item == 1">
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Date Released</label>
<input type="date" class="form-control" v-model="released" required="">
</div>
</div>
</div>
<div class="row" v-if="item == 2">
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Full Name</label>
<input type="text" class="form-control" v-model="fullname" required="">
</div>
</div>
</div>
<div class="row" v-if="item == 3">
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Address</label>
<input type="textarea" class="form-control" v-model="address" required="">
</div>
</div>
</div>
</div>
</div>
</div>
Script:
var Main = {
data () {
return {
selectedType: [],
address:'',
fullname:'',
released:''
}
}
}
var Component = Vue.extend(Main)
new Component().$mount('#app')
I'm trying to get formdata to my php file. but i'm getting not any value on post. please advice me what i'm doing is right? i'm doing something wrong in post
// add item to additem
<script type="text/javascript">
$(document).ready(function(){
$("#additembutton").click(function(evt){
evt.preventDefault();
var formData = new FormData($("form #itemform")[0]);
alert(formData);
$.ajax({
url: 'additem.php',
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
enctype: 'multipart/form-data',
processData: false,
success: function (response) {
alert(response);
}
});
return false;
});
</script>
// form submit image
This is my additem.php file
<?php
include '../class/dbconfig.php';
$filename=$_POST['myfile']['name'];
echo $_POST['myfile'];
This is my html form
<form class="form-horizontal" enctype="multipart/form-data">
<div class="form-group">
<label for="select" class="col-md-3 control-label">Menu Type</label>
<div class="col-md-6">
<select class="form-control" id="menutype">
<option>Select Menu</option>
<option value="fastfood">FastFood</option>
<option value="other">Other</option>
</select>
</div>
</div>
<!--
<div class="form-group" id="otherdiv">
<label for="menuorder" class="col-md-3 control-label">Other Menu Type</label>
<div class="col-md-6">
<input type="number" class="form-control" id="othermenu" placeholder="Enter Order">
</div>
</div>
-->
<div class="form-group">
<label for="menuorder" class="col-md-3 control-label">Menu Order</label>
<div class="col-md-6">
<input type="number" class="form-control" id="menuorder" pattern="[0-9]+" placeholder="Enter Order">
</div>
</div>
<div class="form-group">
<label for="select" class="col-md-3 control-label">Menu Status</label>
<div class="col-md-6">
<select class="form-control" id="menustatus">
<option value="1">Active</option>
<option value="0">Deactive</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-3">
<button type="reset" class="btn btn-default">Cancel</button>
<button type="button" class="btn btn-primary" id="addmenubutton" >Submit</button>
</div>
</div>
</form>
You just need to send the form via post:
<form method="POST">
I've a form which has input fields as shown in figure below. Each time I click the add button, the row containing the input fields is appended.
The html code goes like this :
<div class="row">
<div class="row ifields">
<div class="col-sm-3 form-group">
</div>
<div class="col-sm-2 form-group">
<input type="text" class="form-control" name="pname" placeholder="Product Name" />
</div>
<div class="col-sm-2 form-group">
<input type="number" min="1" class="form-control text-center" name="pquantity" placeholder="Product Quantity" />
</div>
<div class="col-sm-2 form-group">
<select class="form-control text-center" name="qtype">
<option value="g">g</option>
<option value="Kg">Kg</option>
<option value="ml">ml</option>
<option value="L">Lt.</option>
<option value="pc">Pc</option>
</select>
</div>
<div class="col-sm-2 form-group">
<input type="text" class="form-control text-center" name="pcost" placeholder="Product Cost" />
</div>
<div class="col-sm-1"><button class="btn btn-default add-btn">Add</button></div>
</div>
</div>
<div class="row iclone"></div>
</div>
And the Jquery code :
$(document).ready(function(){
$('.add-btn').click(function(){
var cl = $('.ifields').first('.row').clone(true);
$('.iclone').append(cl);
});
});
I want to go through each row and create a JSON file. For ex:
[{
"product" : "A",
"quantity" : "100",
"quantitytype" : "g",
"cost" : "100"
},
...
....
]
How to do create this JSON output ? Please guide.
You can use map() to create the required array of objects. Try this:
var data = $('.row.ifields').map(function() {
return {
product: $(this).find('[name="pname"]').val(),
quantity: $(this).find('[name="pquantity"]').val(),
quantityttype: $(this).find('[name="qtype"]').val(),
cost: $(this).find('[name="pcost"]').val()
};
}).get();
You can then use the data array as required - presumably in a $.ajax() call.
Working example