CODEWITHSUNDEEP
javascripthtmlcssjavascript-objects
Dapo Momodu
Dapo Momodu

Reputation: 329

How to access data from a nested object then pass into href attribute after user selects an option from a dropdown list

I am trying to get the link associated with whatever option the user selects from a dropdown list into my href attribute for every div in my html by using eventListener.

Already i have created all this links and stored them as objects. I am only able to access them when i call specific keys. Each object nested within the main parent object has three keys and values {keys:values}.

<!DOCTYPE html>
<html>

<head>
  <style>
    .form {
      width: 25%;
      height: inherit;
      overflow: auto;
      float: left;
    }
  </style>
</head>

<body>
  <form class="form" action="result.html" method="POST">
    <h1 class="productName">Div 1</h1>
    <img src="img\red.jpg" alt="Trial Image" width="10%" height="100%" class="images productImg"><br>
    <select name="category" class="package">
      <option value="Selected an option" default>Select an option</option>
      <option value="Business Plan">Business Plan</option>
      <option value="Feasibility Report">Feasibility Report</option>
    </select>

    <a href="" class="submit"><button type="submit" >Try it</button></a>
  </form>

  <form class="form" action="result.html" method="POST">
    <h1 class="productName">Div 2</h1>
    <img src="img\yellow.jpg" alt="Trial Image" width="10%" height="100%" class="images productImg"><br>
    <select name="category" class="package">
      <option value="Selected an option" default>Select an option</option>
      <option value="Business Plan">Business Plan</option>
      <option value="Feasibility Report">Feasibility Report</option>
    </select>

    <a href="" class="submit"><button type="submit" >Try it</button></a>
  </form>

  <form class="form" action="result.html" method="POST">
    <h1 class="productName">Div 3</h1>
    <img src="img\blue.jpg" alt="Trial Image" width="10%" height="100%" class="images productImg"><br>
    <select name="category" class="package">
      <option value="Selected an option" default>Select an option</option>
      <option value="Business Plan">Business Plan</option>
      <option value="Feasibility Report">Feasibility Report</option>
    </select>

    <a href="" class="submit"><button type="submit" >Try it</button></a>
  </form>

  <form class="form" action="result.html" method="POST">
    <h1 class="productName">Div 4</h1>
    <img src="img\black.jpg" alt="Trial Image" width="10%" height="100%" class="images productImg"><br>
    <select name="category" class="package">
      <option value="Selected an option" default>Select an option</option>
      <option value="Business Plan">Business Plan</option>
      <option value="Feasibility Report">Feasibility Report</option>
    </select>

    <a href="" class="submit"><button type="submit" >Try it</button></a>
  </form>

</body>
  <script src="index.js"></script>
</html>

let testArrays = {

  'product101' :{
  'businessPlan': 'http://localhost/projects/link1a',
  'feasibilityReport': 'http://localhost/projects/link1b',
  'bizPlanReport': 'http://localhost/projects/link1c'
  },

  'product102' : {
    'businessPlan': 'http://localhost/projects/link2a',
    'feasibilityReport': 'http://localhost/projects/link2b',
    'bizPlanReport': 'http://localhost/projects/link2c'
  },

  'product103' : {
    'businessPlan': 'http://localhost/projects/link3a',
    'feasibilityReport': 'http://localhost/projects/link3b',
    'bizPlanReport': 'http://localhost/projects/link3c'
  },

  'product104' :{
    'businessPlan': 'http://localhost/projects/link4a',
    'feasibilityReport': 'http://localhost/projects/link4b',
    'bizPlanReport': 'http://localhost/projects/link4c'
  }

};


  const forms = document.querySelectorAll(".form");
  for (const form of forms) {
    form.addEventListener('submit', function (event) {
      event.preventDefault();

      let package = this.querySelector('.package').value;

      if(package == 'Business Plan'){
        let link = this.querySelector('.submit').href = testArrays.product101.businessPlan;
        let message = this.querySelector('.submit').innerText = 'Try ' + package;
      } 
      else if(package == 'Feasibility Report'){
        let link = this.querySelector('.submit').href = testArrays.product102.feasibilityReport;
        let message = this.querySelector('.submit').innerText = 'Try ' + package;
      } 
      else {
          alert('You must select an option');
      }; 
    });
  }

My expectations is to have every array assigned to a div. I am thinking of how to use a for loop but not sure what to do.

Kindly correct me if am wrong or put me through with examples and solutions.

Cheers

Upvotes: 2

Views: 160

Answers (1)

zackkrida
zackkrida

Reputation: 421

The best way to associate a the link with a select value is to make the select value the same as the object key. 

<form id="form">
  <select name="select" id="mySelect">
    <option default value="choice1">Choice One</option>
    <option value="choice2">Choice Two</option>
  </select>
  <button type="submit">Submit</button>
</form>

<script>
  let plans = {
    choice1: "https://mylink.com",
    choice2: "https://myotherlink.com"
  }

  let select = document.querySelector("#mySelect")
  let form = document.querySelector("#form")

  form.addEventListener("submit", event => {
    event.preventDefault()
    alert(plans[select.value])
  })
</script>

The option values match the keys in the plans object, so they can be matched.

Here is a live example: https://codesandbox.io/s/static-ncgzp

Upvotes: 2

Related Questions