I understand that this question has been done to death so I’ll apologise in advance but I’m just not getting it. What I am looking to do is some sort of rating system and while I’ve looked at several examples in tutorials on other sites, they are all a bit bloated and not really what I’m after.
I need to submit a form when a radio button is selected. The radio button represents some number which I need to use server side as I need to update databases etc with this value. What I need after that is for the updated database value to be returned to the jsp and display this number.
All of the backend stuff isn’t a problem really. All I need is to be able to send the form data to the servlet and get the updated value back without reloading the page. I would also like to use a post form action to do this if possible, but that isn’t crucial.
Skip to edit 3
Is this possible without having some 200 line JQuery / Ajax script ?
I’ve gotten as far as
$('#submit').click(function(){
$.ajax({
url: '/Rating',
type:'POST',
data: {
message: s
},
success:
function(msg){
alert("Success");
// ill want to do something with divs here later i.e a refresh or toggle
}
});
});
which I gleamed from other threads on this topic. I need it to work with some basic html form like
<form action="/" id="rating" method="Post">
<input type="radio" name="ra1" onclick="formaction">
<input type="radio" name="ra1" onclick="formaction">
<input type="radio" name="ra1" onclick="formaction">
<input type="radio" name="ra1" onclick="formaction">
<input type="radio" name="ra1" onclick="formaction">
</form>
Edit: The servlet i want to send the information to is named Rating with a url-pattern /Rating in my web.xml file. Do i get the information passed to it with a standard request.getAttribute(String value) call and which string value do i look for? “message” or “s” ?
I’d appreciate any help. Thanks.
Edit 2: I set up a test page to try to make this ajax stuff work. Using 3nigma’s solution i have
<html>
<head>
<script src="jquery-1.7.1.js"></script>
<script>
$(":radio").change(function(){
var formData = $("form").serialize();
console.log(formData);
$.post("/Test",{data:formData},function(val){
//val has the updated value that you will send from the servlet
//do something
});
});
</script>
</head>
<body>
<form action="/Test" id="rating" method="Post">
<input type="radio" name="ra1" />
<input type="radio" name="ra1" />
<input type="radio" name="ra1" />
<input type="radio" name="ra1" />
<input type="radio" name="ra1" />
</form>
</body>
</html>
inside my Test servlet in the doPost method i have
request.getAttribute("formData");
request.getAttribute("data");
System.out.println("test");
when i run the jsp page and select a radio button nothing appears to happen. The System.out.println() doesnt get executed which makes me think that its never reaching the servlet.
Anybody see anything im doing wrong ?
Edit 3
Finally got it working. I’ll include the problems i had incase anybody gets stuck in some of the same places.
When sending to the servlet with name Rating the url is just “Rating” and not “/Rating” as it may be in web.xml.
Inside the doPost method in Servlet, use request.getParameter(“itemID”) to retrieve the data
The best thing i did all weekend was install firebug. That pretty much told me where i failed and set me on the right track. Thanks to the people who replied.
The code I ended up using was posted by danniehansenweb except I fixed a simple mistake. The comma inside the data { } should not be there. Instead move it outside the closing curly bracket like
data {itemID : rel },
You could simply use the .click event for the radio buttons.
Such example could look likethis:
HTML
JavaScript
This would give each radio button a unique id set in the rel attribute. Then it will when the radio button is clicked send a ajax request to ajax.php as a POST. The data will contain what radio button is currently selected.
Then all you have to do is in your backend handle the request and update the rows out from what is selected.