We Keep Coding

How to validate textbox in gridview when checkbox is checked in same row of gridview using javascript asp.net

i have gridview in my aspx page as
<asp:GridView ID="Grid_FeeCategory" Width="100%" CssClass="table table-striped responsive-utilities jambo_table" runat="server" AutoGenerateColumns="False">
<HeaderStyle CssClass="headings" />
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="checkAll" runat="server" onclick = "checkAll(this);" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chkRow" runat="server" onclick = "Check_Click(this)"/>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="CatName" HeaderText="Category" />
<asp:TemplateField HeaderText="Category Fee" HeaderStyle-Width="125px">
<ItemTemplate>
<asp:TextBox ID="txtCatFee" runat="server" placeholder="Int or Decimal" style="width:100%" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="FeeCatID" HeaderText="Category ID" HeaderStyle-CssClass="hidden-field" ItemStyle-CssClass="hidden-field"/>
</Columns>
</asp:GridView>
and my custom validator looks like
<asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="Please enter value"
ClientValidationFunction="Validate" ForeColor="Red"></asp:CustomValidator>
i need to validate textbox in gridview when checkbox in the gridview is checked and user leave textbox empty
e-g if user check the checkbox from row 1 of gridview and also leave textbox empty in row 1 and so on.. then custom validator inform to enter value,
for this i got javascript yesterday from google and manipulate it but it does nothing and here is javascript
<script type="text/javascript">
function Validate(sender, args) {
var gridView = document.getElementById("<%=Grid_FeeCategory.ClientID %>");
var fields= gridView.getElementsByTagName("input");
for (var i = 0; i < fields.length; i++)
{
if (fields[i].type == "fields" && fields[i].checked)
{
if (fields[i].type == "text" && fields[i].value.length < 1)
{
args.IsValid = false;
return;
}
}
}
args.IsValid = true;
}
</script>
i check it by using alerts inside script and it cannot enter into this section of javascript
if (fields[i].type == "text" && fields[i].value.length < 1)
{
args.IsValid = false;
return;
}
It is requirement to do this at client side using javascript so i need your help to get out of it

i know this is late one but any one can get help from following function....
I have example related to your logic. you can do this on client side ...
following code is not exactly your requirement but you can manipulate it according to your requirement .
<script type="text/javascript">
function validate() {
var flag = false;
var gridView = document.getElementById('<%= Grid_FeeCategory.ClientID %>');
for (var i = 1; i < gridView.rows.length; i++) {
var inputs = gridView.rows[i].getElementsByTagName('input');
if (inputs != null && inputs.length > 1 && inputs[0] != null) {
if (inputs[1].type == "text" && inputs[0].type == "checkbox") {
var txtval = inputs[1].value;
if (inputs[0].checked && (txtval == "" || txtval == null)) {
flag = false;
break;
}
else {
flag = true
}
}
}
}
if (!flag) {
new PNotify({
title: 'Error',
text: 'Please provide values for "CHECKED" fee categories....!',
type: 'error',
hide: true
});
}
return flag;
}
</script>
and button where you can call above function
<asp:Button ID="btnCalculate" runat="server"OnClientClick="if(!validate()) { return false;}" OnClick="btnCalculate_Click" Text="Calculate" ValidationGroup="Update"/>
if you need any kind of query to understand then please feel free to ask

validation of radiobuttonlist in asp.net using javascript

i have to validate a radio button using javascript. it should show a message if none of the option is selected.
my radio button code is:
<asp:RadioButtonList ID="welldata" runat="server" RepeatDirection="Horizontal" Width="100px">
<asp:ListItem></asp:ListItem>
<asp:ListItem></asp:ListItem>
</asp:RadioButtonList>
and the submit button is:
<asp:Button ID="next2" runat="server" Text=">>" Width="46px"
OnClientClick="return next2()"/>
the corresponding javascript function is :
function next2() {
var listItemArray = document.getElementById('<%=welldata.ClientID %>');
var isItemChecked = false;
var length1 = listItemArray.length;
for (var i=0; i<length1; i++)
{
var listItem = listItemArray[i];
document.write(listItem);
if ( listItem.checked )
{
alert(listItem.value);
isItemChecked = true;
}
}
if ( isItemChecked == false )
{
alert('Nothing is checked for welldata!');
return false;
}
return true;
}
while debugging i noticed thaat function is executed but doesn't enter the for loop.
also i tried
document.write(isItemChecked);
document.write(listItemArray);
document.write(length1);
and the output was :
false [object HTMLTableElement] undefined

