Populate drop down based on input of another within a single form without submitting form(Spring MVC+ jsp)

Question

I have a two drop downs(form:select) in a single form in a .jsp file and I wanted to populate the second drop down based on the selection of the first, however the problem is I cannot submit the form since I already have a controller mapping which saves the form values to DB. I know this can be done using AJAX(though I am not familiar with AJAX that much, I am more into back-end development). So I would like to find a solution without using AJAX for the time being. Any pointers to where to start is greatly appreciated though this might sound like a silly question.

Update corresponding to reply I got from Danny,

I think I have problem with suggested approach though,

"On the client side use JQuery which request data from your Spring MVC controller using POST:"

The problem is I already have a form submit controller mapping(POST) lets say something like /saveUser.htm )

I'll explain my problem using a example perhaps.

here I have two drop downs country and province,

<form:select path="country" cssClass="dropdown" >

<form:select path="province" cssClass="dropdown" >

If the user chooses particular country then provinces of the particular country should be loaded to second dropdown.

So, if I change first dropdown(country) to submit form onChange,

<form:select path="country" cssClass="dropdown" onchange="document.forms['userForm'].submit();">

the controller mapping get invoked would be

@RequestMapping(value = "/saveUser.htm" method=RequestMethod.POST)
public void saveUser(....)

not the

@RequestMapping(value = "/getOptions" method=RequestMethod.POST)
@ResponseBody
public String getOptionds(HttpServletResponse response)

though.

Regards, Carl

danny.lesnik · Accepted Answer · 2011-05-29 08:33:12Z

1

On the client side use JQuery which request data from your Spring MVC controller using POST:

 $.post("/getOptions", function(options) {
     .each(options, function(val, text) {
            $('#mySelect').append(
                $('<option></option>').val(val).html(text)
            );
        });
 });

on the server side:

@RequestMapping(value = "/getOptions" method=RequestMethod.POST)
@ResponseBody
public String getOptionds(HttpServletResponse response) {
String response = "{val1 : 'option1', val2 : 'option2'}"; 
return response;
}

I can miss some details but this is the concept. Hope that helps.

answered May 29, 2011 at 8:33

danny.lesnik

18.6k31 gold badges142 silver badges206 bronze badges

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

Comments

LeHill · Accepted Answer · 2016-02-26 19:11:41Z

Try something like this:

$.ajax({
    type: "POST",
    url: "someUrl",
    dataType: "json",
    data: {
        varname1 : "varvalue1",
        varname2 : "varvalue2"
    },
    success: function (data) {
        $('#selectName').empty(); // empty existing list
        $('#selectName').append('<option value="">Some Label</option>');
        $.each(data, function (varvalue, vartext){
            $('#selectName').append($('<option></option>').val(varvalue).html(vartext));
        });  
    }
});

This will call the POST method for someUrl with those (zero or more/optional) data parameters and when the controller returns successfully, will do the success function.

Then, in your controller do something like this (note: use double quotes around any strings for valid JSON - they have to be escaped in java):

@RequestMapping(value = "/someUrl", method=RequestMethod.POST)
@ResponseBody
public String getJsonData(@RequestBody String parameters) {
    String exampleData = "{\"somename1\":\"somevalue1\",\"somename2\":\"somevalue2\"}";
    return exampleData;
}

@RequestMapping is set to the POST method for /someUrl

@ResponseBody means the returned String should be used as data

@RequestBody holds the (optional) url/data parameters like so: "varname1=varvalue1&varname2=varvalue2"

You will have to add some logic to create that JSON string holding the contents of that second list something like this?

{"selectId1":"selectValue1","selectId2":"selectValue2",..."selectId9":"selectValue9"}

Then the select will be filled in with options like so:

<option value="">Some Label</option>
<option value="selectId1">"selectValue1"</option>
<option value="selectId2">"selectValue2"</option>
...
<option value="selectId9">"selectValue9"</option>

Collectives™ on Stack Overflow

Populate drop down based on input of another within a single form without submitting form(Spring MVC+ jsp)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related