A web site is developped in asp.net and let people choose pictures to download.
The website groups them togheter and people can then push a download button per picture.
As we never know how many pictures that eventually will be downloaded the button are dynamically generated.
I'm not permitted to alter the asp.net code on the server only in the piwik part...
The problem is that also the id's are dynamically generated..
I have tried with this:
$("h2").on("click", "a.button button-dl", function(){
alert($(this).text());
});
But got no result, In this case I would like to retrieve "276173" in a variable.
I hope that somebody can help me, thanks for reading
Guy
<table class="checkout-basket" cellspacing="0" rules="all" border="1" id="ctl00_ctl00_cphContent_cphContent_gvBasketitem" style="border-collapse:collapse;">
<tr>
<th scope="col"> </th><th scope="col"> </th><th scope="col">Asset</th><th scope="col"> </th>
</tr><tr>
<td style="width:30px;">
<input id="ctl00_ctl00_cphContent_cphContent_gvBasketitem_ctl02_CbFlag" type="checkbox" name="ctl00$ctl00$cphContent$cphContent$gvBasketitem$ctl02$CbFlag" />
</td><td style="width:80px;">
<a onclick="return confirm('Bent u zeker dat u deze asset wil verwijderen?');" id="ctl00_ctl00_cphContent_cphContent_gvBasketitem_ctl02_lbDelete" class="button" href="javascript:__doPostBack('ctl00$ctl00$cphContent$cphContent$gvBasketitem$ctl02$lbDelete','')">verwijder</a>
</td><td style="width:100px;">
<img id="ctl00_ctl00_cphContent_cphContent_gvBasketitem_ctl02_Image1" src="../../cache/images/thumb/3AF267A169AAED70770F0EEE7E74FBB61A526EBB_156.jpg" style="width:80px;border-width:0px;" />
</td>
<td>
<h2>
<a href='/nl-BE/asset/276173/'>
276173
</a>
</h2>
<h2>
<a href='/nl-BE/asset/276173/'>
20151109_113939_0040
</a>
</h2>
<a class="button button-dl" href="javascript:__doPostBack('ctl00$ctl00$cphContent$cphContent$gvBasketitem$ctl02$ctl00','')" style="margin-top: 4px;"><img style="position: relative; top: 4px; right: 5px" src="/images/picto/download.png" />Download</a>
</td><td>
<div id="ctl00_ctl00_cphContent_cphContent_gvBasketitem_ctl02_pnl">
<input type="hidden" name="ctl00$ctl00$cphContent$cphContent$gvBasketitem$ctl02$hfAsset" id="ctl00_ctl00_cphContent_cphContent_gvBasketitem_ctl02_hfAsset" value="276173" />
<span id="ctl00_ctl00_cphContent_cphContent_gvBasketitem_ctl02_rblPrint" class="rbl"><input id="ctl00_ctl00_cphContent_cphContent_gvBasketitem_ctl02_rblPrint_0" type="radio" name="ctl00$ctl00$cphContent$cphContent$gvBasketitem$ctl02$rblPrint" value="False" checked="checked" /><label for="ctl00_ctl00_cphContent_cphContent_gvBasketitem_ctl02_rblPrint_0">Download</label><br /><input id="ctl00_ctl00_cphContent_cphContent_gvBasketitem_ctl02_rblPrint_1" type="radio" name="ctl00$ctl00$cphContent$cphContent$gvBasketitem$ctl02$rblPrint" value="True" /><label for="ctl00_ctl00_cphContent_cphContent_gvBasketitem_ctl02_rblPrint_1">Print</label></span>
<div class="printFormat" style="display: none; padding: 3px 0 3px 20px;">
<select name="ctl00$ctl00$cphContent$cphContent$gvBasketitem$ctl02$ddlPrint" id="ctl00_ctl00_cphContent_cphContent_gvBasketitem_ctl02_ddlPrint">
<option selected="selected" value="">--</option>
<option value="9cmx13cm">9cmx13cm</option>
<option value="10cmx15cm">10cmx15cm</option>
</select>
</div>
</div>
</td>
</tr><tr>
I eventually found a solution thanks to the answer below..
This is what I used
var newstr = "1";
var addressValue = "1";
$(".button.button-dl").click(function () {
var addressValue = $(this).attr('href');
console.log("tweede ",addressValue );
var re = /'(.*?)'/;
var re2 = /\$/gi;
var m = addressValue.match(re);
if (m != null)
idVal = (m[0].replace(re, '$1'));
console.log("idVal ",idVal);
var newstr = idVal.replace(/\$/gi, "_").slice(0,-6)+"_hfAsset";
console.log("newstr ",newstr);
console.log(document.getElementById(newstr).value);
});
You have a hierarchy problem:
First, a CSS problem: "a.button button-dl" should be "a.button.button-dl" (both classes are on the anchor tag).
Second, that anchor tag is not contained within an h2, so your event is never triggering. At best, you can use the td tag.
So your JS might look like:
$("td").on("click", "a.button.button-dl", function () {
alert($(this).text());
});
Related
I'm making an address book of a company's tech support contacts and the admin gets access to all addresses in a form of a table. In this table, he can add, delete and make changes to data in the same page.
I have set up the add and delete functions successfully, but I struggle a lot with the edit. I'm using node, express, mongodb and vanilla javascript.
I'm still a newbie in web developement and there is are words I may use wrong, so sorry in advance!
(Excuse my french, but most of the words mean the same in english.)
My HTML
<div>
<input id="edit" type="button" value="Editer" onclick="return edit()">
<input id="valider" type="hidden" value="Valider" onclick="return valider()">
</div>
<table id='myTable'>
<thead>
<tr class="header">
<th>Nom de l'entreprise</th>
<th>Téléphone 1</th>
<th>Téléphone 2</th>
<th>Mail</th>
</tr>
</thead>
<tbody>
<% companies.forEach(function(company){ %> //I loop through my db
<tr class="compName">
<td hidden id='_id' > <%= company._id %> </td>
<td> <input id="name" class="readonly" type="text" value=" <%= company.name %>" readonly style="border: none" onblur="change(this)"> </td>
<td> <input id="phone" class="readonly" type="text" value=" <%= company.phone %>" readonly style="border: none" onblur="change(this)"> </td>
<td> <input id="phone2" class="readonly" type="text" value=" <%= company.phone2 %>" readonly style="border: none" onblur="change(this)"> </td>
<td> <input id="mail" class="readonly" type="text" value=" <%= company.mail %>" readonly style="border: none" onblur="change(this)"> </td>
</tr>
<% }) %>
</tbody>
</table>
My Script
<script>
function edit() {
var editComp = document.getElementsByClassName("readonly");
var edit = document.getElementById('edit').type = 'hidden'; //get the edit button and hide it
var valider = document.getElementById('valider').type = 'button'; //then unhide the validate button so I can use it
for (var i = 0; i < editComp.length; i++) { //remove the readonly for each td so I can edit it
editComp[i].removeAttribute('readonly');
editComp[i].setAttribute("style", "border: 1px solid red;");
};
}
function valider() {
var editComp = document.getElementsByClassName("readonly");
var edit = document.getElementById('edit').type = 'button'; //unhide the edit button
var valider = document.getElementById('valider').type = 'hidden' //hide my validate button
for (var i = 0; i < editComp.length; i++) { //put back the readonly for each td so its uneditable
editComp[i].setAttribute('readonly', true);
editComp[i].setAttribute("style", "border: none;");
};
}
function change(element) { //when the input gets unfocused, I assume that's because changes happened
var setChanged = element.setAttribute("class", "readonly changed"); //I mark all changed element
/*I want to udapte my database with the changed elements
I was thing of getting the hidden company._id and the id of the changed element so I can update them specifically*/
}
</script>
So I was think of getting the col[0] of the changed row, which is the _id of my changed element, so I can target it for updating in my database, but I don't know how I should do it.
Thanks!
I've successfully logged into a website and loaded a table that can then be downloaded as an .xls file. The issue I'm having is that an image has to be clicked to call the download. I haven't figured out how to post the correct data to fetch the .xls file.
Here is the website's HTML:
<table border="0" width ="95%" align ="center">
<tr>
<form name="downloadXLSForm" method="POST" action="/control/filedownload">
<input type="hidden" name="fileType" value="mlInventory">
<td align="left" valign = "top">
<font face="Verdana, Arial, Helvetica, sans-serif" size="-2">
<input type="image" src="../images/excel_download.jpg" onClick="document.downloadXLSForm.submit()" value="Excel Download" Alt="Download the results above into MS Excel">
</font>
</td>
</form>
<td align="right" valign = "top">
<form name="mlInventorysearch" method="post" action="/control/mlinventorysearch">
<input type="hidden" name="refreshSearch" value="true">
<input type="submit" value="New Search">
</form>
</td>
</tr>
</table>
There is a link embedded in the website that points to https://www.emlco.com/control/filedownload but when I try and get it, the page is empty.
Here is my code:
with requests.Session() as z:
z.get("https://www.emlco.com/control/j_security_check", stream=True)
p3 = z.post("https://www.emlco.com/control/j_security_check",data=payload3)
z.get(link)
inventory_start = z.post(link, data={'newSearch':'true'})
inventory_excel = z.post(link,data={'fileType':'mlInventory'})
#inventory_excel = z.post('https://www.emlco.com/control/filedownload',data={'fileType':'mlInventory'})
inventory_excel = z.get('https://www.emlco.com/control/filedownload', stream = True)
#output = open('MLCStock.xls', 'wb')
#output.write(inventory_excel.content)
#output.close()
print(inventory_excel.url)
print(inventory_start.url)
print("Done")
I apologize for the redundant comments. I was trying various combinations to see what would take.
Thanks in advance. I am quite new at Python.
I can't see errors in my logic maybe You'll help Me
I've got this at the moment
$(document).ready(function() {
var str = $('#formElements').text();
str = str.slice(104,112);
alert(str);
$('#formElements:contains('+ str +')').load(function(){
$(this).html().replace(str, '<div class="price-cal-check">'+str+' <span id="priceout"></span>zł</div>');
});
});
form {
display: block;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<form method="post" name="form" action="javascript:void(0);">
<div id="formElements" style="float:right; min-height: 280px; margin-left: 20px; width: 575px;">
<table>
<tbody>
<tr>
<td>Quantity:</td>
<td>Paper type:</td>
</tr>
<tr>
<td><input name="amount" value="1" type="text"></td>
<td> <select name="paper">
<option value="1">250 gsm</option>
</select>
</td>
</tr>
</tbody>
</table>
Price: $
<br>
<input class="submitToCart" name="addCart" value="Add to cart" role="button" aria-disabled="false" style="margin-top: 4px;" type="submit">
</div>
</form>
the value of <span id="priceout">27,00</span> is generated dynamicaly after page loads with jQuery.
so he output of str looks like this Price: $
all i want to do is to put whole string Price: <span id="priceout">27,00</span>$ in to div. but my code isn't work
what I'm doing wrong ?
If it was up to me, I'd rather wrap that Price: in a div, give it an ID and then append it with the value like:
<div id="price"> Price: </div>
and in your function
$('#price').append('<span id="priceout">27,00</span>$');
Hope it helps.
Ok I've found a solution now js looks like this
$('#formElements').each(function() {
var form = $(this);
var str = form.html();
var str1 = str.slice(225,260);
//alert(str);
form.html(str.replace(str1,'<div class="price-cal-check">'+ str1 +'</div>'));
});
and it works
Below is my HTML and jQuery code. jQuery displays the hidden elements, except for the #image4 and #video4 elements, which stay hidden with if I select image or video. All the other elements get displayed correctly.
Any idea why those two won't show?
JS:
$(document).ready(function(){
var fields = jQuery('#image_type');
var select = this.value;
fields.change(function () {
if ($(this).val() == 'image') {
alert($(this).val());
$('#images_pop_up').show();
$('#video1').hide();
$('#video2').hide();
$('#video3').hide();
$('#video4').hide();
$('#image1').show();
$('#image2').show();
$('#image3').show();
$('#image4').show();
$(' #image5').show();
}
else {
$('#images_pop_up').show();
$('#image1').hide();
$('#image2').hide();
$('#image3').hide();
$('#image4').hide();
$('#image5').hide();
$('#video1').show();
$('#video2').show();
$('#video3').show();
$('#video4').show();
$('#image5').show();
}
});
});
HTML:
<div id ="images_pop_up" style="display:none;">
<span id="image1" style="display:none;" ><img src="/uploads/commerce/images/large/easton-163135-wheeled-bag.jpg" border="0" alt="easton-163135-wheeled-bag.jpg" title=" easton-163135-wheeled-bag.jpg " class="productimage"><input type="hidden" name="products_previous_image_lrg" value="easton-163135-wheeled-bag.jpg"><br>Nice bag</span>
<span id ="video1" style="display:none;"></span></td>
<td class="textSmall" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<span id="image3" style="display:none;"><input type="hidden" name="products_previous_image_lrg" value="easton-163135-wheeled-bag.jpg"><input type="hidden" name="products_previous_image_lrg_caption" value="Nice bag"></span>
<span id ="video3"><input type="hidden" name="products_previous_video_embed"><input type="hidden" name="products_previous_video_embed_caption"></span>
<td class="textSmall" valign="top"><span id="image4" style="display:none;">New Image File: <input type="text" name="products_image_lrg" value="easton-163135-wheeled-bag.jpg"><br>Image Caption: <input type="text" name="products_image_lrg_caption" value="Nice bag"></span>
<span id ="video4" style="display:none;">Video Embed field: <input type="text" name="products_video_embed"><br>Video Image Caption: <input type="text" name="products_video_embed_caption"></span>
</td>
<td><span id="image5" style="display:none;"> </span></td>
</tr>
<tr>
<td colspan="2">
<div id='div_img_lrg'></div>
</td>
</tr>
</table>
</td>
</div>
What sticks out most to me is that you're copy pasting when you could be putting CSS to work for you by giving them all the same class (or the appropriate groups of elements the same class at least) and then hiding and showing them based on that.
Your bug is probably caused by a slight typo somewhere in the selectors or the place where you're setting the ids in the markup.
try like this
$(document).ready(function () {
var fields = jQuery('#image_type');
var select = this.value;
$('#image_type').change(function () {
if ($(this).val() == 'image') {
alert($(this).val());
$("[id^=image]").show();
$("[id^=video]").hide();
} else {
$("[id^=video]").show();
$("[id^=image]").hide();
}
});
});
I'm no javascript expert and i'm currently trying to create a function for a form that has the same fields repeated depending on a number selected on a previous page.
There could be between 1 and 10 rows of the form fields with each having a radio button selection that will enable/disable each row.
At the moment i've written something but having trouble with concatenating form field names and variable names.
Is anyone able to point me in the right direction please.
Javascript:
var i = 1;
var iChildren = 2; //could be any number - depends what user selected.
function toggle(switchElement) {
for (i = 1; i = iChildren; i++) {
var frmSchoolSelected+i = document.getElementById('<%=c_' & i & '_selected.ClientID%>');
var frmSchoolAge+i = document.getElementById('<%=c_' & i & '_type.ClientID%>');
var frmSchoolType+i = document.getElementById('<%=c_' & i & '_type1.ClientID%>');
var frmSchoolAdditional+i = document.getElementById('<%=c_' & i & '_additional.ClientID%>');
if (switchElement.value == 'Yes') {
frmSchoolSelected+i.disabled = false;
frmSchoolAge+i.disabled = true;
frmSchoolType+i.disabled = true;
frmSchoolAdditional+i.disabled = true;
}
else {
frmSchoolSelected+i.disabled = true;
frmSchoolAge+i.disabled = false;
frmSchoolType+i.disabled = false;
frmSchoolAdditional+i.disabled = false;
}
}
}
Thanks for any help.
J.
EDITED
Example of generated form HTML.
<form method="post" action="schoolingform.aspx" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'Button1')" id="form1">
<table id="Table1" cellspacing="0" cellpadding="0" style="border-width:0px;border-collapse:collapse;">
<tr>
<td><strong>School Selected</strong></td>
<td colspan="4"><span id="c_1_school_selected" onlick="javascript:toggle(this);">
<input id="c_1_school_selected_0" type="radio" name="c_1_school_selected" value="Yes" />
<label for="c_1_school_selected_0">Yes</label>
<input id="c_1_school_selected_1" type="radio" name="c_1_school_selected" value="No" />
<label for="c_1_school_selected_1">No</label>
</span></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Child</th>
<th style="border-right:1px solid #dddddd;">School Name</th>
<th>School Type</th>
<th>School Type</th>
<th>Additional Information</th>
</tr>
<tr valign="top">
<td><strong>Fred Wilkinson</strong></td>
<td style="border-right:1px solid #dddddd;"><input name="c_1_selected" type="text" id="c_1_selected" disabled="disabled" class="aspNetDisabled" style="width:190px;" />
<input type="hidden" name="c_1_id" id="c_1_id" value="22" /></td>
<td><select name="c_1_type" id="c_1_type" disabled="disabled" class="aspNetDisabled">
<option selected="selected" value="Primary">Primary</option>
<option value="Secondary">Secondary</option>
<option value="Higher Education">Higher Education</option>
</select></td>
<td><select name="c_1_type1" id="c_1_type1" disabled="disabled" class="aspNetDisabled">
<option selected="selected" value="State">State</option>
<option value="Independent">Independent</option>
</select></td>
<td><textarea name="c_1_additional" rows="6" cols="30" id="c_1_additional" disabled="disabled" class="aspNetDisabled" style="width:190px;"></textarea></td>
</tr>
<tr>
<td><strong>School Selected</strong></td>
<td colspan="4"><span id="c_2_school_selected" onlick="javascript:toggle(this);">
<input id="c_2_school_selected_0" type="radio" name="c_2_school_selected" value="Yes" />
<label for="c_2_school_selected_0">Yes</label>
<input id="c_2_school_selected_1" type="radio" name="c_2_school_selected" value="No" />
<label for="c_2_school_selected_1">No</label>
</span></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Child</th>
<th style="border-right:1px solid #dddddd;">School Name</th>
<th>School Type</th>
<th>School Type</th>
<th>Additional Information</th>
</tr>
<tr valign="top">
<td><strong>Sara Wilkinson</strong></td>
<td style="border-right:1px solid #dddddd;"><input name="c_2_selected" type="text" id="c_2_selected" disabled="disabled" class="aspNetDisabled" style="width:190px;" />
<input type="hidden" name="c_2_id" id="c_2_id" value="23" /></td>
<td><select name="c_2_type" id="c_2_type" disabled="disabled" class="aspNetDisabled">
<option selected="selected" value="Primary">Primary</option>
<option value="Secondary">Secondary</option>
<option value="Higher Education">Higher Education</option>
</select></td>
<td><select name="c_2_type1" id="c_2_type1" disabled="disabled" class="aspNetDisabled">
<option selected="selected" value="State">State</option>
<option value="Independent">Independent</option>
</select></td>
<td><textarea name="c_2_additional" rows="6" cols="30" id="c_2_additional" disabled="disabled" class="aspNetDisabled" style="width:190px;"></textarea></td>
</tr>
<tr>
<td align="right" colspan="5"></td>
</tr>
</table>
<input type="hidden" name="iChild" id="iChild" value="2" />
<input type="submit" name="Button1" value="Next" id="Button1" class="submitBtn" />
You are mixing .NET code and JavaScript code. Because .NET runs first, it will try to process the code as you have written it:
<%=c_' & i & '_selected.ClientID%>
and most likely generate an error message because that is invalid code.
A simpler solution might be to use a class name. Then with jQuery, you could condense all of your code into a single call:
$('.ClassName').toggle();
Illegal javascript syntax. You ARE mixing .net and JS
var frmSchoolSelected+i is not allowed.
Also your loop is assigning i instead of testing i (= versus ==)
try this
function toggle(switchElement) {
var clientId = '<%=c_1_selected.ClientID%>';
var isYes = switchElement.value == 'Yes';
for (var i=1; i==iChildren; i++) {
var frmSchoolSelected = document.getElementById(clientId.replace('_1_selected','_'+i+'_selected'));
var frmSchoolAge = document.getElementById(clientId.replace('_1_selected','_'+i+'_type'));
var frmSchoolType = document.getElementById(clientId.replace('_1_selected','_'+i+'_type1'));
var frmSchoolAdditional = document.getElementById(clientId.replace('_1_selected','_'+i+'_additional'));
frmSchoolSelected.disabled = !isYes;
frmSchoolAge.disabled = isYes;
frmSchoolType.disabled = isYes;
frmSchoolAdditional.disabled = isYes;
}
}
A few notes on your approach.
Be aware of how you're using this as it means different things in different contexts. In your case it would be better to pass in the index of the row you're toggling. Your server side code most likely knows what row it's currently generating so this should be easy to accomplish.
As others pointed out, you are mixing client side and server side. In this case i is a client side variable that you're trying to use in a '<%=c_'... which is a server side context
I'm not quite sure why you're putting a + into what should be a variable name, but using a plus sign as part of a variable name isn't legal in JavaScript
switchElement in this case isn't a CheckboxList as you're expecting it to be, it's just an html span element and as such won't have a meaningful value property. You have to look at the actual input elements inside it and see if the yes element is checked (for example).
If you were to go with a JavaScript solution you would need code along these lines
function toggle(i) {
var schoolSelected = document.getElementById('c_' + i + '_school_selected_0').checked;
// client side names of variables will be predictable so to an extent you can get away with
// hard-coding them. Not the best practice, but it'd work
var frmSchoolSelected = document.getElementById('c_' + i + '_selected');
var frmSchoolAge = document.getElementById('c_' + i + '_type');
var frmSchoolType = document.getElementById('c_' + i + '_type1');
var frmSchoolAdditional = document.getElementById('c_' + i + '_additional');
// JavaScript, like some other languages lets you chain assignments like this
frmSchoolSelected.disabled =
frmSchoolAge.disabled =
frmSchoolType.disabled =
frmSchoolAdditional.disabled = !schoolSelected;
}
If you were to approach this from jQuery side I would suggest making a few changes to your HTML as well. Your output can be thought of as a list of mini-forms so instead of having one large table with different rows corresponding to different parts, create a list (or a table with a single column if you aren't ready to give up on table based layout quite yet).
New HTML
<ul>
<li class="school1">
<!-- school information form goes here -->
...
<span id="c_1_school_selected" class="toggle" onclick='toggle("school1")'>
...
</li>
<li class="school2">
<!-- school information form goes here -->
...
<span id="c_1_school_selected" class="toggle" onclick='toggle("school2")'>
...
</li>
...
</ul>
New code
function toggle(row) {
var allInputs = $("#" + row + " :input")
.not(".toggle input:radio");
var state = $(".toggle :checked").val();
if (state == "Yes") {
allInputs.removeAttr("disabled");
} else {
allInputs.attr("disabled", "disabled");
}
}
There are two nice things about this approach:
You are no longer relying on knowing what the ClientID will be as you're dealing with input elements as input elements
You can now refactor this input form into some sort of a repeating control (like a ListView) so if you decide you'd like to change how each row is formatted, it'll be very easy to do (since it'll all be in one place).
I got there eventually, once I had worked out how to add the onclick attribute to the input tag instead of the span tag I could then concentrate on the javascript function.
Code behind
Adds onclick to input tag.
Dim newRadioYes As New RadioButton
newRadioYes.Text = "Yes"
newRadioYes.ID = "c_" & childID & "_school_selected_0"
newRadioYes.Attributes.Add("onclick", "javascript:toggle(this, " & childID & ");")
newRadioYes.Attributes.Add("value", "Yes")
newRadioYes.GroupName = "c_" & childID & "_school_selected"
Dim newRadioNo As New RadioButton
newRadioNo.Text = "No"
newRadioNo.ID = "c_" & childID & "_school_selected_1"
newRadioNo.Attributes.Add("onclick", "javascript:toggle(this, " & childID & ");")
newRadioNo.Attributes.Add("value", "No")
newRadioNo.GroupName = "c_" & childID & "_school_selected"
Generated HTML form
<form method="post" action="schoolingform.aspx" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'Button1')" id="form1">
<table id="Table1" cellspacing="0" cellpadding="0" style="border-width:0px;border-collapse:collapse;">
<tr>
<td><strong>School Selected</strong></td>
<td colspan="4"><input id="c_1_school_selected_0" type="radio" name="c_1_school_selected" value="Yes" onclick="javascript:toggle(this, 1);" />
<label for="c_1_school_selected_0">Yes</label>
<input id="c_1_school_selected_1" type="radio" name="c_1_school_selected" value="No" onclick="javascript:toggle(this, 1);" />
<label for="c_1_school_selected_1">No</label></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Child</th>
<th style="border-right:1px solid #dddddd;">School Name</th>
<th>School Type</th>
<th>School Type</th>
<th>Additional Information</th>
</tr>
<tr valign="top">
<td><strong>Fred Wilkinson</strong></td>
<td style="border-right:1px solid #dddddd;"><input name="c_1_selected" type="text" id="c_1_selected" disabled="disabled" class="aspNetDisabled" style="width:190px;" />
<input type="hidden" name="c_1_id" id="c_1_id" value="26" /></td>
<td><select name="c_1_type" id="c_1_type" disabled="disabled" class="aspNetDisabled">
<option selected="selected" value="Primary">Primary</option>
<option value="Secondary">Secondary</option>
<option value="Higher Education">Higher Education</option>
</select></td>
<td><select name="c_1_type1" id="c_1_type1" disabled="disabled" class="aspNetDisabled">
<option selected="selected" value="State">State</option>
<option value="Independent">Independent</option>
</select></td>
<td><textarea name="c_1_additional" rows="6" cols="30" id="c_1_additional" disabled="disabled" class="aspNetDisabled" style="width:190px;"></textarea></td>
</tr>
<tr>
<td><strong>School Selected</strong></td>
<td colspan="4"><input id="c_2_school_selected_0" type="radio" name="c_2_school_selected" value="Yes" onclick="javascript:toggle(this, 2);" />
<label for="c_2_school_selected_0">Yes</label>
<input id="c_2_school_selected_1" type="radio" name="c_2_school_selected" value="No" onclick="javascript:toggle(this, 2);" />
<label for="c_2_school_selected_1">No</label></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Child</th>
<th style="border-right:1px solid #dddddd;">School Name</th>
<th>School Type</th>
<th>School Type</th>
<th>Additional Information</th>
</tr>
<tr valign="top">
<td><strong>Sara Wilkinson</strong></td>
<td style="border-right:1px solid #dddddd;"><input name="c_2_selected" type="text" id="c_2_selected" disabled="disabled" class="aspNetDisabled" style="width:190px;" />
<input type="hidden" name="c_2_id" id="c_2_id" value="27" /></td>
<td><select name="c_2_type" id="c_2_type" disabled="disabled" class="aspNetDisabled">
<option selected="selected" value="Primary">Primary</option>
<option value="Secondary">Secondary</option>
<option value="Higher Education">Higher Education</option>
</select></td>
<td><select name="c_2_type1" id="c_2_type1" disabled="disabled" class="aspNetDisabled">
<option selected="selected" value="State">State</option>
<option value="Independent">Independent</option>
</select></td>
<td><textarea name="c_2_additional" rows="6" cols="30" id="c_2_additional" disabled="disabled" class="aspNetDisabled" style="width:190px;"></textarea></td>
</tr>
<tr>
<td align="right" colspan="5"></td>
</tr>
</table>
<input type="hidden" name="iChild" id="iChild" value="2" />
<input type="submit" name="Button1" value="Next" id="Button1" class="submitBtn" />
Javascript function
function toggle(switchElement, childID) {
var frmSelected = document.getElementsByName('c_' + childID + '_school_selected');
var frmSchoolSelected = document.getElementById('c_' + childID + '_selected');
var frmSchoolAge = document.getElementById('c_' + childID + '_type');
var frmSchoolType = document.getElementById('c_' + childID + '_type1');
var frmSchoolAdditional = document.getElementById('c_' + childID + '_additional');
if (switchElement.value == 'Yes') {
frmSchoolSelected.disabled = false;
frmSchoolAge.disabled = true;
frmSchoolType.disabled = true;
frmSchoolAdditional.disabled = true;
}
else {
frmSchoolSelected.disabled = true;
frmSchoolAge.disabled = false;
frmSchoolType.disabled = false;
frmSchoolAdditional.disabled = false;
}
}
Thanks to those who pointed me in the right direction, much appreciated.