The wellData RadioButtonList ASP.NET server control will render in the browser as a table with a number of input type="radio" controls under it, each with the same name.
So, you need to get the input tags inside the table tag first:
var wellData = document.getElementById('<%=welldata.ClientID %>');
var listItemArray = wellData.getElementsByTagName('input');
This is, of course, if you are doing this manually for some odd reason. You can do it automatically with a RequiredFieldValidator control.
<asp:RadioButtonList ID="welldata" runat="server" RepeatDirection="Horizontal" Width="100px">
<asp:ListItem></asp:ListItem>
<asp:ListItem></asp:ListItem>
</asp:RadioButtonList>
<asp:RequiredFieldValidator ID="rfvWellData" runat="server" ControlToValidate="wellData" Display="Dynamic" ErrorMessage="Pick yourself some well data" />

You are using a RadiobuttonList which is rendered as table per default. If you select the dom element by id document.getElementById('<%=welldata.ClientID %>') then you are selecting the table and not the RadioButtonList. If you want to select the radio buttons then you have to loop through the childNodes of listItemArray to get the radio buttons. Alternatively you could use jquery to select the radio buttons, as their ids will start with the id of your radio button list (they will look like welldata_0 or welldata_1).
This line of jquery code will get the your radio buttons
var listItemArray = $("input[id^='welldata']")

Try this:
function next2() {
if(document.getElementById('<%=welldata.ClientID %>').checked==false)
{
alert('Nothing is checked for welldata!');
return false;
}
return true;
}
or
Use RequiredFieldValidator
<asp:RequiredFieldValidator
ID="ReqiredFieldValidator1"
runat="server"
ControlToValidate="welldata"
ErrorMessage="Select your welldata!"
>
Check these below links
http://asp-net-example.blogspot.in/2009/02/aspnet-requiredfieldvalidator-example.html
http://www.itechies.net/tutorials/jscript/jsexample.php-pid-jform.htm#rb
http://www.codeproject.com/Questions/499602/RequiredplusFieldplusValidatorplusForplusRadioplus

var rblItems = document.getElementById('<%=radioBtnListId.ClientID %>').getElementsByTagName('input');
var checkedItems = true;
for (var i = 0; i < rblItems.length; i++) {
if (rblItems[i].checked) {
checkedItems = true;
break;
}
else {
checkedItems = false;
}
}
if (!checkedItems) {//Hence No items checked
alert("Nothing is checked");
return false;
}

making textbox readonly in javascript

I am having two radio buttons and two textbox. When I click on first checkbox, both texbox should not be readonly. But when I select second radio button it should make both text box readonly. I googled and found many solutions but don't know why none is not working in my code.
Html:
<asp:RadioButton ID="mailNew" Text="New" runat="server" GroupName="mail_select" onclick="showHide(1)" ClientIDMode="Static" /><br />
<asp:RadioButton ID="mailExisting" Text="Existing" runat="server" GroupName="mail_select" onclick="showHide(2)" ClientIDMode="Static" />
<asp:TextBox ID="txtPromotion" runat="server" Width="77px" ></asp:TextBox><br />
<asp:TextBox ID="txtSubject" runat="server" Width="288px"></asp:TextBox><br />
Javascript:
function showHide(val) {
var txtpid=document.getElementById(<% = txtPromotion %>)
var txtsub= document.getElementById('<% = txtSubject.ClientID %>');
if (val == 2) {
txtpid.readOnly = false;
txtsub.readOnly = false;
}
if (val == 1) {
txtsub.setAttribute("readOnly.true");
txtpid.setAttribute("readOnly,true");
}
}

I see two issues:
You're not using ClientID for txtPromotion.
You're calling setAttribute with an incorrect attribute name and no value at all.
Just use the reflected property consistently in your code:
function showHide(val) {
var txtpid=document.getElementById('<% = txtPromotion.ClientID %>')
var txtsub= document.getElementById('<% = txtSubject.ClientID %>');
if (val == 2) {
txtpid.readOnly = false;
txtsub.readOnly = false;
}
else if (val == 1) {
txtsub.readOnly = true;
txtpid.readOnly = true;
}
}
Note that your code assumes val will never be anything other than 1 or 2, because it doesn't update readOnly unless it's one of those two values. With that in mind, this might be cleaner:
function showHide(val) {
document.getElementById('<% = txtPromotion.ClientID %>').readOnly = val == 1;
document.getElementById('<% = txtSubject.ClientID %>').readOnly = val == 1;
}

