How to get multiple photo names in js? - javascript

I tried the code below to get the names of all the images I selected, but when 'alert' I only got 1 name out of the many names I chose. I want all the names of the photos I have selected to be saved in an array
----------------js code-------
$('input[type=file]')[0].files[0].name;
------------html-------------------
<div class="form-group">
<label for="file">Chแปn file แบขnh</label>
<input class="form-control" id="file" type="file" name="image[]" multiple="multiple"/>
<input type="submit" value="upload" />
</div>

var images = $('input[type=file]')[0].files;
let imageNames = [];
if(images && images.length) {
imageNames = images.map(image => image.name);
}
console.log('All Images', imageNames);
You can try above solution...
You are using only first image from the array, that's why you are getting only one/first image every time.

welcome to SO. you may need to update the question/description as its vague. here is a small snippet to print all the attriutes of uploaded files as you requested.
function printFiles() {
let dt = $('input[type=file]')[0].files;
for (let i = 0; i < dt.length; i++) {
console.log('file Name: ' + dt[i].name + ', file size: ' + dt[i].size + ', file type: ' + dt[i].type + ', last Modified: ' + dt[i].lastModified +
', last ModifiedDate: ' + dt[i].lastModifiedDate);
console.log('-----------------------------------------');
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label for="file">Chแปn file แบขnh</label>
<input class="form-control" id="file" type="file" name="image[]" multiple="multiple" />
<input type="submit" value="upload" onclick="printFiles()" />
</div>

Related

Google Apps Scripts: Function running twice from .showModalDialog form submit

This is my first post and I have searched for days and can not find a solution for this problem.
I have a custom menu in sheets that pops up a .showModalDialog html. A user fills that out with information and clicks submit. This runs a function in the back end that creates folders/files and adds the user data to various sheets etc.
All this is working I have a Ui.alert that I am using to check the data entered is correct and for some reason the function is being trigger twice and the UI.alert is popping up again as a result. I have a fail safe that checks if one of the fields exists so it doesn't write again but the pop up is a really bad user experience.
Any help would be much appreciated.
Function to create custom menu:
function onOpen() {
SpreadsheetApp.getUi()
.createMenu('TOA - Menu')
.addItem('Add New Account', 'addAccount')
.addItem('Update Brand', 'updateBrand')
.addItem('Go Live', 'goLive')
.addToUi();
}
Function to bring up form:
function addAccount() {
const html = HtmlService.createHtmlOutputFromFile('newAccount')
.setTitle('Add New Account')
.setWidth(1000)
.setHeight(800);;
SpreadsheetApp.getUi()
.showModalDialog(html, 'Add New Account');
}
Code for the form:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
#itemDisplay {
display: none;
}
#modDisplay {
display: none;
}
#priceDisplay {
display: none;
}
#businessTypeDisplay {
display: none;
}
</style>
</head>
<body>
<h1>
Add New Account
</h1>
<form id="myForm" onsubmit="handleNewAccountFormSubmit(this);">
<div>
<label for="newBrand">Brand:</label>
<input name="newBrand" type="text" placeholder="Brand Name" required>
</div>
<div>
<p>Location</p>
<label for="country">Country:</label>
<select name="country" id="" onchange="" required>
<option value="" disabled selected>Select Country</option>
<option value="US">US</option>
</select>
<label for="state">State/Province:</label>
<input name="state" type="text" placeholder="State or province" required>
<label for="city">City:</label>
<input name="city" type="text" placeholder="City" required>
<div>
<label for="businessType">Business Type:</label>
<select name="businessType" id="businessTypeSelect" onchange="businessOtherDisplay(this.value);" required>
<option value="" disabled selected>Select Request Reason</option>
<option value="americanDiner">American Diner</option>
<option value="pizzaParlor">Pizza Parlor</option>
<option value="coffeeShop">Coffee Shop</option>
<option value="candyShop">Candy Store</option>
<option value="iceCreamParlor">Ice Cream Parlor</option>
<option value="burgerShop">Burger Shop</option>
<option value="otherNon_AmericanDiner">Other non-American Diner (Foreign servings)</option>
<option value="other">Other (not listed above)</option>
</select>
</div>
<div id="businessTypeDisplay">
<label for="businessTypeOther">Business Type Other:</label>
<input name="businessTypeOther" type="text" placeholder="Business type if not listed above">
</div>
<div>
<label for="integration">Integration:</label>
<select name="integration" required>
<option value="" disabled selected>Select Request Reason</option>
<option value="square">Square</option>
<option value="clover">Clover</option>
<option value="cloverPilot">Clover Pilot</option>
<option value="stripe">Stripe</option>
<option value="gPay">GPAY</option>
<option value="others" >Others</option>
</select>
</div>
<label for="menuSource">File Attachment/Source:</label>
<input name="menuSource" type="text" placeholder="Path to menu" required url>
<div>
<p>Do you need an item hidden/disabled?</p>
<label for="yes">Yes</label>
<input name="disableItemOption" type="radio" value="yes" onclick="showItem()">
<label for="no">No</label>
<input name="disableItemOption" type="radio" value="no" checked onclick="hideItem()">
</div>
<div id="itemDisplay">
<label for="itemDisable">Which item(s) should be disabled?</label>
<textarea id="disabledItem" name="itemDisable" cols="40" rows="5"></textarea>
</div>
<div>
<p>Do you need a modifier hidden/disabled?</p>
<label for="yes">Yes</label>
<input name="disableModOption" type="radio" value="yes" onclick="showMod()">
<label for="no">No</label>
<input name="disableModOption" type="radio" value="no" checked onclick="hideMod()">
</div>
<div id="modDisplay">
<label for="modDisable">Which modifier(s) should be disbaled?</label>
<textarea id="disabledMod" name="modDisable" cols="40" rows="5"></textarea>
</div>
<div>
<p>Do you need to update a price?</p>
<label for="yes">Yes</label>
<input name="updatePrice" type="radio" value="yes" onclick="showPrice()">
<label for="no">No</label>
<input name="updatePrice" type="radio" value="no" checked onclick="hidePrice()">
</div>
<div id="priceDisplay">
<label for="priceUpdate">Which item/modifier needs a price update?</label>
<textarea id="updatedPrice" name="priceUpdate" cols="40" rows="5" priceUpdate></textarea>
</div>
<div>
<label for="otherUpdates">Any other information needed on the menu?</label>
<input name="otherUpdates" type="text" placeholder="List other instructions here">
</div>
<div>
<label for="specialInstructions">Are there special instructions/notes for this brand?</label>
<input name="specialInstructions" type="text" placeholder="List special instructions here">
</div>
<input id="submitButton" type="submit" value="Submit">
<input type="button" value="Cancel" onclick="google.script.host.close()">
</div>
</form>
<script>
function handleNewAccountFormSubmit(formObject) {
document.getElementById('submitButton').disabled=true;
google.script.run.withSuccessHandler().processNewAccountForm(formObject);
}
function disableSubmit() {
document.getElementById('submitButton').disabled=true;
document.getElementById('submitButton').value='Sending...';
}
function showItem(){
document.getElementById('itemDisplay').style.display ='block';
document.getElementById('disabledItem').required = true;
};
function hideItem(){
document.getElementById('itemDisplay').style.display = 'none';
document.getElementById('disabledItem').required = false;
};
function showMod(){
document.getElementById('modDisplay').style.display ='block';
document.getElementById('disabledMod').required = true;
};
function hideMod(){
document.getElementById('modDisplay').style.display = 'none';
document.getElementById('disabledMod').required = false;
};
function showPrice(){
document.getElementById('priceDisplay').style.display ='block';
document.getElementById('updatedPrice').required = true;
};
function hidePrice(){
document.getElementById('priceDisplay').style.display = 'none';
document.getElementById('updatedPrice').required = false;
};
function businessOtherDisplay(value) {
if(value === "other") {
document.getElementById('businessTypeDisplay').style.display = 'block';
} else {
document.getElementById('businessTypeDisplay').style.display = 'none';
};
};
</script>
</body>
</html>
And the code to handle the logic
function processNewAccountForm(formObject) {
const ui = SpreadsheetApp.getUi();
const ass = SpreadsheetApp.getActiveSpreadsheet();
const ss = ass.getActiveSheet();
const timestamp = Utilities.formatDate(new Date(), "GMT+8", "MM/dd/yyyy HH:mm:ss");
const userEmail = Session.getActiveUser().getEmail();
const brandName = formObject.newBrand;
// Add alert to check data entered is correct
const response = ui.alert('Please confirm the following information is correct:',
'๐—•๐—ฟ๐—ฎ๐—ป๐—ฑ ๐—ก๐—ฎ๐—บ๐—ฒ: ' + formObject.newBrand +
'\n๐—–๐—ผ๐˜‚๐—ป๐˜๐—ฟ๐˜†: ' + formObject.country +
'\n๐—ฆ๐˜๐—ฎ๐˜๐—ฒ: ' + formObject.state +
'\n๐—–๐—ถ๐˜๐˜†: ' + formObject.city +
'\n๐—•๐˜‚๐˜€๐—ถ๐—ป๐—ฒ๐˜€๐˜€ ๐—ง๐˜†๐—ฝ๐—ฒ: ' + formObject.businessType +
'\n๐—œ๐—ป๐˜๐—ฒ๐—ด๐—ฟ๐—ฎ๐˜๐—ถ๐—ผ๐—ป: ' + formObject.integration +
'\n๐—™๐—ถ๐—น๐—ฒ ๐—ฆ๐—ผ๐˜‚๐—ฟ๐—ฐ๐—ฒ: ' + formObject.menuSource +
'\n๐——๐—ผ ๐˜†๐—ผ๐˜‚ ๐—ป๐—ฒ๐—ฒ๐—ฑ ๐—ฎ๐—ป ๐—ถ๐˜๐—ฒ๐—บ ๐—ต๐—ถ๐—ฑ๐—ฑ๐—ฒ๐—ป/๐—ฑ๐—ถ๐˜€๐—ฎ๐—ฏ๐—น๐—ฒ๐—ฑ?: ' + formObject.disableItemOption +
'\n๐—ช๐—ต๐—ถ๐—ฐ๐—ต ๐—ถ๐˜๐—ฒ๐—บ(๐˜€) ๐˜€๐—ต๐—ผ๐˜‚๐—น๐—ฑ ๐—ฏ๐—ฒ ๐—ฑ๐—ถ๐˜€๐—ฎ๐—ฏ๐—น๐—ฒ๐—ฑ?: ' + formObject.itemDisable +
'\n๐——๐—ผ ๐˜†๐—ผ๐˜‚ ๐—ป๐—ฒ๐—ฒ๐—ฑ ๐—ฎ ๐—บ๐—ผ๐—ฑ๐—ถ๐—ณ๐—ถ๐—ฒ๐—ฟ ๐—ต๐—ถ๐—ฑ๐—ฑ๐—ฒ๐—ป/๐—ฑ๐—ถ๐˜€๐—ฎ๐—ฏ๐—น๐—ฒ๐—ฑ?: ' + formObject.disableModOption +
'\n๐—ช๐—ต๐—ถ๐—ฐ๐—ต ๐—บ๐—ผ๐—ฑ๐—ถ๐—ณ๐—ถ๐—ฒ๐—ฟ๐˜€ ๐˜€๐—ต๐—ผ๐˜‚๐—น๐—ฑ ๐—ฏ๐—ฒ ๐—ฑ๐—ถ๐˜€๐—ฎ๐—ฏ๐—น๐—ฒ๐—ฑ?: ' + formObject.modDisable +
'\n๐——๐—ผ ๐˜†๐—ผ๐˜‚ ๐—ป๐—ฒ๐—ฒ๐—ฑ ๐˜๐—ผ ๐˜‚๐—ฝ๐—ฑ๐—ฎ๐˜๐—ฒ ๐—ฎ ๐—ฝ๐—ฟ๐—ถ๐—ฐ๐—ฒ?: ' + formObject.updatePrice +
'\n๐—ช๐—ต๐—ถ๐—ฐ๐—ต ๐—ถ๐˜๐—ฒ๐—บ/๐—บ๐—ผ๐—ฑ๐—ถ๐—ณ๐—ถ๐—ฒ๐—ฟ ๐—ป๐—ฒ๐—ฒ๐—ฑ๐˜€ ๐—ฎ ๐—ฝ๐—ฟ๐—ถ๐—ฐ๐—ฒ ๐˜‚๐—ฝ๐—ฑ๐—ฎ๐˜๐—ฒ?: ' + formObject.priceUpdate +
'\n๐—”๐—ป๐˜† ๐—ผ๐˜๐—ต๐—ฒ๐—ฟ ๐—ถ๐—ป๐—ณ๐—ผ๐—ฟ๐—บ๐—ฎ๐˜๐—ถ๐—ผ๐—ป ๐—ป๐—ฒ๐—ฒ๐—ฑ๐—ฒ๐—ฑ ๐—ผ๐—ป ๐˜๐—ต๐—ฒ ๐—บ๐—ฒ๐—ป๐˜‚?: ' + formObject.otherUpdates +
'\n๐—”๐—ฟ๐—ฒ ๐˜๐—ต๐—ฒ๐—ฟ๐—ฒ ๐˜€๐—ฝ๐—ฒ๐—ฐ๐—ถ๐—ฎ๐—น ๐—ถ๐—ป๐˜€๐˜๐—ฟ๐˜‚๐—ฐ๐˜๐—ถ๐—ผ๐—ป๐˜€/๐—ป๐—ผ๐˜๐—ฒ๐˜€ ๐—ณ๐—ผ๐—ฟ ๐˜๐—ต๐—ถ๐˜€ ๐—ฏ๐—ฟ๐—ฎ๐—ป๐—ฑ?: ' + formObject.specialInstructions
, ui.ButtonSet.YES_NO);
if(response === ui.Button.YES) {
var lock = LockService.getScriptLock();
lock.waitLock(60000);
try {
const brandColumn = ss.getRange('D:D');
const brandValues = brandColumn.getValues();
let i = 1;
// Check for exisiting brand name
for(i=1; i < brandValues.length; i++) {
if(brandValues[i].toString().toLowerCase().trim() == brandName.toString().toLowerCase().trim() && ss.getRange(i+1,5).getValue() == 'New Brand'){
ui.alert("Brand name already created");
return;
}
};
// Create folder and PDF with build instructions
const parentFolder = DriveApp.getFolderById("RemovedfolderID");// how does this work with Shared drives? Create and move?
// const parentFolder = DriveApp.getFolderById("RemovedfolderID"); < ---- Team drive ID (notworking..) My folder -> RemovedfolderID
const newFolder = parentFolder.createFolder(brandName);
const docFile = newFolder.createFile(brandName+'.pdf',
'๐—•๐—ฟ๐—ฎ๐—ป๐—ฑ ๐—ก๐—ฎ๐—บ๐—ฒ: ' + formObject.newBrand +
'\n๐—–๐—ผ๐˜‚๐—ป๐˜๐—ฟ๐˜†: ' + formObject.country +
'\n๐—ฆ๐˜๐—ฎ๐˜๐—ฒ: ' + formObject.state +
'\n๐—–๐—ถ๐˜๐˜†: ' + formObject.city +
'\n๐—•๐˜‚๐˜€๐—ถ๐—ป๐—ฒ๐˜€๐˜€ ๐—ง๐˜†๐—ฝ๐—ฒ: ' + formObject.businessType +
'\n๐—œ๐—ป๐˜๐—ฒ๐—ด๐—ฟ๐—ฎ๐˜๐—ถ๐—ผ๐—ป: ' + formObject.integration +
'\n๐—™๐—ถ๐—น๐—ฒ ๐—ฆ๐—ผ๐˜‚๐—ฟ๐—ฐ๐—ฒ: ' + formObject.menuSource +
'\n๐——๐—ผ ๐˜†๐—ผ๐˜‚ ๐—ป๐—ฒ๐—ฒ๐—ฑ ๐—ฎ๐—ป ๐—ถ๐˜๐—ฒ๐—บ ๐—ต๐—ถ๐—ฑ๐—ฑ๐—ฒ๐—ป/๐—ฑ๐—ถ๐˜€๐—ฎ๐—ฏ๐—น๐—ฒ๐—ฑ?: ' + formObject.disableItemOption +
'\n๐—ช๐—ต๐—ถ๐—ฐ๐—ต ๐—ถ๐˜๐—ฒ๐—บ(๐˜€) ๐˜€๐—ต๐—ผ๐˜‚๐—น๐—ฑ ๐—ฏ๐—ฒ ๐—ฑ๐—ถ๐˜€๐—ฎ๐—ฏ๐—น๐—ฒ๐—ฑ?: ' + formObject.itemDisable +
'\n๐——๐—ผ ๐˜†๐—ผ๐˜‚ ๐—ป๐—ฒ๐—ฒ๐—ฑ ๐—ฎ ๐—บ๐—ผ๐—ฑ๐—ถ๐—ณ๐—ถ๐—ฒ๐—ฟ ๐—ต๐—ถ๐—ฑ๐—ฑ๐—ฒ๐—ป/๐—ฑ๐—ถ๐˜€๐—ฎ๐—ฏ๐—น๐—ฒ๐—ฑ?: ' + formObject.disableModOption +
'\n๐—ช๐—ต๐—ถ๐—ฐ๐—ต ๐—บ๐—ผ๐—ฑ๐—ถ๐—ณ๐—ถ๐—ฒ๐—ฟ๐˜€ ๐˜€๐—ต๐—ผ๐˜‚๐—น๐—ฑ ๐—ฏ๐—ฒ ๐—ฑ๐—ถ๐˜€๐—ฎ๐—ฏ๐—น๐—ฒ๐—ฑ?: ' + formObject.modDisable +
'\n๐——๐—ผ ๐˜†๐—ผ๐˜‚ ๐—ป๐—ฒ๐—ฒ๐—ฑ ๐˜๐—ผ ๐˜‚๐—ฝ๐—ฑ๐—ฎ๐˜๐—ฒ ๐—ฎ ๐—ฝ๐—ฟ๐—ถ๐—ฐ๐—ฒ?: ' + formObject.updatePrice +
'\n๐—ช๐—ต๐—ถ๐—ฐ๐—ต ๐—ถ๐˜๐—ฒ๐—บ/๐—บ๐—ผ๐—ฑ๐—ถ๐—ณ๐—ถ๐—ฒ๐—ฟ ๐—ป๐—ฒ๐—ฒ๐—ฑ๐˜€ ๐—ฎ ๐—ฝ๐—ฟ๐—ถ๐—ฐ๐—ฒ ๐˜‚๐—ฝ๐—ฑ๐—ฎ๐˜๐—ฒ?: ' + formObject.priceUpdate +
'\n๐—”๐—ป๐˜† ๐—ผ๐˜๐—ต๐—ฒ๐—ฟ ๐—ถ๐—ป๐—ณ๐—ผ๐—ฟ๐—บ๐—ฎ๐˜๐—ถ๐—ผ๐—ป ๐—ป๐—ฒ๐—ฒ๐—ฑ๐—ฒ๐—ฑ ๐—ผ๐—ป ๐˜๐—ต๐—ฒ ๐—บ๐—ฒ๐—ป๐˜‚?: ' + formObject.otherUpdates +
'\n๐—”๐—ฟ๐—ฒ ๐˜๐—ต๐—ฒ๐—ฟ๐—ฒ ๐˜€๐—ฝ๐—ฒ๐—ฐ๐—ถ๐—ฎ๐—น ๐—ถ๐—ป๐˜€๐˜๐—ฟ๐˜‚๐—ฐ๐˜๐—ถ๐—ผ๐—ป๐˜€/๐—ป๐—ผ๐˜๐—ฒ๐˜€ ๐—ณ๐—ผ๐—ฟ ๐˜๐—ต๐—ถ๐˜€ ๐—ฏ๐—ฟ๐—ฎ๐—ป๐—ฑ?: ' + formObject.specialInstructions,
MimeType.PDF);
const fileURL = docFile.getUrl();
// add header row to spreadsheet
// Create Spreadsheet in Brand folder. Activity log.
const name = brandName + " Activity Log";
const id = newFolder.getId();
const resource = {
title: name,
mimeType: MimeType.GOOGLE_SHEETS,
parents: [{id: id}]
};
const fileJson = Drive.Files.insert(resource);
const fileId = fileJson.id;
const lastRow = ss.getLastRow();
const newEntry = [
lastRow,
timestamp,
timestamp,
formObject.newBrand,
'New Brand',
formObject.businessType,
formObject.integration,
'=HYPERLINK("'+formObject.menuSource+'")',
userEmail,
fileURL,
,
,
,
,
formObject.city,
formObject.state,
formObject.country,
fileId
];
const newSheet = SpreadsheetApp.openById(fileId);
const sheetRange = newSheet.getSheetByName("Sheet1").getRange(1,1,1,18);
const headers = [
['๐—œ๐—ป๐—ฑ๐—ฒ๐˜…',
'๐—•๐—ฟ๐—ฎ๐—ป๐—ฑ ๐—ผ๐—ฟ๐—ถ๐—ด๐—ถ๐—ป๐—ฎ๐—น ๐—ฐ๐—ฟ๐—ฒ๐—ฎ๐˜๐—ฒ ๐—ฑ๐—ฎ๐˜๐—ฒ',
'๐—ง๐—ถ๐—บ๐—ฒ ๐—œ๐—ป',
'๐—•๐—ฟ๐—ฎ๐—ป๐—ฑ ๐—ก๐—ฎ๐—บ๐—ฒ',
'๐—ฅ๐—ฒ๐—พ๐˜‚๐—ฒ๐˜€๐˜ ๐—ฟ๐—ฒ๐—ฎ๐˜€๐—ผ๐—ป',
'๐—•๐˜‚๐˜€๐—ถ๐—ป๐—ฒ๐˜€๐˜€ ๐˜๐˜†๐—ฝ๐—ฒ',
'๐—œ๐—ป๐˜๐—ฒ๐—ด๐—ฟ๐—ฎ๐˜๐—ถ๐—ผ๐—ป',
'๐— ๐—ฒ๐—ป๐˜‚ ๐—ฆ๐—ผ๐˜‚๐—ฟ๐—ฐ๐—ฒ',
'๐—–๐—ฟ๐—ฒ๐—ฎ๐˜๐—ฒ๐—ฑ ๐—ฏ๐˜†:',
'๐— ๐—ฒ๐—ป๐˜‚ ๐—œ๐—ป๐˜€๐˜๐—ฟ๐˜‚๐—ฐ๐˜๐—ถ๐—ผ๐—ป๐˜€',
'๐—”๐˜€๐˜€๐—ถ๐—ด๐—ป๐—ฒ๐—ฑ ๐˜๐—ผ?',
'๐—ง๐—ถ๐—บ๐—ฒ ๐—ข๐˜‚๐˜',
'๐—–๐—ผ๐—บ๐—ฝ๐—น๐—ฒ๐˜…๐—ถ๐˜๐˜† ๐—ฅ๐—ฎ๐˜๐—ถ๐—ป๐—ด',
'๐—š๐—ผ ๐—น๐—ถ๐˜ƒ๐—ฒ ๐—ฑ๐—ฎ๐˜๐—ฒ ๐—ฎ๐—ป๐—ฑ ๐˜๐—ถ๐—บ๐—ฒ',
'๐—–๐—ถ๐˜๐˜†',
'๐—ฆ๐˜๐—ฎ๐˜๐—ฒ/๐—ฃ๐—ฟ๐—ผ๐˜ƒ๐—ถ๐—ป๐—ฐ๐—ฒ',
'๐—–๐—ผ๐˜‚๐—ป๐˜๐—ฟ๐˜†',
'๐—”๐—ฐ๐˜๐—ถ๐˜ƒ๐—ถ๐˜๐˜† ๐—Ÿ๐—ผ๐—ด']
];
sheetRange.setValues(headers);
// Add data to last row in main tracker
ss.appendRow(newEntry);
// Copy data to spreadsheet brand
const activitySheet = newSheet.getSheetByName("Sheet1")
activitySheet.appendRow(newEntry);
// Flush changes before releasing lock
SpreadsheetApp.flush();
} catch(e) {
ui.alert("System is Busy, Please try again in a moment.");
return
} finally {
lock.releaseLock();
return
}
} else {
// action to take if info is incorrect? or No is clicked
};
};
I know that multiple triggers have been a known issue as per posts from Cooper and others here and here but I can't seem to be able to adopt them for my solution.
Thanks in advance for any ideas.
These are the changes I'd make to the dialog:
<input id="btn1" type="button" value="Submit" onClick="handleNewAccountFormSubmit(this.parentNode);" />
<input type="button" value="Cancel" onclick="google.script.host.close()">
</div>
</form>
<script>
function handleNewAccountFormSubmit(formObject) {
document.getElementById('btn1').disabled=true;
google.script.run.processNewAccountForm(formObject);
}
I'm not saying that your way is wrong. That's just the way I would try to do it. But realistically it's a fairly large dialog and your just going to have to dig in and figure it out. If I were doing it and I was having a lot of problems I'd probably start with a simpler version and get it to work and then slowly add more features.
This is actually a fairly difficult time two write code in the middle of a transition between two runtimes. I've just noticed that I've lost my content assist in some areas in ES5 but they now work in ES6 so things can be difficult to deal with.

