Append incremented number to multiple uploaded images using JavaScript
I'm trying to upload multiple images to our HP Records Manager Database using the ServiceAPI .NET SDK. Written in ASP.NET MVC.
The images upload successfully but they all have the same Title as it uses the same input field.
I want to be able to create a loop that will append an incremented number to the end of the Record Title. (e.g Upload_1, Upload_2, Upload_3....and so on)
<form action="Record" method="post" enctype="multipart/form-data">
<input id="gpsearchtitle" type="text" name="RecordTypedTitle" value="" required="True"/>
<input id="choose" type="file" name="upload" multiple="multiple"/>
<button type="submit">Upload</button>
</form>
Is there a way of appending a incremented number using JavaScript?
Update
I have tried doing this:
<script>
function appendNo(){
var inp = document.getElementById('choose');
var txt = document.getElementById('gpsearchtitle')
for (var i = 0; i < inp.files.length;) {
var name = inp.files.item(i).name;
txt.value = txt.value + "_" + i;
i++;
}}
</script>
However, this adds the incremental count to all image Titles. For example if i upload 4 images the Titles show up as, Upload_0_1_2_3, Upload_0_1_2_3, Upload_0_1_2_3, Upload_0_1_2_3
Try grabbing each title (after loading dom elements) and setting them incrementally:
<script type="text/javascript">
function pageLoad() {
var titles = $('input[name="RecordTypedTitle"]');
for (t in titles)
{
titles[t].val(t);
}
}
</script>
Then in body, include the parameter onload="pageLoad();"
Related
I have a program that is supposed to group links together. Like minecraft saved toolbars, you can save a collection of links, then enter in the name of a group and it will open all of them.
But my program is having trouble with getting the list from localStorage when the name is entered into the text box meant to get the link. But when I just use the value of the text box meant to name the group, it works fine.
My code is here:
var groupName = document.getElementById('name');
var link = document.getElementById('newLink');
var linkCounter = 0
var getByName = document.getElementById('getByName').value
function startGroup() {
localStorage.setItem(groupName.value, groupName.value);
console.log(localStorage.getItem(groupName.value))
}
function addLink() {
linkCounter++;
localStorage.setItem(groupName.value + '_link' + linkCounter, link.value);
console.log(localStorage.getItem(groupName.value + '_link' + linkCounter))
}
function saveGroup() {
localStorage.setItem(groupName.value + '_length', linkCounter);
console.log(localStorage.getItem(groupName.value + '_length'))
alert(groupName.value);
}
function getGroup() {
// if I replace getByName with groupName.value, it works fine.
var len = localStorage.getItem(getByName + '_length')
console.log(len)
for (var x = 1; x <= len; x++) {
window.open(localStorage.getItem(getByName + '_link' + x));
}
}
<!DOCTYPE html>
<html>
<a href='readit.html'>READ THIS BEFORE USING</a>
<p>WHEN ADDING A LINK YOU NEED TO PASTE IT OR ADD HTTPS:// TO THE BEGINNING OF THE LINK.</p>
<div id='toolbars'>
<p>Open a group!</p>
</div>
<div id='create'>
<p>Create some bookmark groups!</p>
<input type='text' placeholder='name your group' id='name'>
<button onclick='startGroup()'>Let's add some links!</button>
<br>
<input type='text' placeholder='add a link' id='newLink'>
<button onclick='addLink()'>Submit</button>
<br>
<button onclick='saveGroup()'>SAVE</button>
</div>
<div id='preview'>
<br><br>
<button onclick='getGroup()'>Open this group</button>
<input type="text" id="getByName">
</div>
</html>
<script src="script.js"></script>
You are reading the value of the getByName input element at page load. Instead you should read the value at the time of need. So define getByName as the DOM element (not as its value):
var getByName = document.getElementById('getByName');
And where you currently reference getByName, suffix the .value property accessor. For instance:
var len = localStorage.getItem(getByName.value + '_length');
Side note: I find it easier to use a memory data structure for all your data, and when something is added to it, to write that complete data structure to one single local storage key, JSON formatted. You may want to look into that.
I'm taking an input from a user in javascript and using it to display that number of pages. Basically, I ask the user how many items they have. If they say, for example, 4, I need to ask them the name of each item on the next page. Then, on the next 4 pages, they are to input the value of each item one per page and finally, I will display a table of the items, values, and final sum. My question is:
After obtaining the number of items in my javascript file, how do I pass it back to my HTML file? Should I even be passing it back to my HTML file?
When I have the number of items, how do I open that many new files/pages for javascript and HTML based on it? Or can I do it all on one js file? I know it's quite redundant to open a new HTML and JS file for each item but I don't know how to clear the page each time after a button click and display a new input box on the same file.
Sorry if this is a really stupid question, just a confused begginer here. Thank you!
Here's what I have so far:
index.html:
<body>
<h1>Welcome!</h1>
<h2>Ready to track your items?</h2>
<p><button>Start</button></p>
</body>
items.html:
<body>
<h3>How many items do you have?</h3>
<p><input id="numItems"></p>
<script src="main.js"></script>
</body>
main.js:
var numIt = document.getElementById("numItems");
numIt.addEventListener("input", display);
function display(){
var item = parseFloat(numIt.value);
alert("you have " + item+" items");
}
I am not 100% sure, but guess You need to dynamically generate N number of inputs to have users fill in names of each item. As mentioned opening new or creating new html files would not be the best solution, also it can't be done with browser javascript.
So instead why not generate input elements and append them to the DOM, for more info please see DOM w3schools
Small example.
function display(){
var item = parseFloat(numIt.value);
for(var i =0; i<item;i++){
var inpElem = document.createElement("input");
inpElem.setAttribute("name", "item"+i);
inpElem.setAttribute("placeholder", "Input name of the item #"+i);
document.body.appendChild(inpElem);
}
}
Let's say user inputs 2. It will generate
<input placeholder="Input name of the item #1" name="item1" >
<input placeholder="Input name of the item #2" name="item2" >
Also to empty the body - document.body.innerHTML = ""
Probably you can use "pages" (hide all elements except one)
There is an example, you can check it out
const pages = ["page1", "page2", "page3"]
showPage(0)
function hidePages() {
for(const page of pages)
changeElementVisibility(page, false)
}
function showPage(num) {
hidePages()
const pageId = pages[num]
changeElementVisibility(pageId, true)
}
function changeElementVisibility(id, visible) {
document.getElementById(id).style.display = visible ? "" : "none"
}
function secondPageSumbit() {
const itemsCount = document.getElementById("itemsCount").value
document.getElementById("result").innerText = "Items Count: " + itemsCount
}
<head>
<script src="main.js"></script>
</head>
<body>
<div id="page1">
<h1>Welcome!</h1>
<h2>Ready to track your items?</h2>
<p><button onclick="showPage(1)">Start</button></p>
</div>
<div id="page2">
<h3>How many items do you have?</h3>
<p><input id="itemsCount"></p>
<p><button onclick="secondPageSumbit();showPage(2)">Next</button></p>
</div>
<div id="page3">
<h3>Result</h3>
<p id="result"></p>
</div>
</body>
Im uploading multiple pdfs at same time, and Im trying to find a method to give a a custom title for each uploaded pdf.
So I thought at first using php, I store a variable to count pdfs that the user selected
$countPdfs = count($_FILES['pdfs']['tmp_name']);
And then in my form, I have some php where I show a text input to write a title for each pdf that I upload.
<div class="galerry">
<div class="label">
<span class="field">Pdfs:</span>
<input type="file" name="pdfs[]" class="j_gallerypdf" multiple="multiple" accept="application/pdf" />
<div class="j_gfalsepdf">Select many pdfs</div>
<img src="img/upload.png" class="j_gsendpdf"/>
</div>
<?php
if(isset($countPdfs )){
for($i=1;$i<=$countPdfs ;$i++){
echo '<div class="label">';
echo '<span class="field">Pdf Title:</span>';
echo '<input type="text" name="title" />';
echo '</div>';
}
}
?>
</div>
And so If I select 5 pds it shows me 5 text inputs, it is working fine.
But I need to send my form and only after send form my inputs appear.
Do you know how can I do this using jQuery? After I select my pdfs in my input file, show the same number of input texts that my number of selected pdfs?
Im already using this jQuery function below to show in my input the number of pdfs that user select:
$('.j_gsendpdf').click(function(){
$('.j_gallerypdf').click().change(function(){
var numFiles = $(this)[0].files.length;
$('.j_gfalsepdf').animate({width:'400'}, 500, function(){
$(this).html('You selected'+ numFiles +'</strong> files.');
});
});
});
But do you know how can I use this numFiles also to open a number of input texts icual to my numFiles variable?
One approach is the following:
// binding a change event-handler to the file-input(s):
$('input[type="file"]').on('change', function(){
// finding the closest '.gallery' element, then finding
// its descendant 'fieldset' element, removing the 'empty' class
// (that it has on page-load to hide it while empty):
var fieldset = $(this).closest('.gallery').find('fieldset').removeClass('empty'),
// we're using the fileList so we're caching it, the other two are
// used later (in the for loop):
files = this.files, curFile, label;
for (var i = 0, len = files.length; i < len; i++){
// caching the 'current file' in the prepared variable:
curFile = files[i];
// creating a label element, keeping a reference in the
// prepared variable:
label = $('<label />', {
'html' : 'Change the name of <span class="filename">' + curFile.name + '</span>?'
// appending the created 'label' to the fieldset:
}).appendTo(fieldset);
// creating an 'input' element:
$('<input />', {
'type' : 'text',
// the current value is the current file-name:
'value' : files[i].name
// appending that to the created/appended 'label' element:
}).appendTo(label);
}
});
JS Fiddle demo.
The above approach relies on the presence of a fieldset identifying where the createdinput elements should be appended, so I've changed your HTML to the following:
<form action="#" method="post">
<div class="gallery">
<div class="label"> <span class="field">Pdfs:</span>
<input type="file" name="pdfs[]" class="j_gallerypdf" multiple="multiple" accept="application/pdf" />
<div class="j_gfalsepdf">Select many pdfs</div>
<fieldset class="empty">
<legend>Titles</legend>
</fieldset>
</div>
</div>
</form>
This approach is, however, moderately naive: if you reselect new files from the file input it will create, and append, new <label> and <input> elements. This could be partially countered (assuming it's not an inconvenience to you, or your users, by removing previously-created elements), using empty(): JS Fiddle demo.
References:
appendTo().
Attribute-equals ([attribute="value"]) selector.
closest().
empty().
find().
on().
I did it this way.
$('.j_gallerypdf').click().change(function(){
var allFiles = this.files;
var numFiles = this.files.length;
$('.j_gfalsepdf').animate({width:'400'}, 500, function(){
$(this).html('You selected'+ numFiles +'</strong> files.');
for(var i = 0; i<numFiles; i++) {
var file = allFiles[i], name = file.name;
$(this).append('<input type="text" name="title[]" value="'+name+'"/>');
}
});
});
I have 3 website pages
1) Where My form Saved
2) Results.html
3) an onther page like results.html
When i enter zip code and press enter its show some data which is fetched from Website, i have one more page like results.html and the code is exactly but data is different, But problem is that when i try to show that an other data it again asking about zip code but user already put it on home page, i need that user can put zip code on home page and the zipcode set on all the pages that i need using javascript.
Any thing like this possible.
See the live example
http://innovativeartz.com/Query
Enter Zip : 95110 its shows the data and than you see on right side HOME button just click here its asking the zip code again i need it will put automaticly since user input it on homepage.
Thanks
**HTML**
<form action="results.html" method="get" >
Zip Code: <input type="text" name="zipcode" size="10" maxlength="5" /><br />
<input type="submit" name="search" value="Get Quotes" />
</form>
**Java Script**
<script type="text/javascript">
function getQueryStringVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split('&');
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split('=');
if (pair[0] == variable) {
return pair[1];}}}
ni_ad_client = "579660";
ni_res_id = 2;
ni_alt_url = "https://www.shmktpl.com/search.asp";
ni_zc = getQueryStringVariable('zipcode');
ni_str_state_code = getQueryStringVariable('statecode');
ni_var1 = "";
ni_display_width = 650;
ni_display_height = 1000;
ni_color_border = "";
ni_color_bg = "";
ni_color_link = "";
ni_color_url = "";
ni_color_text = "";
</script>
<script type="text/javascript" src="https://www.shmktpl.com/retrieve_listings.asp"></script>
<noscript><img src="https://www.shmktpl.com/images/nojs/image.asp?src=579660&res=2" border="0"></noscript>
The Home button on the right is just a simple a-link. I presume that you should append the zipcode to the end of this link's href, using JavaScript.
I have a simple HTML form that asks a user to input their name, SKU, quantity, and comments. This is for a simple inventory request system.
<html>
<body>
<form id="myForm" method="post">
<input type="submit">
<br>Name: <input type="text" name="form[name]">
<br>SKU: <input type="text" name="form[SKU1]">
<br>Quantity: <input type="text" name="form[quantity1]">
<br>Comment: <input type="text" name="form[comment1]">
</form>
Add item
<script>
var num = 2; //The first option to be added is number 2
function addOption() {
var theForm = document.getElementById("myForm");
var newOption = document.createElement("input");
newOption.name = "form[SKU"+num+"]"; // form[varX]
newOption.type = "text";
theForm.appendChild(newOption); //How can I add a newline here?
optionNumber++;
}
</script>
</body>
</html>
Currently I can only get it working where it will add a single form value. I would like to recreate the entire myForm except for the name field with a single click.
Your post is very old, so presumably you've found an answer by now. However, there are some things amiss with your code.
In the JavaScript code you have
var num = 2;
This is the number that is incremented to keep track of how many "line-items" you will have on the form. In the function addOption(), though, instead of incrementing num you have
optionNumber++;
You never use optionNumber anywhere else. Your code works once, when you add the first item, but since you increment the wrong variable, you are effectively always adding option 2.
Oh, and adding the newline: you need to append a <br> element.