How to ensure that if dropdown selection is first item nothing happens

I have the code below to open a pop up when user makes a selection. What I would like is to block when user selects the first item in the drop down as it has no real value. Also, I want to allow user to reselect already selected option by clicking the dropdownlist option again.
function OnClientSelectedIndexChanged(sender, eventArgs) {
var inputFieldValue;
var item = eventArgs.get_item();
grid = $find("<%= rggrid.ClientID %>");
var selectedRows = grid.get_selectedItems();
if (selectedRows.length > 0) {
for (var i = 0; i < selectedRows.length; i++) {
var row = selectedRows[i];
inputField = MasterTable.getCellByColumnUniqueName(row, "Item")
if (inputField) {
inputFieldValue = inputField.value
break;
}
}
}
else {
var inputFieldID = window['textItembox'];
inputField = document.getElementById(inputFieldID);
if (inputField) {
inputFieldValue = inputField.value;
}
}
window.radopen('<%=linker %> , "UserDialog");
return false;
}

When is the OnClientSelectedIndexChanged fired??
Anyway here is a quick sample:
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem Text="-1" />
<asp:ListItem Text="1" />
<asp:ListItem Text="2" />
</asp:DropDownList>
<asp:Button ID="Button1" runat="server" Text="Select" onclick="Button1_Click" />
$('#<%=Button1.ClientID %>').click(function () {
if ($('#<%=DropDownList1.ClientID %>').val() == "-1")
return false;
alert($('#<%=DropDownList1.ClientID %>').val());
});

Try
onclick = return(false);
to diable action on the first block and
mousedown = function(e){e.target.checked;}
or
mousedown = function(e){e.target.parentNode.selectedIndex = e.target.index;}
to be able to select your selected option again

Multiple DropDownLists - Call Single Function with ID

I have the following code which toggles the visibility of one of a pair of DropDownLists based on the selected radio button. This code works but my problem is that I have several sets of controls just like this on a single form. How can I use a single JavaScript Toggle() function, irrespective of the ID of the RadioButtonList that triggered it?
function Toggle()
{
var list = document.getElementById("produceDDL");
var inputs = list.getElementsByTagName("input");
var selected;
for (var i = 0; i < inputs.length; i++)
{
if (inputs[i].checked)
{
selected = inputs[i];
break;
}
}
if (selected.value == 'Vegetables')
{
div1.style.display = 'none';
div2.style.display = 'block';
}
else
{
div1.style.display = 'block';
div2.style.display = 'none';
}
}
<asp:radiobuttonlist ID="produceDDL" OnClick="javascript:Toggle();"
RepeatDirection="Horizontal" runat="server">
<asp:ListItem Selected="True">Fruit</asp:ListItem>
<asp:ListItem>Vegetables</asp:ListItem>
</asp:radiobuttonlist>
<div id="div1">
<asp:DropDownList ID="fruitDDL" Width="120" runat="server">
<asp:ListItem>Select</asp:ListItem>
<asp:ListItem>Apples</asp:ListItem>
<asp:ListItem>Oranges</asp:ListItem>
</asp:DropDownList>
</div>
<div id="div2" style="display:none;">
<asp:DropDownList ID="vegDDL" Width="120" runat="server">
<asp:ListItem>Select</asp:ListItem>
<asp:ListItem>Onions</asp:ListItem>
<asp:ListItem>Potatoes</asp:ListItem>
</asp:DropDownList>
</div>

Let the radio button list pass itself as function argument.
OnClick="javascript:Toggle(this);"
Then you can replace
function Toggle()
{
var list = document.getElementById("produceDDL");
// ...
by
function Toggle(list)
{
// ...
This way you can use OnClick="javascript:Toggle(this);" in other radio button lists.
By the way, the javascript: pseudoprotocol is unnecessary and the normal JavaScript naming convention is that function names should start with lowercase. I'd sanitize it as well :)