Forum:

HTML Pages with CSS and JavaScript

Switching form action based upon radio selection

Ranch Hand

Posts: 37

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hi all,

Does anyone know if it is possible for a webpage to be mapped to several servlets?

For instance, is it possible for my webpage (shown below) to 'call' a servlet, say EasyQnServlet, when a user chooses the radio button 'Easy' and another servlet, say DifficultQnServlet, when the option 'Difficult' is selected?

An advance thank to all

Ram Narayan.M

Ranch Hand

Posts: 247

I like...

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

yes you can attain using AJAX... Using "OnClick" event on Radio button, Toggling of URL should be done correspondingly based on option selected...

SCJP 6 [SCJP - Old is Gold]

Apple Khoa

Ranch Hand

Posts: 37

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Ram Narayan.M wrote:yes you can attain using AJAX... Using "OnClick" event on Radio button, Toggling of URL should be done correspondingly based on option selected...

Hi Ram Narayan.M,

Thank you for your prompt reply.

I will take a look at the ajax examples available

Thanks for your help once again.

Bear Bibeault

Sheriff

Posts: 67756

173

I like...

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Ajax is not necessary. Just a little JavaScript to change the action of the form based upon what element is selected.

[Asking smart questions] [About Bear] [Books by Bear]

HTML 5 (verified skill)
Skill verified by Jeanne Boyarsky

CSS 3 (verified skill)
Skill verified by Jeanne Boyarsky

JavaScript (verified skill)
Skill verified by Jeanne Boyarsky

Apple Khoa

Ranch Hand

Posts: 37

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Bear Bibeault wrote:Ajax is not necessary. Just a little JavaScript to change the action of the form based upon what element is selected.

Hi Bear Bibeault,

May I know what do you mean by "Just a little JavaScript to change the action of the form based upon what element is selected"?
Could you kindly provide me with some examples?

By the way, I have tried using Ajax as suggested by Ram Narayan.M. However, I guess I have done something wrong somewhere as I am not getting what is desired. I will be explaining the issue in my next post (as I will be quoting Ram Narayan.M). Do you mind advising me on where my mistakes could be?

An advance thank for your help

Apple Khoa

Ranch Hand

Posts: 37

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Ram Narayan.M wrote:yes you can attain using AJAX... Using "OnClick" event on Radio button, Toggling of URL should be done correspondingly based on option selected...

Hi Ram Narayan.M,

I have tried using AJAX to map my webpage to different servlets based on the option selected by the user. However, I guess I have done something wrong somewhere as the output is not what as desired. My guess is that the AJAX is not responding to the 'onclick' event for the radio buttons. Could you kindly advise me on this issue?

My html code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

xmlhttp.open("get","EasyQnServlet",true); //getname will be the servlet name
    xmlhttp.onreadystatechange  = handleServerResponse;
 
    xmlhttp.send("title=" + title.value); //Posting title to Servlet
    xmlhttp.send("instructions=" + instructions.value); //Posting instructions to Servlet
    xmlhttp.send("questions=" + questions.value); //Posting questions to Servlet
    xmlhttp.send("difficulty=" + difficulty.value); //Posting difficulty to Servlet
    xmlhttp.send("answer=" + answer.value); //Posting answer to Servlet

}
}

function SimulHardFunction() 
{
  if(xmlhttp) {
	var title = document.getElementById("title");
  	var instructions = document.getElementById("instructions");
	var questions = document.getElementById("questions");
	var difficulty = document.getElementById("difficulty");
	var answer = document.getElementById("answer");

xmlhttp.open("get","HardQnServlet",true); //getname will be the servlet name
    xmlhttp.onreadystatechange  = handleServerResponse;
 
    xmlhttp.send("title=" + title.value); //Posting title to Servlet
    xmlhttp.send("instructions=" + instructions.value); //Posting instructions to Servlet
    xmlhttp.send("questions=" + questions.value); //Posting questions to Servlet
    xmlhttp.send("difficulty=" + difficulty.value); //Posting difficulty to Servlet
    xmlhttp.send("answer=" + answer.value); //Posting answer to Servlet

}
}
 
function handleServerResponse() {
   if (xmlhttp.readyState == 4) {
     if(xmlhttp.status == 200) {
       document.myForm.message.innerHTML=xmlhttp.responseText; //Update the HTML Form element 
     }
     else {
        alert("Error during AJAX call. Please try again");
     }
   }
}
</script>
</head>

