I'm trying to create a responsive sidebar for processing orders by displaying items from an array one at a time.
Ideally, one item is displayed and the user can choose from three separate actions: Previous, Select, and Next.
The information in the array is pulled from order data within the workbook, this isn't the exact code I'm using but its written to present the same functionality:
function pullData() {
const sheet = ss.getSheets()[0];
const column = {
orderNumber: 1,
customerName: 2,
quantityOrdered: 3
}
// finding all instances of orders for product ID: XY1234
const productId = 'XY1234';
const orders = sheet.createTextFinder(productId).matchEntireCell(true).findAll();
// array to store all orders for this product
const orderInfo = new Array();
orders.forEach(order => {
// collecting order info
let row = order.getRow()
let orderNumber = sheet.getRange(row, column.orderNumber);
let customerName = sheet.getRange(row, column.customerName);
let quantityOrdered = sheet.getRange(row, column.quantityOrdered);
// combining the order info into a list item
let thisOrder = `
Order number: ${orderNumber}
Customer name: ${customerName}
Quantity ordered: ${quantityOrdered}`;
orderInfo.push(thisOrder);
});
}
and this is a simple idea of the HTML:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
div.listContent {
margin-left: 15%;
text-align: left;
}
div.buttons {
margin: auto 10% auto 10%;
display: flex;
justify-content: space-between;
ailgn-items: center;
}
.input {
padding: 8px;
border-radius: 15px;
border: 2px solid black;
}
</style>
</head>
<body>
<div class="listContent">
<!-- this is how orderInfo[x] would be displayed, formatting aside -->
<p>
Order number: [order number]<br>
Customer name: [customer name]<br>
Quantity ordered: [quantity ordered]
</p>
</div>
<div class="buttons">
<input class="input" type="button" onclick="" value="Previous">
<input class="input" type="button" onclick="" value="Select">
<input class="input" type="button" onclick="" value="Next">
</div>
</body>
</html>
I lack knowledge in frontend at the moment &, given that I haven't been able to display different items from orderInfo to the sidebar, I haven't been able to troubleshoot ideas.
My current thoughts are decrementing the index in orderInfo when the "Previous" button is clicked and incrementing the index respectively; however that's neither here nor there for now.
The program is written modularly so I've tried some other individual functions but the problem with each attempt is that I can't just insert a variable from a .gs file to the HTML without it being written into the HTML.
I'll update if I figure it out
You can add id to some tag, e.g. <p id="content"> and change it dynamically using innerHtml.
And you can pass data from GAS into javascript with plain JSON conversion, something like this
In html
...
<div class="listContent">
<!-- this is how orderInfo[x] would be displayed, formatting aside -->
<p id="content"> <!-- NOTICE ID ADDED !!! -->
...
<input class="input" type="button" onclick="next" value="Next">
<input class="input" type="button" onclick="prev" value="Prev">
<input class="input" type="button" onclick="select" value="Select">
...
<script type="text/javascript">
var index = 0;
var data = JSON.parse(<?= JSON.stringify(data) ?>
function next() {
if(index<data.length - 1) index++;
setContent();
}
function prev() {
if(index>0) index--;
setContent();
}
function select() {
// Whatever
}
function setContent() {
document.getElementById('content').innerHtml = data[index];
}
</script>
In apps script:
While template rendering add appropriate data from spreadsheet, as simple array, for example
var template = HtmlService.createTemplateFromFile('index');
template.data = pullData();
return template.evaluate().getContent()
You also need to update your pullData to return value in the end
...
return orderInfo;
}
Related
So basically I was trying to make an error message that is hidden by default be displayed when the user inputs incorrect information. However, the message wasn't appearing. So I used the debugger and found out that the error node element at the top of the js. code was successfully finding the element in the HTML and also successfully changing it's properties. And yet nothing was happening. So after a bit of research I found out that there is a property called isConnected which shows if the Node is connected to the Document. Turns out mine was connected(true) immediately after finding the element, but it was disconnected(false) by the time it entered the errorHandler() func. So again after a bit of debugging I found out that the bottom line of the onPageLoad func was causing the problem. It used to be rootUl.innerHTML += template(countriesObj); but that was breaking it. However, when I moved my error element in the HTML from the ul to outside the id="root" div, it was working fine. It was only breaking when the element was inside the ul. At the end of the day I fixed it by using Element.insertAdjacentHTML() instead, which wouldnt sever the connection between the error element and Document. So after about an hour of struggle, I am curious why that happens and what the difference is between rootUl.innerHTML += template(countriesObj); and rootUl.insertAdjacentHTML('beforeend', template(countriesObj));
Just to add, rootUl.innerHTML+=template(countriesObj) breaks the connection even when used by other function which are not shown here.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>List Towns</title>
<script src="../handlebars.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p style="text-align: center; font-size: 18px; font-weight: 700; font-family: Arial, Helvetica, sans-serif;">
Input in the following format: "{Country}: {town}, {town} {Country}: {town}, {town}" and so on. Matching is case-insensitive. Non-english characters are not supported. Numbers are not supported. Check regex for more info. Reset button deletes entire database and refreshes page.
</p>
<form action="#" class="content">
<label for="towns">Towns</label>
<input id="towns" type="text" placeholder="ex. Bulgaria: Burgas, Varna Turkey: Ankara"/>
<button id="btnLoadTowns">Load</button>
</form>
<div id="root">
<ul>
<!--When the element was here, innerHTML wasn't working correctly-->
<h4 id="error" style="color: rgb(136, 9, 0); display: none;" >Error. Input string not in correct format. Look at instructions above.</h4>
</ul>
</div>
<!--When the element was here, innerHTML was working fine-->
<!-- <h4 id="error" style="color: rgb(136, 9, 0); display: none;" >Error. Input string not in correct format. Look at instructions above.</h4> -->
<button id="reset">Reset</button>
<h4 id="empty-database" style="color: rgb(136, 9, 0); display: none;" >Database is currently empty.</h4>
</body>
<script src="./app.js"></script>
</html>
async function pageApp(){
//Misc
let error = document.querySelector('#error');
let emptyDatabase = document.getElementById('empty-database');
// Grab the unordered list of countries
let rootUl = document.querySelector('#root ul');
// Extract(GET request) data from database
let database = await getRequestForCountries();
// Get the two templates: One is for both country and town, another is just for town when country already exists
let template = await getTemplate();
let templateTown = await getTemplateTown();
// Load countries on page load
onPageLoad();
//Attach load event to button
attachLoadEvent();
//Reset button for deleting the database
resetButton()
function errorHandler(){
error.style.display = 'block';
setTimeout(function(){
error.style.color = 'rgb(136, 9, 0)';
error.style.background = 'none';
}, 150)
error.style.color = 'red';
error.style.background = 'rgb(136, 9, 0)';
}
function onPageLoad(){
database.forEach(entry => {
let townsArr = entry.towns;
let countryName = entry.countryName;
let townsArrObj = townsArr.reduce((acc, cur) =>{
let townObj = {
name: cur
}
acc.push(townObj);
return acc;
},[]);
let countriesObj = {
countries:[
{
name: countryName,
towns: townsArrObj
}
]
}
//Was rootUl.innerHTML += template(countriesObj); But that breaks the DOM of error and makes error.isConnected = false;
// rootUl.innerHTML += template(countriesObj);
rootUl.insertAdjacentHTML('beforeend', template(countriesObj));
})
}
Element.innerHTML +=, gets HTML code within the element and append it with something.
document.querySelector('p').innerHTML += `<span>Appended span</span>`;
<p>
Lorem Ipsum
<span style="color: red">Something</span>
<p>
Whereas, Element.insertAdjacentHTML('beforeend', 'To be inserted node'), will add new node, before the specified element.
document.querySelector('p').insertAdjacentHTML('beforeend', '<div>I am div</div>');
<p>Lorem ipsum</p>
I was wondering if I can create a text input where users can type some text and then immediately display them on page, same as twitter. I know about alert window or prompt window but I need something different, a text input on website.
Hope it can be done in JavaScript.
Use .keyup() for the input field then replace the content of the output div.
$(".div-input").keyup(function() {
$(".output").html($(this).val());
});
.output {
margin-top: 20px;
font-size: 2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="div-input" />
<div class="output">
</div>
If you want to display the input on submit, you could attach a .submit() event on a form tag then use appendTo on the div if you want to insert multiple elements;
$(".form-input").submit(function(e) {
e.preventDefault();
var value = $(".div-input").val();
$("<div class='outputs'>" + value + "</div>").appendTo($(".output"));
});
.output {
margin-top: 20px;
}
.outputs {
padding: 20px;
font-size: 2em;
border: 1px solid black;
margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-input">
<input class="div-input">
<button type="submit">Submit</button>
</form>
<div class="output"></div>
you can use this to show your text anywhere on page
<input id="input-name" oninput="outputname.value = this.value">
<output id="outputname" name="outputname" for="input-name"></output>
You can test it here
If you add an eventlistener to the input, you can use that to change the text in your output area on the page. Like this:
const input = document.getElementById('input');
const output = document.getElementById('output');
input.addEventListener('input', (e) => {
output.innerHTML = input.value;
});
<div id="output"></div>
<input type="text" id="input">
HTML:
<p>Input:</p><input id="input" type="text">
<p>Output:<span id="output"></span></p>
Javascript:
// Function To Select Element
function $(element) {
return document.querySelector(element);
}
// We will get the input when calling this function
function getInput() {
return $('#input').value;
}
// The output will be displayed
function output() {
$('#output').innerHTML = getInput();
}
// This function will start our code
function init() {
output();
}
// On keyup our code will initiate
$('#input').addEventListener('keyup', init);
You can test it here: https://codepen.io/anon/pen/ReyGaO?editors=1111
People are downvoting you because this can be done with very basic JavaScript, and questions like this are very unusual because anyone doing a basic JavaScipt course will probably be able to do this.
Theoretically speaking: you can put an input element and a button on the html page, plus an empty div. You can set an event for the button or even for the input for live updating while typing, and write an event handler function to change the content of the empty div. You can either set its content or add a new child to it, so that the previous content still remains.
Practical example: (The code below is live at https://codepen.io/bradib0y/pen/YJLGrb )
<!DOCTYPE html>
<html>
<body>
<p>Click the button to add a new post.</p>
<input id="NewPostField" type="text" value="Some text">
<button onclick="myFunction()">Add new post</button>
<div id="Posts"></div>
<script>
function myFunction() {
var NewPostField = document.getElementById("NewPostField");
var newPost = document.createElement("p");
newPost.innerHTML = NewPostField.value;
var Posts = document.getElementById("Posts");
Posts.appendChild(newPost);
}
</script>
</body>
</html>
you can do it by this
<input id="mainInput" oninput="output.value = this.value">
<output id="output" name="output" for="input-name"></output>
click here to view in jsFiddle
I have developed a comments editing system in my blog application.
When a user clicks on the page of a select blog post, a #foreach loop iterates through that post's comments and displays each one in the view underneath the Post's main content.
It is also possible for a user to edit a comment's content. User's click an edit button on the comment and a JavaScript function renders its <textarea> editable as well as unhides a "save" button. Once edited and the user hits save, a second JavaScript function sends the updated content to a Controller method which updates the relevant comment on the database.
The code I've produced works fine when there is one comment under the blog post, however, when there are multiple comments on the page, the JavaScript is not able to distinguish which comment is referenced - for example, pressing the edit button on one comment makes the save button appear for all comments.
Is there a straightforward way I can encapsulate the JavaScript for each comment?
Or is the best approach to produce unique Ids for each Comment? If so, what would be the best approach?
My code for your reference is below, though please note I am still new to web scripting and any pointers are appreciated.
THE VIEW (RAZOR):
#model List<Assignment_3.Models.CommentSubmission
//Blog Post
//Comments
#foreach (var item in Model)
{
//Comment information
//The textarea
<textarea rows="10" readonly class="descriptionForm" id="DescriptionText">#item.Body</textarea>
//The Edit button
<div style="text-align:right">
<img class="edit_icon" src=#Url.Content("~/Images/edit.png") alt='edit' height=15 width=15 />
<br />
//The Save button once editing is complete
<button type="submit"class="btn1" style="visibility: hidden">
<p class="split-btn-name">Save</p>
<span class="separator"></span>
<p><span class="glyphicon glyphicon-ok"></span></p>
</button>
</div>
}
<script>
//Make textarea editable and unhide the edit save button
$(document).ready(function () {
$(".edit_icon ").click(function () {
$(".descriptionForm").removeAttr("readonly");
$(".btn").removeAttr("style");
});
});
//Send updated content to Controller and update database
$(".btn1").click(function () {
$(".btn1").hide();
$(".descriptionForm").setAttribute('readonly');
var text1 = document.getElementById('DescriptionText').value;
var url = "/Comments/EditComment?id=#item.Id&s="+ text1;
$.post(url, null, function (data) {
});
});
</script>
THE CONTROLLER:
public void EditComment(int id, string s)
{
var cS = _context.CommentSubmissions
.Where(c => c.Id == id).
FirstOrDefault();
//The Comment's text body
cS.Body = s;
_context.Entry(cS).State = EntityState.Modified;
_context.SaveChanges();
}
UPDATE
ANSWER (thanks to Greg):
FORM:
<div class="row" style="padding: 15px;">
<div data-rel="#item.Id">
<textarea rows="10" readonly class="textarea">#item.Body</textarea>
<div style="text-align:right">
<p>
Edit <img class="edit_icon" src=#Url.Content("~/Images/edit.png") alt='Edit' height=15 width=15 id="EditIcon" />
</p>
#*The Save button once editing is complete*#
<input type="button" data-input="edit" value="Save" style="visibility: hidden" id="saveButton">
</div>
</div>
</div>
JQUERY:
<script>
$(function () {
$(".edit_icon").click(function () {
var container = $(this).closest('.row');
var id = parent.find('div[data-rel]');
var content = container.find('.textarea');
var button = container.find('#saveButton');
button.removeAttr("style");
content.focus();
content.removeAttr('readonly');
});
$("#saveButton").click(function () {
var container = $(this).closest('.row');
var id = container.find('div[data-rel]');
var content = container.find('.textarea');
var button = container.find('#saveButton');
button.hide();
content.prop('readonly', true);
var text1 = descriptionForm.value;
var url = "/Comments/EditComment?id=" + id + "&s=" + text1;
$.post(url, null, function (data) {
});
});
});
</script>
As denoted in the comment, your JavaScript has nothing unique to anchor on. So it modifies all elements that meet your criteria, to resolve this you can achieve with a unique identifier or structuring your markup better.
In your case, you have a button with a type="submit" which will instantly cause a post back. Not sure if that is indeed your intent, but you could do:
#foreach(var content in Model)
{
<form name="content.Id" action="Blog/Save" method="post">
</form>
}
In this instance, the post back from your submit could directly hit the server. But, post backs aren't cool. To rectify via Ajax, you can do.
#foreach(var content in Model)
{
<div class="container">
<div data-rel="#content.Id">
<!-- Put form data, or whatever here. -->
<input type="button" data-input="edit">Edit</input>
</div>
</div>
}
Now you have a unique value, clean structure, and you can move throughout the hierarchy fairly easy. So, for JavaScript you could do:
function editBlog(element) {
var container = document.querySelector(element).closest('[data-rel]');
}
I believe that is the ideal approach for JavaScript, I'm a custom to jQuery or a framework like Vue. So double check the syntax. But in theory, the JavaScript will scale from the button event to the parent node, then retrieve the child id. Similar mapping or templates can occur, so you can post the data to your action.
Hopefully this helps.
Update: You may get some domain error, but I hope not. Anyways, this is a really simple example.
Container : Simple element to act as a wrapper.
Row : Allow you to create a row for element structure.
Column : Will space around, to fit within window.
The point, is the jQuery will recurse up from the button, to the column, to the row, to the section id, to the container. But, it won't affect any other element on the page. If the jQuery was changed, to not affect a specific element, for instance:
$('button').click(function (e) {
$(this).text('Edit'); // Only this element
$('button').text('Edit'); // All button elements
});
$(function () {
$('button').click(function () {
var container = $(this).parents('.container');
var id = parent.find('div[data-rel]');
var rows = parent.find('.row');
var columns = parent.find('.column');
alert('The section id: ' + id.val());
console.log(container.html());
console.log(id);
console.table(rows);
console.table(columns);
});
});
.container {
width: 100%;
padding: 1rem;
box-shadow: 2px -1px 1px -2px, -1px 2px 1px -2px;
}
.row {
display: flex;
flex-flow: row;
justify-content: space-around;
align-items: center;
}
.column {
width: 33.3%;
}
.column:last-of-type {
width: 10%;
}
.column span {
width: 100%;
padding: .2rem;
display: inline-block;
}
.column label {
width: 95%;
}
.column button {
width: 100px;
}
.column input, .column textarea {
width: 95%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div data-rel="1">
<div class="row">
<div class="column">
<span>
<label>Article Name:</label>
<input type="text" data-rel="txtArticleName" />
</span>
<span>
<label>Article Date:</label>
<input type="text" data-input="txtArticleDate" />
</span>
</div>
<div class="column">
<label>Article Summary:</label>
<textarea data-input="txtArticleSummary" rows="5"></textarea>
</div>
<div class="column">
<button name type="button" onclick="return false;">Save</button>
</div>
</div>
</div>
</div>
<div class="container">
<div data-rel="2">
<div class="row">
<div class="column">
<span>
<label>Article Name:</label>
<input type="text" data-rel="txtArticleName" />
</span>
<span>
<label>Article Date:</label>
<input type="text" data-input="txtArticleDate" />
</span>
</div>
<div class="column">
<label>Article Summary:</label>
<textarea data-input="txtArticleSummary" rows="5"></textarea>
</div>
<div class="column">
<button type="button" onclick="return false;">Save</button>
</div>
</div>
</div>
</div>
The code works, but you may have security enabled that may not allow it to work. But the example is the important part.
I am working on simple looking one-page-site hosted on Google Drive using "Editey" tools. What I need is to embed a number statistic values from a list of single cells of the correspondent Google Spreadsheet into various lines of my site text. It's almost done, but the final value can not be fixed in exact place. The cell value "3" must be displayed in one line of my text, just after the word "Alex", but paragraph tags that follow with id element "Alex" did not let fix it all together in a single row. How can I set my text "Alex" and embedded result "3" in one row, to let it looking as Alex3 ("3" styled as red superscript)?
// https://google,developers.appspot.com/chart/interactive/docs/spreadsheets#gid
google.load('visualization', '1', {packages: ['corechart', 'line']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var spreadsheetUrl = "https://docs.google.com/spreadsheets/d/1iVtRu6vQHmyNyXQdqGmoODhz3Vi9LJQSbEyAiw4t1Ww/edit?usp=sharing";
var query = new google.visualization.Query(spreadsheetUrl);
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
var dataTable = response.getDataTable();
// https://developers.google.com/chart/interactive/docs/reference?hl=en#methods
// getValue(rowIndex, columnIndex)
document.getElementById("Alex").innerHTML = dataTable.getValue(2, 1);
}
#Alex {
vertical-align: super;
font-size: 10px;
color: red;
}
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="code.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<p>Alex
<p id="Alex"> </p>
</body>
</html>
Thank in advance for your attention : )
Assuming the incorrect HTML with missing </head> & </p> tags are typos, If you want to bring the two values on the same line, you can use 1 of the following 2 methods:
Reason: - In HTML <p> tags are by default block elements(display: block;), each block elements extend to 100% of the width and hence they stack one below the other instead of one within/next to the other(this is what you want). If you want to place them next to another you have to explicitly change the display property from block to inline-block.
Method 1 :
Make both the <p> tags you want display: inline-block.
p {
display: inline-block;
}
Method 2(I prefer this) :
Instead of using <p> tag for #Alex, use <span> inside the outer <p> element instead, Like so -
<body>
<p>Alex
<span id="Alex"> </span>
</p>
</body>
Because <span> by default has display: inline-block; property.
Hope this helped.
I printed to the screen 16 icons (little pictures).
Now I want to be able to select icons,
and when I press a button the selected icons ids will be sent in a form.
I saw in the net only checkboxes and lists multiselect,
what's the best way to do this?
(I'm pretty new to web design)
thanks ahead!
Although jQuery isn't in your tags, you should introduce yourself to jQuery. It'll make your life easier, for what you're trying to do. Here is the basic steps both if you use jQuery and if use just Javascript:
With jQuery
Give all your icons a class and each one a unique id:
<img src='icon1.png' data-iconID=2233 class='myIcons' />).
Then bind that class to a click event
$('.myIcons').bind('click', function() {
$(this).toggleClass('selectIcon');
});
Attach form submit function to onsubmit:
<form ... onsubmit="submitForm();">
Build submitForm function:
function submitForm() {
var csvIconIds = '';
$.each($('.myIcons.selectIcon'), function (index, value) {
csvIconIds += $(value).attr('data-iconID');
});
//submit scvIconIds here along with other form data (ajax?)
}
With Javascript
Similar as above but way more complicated...
To toggle classes see this thread: How to add/remove a class in JavaScript?
To getting attributes by class see this site: http://www.actiononline.biz/web/code/how-to-getelementsbyclass-in-javascript-the-code/
This could be a way using just plain Javascript or jQuery. I prefer the jQuery version, since it separates the click handler from the markup, instead of using inline onclick handlers, which are in general discouraged.
What this does is use an input element array, which you can create by adding [] to the element name. This same technique can be used on SELECTs and other elements, since it signals to the server that an array has been submitted, as opposed to value known by a single key.
<html>
<head>
<style type="text/css">
div img {
cursor: pointer;
border: 1px solid #f00;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script>
function setFormImage(id) {
if (id != '' && !document.getElementById('input_'+id)) {
var img = document.createElement('input');
img.type = 'text';
img.id = 'input_'+id;
img.name = 'images[]';
img.value = id;
document.imageSubmit.appendChild(img);
}
}
$(document).ready(function(){
$('#jqueryimages img').click(function(){
setFormImage(this.id);
});
});
</script>
</head>
<body>
<pre><?php
if (count($_GET['images'])) {
print_r($_GET['images']);
}
?></pre>
<div style="float: left; width: 49%;">
<h1>Plain ol' HTML</h1>
1. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-1" onclick="setFormImage(this.id)"/>
<br/>
2. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-2" onclick="setFormImage(this.id)"/>
<br/>
3. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-3" onclick="setFormImage(this.id)"/>
<br/>
4. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-4" onclick="setFormImage(this.id)"/>
</div>
<div id="jqueryimages" style="float: left; width: 49%;">
<h1>jQuery</h1>
5. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-5"/>
<br/>
6. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-6"/>
<br/>
7. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-7"/>
<br/>
8. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="img-8"/>
</div>
<h1>Form Submit</h1>
<form name="imageSubmit" method="get">
<input type="submit" value="View Selected"/>
</form>
</body>
</html>
try this
var idArray = [];
$("#container-id img").each(function(index,value){
idArray.push($(value).attr("id"));
});
//do anything with the array