Thong Vo Thong Vo - 2 months ago 6
HTML Question

How to create a form with 2 select tag, adding element from this select to another select, and handle form submission?

I would like to create a form like this, which I can add/remove individual/all element between Available and Seleteted select tag.

enter image description here

When hitting the submit button, form will submit information from Selected to servlet backend process.

So my question are:


  1. How to create above form, binding data to Available, handling 4 button to move element?

  2. How to send all data from Selected to server when hitting submit button?


Answer

assuming you can use jquery

I have two selects multiselect1 and choosenItems

Below I copy selected items from multiselect1

var options = $('select.multiselect1 option:selected').sort().clone();

for (var i = 0; i < options.length; i++) {
    $('select.choosenItems').append(options[i]);
}

So for my addAll function

$('.addAll').on('click', function() {

    var options = $('select.multiselect1 option').sort().clone();

    for (var i = 0; i < options.length; i++) {
        $('select.choosenItems').append(options[i]);
    }
}

For submitting to my servlet I am also using jquery, and again doing

    $(".choosenItems option").each(function() {
        chosenStr = chosenStr + "&chItems=" + $(this).val();
    }); 

    loadUrl = "myServlet?" +  event + '&' + chosenStr;  

and then a normal jquery ajax call

$.ajax({  
    type: "GET",
    contentType: "application/x-www-form-urlencoded; charset=UTF-8",
    async: true,  
    url: loadUrl,  
    success: function(data){ 
            // something                        
    }  
});     
Comments