Develop Reference

If checkbox checked and textbox blank

I have a checkbox, on click of which the textbox gets enabled. I want to make validation that If checkbox is checked and the user doesn't put any data. It should not allow the user to submit the form. Please see the javascript code for your reference
Javascript :
<script type="text/javascript">
$(document).ready(function () {
$('#chkCropLoan').change(function () {
$("#txtAmount").prop("disabled", !$(this).is(':checked'));
if (!$(this).is(':checked')) {
$("#txtAmount").val("");
}
});
$('#chkInvestmentLoan').change(function () {
$("#txtInvestmentLoan").prop("disabled", !$(this).is(':checked'));
if (!$(this).is(':checked')) {
$("#txtInvestmentLoan").val("");
}
});
$('#chkWarehouseReceipt').change(function () {
$("#txtWarehouseReceipt").prop("disabled", !$(this).is(':checked'));
if (!$(this).is(':checked')) {
$("#txtWarehouseReceipt").val("");
}
});
$('#chkFarmerProd').change(function () {
$("#txtFarmerProd").prop("disabled", !$(this).is(':checked'));
if (!$(this).is(':checked')) {
$("#txtFarmerProd").val("");
}
});
});
</script>
HTML code of textbox :
<table>
<tr>
<td>Crop Loan</td>
<td>
<asp:CheckBox ID="chkCropLoan" runat="server" CssClass="check" onclick="javascript:enableTextBox();" />
<asp:TextBox ID="txtAmount" runat="server" class="txtfld-popup1" MaxLength="5" Width="100" onkeypress="if(event.keyCode<48 || event.keyCode>57)event.returnValue=false;" Enabled="false"></asp:TextBox>
<cc1:TextBoxWatermarkExtender ID="txtAmount_TextBoxWatermarkExtender" runat="server" TargetControlID="txtAmount" WatermarkText="Amount"></cc1:TextBoxWatermarkExtender>
<asp:RegularExpressionValidator ID="rgfldvalidator" ControlToValidate="txtAmount"
runat="server" ErrorMessage="Please enter the numbers only" ValidationExpression="^[0-9]*\.?[0-9]+$"></asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td>Investment Loan</td>
<td>
<asp:CheckBox ID="chkInvestmentLoan" runat="server" CssClass="check" OnChange="javascript:enableTextBox();" />
<asp:TextBox ID="txtInvestmentLoan" runat="server" class="txtfld-popup1" MaxLength="5" width="100" onkeypress="if(event.keyCode<48 || event.keyCode>57)event.returnValue=false;" Enabled="false"></asp:TextBox>
<cc1:TextBoxWatermarkExtender ID="txtInvestmentLoan_TextBoxWatermarkExtender" runat="server" TargetControlID="txtInvestmentLoan" WatermarkText="Amount"></cc1:TextBoxWatermarkExtender>
<asp:RegularExpressionValidator ID="RegularExpressionValidator3" ControlToValidate="txtInvestmentLoan"
runat="server" ErrorMessage="Please enter the numbers only" ValidationExpression="^[0-9]*\.?[0-9]+$"></asp:RegularExpressionValidator>
</td>
</tr>
</tr>
<tr>
<td>Warehouse Receipt Finance</td>
<td>
<asp:CheckBox ID="chkWarehouseReceipt" runat="server" CssClass="check" OnChange="javascript:enableTextBox();" />
<asp:TextBox ID="txtWarehouseReceipt" runat="server" class="txtfld-popup1" MaxLength="5" Width="100" onkeypress="if(event.keyCode<48 || event.keyCode>57)event.returnValue=false;" Enabled="false"></asp:TextBox>
<cc1:TextBoxWatermarkExtender ID="txtWarehouseReceipt_TextBoxWatermarkExtender" runat="server" TargetControlID="txtWarehouseReceipt" WatermarkText="Amount"></cc1:TextBoxWatermarkExtender>
</td>
</tr>
<tr>
<td>Farmer Producer Companies</td>
<td>
<asp:CheckBox ID="chkFarmerProd" runat="server" CssClass="check" OnChange="javascript:enableTextBox();" />
<asp:TextBox ID="txtFarmerProd" runat="server" class="txtfld-popup1" MaxLength="5" onkeypress="if(event.keyCode<48 || event.keyCode>57)event.returnValue=false;" Width="100" Enabled="false"></asp:TextBox>
<cc1:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender11" runat="server" TargetControlID="txtFarmerProd" WatermarkText="Amount"></cc1:TextBoxWatermarkExtender>
</td>
</tr>
</table>

