I want to give validation on two radiobuttons of same group using javascript in .net. There will be a button clicking on which the text of selected radiobutton will store on database. But if none of the radio button is selected then a alert will be shown and nothing will be stored in database. Please give me a solution
Assuming its a radio button list, on client click of button,
<asp:Button ID="btnSubmit" runat="server" Text="Validate" OnClientClick="return Validate()" />
embed the below function.
function Validate() {
var rb = document.getElementById("<%=RadioButtonList1.ClientID%>");
var radio = rb.getElementsByTagName("input");
var isChecked = false;
for (var i = 0; i < radio.length; i++) {
if (radio[i].checked) {
isChecked = true;
break;
}
}
if (!isChecked) {
alert("Please select an option!");
}
return isChecked;
}
Related
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
}
hey everyone i have two view
1- Index
2- Edit
i have a grid its header have one checkbox i want to click checkbox all rows checkbox is checkbox. in my header checkbox its not working first time when i click uncheck then check its work fine. i dont know why and what is the problem in my code please help
here is my index view its have Script
function Check_Uncheck() {
$('#SelectAll').click(function () {
if (this.checked) {
$('.checkbox:enabled').each(function () {
this.checked = true;
});
}
else {
$('.checkbox:enabled').each(function () {
this.checked = false;
});
}
});
}
and here is my Edit its have checkbox
<input type="checkbox" id="SelectAll" onclick="Check_Uncheck();" tabindex="3" />
If you want to select and unselect all checkboxes of the gridview row, then you can do something like below:-
<script type="text/javascript">
function SelectAll(obj) {
var valid = false;
var chkselectcount = 0;
var gridview = document.getElementById('<%= GridView1.ClientID %>');
for (var i = 0; i < gridview.getElementsByTagName("input").length; i++) {
var node = gridview.getElementsByTagName("input")[i];
if (node != null && node.type == "checkbox") {
node.checked = obj;
}
}
return false;
}
</script>
Gridview aspx:-
<asp:GridView ID="GridView1"
runat="server" AutoGenerateColumns="false"></asp:GridView>
And onButton click
Select :
<asp:LinkButton ID="lnkdelete" runat="server" CausesValidation="false" Text="All" OnClientClick="SelectAll(true); return false"></asp:LinkButton>
|
<asp:LinkButton ID="lnkundelete" runat="server" CausesValidation="false" Text="None" OnClientClick="SelectAll(false); return false"></asp:LinkButton>
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;
}
}
}
Is there a way to validate a field text input based on radio button selection? I'm trying to validate a user's input into a Title field, based on the radio selection of whether the identity is male or female.
Create two radio button with same name attribute. and read value of selected radio button
var radio= document.getElementsByName('radioname');
var val;
for(var k =0; k< radio.length; k++){
if(radio[k].checked){
val = radio[k].val;
break;
}
}
var text = document.getElementById('textfield');
if(val == 'male'){
validateMale(text);
}
else{
validateFemale(text);
}
function validateMale(text){
// validation code
}
function validateFemale(text){
// validation code
}
You can use <input type="radio" onchange="myFunction()"> and set the function in JS to submit your form like that :
var myFunction = function(){
document.forms["myform"].submit();
}
There the onchange function in JQuery : http://api.jquery.com/change/
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.