Multiple fileUpload Problem for different indexes

I am having problem with my jquery code
I am dynamically adding multiple <input type='file' multiple> each of them name parameter is change means 1st one is
color_images_1 <input type='file' multiple name='color_images_1'>
and will dynamically increase this 1 okay so every color has multiple images of its own color.
So basically I want to achieve this and I am using jS new FormData for it so here's my problem I am appending multiple files to formdata.
$(function() {
let $i = 1;
$(document).on('click', '.btn_color', function() {
$i++;
$('.color_wrapper').append("<div class='form-group'><label for='color_name" + $i + "'>Color Name</label><input type='text' name='color_name" + $i + "' id='color_name" + $i + "' class='form-control'></div><div class='form-group'><label for='sku" + $i + "'>Sku</label><input type=text class='form-control' id='sku" + $i + "' name='sku" + $i + "'></div><div class='form-group'><button type='button' class='btn btn-link pull-right btn_color'>Add more colors</button><label for='color_images" + $i + "'>Color Images</label><input type='file' name='color_images" + $i + "' multiple id='color_images" + $i + "' class='form-control'></div>");
});
$("#product_form").on('submit', function(e) {
e.preventDefault();
let files = '';
let form = document.getElementById('product_form');
let formData = new FormData(form);
files = $("#color_images" + $i).get(0).files;
$(files).each(function(index, file){
formData.append("color_images_" + [$i],file);
});
formData.append('variable', $i);
$.ajax({
url: 'product_ajax.php',
method: 'post',
data: formData,
success: function(data) {
console.log(data);
},
contentType: false,
cache: false,
processData: false
});
});
});
Now I am getting just only one file if I give index so I am getting multiple files otherwise not
[color_images_1] => Array
(
[name] => dht_feed.dat
[type] => application/octet-stream
[tmp_name] => D:\xampp\tmp\php4E11.tmp
[error] => 0
[size] => 2
)
)
what I want
color_images_1 its all multiple files
color_images_2 its all multiple files
html Code:
<form id="product_form" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="product_name">Product Name</label>
<input type="text" class="form-control" name="product_name" id="product_name">
</div>
<div class="form-group">
<label for="product_slug">Product Slug</label>
<input type="text" class="form-control" name="product_slug" id="product_slug">
</div>
<div class="form-group">
<label for="product_price">Product Price</label>
<input type="text" class="form-control" name="product_price" id="product_price">
</div>
<div class="form-group">
<label for="product_description">Product Description</label>
<textarea class="form-control" name="product_description" id="product_description"></textarea>
</div>
<div class="form-group">
<label for="color_name1">Color Name</label>
<input type="text" name="color_name1" id="color_name1" class="form-control">
</div>
<div class="form-group">
<label for="sku1">Stock Keeping Unit</label>
<input type="text" name="sku1" id="sku1" class="form-control">
</div>
<div class="form-group">
<button class="btn btn-link pull-right btn_color" type="button">Add more colors</button>
<label for="color_images1">Color Images</label>
<input type="file" name="color_images1" multiple id="color_images1" class="form-control">
</div>
<div class="color_wrapper">
</div>
<button class="btn btn-primary btn-block" type="submit">Add Product</button>
</form>
You need to iterate i as well.
Please replace below code
files = $("#color_images" + $i).get(0).files;
$(files).each(function(index, file){
formData.append("color_images_" + [$i],file);
});
formData.append('variable', $i);
With this one
for (var j = 1; j <= $i; j++) {
files = $("#color_images" + j).get(0).files;
$(files).each(function(index, file) {
formData.append("color_images_" + [j], file);
});
formData.append("variable", j);
}

