How to send 2 array in servlet

Question

I sending a 2 array in my servlet but i don't know how to send my second array in javascript to my servlet I hope someone help me with this thank you.

<label for="pets">Choose your Vegetables:</label>
        <select class="selectpicker" name="vegetables-selected"  id="vege" multiple aria-label="size 3 select example">
        <option value="Carrot">Carrot</option>
         <option value="Broccoli">Broccoli</option>
         <option value="Cabbage">Cabbage</option>
         <option value="Cucumber">Cucumber</option>
         <option value="Mushroom">Mushroom</option>
</select>

<label for="pets">Choose your pets:</label>
        <select class="selectpicker" name="vegetables-selected"  id="pets" multiple aria-label="size 3 select example">
        <option value="dog">dog</option>
         <option value="car">car</option>
         <option value="snake">snake</option>
</select>

<Script>

document.getElementById('submit').onclick = function() {
    var selected = [];
    var selected2 = [];
    
    for (var option of document.getElementById('vege').options
            var option of document.getElementById('pets').options)
    {
        if (option.selected) {
            selected.push(option.value);
        }
    }
    document.location.href = 'output?selected='+ selected  ;
}
</Script>

OUTPUT Broccoli,Cucumber,Potato null

Also, I can't help but notice other mistakes: - your ``s are `for` the same ``s both have the same `name` — Mike Warren, Jun 22 '22 at 06:23
You do not need this JavaScript at all. Your root mistake is just that you confused `name` with `id`. See abovelinked duplicate for the proper approach. — BalusC, Jun 22 '22 at 07:54

Mike Warren · Answer 1 · 2022-06-22T06:28:25.500

for (var option of document.getElementById('vege').options
           var option of document.getElementById('pets').options)

I'm sorry, but what is this? For-loops do NOT work like that.
Why not just create a model class, on the front end, that represent the data on the page (look into MV* design patterns), and use the model to represent/send your data. Think something like:

src/models/YourPreferencesModel.js (or something similar)

class YourPreferencesModel extends BaseModel { 
   constructor(vegetables = [], pets = []) { 
        super();
        this.vegetables = vegetables;
        this.pets = pets;
    }
}

and then have your BaseModel be like:

src/models/BaseModel.js (or something similar)

class BaseModel { 
    /**
     * @param { (success : boolean) => {} } onDone
     **/
    save(onDone) { 
        let xhr = new XMLHttpRequest();
        xhr.open("POST", '[your_endpoint_here]');
        
        xhr.setRequestHeader("Accept", "application/json");
        xhr.setRequestHeader("Content-Type", "application/json");
        
        xhr.onload = () => {
            onDone((xhr.status >= 200) && (xhr.status < 400));
        }
        
        xhr.send(JSON.stringify(this));
    }
    
    // something similar for get() method
}

and at the <head> of your HTML file,

<script src="src/models/BaseModel.js" />
<script src="src/models/YourPreferencesModel.js" />

create the model in a view-model (or controller) class, instantiated on start, have the view components update that model through the view-model/controller, and move the submit handling to the view-model/controller. Your onclick in the view would then call the save() of the view-model/controller, which would then call the save() of the model.

DISCLAIMER: I have not run this code, so, as always, anyone viewing code on questions on code forums should check it.

Also this code is using the old-school XMLHttpRequest. You could modernize it with fetch(), jQuery's post(), ..., anything you have on your end. That would greatly simplify the model methods.

document.location.href = 'output?selected='+ selected  ;

Also, you're simply changing the page URL, hence making a GET request to your server with the data. No. This needs to be a POST request.

How to send 2 array in servlet

1 Answers1