如何修改我的页面并将我选择的选项传递给 java bean

Question

i am using html code to display my page depending on the selected option i click on. But now i want to pass my selected choice to java beans too.

my 4 options

<tr>
<td class="title">Category:</td>
<td class="field">
    <select name="list" onchange="display(this,'truck','car');">
    <option>Please select:</option>
    <option value="invisible">Bike</option>
    <option value="invisible">Quad</option>
    <option value="car">Car</option>
    <option value="truck">Truck</option>
    </select>
</td>
</tr>

Script i am using

<script type="text/javascript">
function display(obj,id1,id2) {
    txt = obj.options[obj.selectedIndex].value;
    document.getElementById(id1).style.display = 'none';
    document.getElementById(id2).style.display = 'none';
    if ( txt.match(id1) ) {
        document.getElementById(id1).style.display = 'block';
    }
    if ( txt.match(id2) ) {
        document.getElementById(id2).style.display = 'block';
    }
}

</script>

display function is modifying my page doing the following:

<tbody id="car" style="display: none;">

and

<tbody id="truck" style="display: none;">

Now, how do i pass my selected options to java beans?

Answer 1

Use a JSF component instead of a plain HTML element. JSF components allows you to bind the value to a bean property. The JSF component representing a HTML <select> element is the <h:selectOneMenu> wherein you can specify the options using <f:selectItem> or <f:selectItems> .

Eg

<h:selectOneMenu id="list" value="#{bean.vehicle}" onchange="display(this,'truck','car');">
    <f:selectItem itemValue="#{null}" itemLabel="Please select:" />
    <f:selectItem itemValue="invisible" itemLabel="Bike" />
    <f:selectItem itemValue="invisible" itemLabel="Quad" />
    <f:selectItem itemValue="car" itemLabel="Car" />
    <f:selectItem itemValue="truck" itemLabel="Truck" />
</h:selectOneMenu>

with

private String vehicle;

// Getter+setter.

If you're using JSF 2.x, then you can also just use <f:ajax> instead of all that JavaScript boilerplate. I'd suggest to invest some time in going through some decent JSF tutorials, it look like you're totally missing the point of JSF by writing all that HTML/JS manually. Or if you intend to have full control over HTML/JS, better look for an action based MVC framework such as Spring MVC instead of a component based MVC framework such as JSF.

Answer 2

Use AJAX. That allows you to send data to the server without changing anything on the web page.

Try a framework like jQuery which offers AJAX ( docs ) and a lot of other cool stuff to build HTML5 applications.