Try:
$("#your-form").submit(function() {
if($(this).find("#your-text").val() && $(this).find("#your-check").checked){
$("#your-form").submit();
}
else{
// not checked or empty textbox
}
return false;
});

Try using the below code:
$('#your_form_name').submit(function( event ) {
if ($('#chkCropLoan').is(':checked') && $('#txtAmount').val() == '') {
alert('error message');
event.preventDefault();
}
});

you don't want to submit form if Text box is Empty
just write function on submit button click event
<input type="submit" value="save" onclick="return checkvalid()" />
In script
<script type="text/javascript">
function checkvalid() {
if (document.getElementById('textboxId').value==""
|| document.getElementById('textboxId').value==undefined) {
return false;
}
</script>

why is my page passing a blank value for my textBox

I asked this question last night but it was not very well written so I am going to ask it again. I am creating a simple calculator using ASP.NET and c# as my code behind. I am currently just trying to test and make sure that my code behind is getting the value typed entered into the textbox by the user. I put in a if statement that assigns the textbox a value of mehhh if the string it gets passed it empty. My text box displays mehhh so I knoe it is getting an empty string but i am not sure why? here is a link to the site... http://scort323.csweb.kutztown.edu/Calc.aspx Below is my code for the code behind part of my page:
public partial class Assign2_Calc : System.Web.UI.Page
{
protected void ButtonEqual_Click(object sender, EventArgs e)
{
string inputStr = inputBox.Text;
if (inputStr == string.Empty)
{
inputBox.Text = "mehhhhhh";
}
else
{
inputBox.Text = inputStr; //result.ToString();
}
}
}
below is my .aspx page:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Calc.aspx.cs"
Inherits="Assign2_Calc" Debug="true" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<link href="CalculatorStyle.css" rel="stylesheet" type="text/css" />
<script>
var maxInputLength = 20;
function checkButtonClick(clickedValue) {
var buttonValue = clickedValue;
var inputStr = document.getElementById('inputBox').value;
if (buttonValue == '<--') {
if (inputStr.length >= 1) {
document.getElementById('inputBox').value = inputStr.substring(0, inputStr.length - 1);
}
}
else if (buttonValue == 'C') {
document.getElementById('inputBox').value = "";
}
else {
if (inputStr.length < maxInputLength) {
document.getElementById('inputBox').value = inputStr + buttonValue;
}
else {
//document.getElementById('msg').innerHTML = "Maxmum length is " + maxInputLength;
}
}
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="main" class="main">
<div id="content" class="content">
<h3 id="h3">Simple Calculator</h3>
<div id="calculatorDiv">
<table cellpadding="0" cellspacing="0">
<tr>
<td colspan="4">
<asp:TextBox runat="server" CssClass="inputBox" ReadOnly="true" ViewStateMode="Enabled" ID="inputBox"></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="4">
<br />
</td>
</tr>
<tr>
<td>
<asp:Button ID="ButtonNum7" runat="server" Text="7" CssClass="CalcButtons" OnClientClick="return checkButtonClick(7)" />
</td>
<td>
<asp:Button ID="ButtonNum8" runat="server" Text="8" CssClass="CalcButtons" OnClientClick="return checkButtonClick(8)" />
</td>
<td>
<asp:Button ID="ButtonNum9" runat="server" Text="9" CssClass="CalcButtons" OnClientClick="return checkButtonClick(9)" />
</td>
<td>
<asp:Button ID="ButtonDivide" runat="server" Text="/" CssClass="CalcButtons" OnClientClick="return checkButtonClick('/')" />
</td>
</tr>
<tr>
<td>
<asp:Button ID="ButtonNum4" runat="server" Text="4" CssClass="CalcButtons" OnClientClick="return checkButtonClick(4)" />
</td>
<td>
<asp:Button ID="ButtonNum5" runat="server" Text="5" CssClass="CalcButtons" OnClientClick="return checkButtonClick(5)" />
</td>
<td>
<asp:Button ID="ButtonNum6" runat="server" Text="6" CssClass="CalcButtons" OnClientClick="return checkButtonClick(6)" />
</td>
<td>
<asp:Button ID="ButtonMultiply" runat="server" Text="*" CssClass="CalcButtons" OnClientClick="return checkButtonClick('*')" />
</td>
</tr>
<tr>
<td>
<asp:Button ID="Button1" runat="server" Text="1" CssClass="CalcButtons" OnClientClick="return checkButtonClick(1)" />
</td>
<td>
<asp:Button ID="Button2" runat="server" Text="2" CssClass="CalcButtons" OnClientClick="return checkButtonClick(2)" />
</td>
<td>
<asp:Button ID="Button3" runat="server" Text="3" CssClass="CalcButtons" OnClientClick="return checkButtonClick(3)" />
</td>
<td>
<asp:Button ID="ButtonSubtract" runat="server" Text="-" CssClass="CalcButtons" OnClientClick="return checkButtonClick('-')" />
</td>
</tr>
<tr>
<td>
<asp:Button ID="ButtonDackspace" runat="server" Text="<--" CssClass="CalcButtons" OnClientClick="return checkButtonClick('<--')" />
</td>
<td>
<asp:Button ID="ButtonNum0" runat="server" Text="0" CssClass="CalcButtons" OnClientClick="return checkButtonClick(0)" />
</td>
<td>
<asp:Button ID="ButtonClear" runat="server" Text="C" CssClass="CalcButtons" OnClientClick="return checkButtonClick('C')" />
</td>
<td>
<asp:Button ID="ButtonAdd" runat="server" Text="+" CssClass="CalcButtons" OnClientClick="return checkButtonClick('+')" />
</td>
</tr>
<tr>
<td colspan="4">
<asp:Button ID="ButtonEqual" runat="server" Text="=" CssClass="CalcButtonEqual" OnClick="ButtonEqual_Click" />
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</form>
</body>
</html>

Looking at the source of your web page I found that you have disabled your textbox. If a control is disabled it cannot be edited and its content is excluded when the form is submitted. So instead of disabling (remove disable attribute completely) your textbox set it to readonly (readonly = 'true').

MSDN doc on ReadOnly:
The Text value of a TextBox control with the ReadOnly property set to true is sent to the server when a postback occurs, but the server does no processing for a read-only text box. This prevents a malicious user from changing a Text value that is read-only. The value of the Text property is preserved in the view state between postbacks unless modified by server-side code.
You are "manipulating" the value in client script (not in server code - assuming above is all the code). The original value of the TextBox is preserved (empty).
If you test by removing the ReadOnly attribute (or set it to False), your code will work and you will see the effect of the setting...
Hth....
Update:
..how would I need to go about making it so the user cant use the keyboard to enter anything? making it so they must use the buttons
Unless you have/had a reason to use a server-side control for that input field, a standard HTML Input field with readonly should work.
You will then obtain it's value from the standard POST in the Request (at the end of the day, WebForms is still an HTTP POST), instead of ASP.Net controls.
Trivial example:
Instead of server-control:
<asp:TextBox runat="server" CssClass="inputBox" ReadOnly="true" ViewStateMode="Enabled" ID="inputBox"></asp:TextBox>
Use plain html input field:
<input id="inputBox" name="inputBox" readonly type="text" />
The value of the field (html_readonly) can be obtained in the POST Request:
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack)
{
string _html = Request["inputBox"]; //here it is
//do whatever...
}
}
Hth...

