CODEWITHSUNDEEP
javascriptjqueryforms
Hayden
Hayden

Reputation: 3

Extract select option value from object HTMLSelectElement

I'm trying to extract values from select options from two different fields in the same form, convert the values into strings and combine the two strings to form a URL slug.

<select onChange="functionOne(this);">
   <option value="test1">Test One</option>
   <option value="test2">Test 2</option>
</select>

<select onChange="functionTwo(this);">
   <option value="test1">Test 1</option>
   <option value="test2">Test 2</option>
</select>

<button id="submit" class="btn" type="button" onclick="submit();">Submit</button>


function functionOne(e1) {
  var slug1 = e1.options[e1.selectedIndex].value;
}

function functionTwo(e2) {
  var slug2 = e2.options[e2.selectedIndex].value;
}

function submit(){
  window.location = 'https://example.com/' + slug1 + '-' + slug2);
  
}

That's my code, simplified for the purpose of this example.

The problem is I get the following result:

https://example.com/[object HTMLSelectElement]-[object HTMLSelectElement]

How do I get string values from select options that I can use as slugs in a URL? If anyone has a better way of doing this, I'm willing to accept suggestions.

Upvotes: 0

Views: 1264

Answers (2)

ikiK
ikiK

Reputation: 6532

You just need to declare variables outside in order to use them.

var slug1 = "";
var slug2 = "";

function functionOne(e1) {
  slug1 = e1.options[e1.selectedIndex].value;
}

function functionTwo(e2) {
  slug2 = e2.options[e2.selectedIndex].value;
}

function submit() {
  console.log(slug1);
  console.log(slug2);
  //window.location = 'https://example.com/' + slug1 + '-' + slug2;
}
<select onChange="functionOne(this);">
  <option value="test1">Test One</option>
  <option value="test2">Test 2</option>
</select>

<select onChange="functionTwo(this);">
  <option value="test1">Test 1</option>
  <option value="test2">Test 2</option>
</select>

<button id="submit" class="btn" type="button" onclick="submit();">Submit</button>

And since you ask for better way suggestion, you can use just one function on submit, not much better, maybe just cleaner.

Example: 

function submit() {
  var slug = [];
  // create array
  [...document.querySelectorAll("select")].forEach(sel => {
    slug.push(sel.options[sel.selectedIndex].value);
    // get values of each select and push into array
  });
  var link = 'https://example.com/' + slug[0] + '-' + slug[1]
  // use array
  
  //window.location = link
  console.log(link);
}
<select>
  <option value="test1">Test One</option>
  <option value="test2">Test 2</option>
</select>

<select>
  <option value="test1">Test 1</option>
  <option value="test2">Test 2</option>
</select>

<button id="submit" class="btn" type="button" onclick="submit();">Submit</button>

Upvotes: 1

Always Helping
Always Helping

Reputation: 14570

You could make your slug1 and slug2 to be accessible as global var scope to be able to use them in submit function.

Also, you could also get a return from functionOne and functionTwo in your submit function.

Live Demo:

var slug1
var slug2

//Change function
function functionOne(e1) {
  slug1 = e1.options[e1.selectedIndex].value;
}

function functionTwo(e2) {
  slug2 = e2.options[e2.selectedIndex].value;
}

//Submit
function submit() {
  //window.location = 'https://example.com/' + slug1 + '-' + slug2);
  let location = 'https://example.com/' + slug1 + '-' + slug2;
  console.log(location) //https://example.com/test1-test1
}
<select onChange="functionOne(this);">
  <option disbaled selected>Choose</option>
  <option value="test1">Test One</option>
  <option value="test2">Test 2</option>
</select>

<select onChange="functionTwo(this);">
  <option disbaled selected>Choose</option>
  <option value="test1">Test 1</option>
  <option value="test2">Test 2</option>
</select>

<button id="submit" class="btn" type="button" onclick="submit();">Submit</button>

Upvotes: 0

Related Questions