My requirement here is to make user only check one checkbox at a time. I tried with the below code:-
$('input.chkclass').on('change', function () {
$('input.chkclass').not(this).prop('checked', false);
});
and HTML
<table id="trchkOptions" style='display: none' runat="server">
<tr>
<td style="width: 5%">
</td>
<td>
<span style="display: inline-block; width: 5%;">
<input id="chkOption1" class="chkclass" value="testing" runat="server" type="checkbox" name="chkOption1" /></span>
Option 1 To
RA 1, RA 2, CC
</td>
<td style="width: 5%">
</td>
</tr>
<tr>
<td style="width: 5%">
</td>
<td>
<span style="display: inline-block; width: 7%;">
<input id="chkOption2" class="chkclass" value="testing" runat="server" type="checkbox" name="chkOption2" /></span>Option
2 To
Hemant Shah, Vimal Shah, Rushank Shah, CC
</td>
<td style="width: 5%">
</td>
</tr>
<tr>
<td style="width: 5%">
</td>
<td>
<span style="display: inline-block; width: 5%;">
<input id="chkOption3" class="chkclass" value="testing" runat="server" type="checkbox" name="chkOption3" /></span>
Option 3 To,
RA 1, RA 2, CC
</td>
<td style="width: 5%">
</td>
</tr>
<tr>
<td style="width: 5%">
</td>
<td>
<asp:Button ID="btnSendFeedback" runat="server" Width="30%" Text="Submit" OnClick="btnSendFeedback_Click" />
</td>
</tr>
</table>
here is a live preview
But it is not working.
Note I don't want to use radiobutton here. I want it with checkbox only.
Kindly suggest what is wrong
Try
$('input.chkclass').not(this).attr('checked', false);
instead
$('input.chkclass').not(this).prop('checked', false);
It may work.
Demo:
$('input.chkclass').on('change', function() {
$('input.chkclass').not(this).prop('checked', false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="trchkOptions" style='display: block' runat="server">
<tr>
<td style="width: 5%">
</td>
<td>
<span style="display: inline-block; width: 5%;">
<input id="chkOption1" class="chkclass" value="testing" runat="server" type="checkbox" name="chkOption1" /></span>
</td>
<td style="width: 5%">
</td>
</tr>
<tr>
<td style="width: 5%">
</td>
<td>
<span style="display: inline-block; width: 7%;">
<input id="chkOption2" class="chkclass" value="testing" runat="server" type="checkbox" name="chkOption2" /></span>
</td>
<td style="width: 5%">
</td>
</tr>
<tr>
<td style="width: 5%">
</td>
<td>
<span style="display: inline-block; width: 5%;">
<input id="chkOption3" class="chkclass" value="testing" runat="server" type="checkbox" name="chkOption3" /></span>
</td>
<td style="width: 5%">
</td>
</tr>
<tr>
<td style="width: 5%">
</td>
<td>
<asp:Button ID="btnSendFeedback" runat="server" Width="30%" Text="Submit" OnClick="btnSendFeedback_Click" />
</td>
</tr>
</table>
Do Like That..
Uncheck other checkbox during one checkbox
Disable other checkbox during one check
1.
$('input.chkclass').on('change', function () {
$('input.chkclass').prop('checked', false);
$(this).prop('checked', ture);
});
2.
$('input.chkclass').on('change', function () {
$('input.chkclass').prop('checked', false);
$('input.chkclass').prop('disabled',true);
$(this).prop('disabled',false);
$(this)..prop('checked', true);
});
Related
I have a dynamic grid. The structure of the grid is as follows:
Serial No Document Name Attachment
1(checkbox) abc (img)
2(checkbox) xyz (img)
3(checkbox) uio (img)
4(checkbox) pop (img)
Against every serial number, there is a checkbox. And in the attachment column when you click the image it opens a dialog box that shows the files attached against this document name. Each attachment also has a checkbox against it.
This dialog box opens on an on click function and comes from another dynamic grid.
What I want to do is that if I select checkbox against serial no 1, it should check all checkboxes in the dialog box of the same serial number . so basically the serial number checkboxes is a parent checkbox and the checkboxes in the dialog box will be their child checkboxes.
Now if the user has checked a parent checkbox, the checkboxes in dialog box will be automatically checked, but if the user unchecks all checkboxes in that dialog box then parent checkbox should also be unchecked automatically.
How do I achieve this?
I have tried so many sample codes since last 4 hours but in vain. I tried doing this
Below is the code
$('.activity_selection').live('click', function (e) {
var table = $(e.target).closest('table');
$('td input:checkbox', table).attr('checked', e.target.checked);
});
.activity_selection is a class that I have given to checkboxes against serial numbers.
But it selects all the checkboxes against all serial numbers that are 1 to 4. What I want is that it checks only checkboxes in the current dialog box? How can I achieve this using javascript or jquery? I have many other sample codes but it did not work. Please help.
Html of the main grid:
<table class="display" width="100%" id="uploadGrid">
<thead>
<tr>
<th class="Greyheader">
<input type='checkbox' id='selectAll'>
<br/>S.No
</th>
<th class="Greyheader">Document Name</th>
<th class="Greyheader">Browse</th>
<th class="Greyheader">Attachment</th>
<th class="Greyheader">Save</th>
</tr>
</thead>
<tr id="517" cdCode="41701">
<td class="GreyBorder">1
<input type='checkbox' id=chk_517 class='activity_selection'>
</td>
<td class="GreyBorder">
<span>Letter</span>
</td>
<td class="GreyBorder" style=" text-align:center !important;">
<input
type="file"
multiple="multiple"
name="txt_filePath_517"
class="mediumTextField"
id="txt_filePath_517"
style="width: 78%;"
>
</td>
<td class="GreyBorder" style=" text-align:center !important;" align="center">
<span style="cursor:hand">
<span class="attch_counter">2</span>
<img
title="Attachment"
height="20px"
onclick="AttchmentBox('_41701','2',this);"
src="../../Images/attchments.png"
/>
</span>
</td>
<td class="GreyBorder" align="center">
<img
type="image"
title="Save"
src="../../Images/save.png"
id="Btn_517"
onclick="SaveAttachment('517','41701','50818','50595');"
style="cursor:pointer;height:15px;"
class="AddItem"
/>
</td>
</tr>
<tr id="518" cdCode="41702">
<td class="GreyBorder">
2
<input type='checkbox' id=chk_518 class='activity_selection'>
</td>
<td class="GreyBorder">
<span>Customer</span>
</td>
<td class="GreyBorder" style=" text-align:center !important;">
<input
type="file"
multiple="multiple"
name="txt_filePath_518"
class="mediumTextField"
id="txt_filePath_518"
style="width: 78%;"
>
</td>
<td class="GreyBorder" style=" text-align:center !important;" align="center">
<span style="cursor:hand">
<span class="attch_counter">1</span>
<img
title="Attachment"
height="20px"
onclick="AttchmentBox('_41702','1',this);"
src="../../Images/attchments.png"
/>
</span>
</td>
<td class="GreyBorder" align="center">
<img
type="image"
title="Save"
src="../../Images/save.png"
id="Btn_518"
onclick="SaveAttachment('518','41702','50818','50595');"
style="cursor:pointer;height:15px;"
class="AddItem"
/>
</tr>
</table>
Dialog Box:
<table style="width:100%" id="AttachmentGrid">
<tr>
<td style="text-align:left; width:40%;">
<input type='checkbox' id=chkAttachment_78427 class='attachment_selection'>
<a
title="ABC.docx"
onclick="showDocument('78427');"
style='text-decoration: none;cursor: pointer;'
>
<div class='ui-notify-message ui-notify-message-style'>
<div style='float:left;margin:0 10px 0 0' class='image_path'>
<img src='../../Images/attchments.png'>
</div>
<p>ABC.docx</p>
</td>
<td style="text-align:center; width:35%;">
<div style='float:left;position:relative;top:-6px;'>
<div class='date'>
<span class='day'>10</span>
<span class='month'>Jun</span>
<span class='year'>2021</span>
</div>
</div>
</div>
</td>
</a>
<td style="width:20%; cursor:hand;">
<img
viewtype="delete"
title="Delete Attachment"
style="float:right;padding-bottom:20px;"
src="../../images/delete.png"
onclick="DeleteAttachment('78427','41701')"
class="AddItem"
/>
</td>
</tr>
<tr>
<td style="text-align:left; width:40%;">
<input type='checkbox' id=chkAttachment_78424 class='attachment_selection'>
<a
title="FOSUNDERSTANDING.docx"
onclick="showDocument('78424');"
style='text-decoration: none;cursor: pointer;'
>
<div class='ui-notify-message ui-notify-message-style'>
<div style='float:left;margin:0 10px 0 0' class='image_path'>
<img src='../../Images/attchments.png'>
</div>
<p>FOSUNDERSTANDING.docx</p>
</td>
<td style="text-align:center; width:35%;">
<div style='float:left;position:relative;top:-6px;'>
<div class='date'>
<span class='day'>09</span>
<span class='month'>Jun</span>
<span class='year'>2021</span>
</div>
</div>
</div>
</td>
</a>
<td style="width:20%; cursor:hand;">
<img
viewtype="delete"
title="Delete Attachment"
style="float:right;padding-bottom:20px;"
src="../../images/delete.png"
onclick="DeleteAttachment('78424','41701')"
class="AddItem"
/>
</td>
</tr>
</table>
Can anybody help me?
In your function call as you have passed this as well so this will help us to find if the checkbox in that row is checked or not . So , inside AttchmentBox after all html are generated you can check the sno checkbox if checked you can checked all other checkbox inside your AttachmentGrid table .
Then , if any checkbox is uncheck in your AttachmentGrid table you can use the cdCode which is set in each tr to get reference of checkbox where we need to checked or unchecked checkbox.
Demo Code :
//on change of checkbox inside table..
$(document).on("change", "#AttachmentGrid .attachment_selection", function() {
var total = $(".attachment_selection").length //get length of checked
var get_code = $("#AttachmentGrid").data("code").split("_")[1] //get code...
//if all checked..
if ($(".attachment_selection:checked").length == total) {
$("#uploadGrid tr[cdCode=" + get_code + "]").find("input:checkbox").prop("checked", true) //sno checkbox checked
} else {
$("#uploadGrid tr[cdCode=" + get_code + "]").find("input:checkbox").prop("checked", false) //remove checbox..
}
})
function AttchmentBox(id, count, el) {
//id = _41702 ,_41701..accroding to click
//el = this
if (parseInt(count) > 0) {
//some code..where you add data inside your attachmnt grid,,
//...
$("#attchment_div #AttachmentGrid").find(".attachment_selection").prop("checked", false)
//if checked in tr..
if ($(el).closest("tr").find(".activity_selection").is(":checked")) {
$("#attchment_div #AttachmentGrid").find(".attachment_selection").prop("checked", true) //make checked in dialog as well
}
$("#attchment_div #AttachmentGrid").data("code", id) //set this attr
$("#attchment_div").show() //show your dialog it..(demo..)//showPopup('attchment_div', true);
}
}
#attchment_div {
display: none;
border: 1px solid black
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<table class="display" width="100%" id="uploadGrid">
<thead>
<tr>
<th class="Greyheader">
<input type='checkbox' id='selectAll'>
<br/>S.No</th>
<th class="Greyheader">Document Name</th>
<th class="Greyheader">Browse</th>
<th class="Greyheader">Attachment</th>
<th class="Greyheader">Save</th>
</tr>
</thead>
<tr id="517" cdCode="41701" mandatory="N">
<td class="GreyBorder">
1
<input type='checkbox' id=chk_517 class='activity_selection'>
</td>
<td class="GreyBorder">
<span>Letter</span>
</td>
<td class="GreyBorder" style=" text-align:center !important;">
<input
type="file"
multiple="multiple"
name="txt_filePath_517"
class="mediumTextField"
id="txt_filePath_517"
style="width: 78%;"
>
</td>
<td class="GreyBorder" style=" text-align:center !important;" align="center">
<span style="cursor:hand">
<span class="attch_counter">2</span>
<img
title="Attachment"
height="20px"
onclick="AttchmentBox('_41701','2',this);"
src="../../Images/attchments.png"
/>
</span>
</td>
<td class="GreyBorder" align="center">
<img
type="image"
title="Save"
src="../../Images/save.png"
id="Btn_517"
onclick="SaveAttachment('517','41701','50818','50595');"
style="cursor:pointer;height:15px;"
class="AddItem"
/>
</td>
</tr>
<tr id="518" cdCode="41702" mandatory="N">
<td class="GreyBorder">
2
<input type='checkbox' id=chk_518 class='activity_selection'>
</td>
<td class="GreyBorder">
<span>Customer</span>
</td>
<td class="GreyBorder" style=" text-align:center !important;">
<input
type="file"
multiple="multiple"
name="txt_filePath_518"
class="mediumTextField"
id="txt_filePath_518"
style="width: 78%;"
>
</td>
<td class="GreyBorder" style=" text-align:center !important;" align="center">
<span style="cursor:hand">
<span class="attch_counter">1</span>
<img
title="Attachment"
height="20px"
onclick="AttchmentBox('_41702','1',this);"
src="../../Images/attchments.png"
/>
</span>
</td>
<td class="GreyBorder" align="center">
<img
type="image"
title="Save"
src="../../Images/save.png"
id="Btn_518"
onclick="SaveAttachment('518','41702','50818','50595');"
style="cursor:pointer;height:15px;"
class="AddItem"
/>
</td>
</tr>
</table>
<div id="attchment_div">
<table style="width:100%" id="AttachmentGrid">
<tr>
<td style="text-align:left; width:40%;">
<input type='checkbox' id=chkAttachment_78427 class='attachment_selection'>
<a
title="ABC.docx"
onclick="showDocument('78427');"
style='text-decoration: none;cursor: pointer;'
>
<div class='ui-notify-message ui-notify-message-style'>
<div style='float:left;margin:0 10px 0 0' class='image_path'>
<img src='../../Images/attchments.png'>
</div>
<p>ABC.docx</p>
</div>
</a>
</td>
<td style="text-align:center; width:35%;">
<div style='float:left;position:relative;top:-6px;'>
<div class='date'>
<span class='day'>10</span>
<span class='month'>Jun</span>
<span class='year'>2021</span>
</div>
</div>
</td>
<td style="width:20%; cursor:hand;">
<img
viewtype="delete"
title="Delete Attachment"
style="float:right;padding-bottom:20px;"
src="../../images/delete.png"
onclick="DeleteAttachment('78427','41701')"
class="AddItem"
/>
</td>
</tr>
<tr>
<td style="text-align:left; width:40%;">
<input
type='checkbox'
id=chkAttachment_78424
class='attachment_selection'
>
<a
title="FOSUNDERSTANDING.docx"
onclick="showDocument('78424');"
style='text-decoration: none;cursor: pointer;'
>
<div class='ui-notify-message ui-notify-message-style'>
<div style='float:left;margin:0 10px 0 0' class='image_path'>
<img src='../../Images/attchments.png' />
</div>
<p>FOSUNDERSTANDING.docx</p>
</div>
</a>
</td>
<td style="text-align:center; width:35%;">
<div style='float:left;position:relative;top:-6px;'>
<div class='date'>
<span class='day'>09</span>
<span class='month'>Jun</span>
<span class='year'>2021</span>
</div>
</div>
</td>
<td style="width:20%; cursor:hand;">
<img
viewtype="delete"
title="Delete Attachment"
style="float:right;padding-bottom:20px;"
src="../../images/delete.png"
onclick="DeleteAttachment('78424','41701')"
class="AddItem"
/>
</td>
</tr>
</table>
</div>
I edited my answer, you might try this
function AttchmentBox(id, count, x) {
if (parseInt(count) > 0) {
var idArray = id.split('_');
var cdCode = idArray[1];
var type = idArray[0];
var title = $('#' + cdCode).text()
var AJAX = new AJAXsupport();
AJAX.resetVar();
AJAX.addData('CLDone', 'CustomerDocument');
AJAX.addData('type', type);
AJAX.addData('CdCode', cdCode);
var sucSave = function() {
$('#attchment_div_data').html(AJAX.getExtraData('Customerattchment'));
$('#attchment_div').dialog({
autoOpen: false,
resizable: false,
height: 250,
width: 500,
title: title,
modal: true
});
if ($(x).parent().parent().parent().find('td:first input[type=checkbox]').prop('checked')) {
$('#attchment_div').find('table input[type=checkbox]').prop('checked', '1');
}
$CRM_juery("#attchment_div").mCustomScrollbar({
scrollButtons: {
enable: true,
scrollType: "stepped"
},
keyboard: {
scrollType: "stepped"
},
mouseWheel: {
scrollAmount: 188
},
theme: "rounded-dark",
autoExpandScrollbar: true,
snapAmount: 188,
snapOffset: 65
});
showPopup('attchment_div', true);
}
customSave(AJAX, sucSave);
}
}
I want to show/Hide the div on the basis of selection of checkbox values from the list.
Here is what I tried:-
function valueChanged() {
if ($('#ddlStatus_1').is(":checked"))
$("#divExpense").hide();
else
$("#divExpense").show();
}
and the html is
<div style="overflow-y: scroll; width: 320px; height: 100px;">
<table id="Table1" name="Status" onchange="valueChanged()">
<tr>
<td>
<input id="ddlStatus_0" type="checkbox" name="ddlStatus$0" value="20" /><label for="ddlStatus_0">Agreement</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_1" type="checkbox" name="ddlStatus$1" value="30" /><label for="ddlStatus_1">Registration
/ Conveyance Deed</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_2" type="checkbox" name="ddlStatus$2" value="40" /><label for="ddlStatus_2">7/12
Transfer on Name</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_3" type="checkbox" name="ddlStatus$3" value="50" /><label for="ddlStatus_3">Sold</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_4" type="checkbox" name="ddlStatus$4" value="60" /><label for="ddlStatus_4">Cancelled</label>
</td>
</tr>
</table>
</div>
<br />
<div id="div1">
<table cellpadding="0" cellspacing="2" width="100%">
<tr>
<td class="otab">
This is test Expense Information :
</td>
</tr>
</table>
</div>
<div id="divPayment">
<table cellpadding="0" cellspacing="2" width="100%">
<tr>
<td class="otab">
This is test Payment Information :
</td>
</tr>
</table>
</div>
But it is not working for me.
Add the change event to #ddlStatus_1 instead of table like following.
$('#ddlStatus_1').change(function() {
$("#divExpense").toggle(!this.checked);
})
Here is a running version of the code in my comment. You do not want to add the change to the table tag. If you need all checkboxes in the form to toggle something, then add a class to them and use data-attributes to see what to toggle
Note I changed div1 to divExpense
$(function() {
$('#ddlStatus_1').on("click", function() {
$("#divExpense").toggle(!this.checked);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<div style="overflow-y: scroll; width: 320px; height: 100px;">
<table id="Table1" name="Status">
<tr>
<td>
<input id="ddlStatus_0" type="checkbox" name="ddlStatus$0" value="20" />
<label for="ddlStatus_0">Agreement</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_1" type="checkbox" name="ddlStatus$1" value="30" />
<label for="ddlStatus_1">Registration / Conveyance Deed</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_2" type="checkbox" name="ddlStatus$2" value="40" />
<label for="ddlStatus_2">7/12 Transfer on Name</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_3" type="checkbox" name="ddlStatus$3" value="50" />
<label for="ddlStatus_3">Sold</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_4" type="checkbox" name="ddlStatus$4" value="60" />
<label for="ddlStatus_4">Cancelled</label>
</td>
</tr>
</table>
</div>
<br />
<div id="divExpense">
<table cellpadding="0" cellspacing="2" width="100%">
<tr>
<td class="otab">
This is test Expense Information :
</td>
</tr>
</table>
</div>
<div id="divPayment">
<table cellpadding="0" cellspacing="2" width="100%">
<tr>
<td class="otab">
This is test Payment Information :
</td>
</tr>
</table>
</div>
I'm trying to use this script to hide the question that follows Yes/No question. In other words I want question Yes/No to hide the following question when no is clicked.
Thanks.
<script>
function ChangeDropdowns() {
if ("Delivery_y:checked") {
document.getElementById('BuyProduct_H').style.display = 'block';
} else if ("Delivery_n:checked") {
document.getElementById('BuyProduct_H').style.display = 'none';
}
}
</script>
This is the table that contains the Yes/No question.
<table id="YesNo" style="width:100%;">
<tr>
<td class="auto-style2" colspan="3">* Have you recently bought any electronic products from AlGhanim electronics that required delivery/ Installation Service? </td>
</tr>
<tr>
<td class="auto-style28"> </td>
<td class="auto-style23">
<input type="radio" name="Delivery" id ="Delivery_y" onclick="displayResult(this.value)" value="Yes" >Yes</td>
<td>(Continue)</td>
</tr>
<tr>
<td class="auto-style28"> </td>
<td class="auto-style23">
<input type="radio" name="Delivery" id ="Delivery_n" onclick="displayResult(this.value)" value="No">No</td>
<td>(Terminate)</td>
</tr>
</table>
This is the table that I want to hide when answering no to the first question:
<table name="BuyProduct" id ="BuyProduct_H" style="width:100%;">
<tr>
<td class="auto-style2" colspan="3">1- What were the products that you bought? </tr>
<tr>
<td class="auto-style28"> </td>
<td colspan="2">
<asp:CheckBox ID="Button11" Text="a. Air Conditioning" runat="server" /> </td>
</tr>
<tr>
<td class="auto-style28"> </td>
<td colspan="2">
<asp:CheckBox ID="Button12" Text="b. TV Radio (TV, Home Theatre, etc.)" runat="server" /></td>
</tr>
<tr>
<td class="auto-style28"> </td>
<td colspan="2">
<asp:CheckBox ID="Button13" Text="c. Refrigeration" runat="server" /> </td>
</tr>
<tr>
<td class="auto-style28"> </td>
<td colspan="2">
<asp:CheckBox ID="Button14" Text="d. Laundry (Washer, Dryer, etc)" runat="server" /> </td>
</tr>
<tr>
<td class="auto-style28"> </td>
<td colspan="2">
<asp:CheckBox ID="Button15" Text="e. Dishwasher" runat="server" /></td>
</tr>
<tr>
<td class="auto-style28"> </td>
<td colspan="2">
<asp:CheckBox ID="Button16" Text="f. Water Treatment (Water Dispencer)" runat="server" /> </td>
</tr>
<tr>
<td class="auto-style28"> </td>
<td colspan="2">
<asp:CheckBox ID="Button17" Text="g. Small Housewares (Microwave, Kitchen appliances, etc.)" runat="server" />
<br />
<asp:CheckBox ID="Button18" Text="h. Others Please Specify" runat="server" /> </td>
</tr>
<tr>
<td class="auto-style28"> </td>
<td class="auto-style51"></td>
<td>
<asp:TextBox ID="TextBox26" runat="server"></asp:TextBox>
</td>
<td>
</td>
</tr>
<tr>
<td class="auto-style28"> </td>
<td colspan="2">
</td>
</tr>
</table>
"show" and "hide" are not valid values for display. Try "block" (or "inline-block") and "none", respectively, instead.
See here for valid values: http://www.w3schools.com/jsref/prop_style_display.asp
Also, you need to call your ChangeDropdowns() function for it to work.
In addition to what #mayabelle pointed out in his answer (that hide and show should be replaced by style.display = 'none' and style.display = 'block' respectively), your verification in the if statement if ("Delivery_y:checked") will not work. Instead, you can check if an element is checked in javascript in the following way:
if (document.getElementById('Delivery_y').checked)
Alternatively, you can do this in jQuery:
if ($('Delivery_y').is(':checked'))
I Applied what Raul Rene and mayabelle to my Script:
This is the script before:
<script>
function ChangeDropdowns() {
if ("Delivery_y:checked") {
document.getElementById('BuyProduct_H').style.display = 'block';
} else if ("Delivery_n:checked") {
document.getElementById('BuyProduct_H').style.display = 'none';
}
}
</script>
This is The Script After:
<script>
function ChangeDropdowns() {
if (document.getElementById('Delivery_y').checked) {
document.getElementById('BuyProduct_H').style.display = 'block';
} else if (document.getElementById('Delivery_n').checked) {
document.getElementById('BuyProduct_H').style.display = 'none';
}
}
</script>
I changed the Yes/No Table:
Before:
input type="radio" name="Delivery" id ="Delivery_y" onclick="displayResult(this.value)" value="Yes" >Yes</td>
<td>(Continue)</td>
</tr>
<tr>
<td class="auto-style28"> </td>
<td class="auto-style23">
<input type="radio" name="Delivery" id ="Delivery_n" onclick="displayResult(this.value)" value="No">No</td>
<td>(Terminate)</td>
</tr>
After:
<input type="radio" name="Delivery" id ="Delivery_y" onclick="displayResult(this.value)" onchange="ChangeDropdowns()" value="Yes" >Yes</td>
<td>(Continue)</td>
</tr>
<tr>
<td class="auto-style28"> </td>
<td class="auto-style23">
<input type="radio" name="Delivery" id ="Delivery_n" onclick="displayResult(this.value)" onchange="ChangeDropdowns()" value="No">No</td>
<td>(Terminate)</td>
</tr>
It Worked Perfectly.
Thank you all.
i am using multicolumn rad combo box, in that i have 5 columns like code,name,description, date,remarks. I have to bind these 3 columns values to 3 text boxes when combo box selection changed except value field and text field of combobox. Any body know please share an example.
my aspx page code for combo box is
<table>
<tr>
<td>
<telerik:RadComboBox ID="cmbTendernoticeno" runat="server" MarkFirstMatch="true"
AllowCustomText="false" TabIndex="2" DropDownWidth="230px" HighlightTemplatedItems="true"
EmptyMessage="--Select--" AutoPostBack="True" CausesValidation="false"
onselectedindexchanged="cmbTendernoticeno_SelectedIndexChanged">
<HeaderTemplate>
<table style="width: 200px;">
<tr>
<td style="width: 100px;">
Tendor No.
</td>
<td style="width: 100px;">
Tendor date
</td>
<td style="width: 100px;">
Code
</td>
<td style="width: 100px;">
Code
</td>
<td style="width: 100px;">
Code
</td>
</tr>
</table>
</HeaderTemplate>
<ItemTemplate>
<table style="width: 200px;">
<tr>
<td style="width: 100px;">
<%#DataBinder.Eval(Container.DataItem, "NOTICE_NO")%>
</td>
<td style="width: 100px;">
<%#DataBinder.Eval(Container.DataItem, "NOTICE_DATE", "{0:dd/MMM/yyyy}")%>
</td>
<td style="width: 100px;">
<%#DataBinder.Eval(Container.DataItem, "ACCEPT_DATE")%>
</td>
<td style="width: 100px;">
<%#DataBinder.Eval(Container.DataItem, "TENDER_OPEN_DATE")%>
</td>
<td style="width: 100px;">
<%#DataBinder.Eval(Container.DataItem, "OPENING_PLACE")%>
</td>
</tr>
</table>
</ItemTemplate>
</telerik:RadComboBox>
</td>
</tr>
<tr>
<td>
<label>
Tender Date</label><sup>*</sup>
</td>
<td>
:
</td>
<td>
<telerik:RadTextBox ID="txtTenderDate" runat="server" TabIndex="3" Enabled="false">
</telerik:RadTextBox>
</td>
<td>
</td>
<td>
<label>
Last Date for reciept of Tender</label><sup>*</sup>
</td>
<td>
:
</td>
<td>
<telerik:RadTextBox ID="txtLastdtforrcptTender" runat="server" TabIndex="4" Enabled="false">
</telerik:RadTextBox >
</td>
</tr>
<tr>
<td>
<label>
Date of Opening</label><sup>*</sup>
</td>
<td>
:
</td>
<td>
<telerik:RadTextBox ID="txtDateofOpening" TabIndex="5" runat="server" Enabled="false">
</telerik:RadTextBox >
</td>
<td>
</td>
<td>
<label>
Place of Opening</label><sup>*</sup>
</td>
<td>
:
</td>
<td>
<telerik:RadTextBox ID="txtPlaceofopening" MaxLength="500" runat="server" TabIndex="6" Enabled="false">
<ClientEvents OnKeyPress="validateAlphanumeric" />
</telerik:RadTextBox>
</td>
</tr>
</table>
cs file code is
public void fillTendernoticeno()
{
DataSet ds = new DataSet();
ds = ObjpsBal.fillTendernoticeno();
cmbTendernoticeno.DataTextField = "NOTICE_NO";
cmbTendernoticeno.DataValueField="NOTICE_DATE";
cmbTendernoticeno.DataSource=ds;
cmbTendernoticeno.DataBind();
}
now i want to get the combo box multicolumn values(NOTICE_DATE,ACCEPT_DATE,TENDER_OPEN_DATE,OPENING_PLACE) and has to show in proper text boxes.
I'm trying to open a ModalPopup with JavaScript, and i've searched here on stackoverflow and the general advice seems be to use something like this:
$('#inputAdd').live("click", function () {
$('#addRow').show();
$find('<%=mpeIndications.BehaviorID %>').show();
});
Where #inputAdd is an html input image that i have in the ModalPopup, its objective is to show a row (#addRow) where a TextBox is shown. However, when i click on the #inputAdd button, it show the row, but then the ModalPopup hide, I think the reason maybe because there is an UpdatePanel that include the ModalPopup, I am right? In that case which may be a solution? I've putted some of the code I've in the .ascx. Thanks.
<table class="content-box">
<tr>
<td valign="top">
<asp:UpdatePanel runat="server" ID="upAppointments">
<ContentTemplate>
<table>
<tr>
<td>
<asp:Button runat="server" ID="btnIndicationsHidden" Style="display: none;" />
<asp:Panel runat="server" ID="pnlIndications" CssClass="modalPanel" Style="display: none;">
<table class="content-box">
<tr>
<td>
<table style="width: 100%;">
<tr>
<td>
<asp:Panel runat="server" ID="pnlShowCurrentIndication" Style="padding: 13px 8px 8px 8px">
<table style="width: 100%; border: 0;">
<tr>
<td style="width: 30%; vertical-align: top;" rowspan="2">
<asp:RadioButtonList runat="server" ID="gvProfiles" OnDataBound="gvProfiles_DataBound"
DataTextField="Name" DataValueField="Id" Style="white-space: nowrap;" />
</td>
<td style="padding-left: 10px;" class="contentBox">
<table style="width: 100%;">
<tbody id="showTable">
<tr>
<td id="indicacionestd" runat="server">
Indicaciones:
</td>
</tr>
<tr>
<td>
<asp:BulletedList ID="blIndicaciones" DataTextField="Valor" runat="server">
</asp:BulletedList>
</td>
</tr>
<tr>
<td id="contraindicacionestd" runat="server">
Contraindicaciones:
</td>
</tr>
<tr>
<td>
<asp:BulletedList ID="blContraindicaciones" DataTextField="Valor" runat="server">
</asp:BulletedList>
</td>
</tr>
</tbody>
<tbody style="display: none;" id="addRow">
<tr>
<td style="text-align: left; white-space: nowrap;" class="colSepGran">
Nombre:
</td>
</tr>
<tr class="filSepGranRA">
<td class="colSepGran">
<asp:TextBox runat="server" ID="txbName" CssClass="txtNoWidth" Width="150px" ToolTip="Especifique el nombre del perfil"></asp:TextBox>
<act:FilteredTextBoxExtender runat="server" ID="ftbeName" FilterMode="ValidChars"
FilterType="UppercaseLetters, LowercaseLetters, Custom" TargetControlID="txbName"
ValidChars="ñ Ñ ' á é í ó ú Á É Í Ó Ú ü Ü ." />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="text-align: center; vertical-align: middle;">
<table style="width: 100%;">
<tr>
<td>
</td>
<td>
<input type="image" src="../../App_Themes/Theme/Images/AppIcons/add.png/" id="inputAdd"
title="Adicionar perfil">
</td>
<td>
<input type="image" src="../../App_Themes/Theme/Images/AppIcons/add_document.png"
id="inputAddSimple" title="Adicionar indicación" />
</td>
<td>
<input type="image" src="../../App_Themes/Theme/Images/AppIcons/edit.png" id="inputEdit"
title="Editar perfil" />
</td>
<td>
<asp:ImageButton runat="server" ID="imbRemoveProfile" ToolTip="Eliminar perfil" ImageUrl="~/App_Themes/Theme/Images/AppIcons/delete.png" />
</td>
<td>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
</table>
</asp:Panel>
</td>
</tr>
</table>
</td>
</tr>
</table>
</asp:Panel>
<act:ModalPopupExtender ID="mpeIndications" runat="server" PopupControlID="pnlIndications"
BackgroundCssClass="modalBackground" TargetControlID="btnIndicationsHidden" CancelControlID="imbCloseIndications"
BehaviorID="mpeIndications">
</act:ModalPopupExtender>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
</table>
Then try this approach:
Add a hidden link for ModalPopup Extender to attach to(which will NEVER be used)
<a href="#" style="display:none;visibility:hidden;"
onclick="return false" ID="dummyLink" runat="server">dummy</a>
Add the ID of the hidden link to the ModalPopupExtender
<act:ModalPopupExtender ID="mpeIndications" runat="server" PopupControlID="pnlIndications"
BackgroundCssClass="modalBackground"
TargetControlID="dummyLink"
CancelControlID="imbCloseIndications"
BehaviorID="mpeIndications">
Showing the modal popup
$find('MyMPE').show();
http://www.geekzilla.co.uk/View38736C2B-BAD3-418A-A5B0-DAC4F1A5A83A.htm
Model Dialog Asp.Net With Jquery