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
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.
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);
}
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);
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.
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