Develop Reference

How to ensure the selected file count to be either zero or one using javascript

In my application I have edit button in gridview where user will click edit button and when he clicks edit button
all the data related to that particular edited row gets binded to corresponding textboxes and fileupload controls
at this case user may select another file or he may not select another file if selected the count of the files should not be
greater than one or zero how can i do this
Below is my fileupload contol,update button and edit image code
<asp:FileUpload ID="filuploadmp3" runat="server" Width="224px" multiple="multiple" onchange="javascript:return checkwavextension();" />
<asp:Button ID="btnupdate" runat="server" OnClick="btnupdate_Click" Text="Update" Width="62px" OnClientClick="return validateStuff();" />
<asp:ImageButton ID="Btn1" runat="server" Text="Edit" CommandName="mybutton" Width="20px" ImageUrl="~/images/page_white_edit.png" ToolTip="Edit" />

To allow only one file to select then remove multiple="multiple" from FileUpload
<asp:FileUpload ID="filuploadmp3" runat="server" Width="224px" onchange="javascript:return checkwavextension();" />
Or if you want to have this then you can check count like
function ValidateFile(){
var fileCount = document.getElementById('filuploadmp3').files.length;
if(fileCount > 1) // Selected images with in 1count
{
alert("Please select only 1!!");
return false;
}
else if(fileCount <= 0) // Selected atleast 1
{
alert("Please select atleat 1!!");
return false;
}
return true; // Good to go
}
function checkwavextension() {
var chkFile = document.getElementById('<%= filuploadmp3.ClientID %>');
var label = document.getElementById('<%= lblerrmsg.ClientID%>');
var myfile = chkFile.value;
if (myfile.indexOf(".wav") > 0 || myfile.indexOf(".mp3") > 0) {
label.innerText = "Valid Format";
//check mode insert or update
//if update then
return ValidateFile();
} else {
label.innerText = "Invalid Format";
chkFile.value = "";
}
}
function ValidateFile(){
var fileCount = document.getElementById('filuploadmp3').files.length;
if(fileCount > 1) // Selected images with in 1count
{
alert("Please select only 1!!");
return false;
}
else if(fileCount <= 0) // Selected atleast 1
{
alert("Please select atleat 1!!");
return false;
}
return true; // Good to go
}

Javascript not working on asp:Datalist checkbox onchange

This is a Datalist in my code.
<asp:DataList runat="server" ID="dlstate" RepeatColumns="6">
<ItemTemplate>
<asp:CheckBox runat="server" ID="chk" Text='<%#Eval("area_state") %>' OnCheckedChanged="chk_state_SelectedIndexChanged" onchange="return checkconfirm(this);" AutoPostBack="true" />
</ItemTemplate>
</asp:DataList>
This is the Javascript code.
<script type="text/javascript">
function checkconfirm(a) {
if (a.checked == true) {
return true;
}
else {
debugger;
var box = confirm("Are you sure you want to unselect this state as areas alloted under this state will be lost?");
if (box == true)
return true;
else {
a.checked = true;
return false;
}
}
}
</script>
The problem is that when this apsx page is rendered in html the onchange="return checkconfirm(this);" appears on a span rather than the checkbox. I have tried several ways for confirmation and yet I am not able to put the onchange event on the checkbox.

You can use a jQuery listener for this.
<script type="text/javascript">
$(document).ready(function () {
$("#<%= dlstate.ClientID %> input[type='checkbox']").change(function () {
if (!$(this).prop("checked")) {
var box = confirm("Are you sure you want to unselect this state as areas alloted under this state will be lost?");
if (box == true)
return true;
else {
$(this).prop("checked", "checked");
return false;
}
}
});
});
</script>

Returning Values in javascript function