asp net repeater radio button group name and get radio button value

I have an aspx c# page for bank account numbers and credit card installment list in one page
if user want to bank transfer it choose bank account else if user want to pay credit card installment it did it.
the problem is radio buttons group name. I didn't group the radio buttons and didn't get the selected radio button value.
Here is my codes.
This İs Bank Account List
<asp:Repeater ID="RptBankalar" runat="server">
<ItemTemplate>
<div class="BankaListBox">
<table width="100%" height="100" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="200" align="center" valign="middle">
<img alt="<%#Eval("BankName").ToString() %>" src="../../Files/<%#Eval("Logo").ToString() %>" /></td>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="120" height="22"><strong>Account Owner</strong></td>
<td width="15"><strong>:</strong></td>
<td><%#Eval("AcOwner").ToString() %></td>
</tr>
<tr>
<td width="120" height="22"><strong>Branch No</strong></td>
<td width="15"><strong>:</strong></td>
<td><%#Eval("Branch").ToString() %></td>
</tr>
<tr>
<td width="120" height="22"><strong>Account Number</strong></td>
<td width="15"><strong>:</strong></td>
<td><%#Eval("AccountNum").ToString() %></td>
</tr>
<tr>
<td width="120" height="22"><strong>IBAN</strong></td>
<td width="15"><strong>:</strong></td>
<td><%#Eval("Iban").ToString() %></td>
</tr>
</table>
</td>
<td width="100" align="center" valign="middle">
<asp:RadioButton ID="RadioBtn" Text='<%#Eval("id").ToString() %>' runat="server" />
</td>
</tr>
</table>
</div>
</ItemTemplate>
</asp:Repeater>
Same Page Credit card installment list
<asp:Repeater ID="RptTaksitList" OnItemDataBound="RptTaksitList_ItemDataBound" runat="server">
<ItemTemplate>
<tr runat="server" id="arka_tr">
<td align="center" height="22" width="40" runat="server" id="td1">
<b style="display: none; visibility: hidden">
<asp:Literal ID="lt_id" Text='<%#Eval("BankaID").ToString() %>' runat="server"></asp:Literal>
</b>
<asp:Literal ID="lt_taksit_sayisi" Text='<%#Eval("TaksitSayisi").ToString() %>' runat="server"></asp:Literal></td>
<td width="150" runat="server" id="td2">
<asp:Literal ID="LblSepetTotal" runat="server" Text='<%#Session["SepetUrunToplami"] %>'></asp:Literal></td>
<td runat="server" id="td3"><b style="display: none; visibility: hidden">
<asp:Literal ID="lt_komisyon_orani" Text='<%#Eval("KomisyonOrani").ToString() %>' runat="server"></asp:Literal>
</b>
<asp:Literal ID="lt_toplam_tutar" runat="server" Text=''></asp:Literal>
<b style="display: none; visibility: hidden">
<asp:Literal ID="lt_alt_limit" Text='<%#Eval("AltLimit").ToString() %>' runat="server"></asp:Literal>
</b>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
How can i get the values and grouping this radio buttons.
Normally i did in classic asp but i change my coding language.
Kindly regards.
Thanks for your helps.

