I want to know how I can save data in firestore as an array. What I mean is: take 3 inputs from the user and save 3 inputs in 1 field of array.
Here I want to show 5 to 6 input boxes and save the data in the boxes save in the facilities array.
<form class="form" #formx="ngForm" (submit)="submit( formx.value)">
<div class="form-body">
<h4 class="form-section">
<i class="icon-user"></i> Basic Details</h4>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="projectinput1">Event Name</label>
<input type="text" id="projectinput1" class="form-control" name="eventname" ngModel>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="projectinput3">Price</label>
<input type="text" id="projectinput3" class="form-control" name="price" ngModel>
</div>
</div>
</div>
</div>
<div class="form-actions">
<button type="button" class="btn btn-raised btn-danger mr-1">
<i class="icon-trash"></i> Cancel
</button>
<button type="submit" class="btn btn-raised btn-success" >
<i class="icon-note"></i> Save
</button>
</div>
</form>
.ts
submit(data){
if(this.img){
data.photo = this.img;
}
console.log(data);
data.timestamp = new Date();
let final = {...data};
console.log(final);
this.api.addDeal(final).then(res=>{console.log(`deal created`);})
}
Related
My form sends multiple forms of (name and image). However, the last element sends a name only with the wrong 'name.' Do I need to simultaneously make multiple inserts in the database to solve this problem?
Form View
Dump of the request with wrong last element of array
Script of repeat the form
<div class="row">
<div class="col-12">
<form class="form repeater-default" method="POST"
action="{{ route('admin.cat.doCreate2') }}"
enctype="multipart/form-data">
#csrf
<input type="hidden" name="admin_id"
value="{{ auth()->guard('admin')->user()->id }}">
<div data-repeater-list="group_a">
<div data-repeater-item>
<div class="row justify-content-between">
<div class="col-md-4 col-sm-12 form-group">
<label for="Name">Name </label>
<input type="text" class="form-control" name="name[]" required
placeholder="Enter Name of Category">
</div>
<div class="col-md-4 col-sm-12 form-group">
<label for="Image">Image </label>
<input type="file" class="form-control" name="image[]">
</div>
{{-- Delete Button --}}
<div class="col-md-2 col-sm-12 form-group d-flex align-items-center pt-2">
<button class="btn btn-danger" data-repeater-delete type="button"><i
class="mdi mdi-x"></i>
Delete
</button>
</div>
</div>
<hr>
</div>
</div>
<div class="form-group">
<div class="col p-0">
<button class="btn btn-primary" data-repeater-create type="button"><i class="mdi mdi-plus"></i>
Add
</button>
</div>
<div class="col p-0">
<button class="btn btn-success" type="submit"><i class="mdi mdi-account"></i>
Done
</button>
</div>
</div>
</form>
</div>
</div>
Script
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#tableData tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
first solution : inputs and their labels must be on table tag and th tag and td tag
to send right data
second solution : dont use array for inputs names like name[ ] or image[ ] :
<div class="col-md-4 col-sm-12 form-group">
<label for="Image">Image </label>
<input type="file" class="form-control"
name="image">
</div>
and receive datas like this :
$data=$request->group_a
group_a is your data-repeater-list name :
<div data-repeater-list="group_a">
and now you can put $data in foreach and use data arrays for create ...insert and anything
I want to get the value of Buttons I have created:
<div class="form-row">
<div class="btn-group">
<div class="col">
<div class="form-group">
<input id="MR" type="button" class="btn btn-outline-primary" value="MR" name="MR">
</div>
</div>
<div class="col">
<div class="form-group">
<input id="CT" type="button" class="btn btn-outline-primary" value="CT" name="CT">
</div>
</div>
<div class="col">
<div class="form-group">
<input id="PT" type="button" class="btn btn-outline-primary" value="PT" name="PT">
</div>
</div>
<div class="col">
<div class="form-group">
<input id="US" type="button" class="btn btn-outline-primary" value="US" name="US">
</div>
</div>
</div>
</div>
I use this JS to highlight the button if is pressed:
$(document).ready(function(){
$(".btn-outline-primary").click(function(){
$(this).button('toggle');
});
});
Underneath those buttons there is a submit button, which I use to search a database. So how can I get the values of the buttons to use them for search (eg. "MR" value)?
"value" is an attribute on the button elements, so you can access it with .attr():
$(document).ready(function() {
$(".btn-outline-primary").click(function() {
console.log($(this).attr("value"))
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-row">
<div class="btn-group">
<div class="col">
<div class="form-group">
<input id="MR" type="button" class="btn btn-outline-primary" value="MR" name="MR">
</div>
</div>
<div class="col">
<div class="form-group">
<input id="CT" type="button" class="btn btn-outline-primary" value="CT" name="CT">
</div>
</div>
<div class="col">
<div class="form-group">
<input id="PT" type="button" class="btn btn-outline-primary" value="PT" name="PT">
</div>
</div>
<div class="col">
<div class="form-group">
<input id="US" type="button" class="btn btn-outline-primary" value="US" name="US">
</div>
</div>
</div>
</div>
You can try this:
$(".btn-outline-primary").click(function(){
console.log($(this).prop('value'));
});
To get the value of a tag , you could always use the value method.
How :
document.getElementsByClassName('btn-outline-primary")[0].value;
This will get the value of the first element with class btn-outline-primary
If you wish to get the values of all elements :
var arr = document.getElementsByClassName('btn-outline-primary');
var array = []
arr.map(_=>array.push(_.value))
In the case you are using JQuery you will need to add
.attr('value')
to get the value
You could find all buttons with active class and get their value
Something like:
var values = [];
$('.btn-outline-primary.active').each(function(key, value){
values.push($(this).val());
});
values array will have all your values of active buttons
To get a value of clicked button you can do this. Just use the value property of the button to get the value associated with the corresponding button.
const buttons = document.querySelectorAll('.btn-outline-primary');
[...buttons].forEach(item => {
item.addEventListener('click', event => {
console.log(item.value);
});
});
<div class="form-row">
<div class="btn-group">
<div class="col">
<div class="form-group">
<input id="MR" type="button" class="btn btn-outline-primary" value="MR" name="MR">
</div>
</div>
<div class="col">
<div class="form-group">
<input id="CT" type="button" class="btn btn-outline-primary" value="CT" name="CT">
</div>
</div>
<div class="col">
<div class="form-group">
<input id="PT" type="button" class="btn btn-outline-primary" value="PT" name="PT">
</div>
</div>
<div class="col">
<div class="form-group">
<input id="US" type="button" class="btn btn-outline-primary" value="US" name="US">
</div>
</div>
</div>
</div>
And if you want to store the value for later use then you can simply assign it to some variable.
const buttons = document.querySelectorAll('.btn-outline-primary');
let clickedValue;
[...buttons].forEach(item => {
item.addEventListener('click', event => {
clickedValue = item.value;
});
});
I have a form when I click add button, it should pass the form data values to AJAX data. When I tried to use console.log the values are empty. I have tried both the Serialize() and FormData() methods. both showing empty values.
<div class="modal-content">
<div class="modal-header clearfix ">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<i class="pg-close fs-14"></i>
</button>
<h4 class="modal-title p-b-5"><span class="semi-bold">Add Invoice Period</span></h4>
</div>
<br />
<div class="modal-body">
<form role="form" id="invoiceForm" name="invoicePeriod" method="post" enctype='multipart/form-data'>
<div class="row">
<div class="col-sm-5">
<div class="form-group form-group-default">
<label>Start Date</label>
<input id="startDate" type="date" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-5">
<div class="form-group form-group-default">
<label>End Date</label>
<input id="endDate" type="date" class="form-control">
</div>
</div>
</div>
<div class="row">
<button id="add-app" type="button" class="pull-right btn btn-primary btn-cons" onclick="addPeriod()">Add</button>
<button type="button" class="pull-right btn btn-cons close" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</form>
</div>
</div>
<script>
function addPeriod() {
var form = document.querySelector('form');
//console.log($('form').serialize());
var formData = new FormData(form);
console.log(formData);
}
</script>
Your form fields should have a name attribute if you want them to show in the .serialize() method result, like :
<input id="startDate" type="date" class="form-control" name="start_date">
<input id="endDate" type="date" class="form-control" name="end_date">
function addPeriod() {
var form = document.querySelector('form');
console.log($('form').serialize());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal-content">
<div class="modal-body">
<form role="form" id="invoiceForm" name="invoicePeriod" method="post" enctype='multipart/form-data'>
<div class="row">
<div class="col-sm-5">
<div class="form-group form-group-default">
<label>Start Date</label>
<input id="startDate" type="date" class="form-control" name="start_date">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-5">
<div class="form-group form-group-default">
<label>End Date</label>
<input id="endDate" type="date" class="form-control" name="end_date">
</div>
</div>
</div>
<div class="row">
<button id="add-app" type="button" class="pull-right btn btn-primary btn-cons" onclick="addPeriod()">Add</button>
<button type="button" class="pull-right btn btn-cons close" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</form>
</div>
</div>
Your codes lacks of form action, input names and Ajax request.
function addPeriod() {
//It could be better to get form by id because there might be multiple forms in the page
var form = $('#invoiceForm');
var formData = form.serialize();
$.ajax({
type: "POST",
url: form.attr('action'),//Or you can define the action endpoint manually
data: formData,
success: function( response ) {
console.log( response );
}
});
console.log(formData);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="modal-content">
<div class="modal-header clearfix ">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<i class="pg-close fs-14"></i>
</button>
<h4 class="modal-title p-b-5"><span class="semi-bold">Add Invoice Period</span></h4>
</div>
<br />
<div class="modal-body">
<form role="form" id="invoiceForm" action="sample/sampleform" name="invoicePeriod" method="post" enctype='multipart/form-data'>
<div class="row">
<div class="col-sm-5">
<div class="form-group form-group-default">
<label>Start Date</label>
<input id="startDate" type="date" class="form-control" name="startDate">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-5">
<div class="form-group form-group-default">
<label>End Date</label>
<input id="endDate" type="date" class="form-control" name="endDate">
</div>
</div>
</div>
<div class="row">
<button id="add-app" type="button" class="pull-right btn btn-primary btn-cons" onclick="addPeriod()">Add</button>
<button type="button" class="pull-right btn btn-cons close" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</form>
</div>
</div>
I having trouble for adding a multiple Sub Author in my form, I have a form that you can add a sub author. The code works if I only submit one sub author but if multiple sub author the codes not working.
Here's the code of my text box in FormAddBook.
<input type="text" class="form-control" placeholder="Sub Authors" name="SubAuthors[]" maxlength="50" />
And when you want to add another sub author, text box will appear when yun click the Add Sub Author with the same name of textbox.
The codes work when one sub author only but if multiple sub authors the codes not working.
Here's the code of my jquery.
$.ajax({
type: 'POST',
url: 'proc/exec/exec-insert-book.php',
data: $('#FormAddBook').serialize(),
});
Does the Serialize cannot recognize the another text box?
Sorry for my bad english.
Here's the HTML Form code.
<form id="FormAddBook">
<div class="modal-body">
<div class="row">
<div class="col-lg-6 hide" >
<label>Accession No:</label>
<div class="form-group">
<input type="text" class="form-control" placeholder="Accession No" name="AccessionNo" readonly/>
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<label>ISBN:</label>
<input type="text" class="form-control" placeholder="ISBN" name="BookISBN" maxlength="20" />
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label>Date Book Added:</label>
<div id="DateBookAdded" class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="text" class="form-control" placeholder="Date Book Added" name="DateBookAdded" readonly/>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label>Archived Date Extension:</label>
<div id="BookAuthLast" class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="text" class="form-control" placeholder="" name="ArchivedDateExt" readonly/>
</div>
</div>
</div>
<div id="subauthcont">
<div class="subAuthors col-lg-12">
<div class="form-group">
<label>Sub authors:</label>
<div class="input-group">
<input type="text" class="form-control" placeholder="Sub Authors" name="SubAuthors[]" maxlength="50" />
<span class="input-group-btn" disabled>
<button id="btnAddSubAuth" class="btn btn-info" type="button" ><i class="fa fa-user" aria-hidden="true"></i></button>
</span>
</div>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="form-group">
<label>Subject:</label>
<select class="form-control" name="Description">
<option>Generalities</option>
<option>Philosophy and Psychology</option>
<option>Religion</option>
<option>Social Science</option>
<option>Languages</option>
<option>Science</option>
<option>Technology</option>
<option>Arts and Recreation</option>
<option>Literature</option>
<option>Geography and History</option>
</select>
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label>Status:</label>
<select class="form-control" name="Status" readonly>
<option>Available</option>
</select>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="btnSave2" type="submit" class="btn btn-primary asd">Save</button>
</div>
</form>
</div>
I have a one text box search, and one button,when i add the text and click button, related data will be getting but when i click another search.that is taking same id,previous id not clearing. how to clear that id
<div class="col-lg-4 col-sm-4 col-xs-12">
<i class="glyphicon glyphicon-search"></i>
<div class="form-group">
<input type="text" class="form-control" id="isbncollegeid" data-ng-model="isbncollege" placeholder=" Search By college ISBN" name="isbncollegeid">
</div>
</div>
<div class="col-sm-4">
<br />
<div class="form-group">
<input type="hidden" id="bookcollgeIsbn" name="bookcollgeIsbn" />
<button type="button" class="btn btn-sky" id="IsbntcolDetails" data-ng-disabled="LibraryIsbnForm.$invalid" data-ng-click="DetailscolByISBN()">Get Details<i class="fa fa-exclamation"></i>
</button>
<button type="button" class="btn btn-sky" id="clear" data-ng-click="ClearISbnCollege()">Clear<i class="fa fa-exclamation"></i>
</button>
</div>
</div>
In your ClearISbnCollege just make isbncollege model empty
$scope.ClearISbnCollege = function() {
$scope.isbncollege = "";
}
When you will click the Clear button, input will be emptied.
You can use below line of code after getting results in javascript:
document.getElementById('elementid').value = "";
in Jquery:
$('#elementid').val("");