restricting <form:select> from being databound to modelAttribute if a specific <form:option> is selected

Question

I have a dropdown for a product category, which displays a set of values from the database.

For this I am using Spring tag. I want one of the options to display a value called "Others" and when that value is selected I am displaying a textbox to accept a new product category.

The problem is when I am submitting the form, the product_category is being set as "Others,(newly added category)". but what I actually want is just the newly added category.

Is there any way to do this?

My code is as follows:

add.jsp

<form:form action="${actionURL}" method="POST" modelAttribute="Record">

..................
..................

                                <div class="row">
                                <section class="col col-4">
                                    <label class="label">Product Category</label> <label
                                        class="select"> <form:select id="product_category"
                                            path="product_category" onchange="add_new_productCategory();">
                                            <form:option value="">Choose category</form:option>
                                            <form:options items="${productOptions}"
                                                itemValue="product_category" itemLabel="product_category" />
                                            <form:option itemLabel="Others" value="Others"/>        
                                        </form:select><i></i>
                                    </label>
                                </section>
                                <section class="col col-4">
                                    <label class="label">New Category</label> <label class="input">
                                        <form:input type="text" path="product_category"
                                            id="new_product_category" disabled="disabled" required="required" />
                                    </label>
                                </section>
                            </div>

............................
...................

<input type="submit" value="Submit" class="button">

.............................

I am using the following script

function() {
            if ($("#product_category").val() == 'Others') {
                $('#new_product_category').prop('disabled', false);
            } else {
                $('#new_product_category').prop('disabled', 'disabled');
            }
        };

which is getting executed when "others" option is selected

In my model class, it is just the usual process like

    @Column(name = "PRODUCT_CATEGORY")
private String product_category;

In my controller I have

    @RequestMapping(value = "/add.html", method = RequestMethod.GET)
public String getRegisterPage(Model model) {
    System.out.println("-----------------add records ---------------------");

    model.addAttribute("Record", new RecordParams());

    List<ProductCategory> productOptions = listProductParamsService.findProductCategories();
    model.addAttribute("productOptions", productOptions);
    return "add";
}

and

@RequestMapping(value = "/add.html", method = RequestMethod.POST)
public String saveRecord(@ModelAttribute("Record") RecordParams recordParams) {
    System.out.println(recordParams);
    RegisterService.addRecord(recordParams);
    return "redirect:/add.html";
}

Everything is working as expected except for the product category, which when print is being displayed as

 RecordParams [id=null,................., product_category=Others,IPTL,....]

What should I do to rectify this, please help?

Thanks in advance.

Answer 1

If I understood your problem, try to do as following suggestion this may help you:

If you want to submit Single product_category,
Disable product_category and enable new_product_category if product_category value is Others and vice versa...

function() {
    if ($("#product_category").val() == 'Others') {
        $('#product_category').prop('disabled', true); // disabled
        $('#new_product_category').prop('disabled', false);
    } 
    //else {
        //$('#new_product_category').prop('disabled', 'disabled');
       // $('#product_category').prop('disabled', false);
       // $('#new_product_category').prop('disabled', true); //disabled
    //}
};

Here once you disabled product_category you can not change its value so else part is useless,
To enable it again, write another function on focusout or blur of new_product_category if its value is "" i.e. BLANK

Updated:
Another way is, check $('#product_category').val() on Form submit. If it is Others disable it.
Don't forget to add required attribute to true for $('#new_product_category').