i never help in Stack. So i will contribute for the first time after been helped so many times by the community.
I hove you like. I have a more simple solution.
Surround your radio button with some element (DIV) with a className that you might like just to pick all the radio in jQuery.
EDITED IN: The aspnet wasnt persisting the viewstate when i changed that way. Now it works just fine :)
$(document).ready(function () {
$(".radiofix").each(function () {
var objRadiosContainer = $(this);
objRadiosContainer.find("input[type=radio]").each(function () {
var objRadio = $(this);
objRadio.change(function () {
if(objRadio.get(0).checked)
{
objRadiosContainer.find("input[type=radio]").each(function () {
if($(this).get(0).id != objRadio.get(0).id)
{
$(this).get(0).checked = false;
}
});
}
});
});
});
});
Let's take a look in the HTML file (or ASPX file):
<asp:Repeater ID="questions" runat="server">
<ItemTemplate>
<h3>%# getQuestionNumber() %>) <%# Eval("questionDescription").ToString() %></h3>
<div class="nameOfTheClass">
<asp:Repeater ID="answers" runat="server">
<ItemTemplate>
<asp:RadioButton ID="radioId" runat="server" />
</ItemTemplate>
</asp:Repeater>
</div>
</ItemTemplate>
This you will work just fine. Just create some javascript file (.js) and call it, fixTheRadios.js and choose a name for "nameOfTheClass" that you like.
Important: I didnt tested the code inside an update panel. I suggest you do that.

