Please help anyone,There is a problem in jQuery code that i am not able to find out. [Resolved]

Posted by Kumarkrishna184 under jQuery on 12/5/2015 | Points: 10 | Views : 416 | Status : [Member] | Replies : 2
Please help anyone,There is a problem in jQuery code that i am not able to find out.
There is 4 checkboxes 1 button and one span control.There should be checked max 3 checkbox if its above select then there will be a message "You can not select more than 3 options" If no any checkbox select and button click, there should be a message "Please select any 3 options" and if we select and click on button then that checkboxes text and values should be apper on span element.
But problem is that checkboxes texts and values apper twice in the span control. I want to show only once the text and value.

Html code:---

<form id="form1" runat="server">
<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>
</form>


jQuery Code:---

<script src="Scripts/jquery-2.1.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("input:checkbox[name=Options]").change(function () {
if ($("input:checkbox[name=Options]:checked").length > 3) {
alert("You can not select more than 3 options");
$(this).prop("checked",false)
}
});
$("#btnSubmit").click(function () {
if ($("input:checkbox[name=Options]").is(":checked")) {
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);
}
else {
$("#span1").html("<b style='color:red'>Please Select any Max 3 Option</b>");
}
});
});
</script>




Thanks and Regards,
Krishna Kumar Maurya

Thanks and Regards,
Krishna Kumar



Responses

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

Up
0
Down

Resolved
Please don't append again
values += values.substring(0, values.length - 1);

texts += texts.substring(0, texts.length - 1);


Instead assign

values = values.substring(0, values.length - 1);                   

texts = texts.substring(0, texts.length - 1);


Hope this helps

--
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
Thanks sir...

Thanks and Regards,
Krishna Kumar

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

Login to post response