How do you retrieve selected options BEFORE the user have submitted the form?

Question

I'm trying to get data which is selected inside of a multiselect. However, I want to display the selected options inside another field in the form. Therefor I don't want to send the actual form before getting the data and displaying it.

I want to use the value mainly to gather information from a database which gives the user a amount specified for that select option!

I have tried multiple different solutions from different threads but unfortunately they haven't worked!

Select which i want to gather the selected options from:

<div class="col-12">
  <label for="misstanke" class="form-label">Lagöverträdelser</label>
  <select multiple name="misstanke[]" onkeydown="return event.key != 'Enter';" class="form-select form-select-md">
    <?php
    include('selects/overtradelser.php');
    ?>
  </select>
</div>

Input field I want to display the data in:

<div class="mb-3">
  <label for="straff" class="form-label">Påföljder</label>
  <input type="text" onkeydown="return event.key != 'Enter';" class="form-control" name="straff" id="straff">
</div>

Code:

function Straff() {
    var select1 = document.getElementById("misstanke");
    var selected1 = [];
    for (var i = 0; i < select1.length; i++) {
        if (select1.options[i].selected) selected1.push(select1.options[i].value);
    }
    document.getElementById("straff").setAttribute('value', select1);
}

Does this answer your question? [Getting the selected values in a multiselect tag in Javascript](https://stackoverflow.com/questions/11583728/getting-the-selected-values-in-a-multiselect-tag-in-javascript) — luk2302, Sep 15 '21 at 18:49
@luk2302 Unfortunately not, regardless of what I do it doesnt seem to work. — Filipk99, Sep 15 '21 at 18:55
"_regardless of what I do it doesnt seem to work_" - what doesn't work? Show us in code. Your question needs more detail so we can determine how to help. Please add an [example]. — Randy Casburn, Sep 15 '21 at 18:56
@RandyCasburn I'm currently trying out the code shown in luk2302 comment (javascript part). The problem I'm having is that it doesn't update the "straff" field once I select a option. Link to the entire code part: https://srcb.in/tE2mv8P79m — Filipk99, Sep 15 '21 at 19:05
Don't use `setAttribute()` to set the value of an input, assign to the `.value` property. — Barmar, Sep 15 '21 at 19:06
@Barmar the site in question was sourcebin! The code I was trying to post was too long for me too comment. `` Eitherway, this is what im currently using as a function being called upon. — Filipk99, Sep 15 '21 at 19:07
Don't put it in a comment, use the `edit` link to update your question. — Barmar, Sep 15 '21 at 19:08

Barmar · Accepted Answer · 2021-09-15T19:16:53.167

0

To update the value of an input, assign to its value property, not the attribute.

You should use the join() method to convert the array to a string with a specified delimiter.

document.getElementById("straff").value = selected1.join(',');

edited Sep 15 '21 at 19:16

answered Sep 15 '21 at 19:10

Barmar

741,623
53
500
612

When using the code above nothing gets shown in the field. When I use `document.getElementById("straff").value = select1;` I only get: "[object HTMLSelectElement]" when I select an option. Believe I need to convert it to a string before sending it to the input field? – Filipk99 Sep 15 '21 at 19:14
Sorry, typo, that should be `selected1`. – Barmar Sep 15 '21 at 19:17
Thank you, that solved the issue. Appreciate all the help! – Filipk99 Sep 15 '21 at 19:18

How do you retrieve selected options BEFORE the user have submitted the form?

1 Answers1