fetch name of file/image uploaded

I have a form which has file upload input
<form action="abc.php" method="post">
<input name="fileToUpload" type="file" />
<div id="view"></div>
<button type="submit" value="submit" name="submit">Submit</button>
</form>
I wish to fetch the name of the file/image uploaded on click of this input and display it under <div id="view"></div>, but this needs to be done before the form submission. can anyone please tell how this can be done
Try to update your code to following,
<form action="abc.php" method="post">
<input name="fileToUpload" id="files" type="file" />
<div id="view"></div>
<button type="submit" value="submit" name="submit">Submit</button>
</form>
<script>
var control = document.getElementById("files");
control.addEventListener("change", function(event) {
// When the control has changed, there are new files
var i = 0,
files = control.files,
len = files.length;
for (; i < len; i++) {
document.getElementById('view').innerHTML = files[i].name;
}
}, false);
</script>
I hope this helps.
Try this code, it will surely help
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>
Script Code
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// files is a FileList of File objects. List some properties.
var output = [];
for (var i = 0, f; f = files[i]; i++) {
output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
f.size, ' bytes, last modified: ',
f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
'</li>');
}
document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);

Save dynamically generated input fields

I am using this code to generate dynamically ADD More input fields and then plan on using Save button to save their values in database. The challenge is that on Save button, I want to keep displaying the User Generated Input fields. However they are being refreshed on Save button clicked.
javascript:
<script type="text/javascript">
var rowNum = 0;
function addRow(frm) {
rowNum++;
var row = '<p id="rowNum' + rowNum + '">Item quantity: <input type="text" name="qty[]" size="4" value="' + frm.add_qty.value + '"> Item name: <input type="text" name="name[]" value="' + frm.add_name.value + '"> <input type="button" value="Remove" onclick="removeRow(' + rowNum + ');"></p>';
jQuery('#itemRows').append(row);
frm.add_qty.value = '';
frm.add_name.value = '';
}
function removeRow(rnum) {
jQuery('#rowNum' + rnum).remove();
}
</script>
HTML:
<form method="post">
<div id="itemRows">Item quantity:
<input type="text" name="add_qty" size="4" />Item name:
<input type="text" name="add_name" />
<input onclick="addRow(this.form);" type="button" value="Add row" />
</div>
<p>
<button id="_save">Save by grabbing html</button>
<br>
</p>
</form>
One approach is to define a template to add it dynamically via jQuery
Template
<script type="text/html" id="form_tpl">
<div class = "control-group" >
<label class = "control-label"for = 'emp_name' > Employer Name </label>
<div class="controls">
<input type="text" name="work_emp_name[<%= element.i %>]" class="work_emp_name"
value="" />
</div>
</div>
Button click event
$("form").on("click", ".add_employer", function (e) {
e.preventDefault();
var tplData = {
i: counter
};
$("#word_exp_area").append(tpl(tplData));
counter += 1;
});
The main thing is to call e.preventDefault(); to prevent the page from reload.
You might want to check this working example
http://jsfiddle.net/hatemalimam/EpM7W/
along with what Hatem Alimam wrote,
have your form call an upate.php file, targeting an iframe of 1px.