<body>
<form method="get" action="simul">
<p> </p>
 <table  border="0">
   
   <tr>
     <td  ><div align="right">Worksheet Title: </div></td>
     <td > </td>
     <td ><input name="title" type="text"  value="" size="35" maxlength="35" /></td>
   </tr>
  
   <tr>
     <td ><div align="right">Instructions: </div></td>
     <td> </td>
     <td><input name="instructions" type="text" value="" size="35" maxlength="35" /></td>
   </tr>
   
   <tr>
     <td ><div align="right">No. of Question(s): </div></td>
     <td> </td>
     <td><input name="questions" type="text" value="" size="35" maxlength="35" /></td>
   </tr>
 
    <tr>
     <td ><div align="right">Difficulty Level: </div></td>
     <td> </td>
     <td><label>
       <input name="difficulty" type="radio" value="e" id="radioEasy" checked="checked" onclick="SimulEasyFunction()"/>Easy</label>
       <input type="radio" name="difficulty" value="d" id="radioHard" onclick="SimulHardFunction()" />Difficult</label></td>
   </tr>	
  
   <tr>
     <td ><div align="right">Answer</div></td>
     <td> </td>
     <td><label>
       <input name="answer" type="radio" value="n" checked="checked" />No</label>
       
       <label>
       <input type="radio" name="answer" value="y"  />Yes</label>
      </td>
   </tr>
 
 
   <tr>
     <td > </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td> </td>
     <td> </td>
     <td><input type="reset" name="reset2"  value="Reset" />
       <input type="submit" name="submit2"  value="Submit" /></td>
   </tr>
 </table>

</form>
<p> </p>
</body>
</html>

My web.xml code:

The pdf file generated contains only the title and the instructions as texted in by the users. The 'question' and 'answer' are not reflected in the output.

By the way, I am using doGET method in my servlet.

Is the "get" method used in my html script the possible cause? (I saw an example on a website using POST method.)

Bear Bibeault

Sheriff

Posts: 67756

173

I like...

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Apple Khoa wrote:
May I know what do you mean by "Just a little JavaScript to change the action of the form based upon what element is selected"?

You can write one or two lines of JavaScript to establish an event handler for the change of selection and replace the action value accordingly.

By the way, I have tried using Ajax as suggested by Ram Narayan.M

That's like using nuclear weapons to crack walnuts.

Ajax is a powerful and useful tool that is completely unnecessary for this issue.

Ram Narayan.M

Ranch Hand

Posts: 247

I like...

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

If you are trying to change "action" attribute in form, then you can go with the way Bear Bibeault suggested .. no need of AJAX...

If you are intending to display some dynamic large forms based on option selected, use AJAX in that aspect...

Actually, What will be displayed in the "message"?...

I cant see form named with "MyForm"... Please check the HTML Prgm again...

SCJP 6 [SCJP - Old is Gold]

Apple Khoa

Ranch Hand

Posts: 37

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Bear Bibeault wrote:You can write one or two lines of JavaScript to establish an event handler for the change of selection and replace the action value accordingly.

Hi Bear Bibeault,

I have tried using an event handler onclick="location.href='/EasyQnServlet'" (Line 36 of HTML code) & onclick="location.href='/EasyQnServlet'" (Line 37) to perform the task of mapping to several servlets with one webpage. However, I am still not getting the desired output. The content for 'question' and 'answer' (radio buttons) are not being displayed; only the content 'title' and 'instruction' (text boxes) appear on the output.

Could you kindly advise me on this issue?

My HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <form method="get" action="simul"> <p> </p> <table border="0"> <tr> <td ><div align="right">Worksheet Title: </div></td> <td > </td> <td ><input name="title" type="text" value="" size="35" maxlength="35" /></td> </tr> <tr> <td ><div align="right">Instructions: </div></td> <td> </td> <td><input name="instructions" type="text" value="" size="35" maxlength="35" /></td> </tr> <tr> <td ><div align="right">No. of Question(s): </div></td> <td> </td> <td><input name="questions" type="text" value="" size="35" maxlength="35" /></td> </tr> <tr> <td ><div align="right">Difficulty Level: </div></td> <td> </td> <td><label> <input name="difficulty" type="radio" value="e" id="radioEasy" checked="checked" onclick= "location.href = '/EasyQnServlet'" /> Easy</label> <input type="radio" name="difficulty" value="d" id="radioHard" onclick= "location.href = '/HardQnServlet'" /> Difficult</label></td> </tr> <tr> <td ><div align="right">Answer</div></td> <td> </td> <td><label> <input name="answer" type="radio" value="n" checked="checked" />No</label> <label> <input type="radio" name="answer" value="y" />Yes</label> </td> </tr> <tr> <td > </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td><input type="reset" name="reset2" value="Reset" /> <input type="submit" name="submit2" value="Submit" /></td> </tr> </table> </form> <p> </p> </body> </html>

