struts2 with jquery radio button event issue
Question
I have an issue with the radio button event handling using jquery. I am new to JQuery but trying handle the html form elements events using JQuery. In the recent days I have added JQuery datepicker to my form which is working fine and now trying to add radio button and handle the checked and unchecked events of the radio button to hide and show some parts of the html elements( text fields, selection and other elements ).
Here is my code
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="tags" uri="/struts-tags"%>
<html>
<head>
<link rel="stylesheet" href="jquery/jquery-ui.css">
</head>
<body>
<tags:form name="someForm" action="someAction" method="post">
<tags:textfield key="someActionClass.transactionDate" id="datepicker" label="Transaction Date" />
<tags:radio list="#{'1':'One Time','2':'Recurring'}" id="tType" lable="Transaction Type" name="recurringOrOneTime"></tags:radio>
<div class="recuType">
<h1>this part should be hiden/show depending upon radio button events</h1>
</div>
<script src="jquery/external/jquery/jquery.js"></script>
<script src="jquery/jquery-ui.js"></script>
<script>
$( "#datepicker" ).datepicker({
inline: true
});
$("#tType").change(function(){
alert('Radio Button event raised');
});
</script>
</tags:form>
</body>
</html>
I have added the JQuery lib that I have downloaded for my JQuery datepicker in jquery directory as you can see from this link tag
<link rel="stylesheet" href="jquery/jquery-ui.css">
so, When I click on the radio buttons no event is getting generated. for the testing purpose I am trying to popup and alert message with the selected radio button value but no luck. I have gone through so many posts and examples and most of them are using html input tag and I want to use struts2 tag elements.
Is there any thing wrong I am doing with my code? or missed any library to include? please help
2 answers
solution1
2 ACCPTED 2015-12-04 06:57:59
Use:
$("input[name='recurringOrOneTime']").change(function(){
alert('Radio Button event raised');
});
Instead of
$("#tType").change(function(){
alert('Radio Button event raised');
});
id must be unique in a html document, you're assigning 2 radio buttons the same id.
solution2
1 2015-12-04 07:07:22
You can change two things:
- change the attribute
idtoclass. - Bind the event on class name instead.
Change
id="tType"
to
class="tType"
and now bind the event:
$(".tType").change(function(){
alert('Radio Button event raised');
});
or even you can refer it with input[type="radio"], :radio etc:
$("form input[type='radio']").change(function(){ // or $("form :radio")
alert('Radio Button event raised');
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.