Here's how I do it.
In the markup I declare the radio button as server side html control:
<input id="rbMyRadio" type="radio"runat="server" class="myClass" />
And in the code access the value:
foreach (RepeaterItem item in RptBankalar.Items)
{
if (item.ItemType == ListItemType.Item || item.ItemType == ListItemType.AlternatingItem)
{
HtmlInputRadioButton rbMyRadio = (HtmlInputRadioButton)item.FindControl("rbMyRadio");
if (rbMyRadio != null && rbMyRadio.Checked)
{
//Do tasks
}
}
}
Grouping is done using jquery in page head:
<script type="text/javascript">
$(document).ready(function () {
$('input[type=radio]').click(function () {
var cname = $(this).attr('class');
$('.' + cname).each(function () {
$(this).prop('checked', false);
});
$(this).prop('checked', true);
});
});
</script>
And reference jquery in the head:
<script src="Scripts/jquery-1.8.2.js"></script>

Very late answer but you can also try adding the radio buttons like this in the repeater:
<asp:TemplateColumn>
<ItemTemplate>
<div style="text-align: center">
<input type="radio" id="rptMyRadio" runat="server" />
</div>
</ItemTemplate>
</asp:TemplateColumn>
Then in a script block add:
$('input[type=radio]').click(function () {
$('input[type=radio]').removeAttr("checked");
$(this).prop('checked', true);
});

Checkbox selected within hidden div