My web.xml code:
<?xml version="1.0" encoding="ISO-8859-1"?> <web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5">  <servlet> <servlet-name>EasyQnServlet</servlet-name> <servlet-class>simuleqn.EasyQnServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>EasyQnServlet</servlet-name> <url-pattern>/simul</url-pattern> </servlet-mapping> <servlet> <servlet-name>HardQnServlet</servlet-name> <servlet-class>simuleqn.HardQnServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>HardQnServlet</servlet-name> <url-pattern>/simul</url-pattern> </servlet-mapping> </web-app>

Bear Bibeault

Sheriff

Posts: 67756

173

I like...

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

You might want to fix the quoting in your reply.

In any case, just post the relevant parts of the code or an SSCCE. I'm not going to look at code that covers more than one screen to find the one line of JavaScript that's relevant.

By the way, when it comes to event handling, you really want to use jQuery or similar. Otherwise, you've got to deal with IE's nonsense.

[Asking smart questions] [About Bear] [Books by Bear]

Apple Khoa

Ranch Hand

Posts: 37

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Bear Bibeault wrote:You might want to fix the quoting in your reply.

In any case, just post the relevant parts of the code or an SSCCE. I'm not going to look at code that covers more than one screen to find the one line of JavaScript that's relevant.

By the way, when it comes to event handling, you really want to use jQuery or similar. Otherwise, you've got to deal with IE's nonsense.

My HTML code (shortened)

Used <form method="get" action="simul"> in the html.

My web.xml code (shortened)

Bear Bibeault

Sheriff

Posts: 67756

173

I like...

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

No, you're causing a redirect, not submitting the form. and that's not what you do either, is it?

Using jQuery, here's something off-the-cuff (not guaranteed to be 100% correct). In the ready handler:

If you don't want to use jQuery, it'll take a bit more code, but this should give you the idea.

You don't want the change of radio value to trigger a redirect or a submission, you just want it to switch out the action, right?

Of course, it might just be easier to handle it on the server by make the servlet do the work based upon the submitted value of 'difficulty'.

[Asking smart questions] [About Bear] [Books by Bear]

Bear Bibeault

Sheriff

Posts: 67756

173

I like...

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

At this point this is all about JavaScript and not servlets, so I've changed the title a bit and moved it to the HTML forum.

[Asking smart questions] [About Bear] [Books by Bear]

Ram Narayan.M

Ranch Hand

Posts: 247

I like...

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

What is your plan to render on toggling Easy and Difficulty mode?...

Meanwhile In,

<

location.href cannot be invoked in this manner... It should be embodied in a function and have to call that function... But, using location.href will redirect to the next page...

And you cant get the effect of actions based on toggling effect happening in the same page...

SCJP 6 [SCJP - Old is Gold]

Apple Khoa

Ranch Hand

Posts: 37

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Ram Narayan.M wrote:What is your plan to render on toggling Easy and Difficulty mode?...

Meanwhile In,

<input name="difficulty" type="radio" value="e" id="radioEasy" checked="checked" onclick= "location.href = '/EasyQnServlet'" /> Easy</label>

location.href cannot be invoked in this manner... It should be embodied in a function and have to call that function... But, using location.href will redirect to the next page...

And you cant get the effect of actions based on toggling effect happening in the same page...

My Mathematics webpage has a form which has two options (radio buttons) for the users - Easy Question or Hard Question

If the user selects 'Easy Question', the webpage has to call the EasyQnServlet (with 'easy questions' mathematical logic in servlet).
If the user selects otherwise, the webpage has to call the HardQnServlet.

Everything is working fine when my webpage maps only to ONE servlet. My issue now is how to make my webpage maps to the relevant servlet according to what the user chooses (Easy / Hard).

By the way, output is set as pdf file in my servlet, not HTML.

(I am not using any database.)

Bear Bibeault

Sheriff

Posts: 67756

173

I like...

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

If the JavaScript is beyond you at this point, I'd just make the switch on the server.

[Asking smart questions] [About Bear] [Books by Bear]

Consider Paul's rocket mass heater.