asp.net mvc and javascript textbox issue

I have a problem with the TextBox. When I was entering duplicate data, it is not allowing. That is what exactly I need but after saving data again it is allowing the duplicate data. How can I handle the scenario?
Here is my code.
var Controls = {
saveObjectives: function (actionurl) {
var frm = $('form[name=frmObjectives]')
frm.attr('action', actionurl);
frm.submit();
},
addObjectiveCheckbox: function () {
var text = $('#txtObjective').val();
$('#txtObjective').val('');
if ($.trim(text) == '')
return;
if ($('input[type=checkbox][value="' + text + '"]').length == 0)
$('#dvObjectives').prepend('<input type="checkbox" name="chkNewobjectives" value="' + text + '" Checked /> ' + text + '<br />');
},
And my HTML code is:
<input id="btnAddObj" class="btn" type="button" onclick="Controls.addObjectiveCheckbox();" value="Add Objective"/>
</div>
<div id="dvObjectives" name="ObjectivesList">
#foreach (Andromeda.Core.Entities.Objectives objective in Model)
{
<label class="checkbox">
<input type="checkbox" name="chkobjectives" Checked value="#objective.ObjectiveID" />#objective.ObjectiveText
</label>
}
</div>
You are using value='whatever text` in the jQuery, but value='ObjectiveID' in the view. This should fix it:
<input type="checkbox" name="chkobjectives" Checked value="#objective.ObjectiveText" />#objective.ObjectiveText

Categories