CODEWITHSUNDEEP
javascripthtmljquerycss
MvTaku Xx
MvTaku Xx

Reputation: 31

How can i get the value of the selected option using Javascript or Jquery?

I created a custom select box and i wanted to get the value of the selected label, when i click at the button "check" i get an alert saying that shows the code inside the div which seems logical, the question is how can i get the value or the text of the option selected.

.selectbox_newpost {
  padding:0;
  margin:0;
  height:100vh;
  width:100vw;
  font-family: sans-serif;
  color:#FFF;
}

.selectbox_newpost {
  display:flex;
  flex-direction: column;
  position:relative;
  width:250px;
  height:40px;
}

.option_newpost {
  padding:0 30px 0 10px;
  min-height:40px;
  display:flex;
  align-items:center;
  background:#333;
  border-top:#222 solid 1px;
  position:absolute;
  top:0;
  width: 100%;
  pointer-events:none;
  order:2;
  z-index:1;
  transition:background .4s ease-in-out;
  box-sizing:border-box;
  overflow:hidden;
  white-space:nowrap;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <link rel="stylesheet" href="stylesss.css">
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

    <meta charset="utf-8">
    <title>test</title>
  </head>
  <body>

 <script type="text/javascript">
  function clicked(){
  var option = document.getElementById("selectedOptionNewpost");
  alert(option.innerHTML);
}
</script>

  <div class="selectbox_container_newpost">
    <div id="selectedOptionNewpost" class="selectbox_newpost" tabindex="1">
    <input class="selectopt" name="test" type="radio" id="opt1" checked>
    <label for="opt1" class="option_newpost">Objects</label>
    <input class="selectopt" name="test" type="radio" id="opt2">
    <label for="opt2" class="option_newpost">Vehicules</label>
    <input class="selectopt" name="test" type="radio" id="opt3">
    <label for="opt3" class="option_newpost">Technology</label>
    <input class="selectopt" name="test" type="radio" id="opt4">
    <label for="opt4" class="option_newpost">Books</label>
    <input class="selectopt" name="test" type="radio" id="opt5">
    <label for="opt5" class="option_newpost">Furniture</label>
    <input class="selectopt" name="test" type="radio" id="opt6">
    <label for="opt6" class="option_newpost">Others...</label>
  </div>
</div>
<button onclick="clicked()">Check</button>

  </body>
</html>

Upvotes: 0

Views: 66

Answers (2)

Etienne
Etienne

Reputation: 193

or if you use JQuery:

function clicked(){
    alert($("input[type=radio][name=test]:checked").attr('id'));
    alert($("input[type=radio][name=test]:checked").attr('value'));
}

But you have to add a value attribute to the radiobutton:

<input class="selectopt" name="test" type="radio" id="opt4" value="4">

Upvotes: 1

Mihai T
Mihai T

Reputation: 17687

You can find the selected radio button and then the label associated with it and print out the textContent.

Check below

Please let me know if this is what you were looking for.

.selectbox_newpost {
  padding:0;
  margin:0;
  height:100vh;
  width:100vw;
  font-family: sans-serif;
  color:#FFF;
}

.selectbox_newpost {
  display:flex;
  flex-direction: column;
  position:relative;
  width:250px;
  height:40px;
}

.option_newpost {
  padding:0 30px 0 10px;
  min-height:40px;
  display:flex;
  align-items:center;
  background:#333;
  border-top:#222 solid 1px;
  position:absolute;
  top:0;
  width: 100%;
  pointer-events:none;
  order:2;
  z-index:1;
  transition:background .4s ease-in-out;
  box-sizing:border-box;
  overflow:hidden;
  white-space:nowrap;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <link rel="stylesheet" href="stylesss.css">
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

    <meta charset="utf-8">
    <title>test</title>
  </head>
  <body>

 <script type="text/javascript">
  function clicked(){
  var option = document.getElementById("selectedOptionNewpost");
  const radioSelected = option.querySelector("input[type='radio']:checked")

  const labelForSelectedRadio = option.querySelector(`label[for=${radioSelected.getAttribute('id')}]`)
  console.log(labelForSelectedRadio.textContent)
}
</script>

  <div class="selectbox_container_newpost">
    <div id="selectedOptionNewpost" class="selectbox_newpost" tabindex="1">
    <input class="selectopt" name="test" type="radio" id="opt1" checked>
    <label for="opt1" class="option_newpost">Objects</label>
    <input class="selectopt" name="test" type="radio" id="opt2">
    <label for="opt2" class="option_newpost">Vehicules</label>
    <input class="selectopt" name="test" type="radio" id="opt3">
    <label for="opt3" class="option_newpost">Technology</label>
    <input class="selectopt" name="test" type="radio" id="opt4">
    <label for="opt4" class="option_newpost">Books</label>
    <input class="selectopt" name="test" type="radio" id="opt5">
    <label for="opt5" class="option_newpost">Furniture</label>
    <input class="selectopt" name="test" type="radio" id="opt6">
    <label for="opt6" class="option_newpost">Others...</label>
  </div>
</div>
<button onclick="clicked()">Check</button>

  </body>
</html>

Upvotes: 1

Related Questions