I have a C# Checkboxlist within a hidden div. The div displays upon certain events, then is closed. When the form is submitted, I try to update database bit fields based on selected values of the checkboxlist.items but they always return false whether checked or not. How can I get the selected value of the items when the div containing them is hidden?
The div is a dialog I show/hide using jquery
$(document).ready(function () {
$('#<%=txtLANG.ClientID %>').click(function () {
$("#overlay-back").dialog({
resizable: false,
modal: true,
width: 500,
height: 400,
buttons: {
OK: function () {
GetLanguages();
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
});
});
and here's the DIV...the codebehind is nothing more than setting a parameter to true/false based on selected value of the checkboxlist items
<div id="overlay-back" style="display:none;">
<table width="100%">
<tr>
<td width="50%">
<asp:CheckBox runat="server" ID="chkEnglish" TextAlign="Right" Text=" English" />
<div class="popup-container">
<img id="help_button_chkEnglish" class="help-button" src="/Images/help-button.png" alt="" />
<div class="help-popup hidden" id="help_popup_chkEnglish">
<div class="popup-arrow-border"></div> <div class="popup-arrow"></div>
<asp:Label runat="server" ID="lblLANGDesc"></asp:Label>
</div>
</div>
</td>
<asp:Panel runat="server" ID="pnlTopLanguages">
<td rowspan="3" valign="top">
<asp:CheckBoxList ID="chkTopLanguages" TextAlign="Right" runat="server" />
<br />
<asp:Label runat="server" ID="lblNonTopLanguages"></asp:Label><br />
<asp:TextBox runat="server" ID="txtOtherLanguages" onkeypress="CopyOtherLangs(event)" onclick="clearLanguageSearchText()" Text="Other Languages..."></asp:TextBox>
<cc3:AutoCompleteExtender ID="aceSearch" runat="server" MinimumPrefixLength="1" TargetControlID="txtOtherLanguages"
ServicePath="~/controls/wsCommunity.asmx" ServiceMethod="GetLanguageCompletionList">
</cc3:AutoCompleteExtender>
</td>
<td rowspan="3">
<div class="popup-container">
<img id="help_button_chkTopLanguages" class="help-button" src="/Images/help-button.png" alt="" />
<div class="help-popup hidden" id="help_popup_chkTopLanguages">
<div class="popup-arrow-border"></div> <div class="popup-arrow"></div>
<asp:Label runat="server" ID="lblTopLangs"></asp:Label>
</div>
</div>
</td>
</asp:Panel>
</tr>
<tr>
<td>
<asp:CheckBox runat="server" ID="chkFrench" TextAlign="Right" Text=" French" />
<div class="popup-container">
<img id="help_button_chkFrench" class="help-button" src="/Images/help-button.png" alt="" />
<div class="help-popup hidden" id="help_popup_chkFrench">
<div class="popup-arrow-border"></div> <div class="popup-arrow"></div>
<asp:Label runat="server" ID="Label2"></asp:Label>
</div>
</div>
</td>
</tr>
<asp:Panel runat="server" ID="pnlEnhancedFrench">
<tr>
<td valign="top">
<asp:CheckBoxList ID="chkEnhancedFrench" TextAlign="Right" CssClass="EnhancedFrench" runat="server">
<asp:ListItem> Customer Service</asp:ListItem>
<asp:ListItem> Publications</asp:ListItem>
<asp:ListItem> Website</asp:ListItem>
<asp:ListItem> Interpreters</asp:ListItem>
</asp:CheckBoxList>
</td>
</tr>
</asp:Panel>
</table>
</div>

How to find dropdownlist value inside javascript

I have one master page and Below is one content page's code..I am not able to find dropdownlist dpbatchname 's value inside javascript..i am new to javascript plz,help i want to validate textbox value based on that dropdownlist value..
<asp:Content ID="Content1" ContentPlaceHolderID="Contentplaceholder2" Runat="Server">
<script type="text/javascript" language="javascript">
function ClientValidate(source, arguments) {
var ddl = document.getElementById("dpbatchname");
if (ddl.value.length == 2) {
arguments.IsValid = true;
}
else {
arguments.IsValid = false;
}
}
</script>
<div>
<table style="width: 100%; background-color:Silver" border="1">
<td align="right" width="50%" valign="top">
<asp:Label ID="Label3" runat="server" Text="Select Batch:"
Font-Underline="False" ForeColor="#FF3300" Font-Bold="True" Font-Size="Larger"></asp:Label>
</td>
<td width="50%" valign="top">
<asp:DropDownList ID="dpbatchname" runat="server" AutoPostBack="True"
DataSourceID="SqlDataSource5" DataTextField="batch_name"
DataValueField="batch_name" Width="119px" Height="33px">
</asp:DropDownList>
<asp:TextBox ID="tbnooflecture" runat="server" Width="113px" Height="33px"></asp:TextBox>
<asp:CustomValidator id="CustomValidator1" ControlToValidate="tbnooflecture" ClientValidationFunction="ClientValidate"
ValidationGroup="upper" Display="Static" ErrorMessage="Not an even number!" ForeColor="green" Font-Name="verdana" Font-Size="10pt"
runat="server"/>
</td>
</tr>
</div>

Use
<%=dpbatchname.ClientID %>
to get the rendered ID:
document.getElementById("<%=dpbatchname.ClientID %>");