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
– ponury-kostek, Commented Apr 18, 2019 at 10:07
Use key/value pairs instead of a plain array. That way you can easily access previously added answer and swap it out for new one. — Cray
– Cray, Commented Apr 18, 2019 at 10:07

Dev · Accepted Answer · 2019-04-18 11:18:51Z

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, 2019 at 11:18

answered Apr 18, 2019 at 10:21

Dev

6,75013 gold badges71 silver badges112 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Hosowu Over a year ago

what if the user reverts them both to yes will it remove the message?

Dev Over a year ago

In that case you need to write down a separate if condition within the same function to remove such message element.

Dev Over a year ago

Updated my answer.

Full Stack Alien · Accepted Answer · 2019-04-18 10:19:36Z

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

Collectives™ on Stack Overflow

Save multiple dropdown options in an array

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related