How to get all selected values from different inputs - Javascript

Question

I see a lot of questions like that but mine is different from theirs. I have a form and the form includes 3 different select area for different variables. I want to get them but I don't know how to do and I'm newbie on Javascript and HTML.

edit: I deleted the " sending database " part. It was part of the context.

Here is HTML:

    <form>

  <p> Scores: </p>

    <select name ="scores:">
      <option value= " 9 " name= " 9 "> 9 </option>
      <option value= " 8 " name= " 8 "> 8 </option>
      <option value= " 7 " name= " 7 "> 7 </option>
      <option value= " 6 " name= " 6 "> 6 </option>
      <option value= " 5 " name= " 5 "> 5 </option>
      <option value= " 4 " name= " 4 "> 4 </option>
      <option value= " 3 " name= " 3 "> 3 </option>
      <option value= " 2 " name= " 2 "> 2 </option>
      <option value= " 1 " name= " 1 "> 1 </option>

    </select>

<p> Years: </p>


  <select id ="year">
  </select>

  <p> Languages: </p>

  <select name="language">
    <option value ="Aborginial", name = "Aborginial"> Aborginial </option>
    <option value="Arabic"> Arabic </option>
    <option value="Aramaic">Aramaic</option>
    <option value="Bosnian">Bosnian</option>
    <option value="Cantonese">Cantonese</option>
    <option value="Chinese">Chinese</option>
    <option value="Czech">Czech</option>
      </select>

  <button type="button">Submit data</button>
  </form>

Assuming user selected score 7, set the language to Bosnian and the year is 1980 ( I'm populating the year box with a function don't worry it is not empty list ) and I want to get these selected values (score: 7, lang: Bosnian, year:1980) By the way all of them are in the form. So how can I get these selected values?

How is your question different? The only difference I see with, for example, stackoverflow.com/questions/1085801/… is that you have more than one <select> — yuriy636
– yuriy636, Commented Aug 15, 2017 at 11:03
I have 3 different selected area and different options are settled below them. So I can use the same function as they used? If it has the same solution, sorry for that post. — Zahid Tekbaş
– Zahid Tekbaş, Commented Aug 15, 2017 at 11:08

Sergey Sklyar · Accepted Answer · 2017-08-15 11:10:04Z

2

You have the following mistakes in your HTML:

No special symobols allowed in form elements name attribute.
You can't put comma after HTML attribute.
No need to put extra <option> tag attributes if your value equal to your option's name.

So in this code:

<select name="scores">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
</select>

You can access "scores" value as:

var select_scores = document.getElementById("form").scores;
select_scores.options[select_scores.selectedIndex].value;

Same for other form <select> elements.

answered Aug 15, 2017 at 11:10

Sergey Sklyar

1,9701 gold badge19 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Satyam Pathak · Accepted Answer · 2017-08-15 11:23:34Z

Return an object :

document.getElementById("submit").addEventListener("click", getData);

function getData() {
var score = document.getElementById('scores').value;
var year = document.getElementById('year').value;
var language = document.getElementById('language').value;
var data = {'score':score, 'year':year, 'lang':language};
console.log(data);
}

    <form>

  <p> Scores: </p>

    <select id ="scores" name ="scores:">
      <option value= " 9 " name= " 9 "> 9 </option>
      <option value= " 8 " name= " 8 "> 8 </option>
      <option value= " 7 " name= " 7 "> 7 </option>
      <option value= " 6 " name= " 6 "> 6 </option>
      <option value= " 5 " name= " 5 "> 5 </option>
      <option value= " 4 " name= " 4 "> 4 </option>
      <option value= " 3 " name= " 3 "> 3 </option>
      <option value= " 2 " name= " 2 "> 2 </option>
      <option value= " 1 " name= " 1 "> 1 </option>

    </select>

<p> Years: </p>


  <select id ="year">
  </select>

  <p> Languages: </p>

  <select id= "language" name="language">
    <option value ="Aborginial", name = "Aborginial"> Aborginial </option>
    <option value="Arabic"> Arabic </option>
    <option value="Aramaic">Aramaic</option>
    <option value="Bosnian">Bosnian</option>
    <option value="Cantonese">Cantonese</option>
    <option value="Chinese">Chinese</option>
    <option value="Czech">Czech</option>
      </select>

  <button id="submit" type="button">Submit data</button>
  </form>

Collectives™ on Stack Overflow

How to get all selected values from different inputs - Javascript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related