Please help,there is any problem in jQuery code.This does not display any output at the label. [Resolved]

Posted by Kumarkrishna184 under jQuery on 12/5/2015 | Points: 10 | Views : 464 | Status : [Member] | Replies : 5
Sir, There is 1 checkboxList having 3 items in it and 1 button and 1 label. My objective is to when if does not select any checkbox
item and click on button then there should be display a message "Please select any option".and if we select any checkbox and then click on the button then that checkbox text and value should be display on label.

Html Code:----

<form id="form1" runat="server">
<div>
<b>Select Options</b>
<asp:CheckBoxList ID="chkList1" runat="server">
<asp:ListItem Text="Option1" Value="opt1" />
<asp:ListItem Text="Option2" Value="opt2" />
<asp:ListItem Text="Option3" Value="opt3" />
</asp:CheckBoxList>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" /><br />
<asp:Label ID="lblResult" runat="server" />
</div>
</form>


jQuery Code:---

<script src="Scripts/jquery-2.1.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btnSubmit").click(function () {
if ($("#chkList1 input:checkbox").is(":checked") == false) {
$("#lblResult").html("<b style='color:red'>Please Select any Option</b>");
return false;
}
else
{
var texts = "";
var values = "";
$("#chkList1 input:checkbox:checked").each(function () {
values += $(this).val() + ",";
texts += $("label=[for=" + $(this).prop("id") + "]").text() + ",";
});
texts = texts.substring(0, texts.length - 1);
values = values.substring(0, values.length - 1);
$("#lblResult").html("<b>Selected Option :</b><br/><b>Texts :</b>" + texts + "<br/><b>Values :</b>" + values);
return false;
}
});
});
</script>



Thanks and Regards,
Krishna Kumar

Thanks and Regards,
Krishna Kumar



Responses

Posted by: Rajnilari2015 on: 12/5/2015 [Member] [Microsoft_MVP] [MVP] Platinum | Points: 50

Up
0
Down

Resolved
Try this , it address your problem

<html>

<head>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>
<script type="text/javascript">
$(document).ready(function () {

$("#btnSubmit").click(function () {
if ($("input:checkbox[name=Options]").is(":checked")==false) {
$("#span1").html("<b style='color:red'>Please Select any Option</b>");
}
else
{
var texts = "";
var values = "";
$("input:checkbox[name=Options]:checked").each(function () {
values += $(this).val() + ",";
texts += $("label[for=" + $(this).prop("id") + "]").text() + ",";
});

values = values.substring(0, values.length - 1);
texts = texts.substring(0, texts.length - 1);
$("#span1").html("<b style='color:green'>Selected Options</b><br/><b>Texts :</b>" + texts + "<br/><b>Values :</b>" + values);
}
});
});
</script>
</head>
<body>
<b>Select Options</b><br />
<input type="checkbox" id="chk1" value="opt1" name="Options" />
<label for="chk1">Option1</label>
<input type="checkbox" id="chk2" value="opt2" name="Options" />
<label for="chk2">Option2</label>
<input type="checkbox" id="chk3" value="opt3" name="Options" />
<label for="chk3">Option3</label>
<input type="checkbox" id="chk4" value="opt4" name="Options" />
<label for="chk4">Option4</label><br />
<input type="button" id="btnSubmit" value="Submit" /><br />
<span id="span1"></span>

</body>
</html>


Also in your code, in the else part instead of

return false;


make

return true;


--
Thanks & Regards,
RNA Team

Kumarkrishna184, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Kumarkrishna184 on: 12/5/2015 [Member] Starter | Points: 25

Up
0
Down
You are Great Sir.......Thanks....
I tried very much but not able to solve the problem then i post the problem.....Thanks again sir.......

Thanks and Regards,
Krishna Kumar

Kumarkrishna184, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Kumarkrishna184 on: 12/5/2015 [Member] Starter | Points: 25

Up
0
Down
Niladri Biswas Sir can i get your personal detail?

Thanks and Regards,
Krishna Kumar

Kumarkrishna184, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Rajnilari2015 on: 12/5/2015 [Member] [Microsoft_MVP] [MVP] Platinum | Points: 25

Up
0
Down
Kumar Sir, glad that it has helped you.

--
Thanks & Regards,
RNA Team

Kumarkrishna184, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Kumarkrishna184 on: 12/5/2015 [Member] Starter | Points: 25

Up
0
Down
Ok Thanks Sir.....

Thanks and Regards,
Krishna Kumar

Kumarkrishna184, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response