Clicking images to pass the names in a URL string-CodePudding

I have a low level knowledge of javascript and am trying to create a basic image based quiz that passes data back to a search page for local businesses.

Each image would have it's own "tag" as the image ID that relates to one of the options in the search. Ie. Outdoor, Ballroom, Barn, Garden, etc.

Upon submission, it would send the selected image ID's data to www.sitename/search/?_characteristics=TAG1,TAG2,TAG3

That search page will filter the business listings by the tags. Currently it's search function filters the businesses with the following format: website.com/search/?_characteristics=TAG1,TAG2

The HTML would look like this:

<img src="http://website.com/image1" id="TAG1"/>
    <br/>
 <img src="http://website.com/image2" id="TAG2"/>
    
<form action="https://website.com/business/?&_characteristics=TAG1, TAG2, TAG3" method="get">
<input type="submit" value="View Selected"/>

CodePudding user response：

What you want is the following

Register a click handler on your images to
1. Capture ids into a collection (array or Set)
2. Toggle the "selected" class
Register a submit handler on the form to inject an hidden input element, transforming the tag collection into a CSV and setting it to the input value

const form = document.querySelector("form")
const tags = new Set()

document.querySelectorAll("img[id]").forEach(img => {
  img.addEventListener("click", () => {
    const selected = img.classList.toggle("selected")
    tags[selected ? "add" : "delete"](img.id)
  })
})

form.addEventListener("submit", (e) => {
  const input = Object.assign(document.createElement("input"), {
    name: "_characteristics",
    type: "hidden",
    value: ([...tags]).join(",")    
  })
  
  form.append(input)

  // this is just for the example, omit the following
  e.preventDefault()
  console.log(`Submitting to ${form.action}?${new URLSearchParams(new FormData(form))}`)
  input.remove()
})

img { border: 2px solid grey; }
img.selected { border-color: red; }

<img src="https://picsum.photos/100" id="TAG1"/>
<br/>
<img src="https://picsum.photos/100" id="TAG2"/>
    
<form action="https://website.com/business/" method="get">
<input type="submit" value="View Selected"/>
</form>

CodePudding user response：

I'm not sure how you want to get the selected img, but here's a way to do it:

Add the class active to the selected img
When clicking on the button, get the id and push it to the output array
Create the link of the tags (id's)

Read the comments below for the detailed explanation.

// Get the images and the submit button
let images = document.querySelectorAll('img');
let btn = document.getElementById('btn');
// Array to hold the tags
let output = [];
// variable to hold the link
let link = '';

// Add the class active to the selected images
for(let i = 0; i < images.length; i  ) {
  // For each image onclick:
  images[i].addEventListener('click', () => {
    // Toggle the `active` class on click
    images[i].classList.toggle('active');
  });
}

// Button onclick:
btn.addEventListener('click', () => {
  for(let i = 0; i < images.length; i  ) {
    // Get the images with the `active` class and push the id to the output array 
    images[i].classList.contains('active') ? output.push(images[i].getAttribute('id')) : '';
  }
  
  // Remove duplicates if found
  let uniq = [...new Set(output)];
  
  // Create the link by adding the tags to the string (output values)
  link = `www.sitename/search/?_characteristics=${uniq.join(',')}`;
  
  // Print the link to the console
  console.log(link);
});

img.active {
  box-shadow: 0 0 1px 1px #121212;
}

5. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="air-conditioned"/>
<br/>

6. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="outdoor"/>
<br/>

7. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="indoor"/>
<br/>

8. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="house"/>
<br/>

<button id="btn">Submit</button>