I have a scenario where there are 4 text boxes and one Radio Button list. If i click the Submit button by leaving all fields it should alert me . I used 4 Required Validator s for text boxes and a java script function for the radio button list.
My mark up language and function is:
function Validate() {
var radio = document.getElementsByName("rdbGender");
for (var i = 0; i < radio.length; i++) {
if (radio[i].checked) {
return true;
}
else
{
alert("Choose a Gender");
return false;
}
}
}
Aspx page is:
<asp:Button ID="btnSave" Text="Save" runat="server" Width="50px" OnClientClick= "Validate()"
OnClick="btnSave_Click" />
When ever i click the button by leaving fiealds empty, and leaving radio button list with out selecting a item, it is alerting but if i press ok it is executing further. I read in one website that if we write " return true " after alert has been showed and clicking ok it will execute further,,but i wrote "return false" after alert it means untill i check one radio button it should not execute...Where am i wrong??
Javascript:
<script type="text/javascript">
function Validate() {
var checkedVal = false;
var radio = document.getElementsByName("rdbGender");
for (var i = 0; i < radio.length; i++) {
if (radio[i].checked) {
checkedVal = true;
return checkedVal;
}
else {
alert('Chhooose gender');
return checkedVal;
}
}
}
</script>
Mark up design:
<tr>
<td>
Gender
</td>
<td>
<asp:RadioButtonList ID="rdbGender" RepeatDirection="Horizontal" runat="server">
<asp:ListItem Value="MALE">
</asp:ListItem>
<asp:ListItem Value="FEMALE">
Female
</asp:ListItem>
</asp:RadioButtonList>
</td>
</tr>
.
.
.
.![enter image description here][2]
<td>
<asp:Button ID="btnSave" Text="Save" runat="server" Width="50px" ValidationGroup="Star" OnClientClick="return Validate()"
OnClick="btnSave_Click" />
</td>

Try using return when calling client function.
<asp:Button ID="btnSave" Text="Save" runat="server" Width="50px"
OnClientClick= "return Validate();"
OnClick="btnSave_Click" />
For first iteration of for, If first radio button is not checked it would go to else part which is showing alert and returning false. Please implement below code.
function Validate() {
var checkedval=false;
var radio = document.getElementsByName("rdbGender");
for (var i = 0; i < radio.length; i++) {
if (radio[i].checked) {
checkedval=true;
return checkedval;
}
}
return checkedval;
}

A function can only have one return value. When return true is executed, the function immediately return true and stop going further. Therefore, comment out the return true and try.
function Validate() {
var radio = document.getElementsByName("rdbGender");
for (var i = 0; i < radio.length; i++) {
if (radio[i].checked) {
//return true;
//this return true causes the problem.
}
else
{
alert("Choose a Gender");
return false;
}
}
}

Checking if radiobuttonlist has been selected

I'm using this code to check if a radiobuttonlist has been selected, however it doesn't return false if nothing has been checked, and continues through to the function in the class behind. The radiobutton list is generated from databinding in codebehind.
<asp:LinkButton class="btn" id="linkDelete" runat="server" onclick="link_Delete" OnClientClick="checkform()">Delete Template</asp:LinkButton>
<asp:radiobuttonlist id="optMessageType" runat="server" onselectedindexchanged="optMessageType_SelectedIndexChanged" RepeatDirection="Vertical" CssClass="none-table">
</asp:radiobuttonlist>
function checkform() {
var radiolist = document.getElementById('<%= optMessageType.ClientID %>');
var radio = radiolist.getElementsByTagName("input");
if (radio.length > 0) {
for (var x = 0; x < radio.length; x++) {
if (radio[x].type === "radio" && radio[x].checked) {
//alert("Checking...");
// alert("Selected item Value " + radio[x].value);
var r = confirm("Are you sure you want to delete this template?")
if (r == true) {
//alert("You pressed OK!")
return true;
}
else {
//alert("You pressed Cancel!");
return;
}
}
else {
alert("Select a template to delete");
return;
}
}
}
else {
alert("nope");
return;
}
}
Code Behind:
protected void link_Delete(object sender, System.EventArgs e)
{
Label3.Text = "Deleted!"; //For Testing
}

