CODEWITHSUNDEEP
javascripthtml
Bartek
Bartek

Reputation: 21

Button and javascript

Can I add JS in this code? My point is that when I click the button, it will find the car and open the link assigned to it.

<select class="selecttype" id="cars">
  <optgroup label="RENAULT">
  <option id="euro" href="mylink" value="euro1">Renault Euro 3</option>
  <option id="euro" href="mylink" value="euro2">Renault Euro 4</option>
</select>

<button class="buttonsea" type="submit" onclick="btnclick">Search</button>

Upvotes: 0

Views: 101

Answers (6)

Mansour Alnasser
Mansour Alnasser

Reputation: 5040

You can test the solution here https://jsfiddle.net/2pz9se0q/3/

HTML

<select class="selecttype" id="cars">
  <optgroup label="RENAULT">
    <option  data-href="mylink1" value="euro1">
    Renault Euro 3
    </option>
    <option  data-href="mylink2" value="euro2">
    Renault Euro 4
    </option>
  </optgroup>
</select>

<button class="buttonsea" type="submit" onclick="btnclick()">Search</button>

Note: 1- that I deleted the id="euro", you can not give the same id to many tags 2- option group most be closed by </optgroup>

js

function btnclick() {
  let cars = document.getElementById('cars');
  let selectedCar = cars.options[cars.selectedIndex];
  let link = selectedCar.getAttribute('data-href');
  window.open(link, '_blank');
}

Description: when you click the button the function btnclick() will be fired. this function will get the element with id cars. from the element options, it will take the selected option only and save it on selectedCar by using the element selectedCar we can access the data-href attribute and take the link

to open the link on a new window we added '_blank'

Value   Description
_blank  Opens the linked document in a new window or tab
_self   Opens the linked document in the same frame as it was clicked (this is default)
_parent Opens the linked document in the parent frame
_top    Opens the linked document in the full body of the window

Upvotes: 0

Bartek
Bartek

Reputation: 21

I made like this and it works :D

function btnclick() {
  let cars = document.getElementById('cars');
  let selectedCar = cars.options[cars.selectedIndex];
  window.open(selectedCar.getAttribute('href'));
}

Upvotes: 0

Adhitya
Adhitya

Reputation: 665

You can run with calling javascript like this.
I already give a Javascript Result in this code with data-href inside data-* Attribute
Because you can't input href into a Option Selected bcoz Don't have Attribute

See the example below: 

function btnclick() {
  let cars = document.getElementById('cars');
  let newSelect = cars.options[cars.selectedIndex];
  let name = newSelect.getAttribute('data-href');
  let result = document.getElementById('result');
  result.innerHTML = "<a href='" + name + "'>" + name + "</a>";
 
}
<select class="selecttype" id="cars">
  <optgroup label="RENAULT">
  <option id="euro" data-href="mylink1" value="euro1">Renault Euro 3</option>
  <option id="euro" data-href="mylink2" value="euro2">Renault Euro 4</option>
</select>
<button class="buttonsea" type="submit" onclick="btnclick()">Search</button>
<br>
<br>
<span id="result"></span>

Upvotes: 0

Bartek
Bartek

Reputation: 21

If i use this code it opens in colsole

function btnclick() {
  let cars = document.getElementById('cars');
  let selectedCar = cars.options[cars.selectedIndex];
  console.log(selectedCar.getAttribute('data-href'));
}

Upvotes: 0

Sara
Sara

Reputation: 751

option element don't have href attribute, but you can send it as data-* attribute and extract it in the JS code. See the example below:

function btnclick() {
  let cars = document.getElementById('cars');
  let selectedCar = cars.options[cars.selectedIndex];
  console.log(selectedCar.getAttribute('data-href'));
}
<select class="selecttype" id="cars">
  <optgroup label="RENAULT">
  <option id="euro" data-href="mylink1" value="euro1">Renault Euro 3</option>
  <option id="euro" data-href="mylink2" value="euro2">Renault Euro 4</option>
</select>

<button class="buttonsea" type="submit" onclick="btnclick()">Search</button>

Upvotes: 0

Mikkel Gundersen
Mikkel Gundersen

Reputation: 52

You need the () after the function name, to call the function.

<select class="selecttype" id="cars">
  <optgroup label="RENAULT">
  <option id="euro" href="mylink" value="euro1">Renault Euro 3</option>
  <option id="euro" href="mylink" value="euro2">Renault Euro 4</option>
</select>

<button class="buttonsea" type="submit" onclick="btnclick()">Search</button>

Then inside the function, you use this, to get the selected:

var cars = document.getElementById('cars')
var selectedCar = cars.options[cars.selectedIndex].value;

Upvotes: 1

Related Questions