Javascript and HTML - Getting value from a SPAN and Selection

Question

I am fairly new to Javascript programming. I would like to get the selected value from the list of values presented to the customer. I want to display this as a simple text saying, the selection was from the options provided. Let me paste the code snippet

<span id="Step2" style="display:none">
<form>
   <fieldset>
      <legend>Type of Customization</legend>
      <p>
         <label>Available Customization</label>
         <select id = "myCust">
           <option value = "1">New Dimension Table</option>
           <option value = "2">Add a Fact Table</option>
           <option value = "3">Completely New Form</option>
           <option value = "4">Edit an Old Form</option>
           <option value = "5">Others</option>
         </select>
      </p>
   </fieldset>
</form>

so from the provided options, if the person chooses, say, "Completely New Form" I would like to display that into the HTML

I tried

document.getElementById("myCust")

but that won't work.

Thanks for the super quick response. I tried the following but is not working Selected Customization : getCust() — Balaji Krishnan, Oct 19 '18 at 15:52

bcr · Accepted Answer · 2018-10-19T18:09:01.827

function getCust() {
    var typeofCust = document.getElementById("myCust");
    var cust = typeofCust.querySelector('option[value="'+typeofCust.value+'"]');

    document.getElementById('selected-customer').innerText=cust.innerText;
}

document.getElementById('myCust')
  .addEventListener('change', getCust)

<div id="FooterTableStep2" style="background-color:Silver">
    Selected Customization : <span id="selected-customer"></span>
</div>

<form>
    <fieldset>
        <legend>Type of Customization</legend>
        <p>
            <label>Available Customization</label>
            <select id="myCust">
                <option value="1">New Dimension Table</option>
                <option value="2">Add a Fact Table</option>
                <option value="3">Completely New Form</option>
                <option value="4">Edit an Old Form</option>
                <option value="5">Others</option>
            </select>
        </p>
    </fieldset>
</form>

getElementById returns the actual HTML element object.

const selectEl = document.getElementById('myCust');
const customer = selectEl.value;
console.log(customer); // selected value

It's also worth noting that most elements can also query their children

const row = document.querySelector('td:nth-child(13)');
const selectEl = row.getElementById('some-id');

Updated to include your comment:

<td id="FooterTableStep2" style="background-color: silver;">
    Selected Customization: <span id="selected-customer"></span>
</td>

<script>
    function getCust() {
        var typeofCust = document.getElementById("myCust");
        var cust = typeofCust.querySelector('option[value="' + typeofCust.value + '"]');

        document.getElementById('selected-customer').innerText = cust.innerText;
    }
</script>

Thanks Brian.. I tried the following but not working.. Selected Customization : getCust() — Balaji Krishnan, Oct 19 '18 at 15:57
Updated my answer. It doesn't matter where the `script` tag lives, it should usually go right before the `
` tag. — bcr, Oct 19 '18 at 16:01
Thanks once again. I tried to copy your code, but still i dont see the SELECTEDVALUE displayed Selected Customization : — Balaji Krishnan, Oct 19 '18 at 16:07
Added a working code snippet. I used a div instead your `td` since I have no context on what you table structure looks like — bcr, Oct 19 '18 at 18:09

Javascript and HTML - Getting value from a SPAN and Selection

1 Answers1