You should write
<asp:LinkButton class="btn" id="linkDelete" runat="server" onclick="link_Delete" OnClientClick="return checkform();">Delete Template</asp:LinkButton>
i have added return in OnClientClick atribute funcion call
hope this may solve our problem.

How to enable and disable CheckBox in the GridView using JavaScript?

I have a GridView "gvpodetails". In that I have two checkboxes one in the first column of the GridView and another one in the last column of the GridView.
I want to enable the second checkbox when the first checkbox is checked.
And I want to disable the second checkbox when the first checkbox is unchecked.
I have wirtten the following JavaScript.
var grid = document.getElementById('<%=gvPODetails.ClientID %>');
var PlannedQty = 0*1;
if(grid != null)
{
var Inputs = grid.getElementsByTagName('input');
for(i = 0;i < Inputs.length;i++)
{
var id=String(Inputs[i].id);
if(Inputs[i].type == 'text' && id.indexOf("txtPlannedQuantity")!=-1)
{
if(Inputs[i-2].type == 'checkbox')
{
if(Inputs[i-2].checked)
{
if(Inputs[i+2].value == "0.000")
Inputs[i+2].value = (parseFloat(Inputs[i].value) - parseFloat(Inputs[i+1].value))
else
Inputs[i+2].value = Inputs[i+2].value;
Inputs[i+2].disabled = false;
Inputs[i+3].disabled = false;
Inputs[i-1].disabled = false;
Inputs[i+6].disabled = false;// This is for Second CheckBox
}
else
{
Inputs[i+4].value="0.00";
Inputs[i+5].value="0.00";
Inputs[0].checked = false;
Inputs[i+2].disabled = true;
Inputs[i+3].disabled = true;
Inputs[i-1].disabled = true;
Inputs[i+6].disabled = true;// This is for Second CheckBox
}
}
}
}
}
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="chkSelect" runat="server" Checked='<%#Bind("Select") %>' onClick="CheckedTotal();" /></ItemTemplate>
<HeaderTemplate>
<asp:CheckBox ID="chkSelectAll" runat="server" onclick="CheckAll();" /></HeaderTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="ED_f">
<ItemTemplate>
<asp:CheckBox ID="chkEDInclusive" runat="server" Checked = '<%#Bind("EDInclusive_f") %>' Enabled="false" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
These are my javascript and GridView source code.
I also has some textboxes in the template field columns. This condition is applicable to all the textboxes in the GridView.
But the TextBoxes are enabled and disabled properly except the last CheckBox.
I have given only the Source code for the two Checkboxes only.
How to enable and disable the last checkbox in the GridView when the first the CheckBox is checked and Unchecked?
I need all your suggestions please..

You should probably use event delegation. on the grid to do this.
This javascript assumes that your row tag name is 'tr' and that your second checkbox is input[1] when selecting all inputs of that particular row. If you need IE support you'd need to use your favorite event handling wrapper.
window.onload = function () {
var rowNodeName = 'tr',
firstInputClassName = 'foo';
document.getElementById('<%=gvPODetails.ClientID %>').addEventListener('change', function (e) {
if (e.target.type === 'checkbox' && e.target.className.match(firstInputClassName)) {
// Find parent row
var row = e.target.parentNode;
while (row.nodeName !== rowNodeName.toUpperCase()) {
row = row.parentNode;
if (!row) {
break; // In case we hit document
}
}
if (row) {
var inputs = row.getElementsByTagName('input');
inputs[1].disabled = !e.target.checked;
}
}
}, false);
}
This will handle change events on any input in the grid with a className of 'foo' as defined in the firstInputClassName variable. When triggered will walk up the dom tree to a node with a tagname equalling rowNodeName, select the inputs in that row and set the disabled status of the second input in that row opposite of the checked state of the input that triggered the event.