Keep the combobox entries after the form submission

[sudheshna Iyer]

I have a form with a combobox and a text box. User selects an entry from the combo box and enters
in the textbox. It is a search functionality. Then System should fetch all the records for selected entry.
The selected entry from combobox and entered text should retain on the screen.

Constant Combo box entries:
Name
Phone
Email

When the user selects an entry and submits the form, selected entry should be sent back to
servlet to fetch the data for the name entered and user should remain on the same screen with
the selected entry (Name here) selected.

How can I keep the user selection (Name as selected here) of combobox after the form submission.

[Bear Bibeault]

Repeat after me: "HTML has no combobox", "HTML has no combobox". Please read this for more information.

When redrawing the page, be sure to set the selected attribute on the option element that represents the selection.

[sudheshna Iyer]

I display the selected value as follows:

   
<select name="selectOptions"> 
<c:choose>
	<c:when test="${selectedColumnName=='Name'}">
			<option value="Name" selected>Name</option>
			<option value="Phone">Phone</option>
			<option value="Email">Email</option>
	</c:when>
	<c:when test="${selectedColumnName=='Phone'}">
			<option value="Name">Name</option>
			<option value="Phone" selected>Phone</option>
			<option value="Email">Email</option>
	</c:when>
	<c:when test="${selectedColumnName=='Email'}">
			<option value="Name">Name</option>
			<option value="Phone">Phone</option>
			<option value="Email" selected>Email</option>
	</c:when>	
	<c:otherwise>	<!-- none selected -->
			<option value="Name">Name</option>
			<option value="Phone">Phone</option>
			<option value="Email">Email</option>	
	</c:otherwise>
</c:choose>
</select>

I have a clear button, which should show "none selected". It is not working with the following
JS. This is because I guess the value of selectedColumnName is not cleared.

   
    <script type="text/javascript">
      function clear(){
          document.getElementById('selectOptions').selectedIndex = 0;
      }
    </script> 

So my question is, how to access request variables from javascript?

[Jeanne Boyarsky]

You can't access Java request variables from JavaScript. You can access the form on the page (please show the field declaration rather than the options for this)

When you say after form submission, do you mean an AJAX or regular submit? For AJAX, you shouldn't have to change the values as they would need to be remembered. For a regular submit, the JSP would have to select the desired values.

[Bear Bibeault]

sudheshna Iyer wrote:I display the selected value as follows:

Do you not think that repeating all the options for every possibility is a bit inefficient and non-maintainable?

Would it not be better to only list the options once, and to determine whether to set the selected attribute on each on individually?

I have a clear button, which should show "none selected". ... So my question is, how to access request variables from javascript?

Why do you need to access the request variables to set the 'none selected' option?

Just set the selected attribute of the desired option and remove it from the others. You're over-engineering the whole thing and making it a lot more complicated than need be.

[Bauke Scholtz]

sudheshna Iyer wrote:I display the selected value as follows:
So my question is, how to access request variables from javascript?

To get straight, just let JSP print out those request variables as a Javascript variable.

Regarding to your actual problem. It's a messup. Bear already pointed some important things out.

[sudheshna Iyer]

Just set the selected attribute of the desired option and remove it from the others.

To answer Bear's question, I don't know what the desired option is. It is in the request variable.

I have only 3 options and one request variable ${selectedColumnName} indicating the selected option.

<select name="selectOptions">
<option value="Name">Name</option>
<option value="Phone">Phone</option>
<option value="Email">Email</option>
</select>

Can you please give me the code to display selected option from the request variable without repeating
options.

[Vikas Kapoor]

Hello Sudheshna,

Just a day before I have been facing the same problem. But would you believe there is an elegant solution to it. Use EL.

<option value="value1" ${param.fieldName == 'value1' ? 'selected' : ''}>Value1</option>

[Vikas Kapoor]

And this is a classical problem.

[Bear Bibeault]

I have a clear button, which should show "none selected"

Sounds like you know it to me.

But even if you don't it's easy to create JavaScript variables in template text that capture the value of server-side values.

[sudheshna Iyer]

Thank you Very Much Vishal. This is exactly what I am looking for. This worked for me.

But I am not sure why "param" doesn't work for me. If I remove param and use ${fieldName} it worked!

Like:
<option value="value1" ${fieldName == 'value1' ? 'selected' : ''}>Value1</option>