Save multiple dropdown options in an array

Question

I am generating questions from a database where the user will select answer in a drop-down menu.When a user selects a certain option,a suggestion will be pushed to the array triggering on-change event of JavaScript. When the user has completed all the questions i will then send the array as a row to a database from form storing all the suggestions.

When i try to send the suggestion.The suggestion gets pushed the first time.But when a user changes the answers the array gets pushed again with duplicate message

    var suggestions=[];

    function sendSuggestion() {
        if (document.getElementById("1").value == "no" && document.getElementById("2").value == "no"  ){
            suggestions.push("you need to study more");


        }


    }
</script>

<form action="">
@foreach ($questions as $question)


        {{-- <p>{{$question->id}}){{$question->english}}</p> <br> --}}


            <div class="form-group">
                <label>{{$question->id}}) {{$question->english}}</label>
                <select id="{{$question->id}}" onchange="sendSuggestion()" class="form-control" id>
                        <option value="yes">Yes</option>
                        <option value="no">No</option>
                        <option value="regularly">Regularly</option>
                        <option value="sometimes">Sometimes</option>
                    </select>


            </div>


@endforeach

</form>

i expect output of "you need to study more" when a user selects no in question with id 1 and 2.

You need to clear `suggestions` before testing answers in `sendSuggestion`, add `suggestions=[];` before `if` — ponury-kostek, Apr 18 '19 at 10:07
Use [key/value](https://stackoverflow.com/questions/1168807/how-can-i-add-a-key-value-pair-to-a-javascript-object) pairs instead of a plain array. That way you can easily access previously added answer and swap it out for new one. — Cray, Apr 18 '19 at 10:07

Dev · Answer 1 · 2019-04-18T11:18:51.827

1

Update your javascript function with:

    function sendSuggestion() {
    if (document.getElementById("1").value == "no" && document.getElementById("2").value == "no"  ){
        if (suggestions.indexOf("you need to study more") == -1){
            suggestions.push("you need to study more");
        }
    }

    if (document.getElementById("1").value == "yes" && document.getElementById("2").value == "yes"  ){
        var index = suggestions.indexOf("you need to study more");

        if (index > -1) {
           suggestions.splice(index, 1);
        }
    }
}

This will allow distinct suggestions in your array, no duplicates.

edited Apr 18 '19 at 11:18

answered Apr 18 '19 at 10:21

Dev

6,570
10
66
112

what if the user reverts them both to yes will it remove the message? – Hosowu Apr 18 '19 at 10:59
In that case you need to write down a separate if condition within the same function to remove such message element. – Dev Apr 18 '19 at 11:07
Updated my answer. – Dev Apr 18 '19 at 11:19

score 0 · Answer 2 · answered Apr 18 '19 at 10:19

If you aren't requiring storage of multiple suggestions you can set the array to empty on each function call.

var suggestions=[];

function sendSuggestion() {
    // here will work
    suggestions = [];
    if (document.getElementById("1").value == "no" && document.getElementById("2").value == "no") {
        // or if you only want to set to empty if the conditional passes you can do it here
        suggestions = [];
        suggestions.push("you need to study more");
     }
}

If you need or want to keep the array populated you can check for the specific item. Instead of reinitializing the array inside your conditional you'll run this

let index = suggestions.indexOf("you need to study more");
// negative one is returned if the item is not found
// if it's found we'll remove it from the array
if (index > -1) suggestions.splice(index, 1);

Documentation //

Array.splice() -- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

Array.indexOf() -- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf

Save multiple dropdown options in an array

2 Answers2