I would like to run a for loop that will insert a word in a text box from a table; then insert a new word in a text box right after that.
However i only get one word when i click submit is there a way to do this without ajax?
function check()
{
var myrows = new Array();
myrows[0] = "row1";
myrows[1] = "row2";
var server =" ";
var root = " ";
for (var i=0;i<myrows.length;i++){
root = myrows[i]+ "rootname";
server = myrows[i]+ "servername";
var j = document.getElementById(root);
var y = document.getElementById(server);
document.getElementById('id_rootname').value=j.textContent;
document.getElementById('id_servername').value=y.textContent;
}
var x;
var r=confirm("Are you sure you?" );
if (r==true)
{
x="You pressed OK!";
}
else
{
Object.cancel;
}
}
</script>
<tr >
<td align="center"><input type="checkbox" class="selectedId"
onclick="resetSelectedAll(this);" id= "check" value="row1" name="row{{ forloop.counter }" ></td>
<td name = "root" id="row1rootname">appBOWSERtest033</td>
<td style="display:none;" name = "server" id="row1servername">Bowser</td>
<td name= "url" id="row1urls">21</td>
<td id="row1custs">3</td>
<td id="row1jvmms"> 1024</td>
<td id="row1x64">1</td>
<td id="row1currentplatform"> platform_11.3.111129.38873</td>
<td id="row1currentjdk"> jdk_1.6.0_26-b03</td>
<td id="row1currenttomcat">tomcat_6.0.32</td>
</tr>
<tr >
<td align="center"><input type="checkbox" class="selectedId"
onclick="resetSelectedAll(this);" id= "check" value="row2" name="row{{ forloop.counter }" ></td>
<td name = "root" id="row2rootname">appLUIGItest033</td>
<td style="display:none;" name = "server" id="row2servername">LUIGI</td>
<td name= "url" id="row2urls">12</td>
<td id="row2custs">3</td>
<td id="row2jvmms"> 1024</td>
<td id="row2x64">0</td>
<td id="row2currentplatform"> platform_12.1.120510.42747</td>
<td id="row2currentjdk"> jdk_1.6.0_31-b04</td>
<td id="row2currenttomcat">tomcat_7.0.27</td>
</tr>
<form action=" " id ="forms" name = "forms" >{% csrf_token %}
<table>
<tr><th><label for="id_servername">Servername:</label></th><td><input id="id_servername" maxlength="50" name="servername" type="text" value="LUIGI" /></td></tr>
<tr><th><label for="id_rootname">Rootname:</label></th><td><input id="id_rootname" maxlength="50" name="rootname" type="text" value="appLUIGItest033" /></td></tr>
<tr><th><label for="id_action">Action:</label></th><td><select id="id_action" name="action">
<option value="Restart" selected="selected">Restart</option>
<option value="Full_Dump">Full_Dump</option>
<option value="Redeploy">Redeploy</option>
<option value="Thread">Thread</option>
</select></td></tr>
<tr><th><label for="id_loginname">Loginname:</label></th><td><ul class="errorlist"><li>This field is required.</li></ul><input id="id_loginname" maxlength="50" name="loginname" type="text" /></td></tr>
<tr><th><label for="id_choice">Choice:</label></th><td><ul class="errorlist"><li>This field is required.</li></ul><input id="id_choice" name="choice" type="checkbox" /></td></tr>
</table>
<input name = "hello" type="submit" onclick="check()" value="Submit">
</form>
root = myrows[i]+ "rootname";
server = myrows[i]+ "servername";
var j = document.getElementById(root);
var y = document.getElementById(server);
instead of this try this one.
start var i = 1 in for loop.
var j= document.getElementById("row"+i+"rootname");
Related
please help me..,
I create a loop for the database input with one input affecting the other input,
when run, the first line will be successful (the input changes) but it does not happen on line two and the others ,,, this is my script..
#foreach($products as $product)
<tr>
<td>
{{$product->product}}</td>
<td class="text-center"><?php
if ($product->enable_stock) {
$stock = $product->stock ? $product->stock : 0 ;
$fstock = (float)$stock . ' ' . $product->unit;
} else {
$fstock = 'N/A';
}
?>
<input type="text" class="form-control" name="stock" id="stock" style='width:100%; text-align:center' value= " {{$product->stock}} ">
</td>
<td>
<input onchange="diff(this.value)" type="text" class="form-control" name="hso" id="hso" style='width:100%; text-align:center' value= " {{$product->stock}} "></td>
<td>
<input type="text" class="form-control" name="diff" id="diff" style='text-align:center' value="">
</td>
</tr>
<script type="text/javascript">
function diff() {
var stock = document.getElementById("stock").value;
var hso = document.getElementById("hso").value;
var diff = eval(hso) - eval(stock);
document.getElementById("diff").value=diff;
}
</script>
#endforeach
<?php $i=0;?>
#foreach($products as $product)
<?php $i++;?>
<tr>
<td>
{{$product->product}}</td>
<td class="text-center"><?php
if ($product->enable_stock) {
$stock = $product->stock ? $product->stock : 0 ;
$fstock = (float)$stock . ' ' . $product->unit;
} else {
$fstock = 'N/A';
}
?>
<input type="text" class="form-control" name="stock" id="stock{{$i}}" style='width:100%; text-align:center' value= " {{$product->stock}} ">
</td>
<td>
<input onchange="diff(this.value)" type="text" class="form-control" name="hso" id="hso{{$i}}" style='width:100%; text-align:center' value= " {{$product->stock}} "></td>
<td>
<input type="text" class="form-control" name="diff" id="diff{{$i}}" style='text-align:center' value="">
</td>
</tr>
<script type="text/javascript">
$(document).ready(function () {
function diff() {
var stock = document.getElementById("stock{{$i}}").value;
var hso = document.getElementById("hso{{$i}}").value;
var diff = eval(hso) - eval(stock);
document.getElementById("diff{{$i}}").value=diff;
}
});
</script>
#endforeach
I have a sign up form where I have taken some basic details of the customer and a Submit button.
I have validate all the fields using ajax but confirm password field using javascript. When I write code only using Ajax and not validating Confirm password field it is running perfectly but the problem is when I am validation it using JS submit button is not getting enable.
Sign up form:
<html>
<head>
<title> Registration Form </title>
<script language="javascript">
var flag = false;
function validate(element)
{
var xmlhttp;
if (window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
else
{
xmlhttp = new Activexobject("Microsoft.XMLHTTP");
}
var myField = element;
xmlhttp.open('GET', 'validate.php?' + myField.id + "=" + myField.value, true);
xmlhttp.send();
xmlhttp.onreadystatechange = function ()
{
//alert("Hello");
if (xmlhttp.readyState === 4 && xmlhttp.status === 200)
{
var response = xmlhttp.responseText.split("||");
//alert("H2");
}
var divname = "err" + myField.id.substring(3);
var mydiv = document.getElementById(divname);
if (!eval(response[0]))
{
//alert("Fail");
//alert("Value: "+response);
mydiv.innerHTML = response[1];
myField.valid = false;
}
else
{
//alert("Success");
myField.valid = true;
mydiv.innerHTML = "";
}
var btn = document.getElementById("btnSubmit");
btn.disabled = !isValidForm();
}
}
;
function password()
{
var pass = document.getElementById("txtpswd").value;
var Confirm_pass = document.getElementById("txtConfirmpassword").value;
alert("Pass " + pass);
alert("Confirm: " + Confirm_pass);
if (pass == Confirm_pass)
{
flag = true;
alert("True");
document.getElementById("errConfirmpassword").innerHTML = "";
}
else
{
alert("False");
flag = false;
document.getElementById("errConfirmpassword").innerHTML = "Password does not Match";
}
}
;
function isValidForm()
{
var f1 = document.getElementById("txtfname");
var f2 = document.getElementById("txtlname");
var f3 = document.getElementById("txtaddress");
var f4 = document.getElementById("txtzip");
var f5 = document.getElementById("txtnumber");
var f6 = document.getElementById("txtmail");
var f7 = document.getElementById("txtpswd");
var f8 = document.getElementById("txtConfirmpassword");
return(f1.valid && f2.valid && f3.valid && f4.valid && f5.valid && f6.valid && f7.valid && f8.valid);
}
;
</script>
</head>
<body>
<center>
<h1><font color="red"> New User Registration Form </font></h1>
<form name="SignUpForm" method="POST" action="function_customer.php?val=insert">
<table>
<tr>
<td id=q> <font face="Century Schoolbook"> First Name :</font></td> <br>
<td> <input type=text name=txtfname id="txtfname" placeholder=First_name onchange="validate(this);" valid=false> </td>
<td><div id="errfname"/></td>
</tr>
<tr>
<td id=q> Last Name :</td>
<td> <input type=text name=txtlname id="txtlname" placeholder=Last_Name onchange="validate(this);" valid=false> </td>
<td><div id="errlname"/></td>
</tr>
<tr>
<td id=q>Address : </td><br>
<td> <textarea rows=5 cols=20 name="txtaddress" id="txtaddress" onchange="validate(this);" valid=false>
</textarea>
</td>
<td><div id="erraddress"/></td>
</tr>
<tr>
<td id=q> Contact no : </td>
<td> <input type=text name="txtnumber" id="txtnumber" onchange="validate(this);" valid=false> </td>
<td><div id="errnumber"/></td>
</tr>
<tr>
<td id=q> Gender </td>
<td> <select name="txtcity" id="gender">
<option value="Male"> Male </option>
<option value="Female"> Female </option>
</select>
</td>
</tr>
<tr>
<td id=q> City </td>
<td>
<select name="txtcity" id="txtcity">
<option> City </option>
<option value="Vadodara"> Vadodara </option>
<option value="Ahmedabad"> Ahmedabad </option>
<option value="Surat"> Surat </option>
<option value="Rajkot"> Rajkot </option>
<option value="Bhavnagar">Bhavnagar</option>
<option value="Jamnagar">Jamnagar</option>
<option value="Nadidad">Nadidad</option>
<option value="Morvi">Morvi</option>
<option value="Gandhidham">Gandhidham</option>
<option value="Adipur">Adipur</option>
<option value="Anand">Anand</option>
<option value="Baruch">Baruch</option>
<option value="Godhra">Godhra</option>
<option value="Veraval">Veraval</option>
<option value="Navsari">Navsari</option>
</select>
</td>
</tr>
<tr>
<td id=q> ZIP : </td>
<td> <input type=text name=txtzip id="txtzip" onchange="validate(this);" valid=false> </td>
<td><div id="errzip"/></td>
</tr>
<tr>
<td id=q> Email Id : </td>
<td> <input type="email" name=txtmail placeholder=someone#exe.com id="txtmail" onchange="validate(this);" valid=false> </td>
<td><div id="errmail"/></td>
</tr>
<tr>
<td id=q> New Password : </td>
<td> <input type="password" name="txtpswd" id="txtpswd" onchange="validate(this);" valid=false>
</td>
<td><div id="errpswd"/></td>
</tr>
<tr>
<td id=q>Confirm Password : </td><td><input type="password" name=txtConfirmpassword id="txtConfirmpassword" onchange="password();" valid=false>
</td>
<td><div id="errConfirmpassword"/></td>
</tr>
<tr>
<td></td><td><input type=reset name=reset value=Reset>
</td>
</tr>
<tr>
</tr>
</table>
</form>
<br>
<br>
<br>
<br><br>
</center>
</body>
</html>
What should I do to validate all the fields and enabling the Submit Button?
First of all I suggest you read up on the latest HTML elements and use CSS for centering or styling your elements and avoid usage of obsolete elements like <font> and <center>.
Having said that, the issue in your code is that you're not calling validate() to check if the form is valid after password & confirm password fields match, so change your password() like below.
function password(){
var btn = document.getElementById("btnSubmit");
var pass = document.getElementById("txtpswd").value;
var confirm_pass = document.getElementById("txtConfirmpassword").value;
var pwdErrorElement = document.getElementById("errConfirmpassword");
if (pass === confirm_pass){
flag = true;
pwdErrorElement.innerHTML = "";
btn.disabled = !isValidForm();
}else{
flag = false;
pwdErrorElement.innerHTML = "Password does not Match";
btn.disabled = true;
}
}
Also I suggest you to make use of value property on each field to do the validations on client side rather than making a server call for every field change. You can use field values for validations by changing the last statement in your isValidForm() like below.
function isValidForm(){
// get all the field references
return(f1.value && f2.value && f3.value && f4.value
&& f5.value && f6.value && f7.value && f8.value);
}
Once you're done with the JS validations, you can enable the submit button and do validations for all fields at once on your server side on form submit. I mean that's the very purpose of doing client side validations using JS. You don't want to ask for feedback (valid or not) for every field change.
Here's a working Pen with all the above changes.
I know this is proboly the most asked question out there but I have scoured the net and tried several examples and none of them have worked. Here is my issue.
First I have no control over the TR TD structure, can't use DIV.
I need to be able to display certain TD's based on the select dropdown menu value. I have 4 different id's I am using "to", "to_field", "from", "from_field". The script I have shown is not working. Can someone help me out?
Example: If someone selects "In Use" in the dropdown then I just want all the elementID that have "from" and "from_field" to display only. If someone selects a different value then I would like to change that around.
<script type="text/javascript">
function showstuff(element){
document.getElementById("from").style.display = element=="in_use"?"visibility":"visible";
document.getElementById("to").style.display = element=="in_use"?"visibility":"hidden";
document.getElementById("from_field").style.display = element=="in_use"?"visibility":"visible";
document.getElementById("to_field").style.display = element=="in_use"?"visibility":"hidden";
document.getElementById("from").style.display = element=="relocated"?"visibility":"visible";
document.getElementById("to").style.display = element=="relocated"?"visibility":"visible";
document.getElementById("from_field").style.display = element=="relocated"?"visibility":"visible";
document.getElementById("to_field").style.display = element=="relocated"?"visibility":"visible";
}
</script>
<table>
<tr>
<td><h2>Add/Edit Parts</h2></td>
</tr>
</table>
<form action="includes/inventory_parts.php" method="post" name="myform">
<table cellpadding="10" style="border:solid 1px #000000">
<tr>
<td colspan="20"><h3>Add New Part</h3></td>
</tr>
<tr>
<td style="font-weight:bold">Printer Man Part#</td>
<td style="font-weight:bold">Part#</td>
<td style="font-weight:bold">Title</td>
<td style="font-weight:bold">Serial#</td>
<td style="font-weight:bold">Status</td>
<td id="from" style="font-weight:bold;visibility:hidden">From Printer Serial#</td>
<td id="to" style="font-weight:bold;visibility:hidden;">To Printer Serial#</td>
<td style="font-weight:bold">Submit</td>
</tr>
<tr>
<td><input type="text" name="printer_man_part_number" /></td>
<td><input type="text" name="part_number" /></td>
<td><input type="text" name="title" /></td>
<td><input type="text" name="this_part_serial_number" /></td>
<td>
<select name="status" onchange="showstuff(this.value);">
<option></option>
<option value="in_use">In Use</option>
<option value="relocated">Relocated</option>
<option value="disposed">Disposed</option>
<option value="selling">Selling</option>
</select>
</td>
<td id="from_field"><input type="text" name="from" style="visibility:hidden" /></td>
<td id="to_field"><input type="text" name="to" style="visibility:hidden" /></td>
<td><input type="submit" name="submit" value="Add Part" /></td>
</tr>
</table>
</form>
function showstuff(element) {
// first hide everything
document.getElementById("from").style.visibility = 'hidden';
document.getElementById("to").style.visibility = 'hidden';
document.getElementById("from_field").style.visibility = 'hidden';
document.getElementById("to_field").style.visibility = 'hidden';
var targets;
// select the IDs that should be unhidden based on element
switch (element) {
case 'in_use': targets = ['from', 'from_field']; break;
case 'relocated': targets = ['to', 'to_field']; break;
...
}
// now unhide the selected IDs.
for (var i = 0; i < targets.length; i++) {
document.getElementById(targets[i]).style.visibility = 'visible';
}
}
I have a wage calculation form that start from retrieving sum of wage from database and then, after user add some extra payment in order to calculate Net wage, save them back to database once again.
My problem was my code is only work to save one record at a time. What I need was to be able to save all records at the same time. So could you please help me.
<%
if Rs.eof then
response.write "<tr><td colspan=""9""> "
call displayNotFoundRecord
response.write "</td></tr>"
Else
Do while Rs.AbsolutePage = strPageCurrent And Not Rs.EOF
dim color
y = n mod 2
if y > 0 then
color = "EFF4FA"
else
color = "ffffff"
end if
if rs.fields.item("if_social_sec") = "True" then
displaytxt = ""
soc_sec_v = soc_sec
else
displaytxt = "none"
soc_sec_v = 0
end if
wage_v = rs.fields.item("Total")
salary_v = rs.fields.item("lb_salary")
if rs.fields.item("lb_type") = "perunit" then
salary_wage = wage_v
displaytxt_w = "readonly class=""bgdisable"""
displaytxt_lb = "readonly class=""bgdisable"""
else
salary_wage = salary_v
displaytxt_w = ""
displaytxt_lb = ""
end if
if_pm = request.form("if_pm")
pm_pay = rs.fields.item("lb_pmPay")
if if_pm <> "" then
if_pm_v = pm_pay
disable_txt_pm = "readonly"
else
if_pm_v = 0
disable_txt_pm = "readonly class=""bgdisable"""
end if
%>
<form name="myform2_<%=n%>" action="salary_action.asp" method="POST">
<tr bgcolor="#<%=color%>">
<td class="btline difcursor" nowrap width="7%"> <%=rs.fields.item("lb_name")%></td>
<td class="btline center" nowrap width="8%"><input type="text" name="working_day" id="working_day" value="<%=rs.fields.item("MaxOfdays")%>" size="7" <%=displaytxt_w%> onFocus="startCalc(this);" onBlur="stopCalc(this);"></td>
<td class="btline " nowrap width="10%"><input type="text" name="wage" id="wage" value="<%=salary_wage%>" onFocus="startCalc(this);" onBlur="stopCalc(this);"></td>
<td class="btline center" nowrap width="8%"><input type="text" name="OT" id="OT" size="7" value="<%=if_OT_v%>" onFocus="startCalc(this);" onBlur="stopCalc(this);" <%=disabled_ot%>></td>
<td class="btline center" nowrap width="6%" ><input type="text" name="OT_rate" id="OT_rate" size="5" value="<%=rs.fields.item("lbOT")%>" <%'=disabled_txt%> readonly class="bgdisable"></td>
<td class="btline center" nowrap width="6%" ><input type="text" name="OT_amt" id="OT_amt" size="5" value="" <%'=disabled_txt%> readonly class="bgdisable"></td>
<td class="btline center" nowrap width="8%" ><input type="text" name="soc_sec" id="soc_sec" size="7" value="<%=soc_sec_v%>" <%=disable_txt_soc%> onFocus="startCalc(this);" onBlur="stopCalc(this);"></td>
<td class="btline center" nowrap width="8%"><input type="text" name="pmPay" id="pmPay" size="7" value="<%=if_pm_v%>" onFocus="startCalc(this);" onBlur="stopCalc(this);" <%'=disable_txt_pm%> readonly class="bgdisable"></td>
<td class="btline" nowrap style="padding-left: 10px" width="8%" ><input type="text" name="ex_pay" id="ex_pay" size="7" onFocus="startCalc(this);" onBlur="stopCalc(this);"></td>
<td class="btline bold " width="10%"><input type="text" name="net_wage" id="net_wage" size="7" readonly class="bgdisable">
<input type="hidden" name="lb_type" id="lb_type" size="7" value="<%=rs.fields.item("lb_type")%>">
<input type="hidden" name="date_from" id="date_from" size="7" value="<%=date_from_txt%>">
<input type="hidden" name="date_to" id="date_to" size="7" value="<%=date_to_txt%>">
<input type="hidden" name="lb_id" id="lb_id" size="7" value="<%=rs.fields.item("lb_id")%>">
<input type="hidden" value="N" name="edit_salary">
</td>
<td class="btline"><input type="text" name="sar_note" value="" size="14"></td>
<td class="btline" > <input type="submit" value="Save1"></td>
</tr>
</form>
<%
Rs.movenext
n = n + 1
Loop
End if
Rs.close
set Rs=nothing
Call DBConnClose()
%>
<tr>
<td colspan="12" align="center" style="padding:10px;">
<input type="submit" value="Save2">
</td>
</tr>
What I need is to make "Save2" work. But right now only "Save1" that work.
Add (my script) :
<script>
var intervals = {};
function startCalc(sender){
var key = sender.form.name;
intervals[key] = setInterval(function() {
calc(key);
},1);
}
function calc(key){
var oForm = document.forms[key];
working_day = oForm.working_day.value;
wage = oForm.wage.value;
lb_type_v = oForm.lb_type.value;
if (lb_type_v == "daily")
{
wage = wage * working_day;
}
else
{
wage = wage;
}
OT_rate = oForm.OT_rate.value;
OT = oForm.OT.value;
OT_amt = OT_rate * OT;
soc_sec = oForm.soc_sec.value;
ex_pay= oForm.ex_pay.value;
pmPay = oForm.pmPay.value;
net_wage = (wage * 1) + (OT_amt * 1) - (soc_sec * 1) + (ex_pay * 1) + (pmPay * 1);
oForm.OT_amt.value = OT_amt;
oForm.net_wage.value = net_wage.toFixed(2);
}
function stopCalc(sender){
var key = sender.form.name;
clearInterval(intervals[key]);
}
</script>
In your loop, you will have to change each input name so that it is unique. You should also change the IDs to make them unique, depending on what you are doing with the IDs, but it's the name that is important if retrieving all of the records values in one go.
Easiest way to do this is to add your database ID to the name and ids.
So, for example, change this line...
<td class="btline center" nowrap width="8%"><input type="text" name="OT" id="OT" size="7" value="<%=if_OT_v%>" onFocus="startCalc(this);" onBlur="stopCalc(this);" <%=disabled_ot%>></td>
...to...
<td class="btline center" nowrap width="8%"><input type="text" name="OT_<%=rs.fields.item("lb_id")%>" id="OT_<%=rs.fields.item("lb_id")%>" size="7" value="<%=if_OT_v%>" onFocus="startCalc(this);" onBlur="stopCalc(this);" <%=disabled_ot%>></td>
(What this does is make each name and id unique by adding an underscore character and the lb_id value from your database.)
Then in the script where you retrieve your values (you didn't post this code so I am not sure what it looks like), you will need to open the same recordset and loop through checking for values.
So before you probably had lines like...
x = Request("OT")
You would instead do something like this...
'Open your recordset
Do while Rs.AbsolutePage = strPageCurrent And Not Rs.EOF
x = Request("OT_" & Rs("lb_id"))
'....all your other requests here
'save to database here etc etc
Loop
Ok, here is your code modified (have a look at the comments to see where I have moved and removed things)...
<!--move form tag outside of table-->
<form name="myform2" action="salary_action.asp" method="POST">
<%
if Rs.eof then
response.write "<tr><td colspan=""9""> "
call displayNotFoundRecord
response.write "</td></tr>"
Else
Do while Rs.AbsolutePage = strPageCurrent And Not Rs.EOF
dim color
y = n mod 2
if y > 0 then
color = "EFF4FA"
else
color = "ffffff"
end if
if rs.fields.item("if_social_sec") = "True" then
displaytxt = ""
soc_sec_v = soc_sec
else
displaytxt = "none"
soc_sec_v = 0
end if
wage_v = rs.fields.item("Total")
salary_v = rs.fields.item("lb_salary")
if rs.fields.item("lb_type") = "perunit" then
salary_wage = wage_v
displaytxt_w = "readonly class=""bgdisable"""
displaytxt_lb = "readonly class=""bgdisable"""
else
salary_wage = salary_v
displaytxt_w = ""
displaytxt_lb = ""
end if
if_pm = request.form("if_pm")
pm_pay = rs.fields.item("lb_pmPay")
if if_pm <> "" then
if_pm_v = pm_pay
disable_txt_pm = "readonly"
else
if_pm_v = 0
disable_txt_pm = "readonly class=""bgdisable"""
end if
%>
<!--form tag moved outside of table-->
<tr bgcolor="#<%=color%>">
<td class="btline difcursor" nowrap width="7%"> <%=rs.fields.item("lb_name")%></td>
<td class="btline center" nowrap width="8%"><input type="text" name="working_day_<%=rs.fields.item("lb_id")%>" id="working_day_<%=rs.fields.item("lb_id")%>" value="<%=rs.fields.item("MaxOfdays")%>" size="7" <%=displaytxt_w%> onFocus="startCalc(<%=rs.fields.item("lb_id")%>);" onBlur="stopCalc(<%=rs.fields.item("lb_id")%>);"></td>
<td class="btline " nowrap width="10%"><input type="text" name="wage_<%=rs.fields.item("lb_id")%>" id="wage_<%=rs.fields.item("lb_id")%>" value="<%=salary_wage%>" onFocus="startCalc(<%=rs.fields.item("lb_id")%>);" onBlur="stopCalc(<%=rs.fields.item("lb_id")%>);"></td>
<td class="btline center" nowrap width="8%"><input type="text" name="OT_<%=rs.fields.item("lb_id")%>" id="OT_<%=rs.fields.item("lb_id")%>" size="7" value="<%=if_OT_v%>" onFocus="startCalc(<%=rs.fields.item("lb_id")%>);" onBlur="stopCalc(<%=rs.fields.item("lb_id")%>);" <%=disabled_ot%>></td>
<td class="btline center" nowrap width="6%" ><input type="text" name="OT_rate_<%=rs.fields.item("lb_id")%>" id="OT_rate_<%=rs.fields.item("lb_id")%>" size="5" value="<%=rs.fields.item("lbOT")%>" <%'=disabled_txt%> readonly class="bgdisable"></td>
<td class="btline center" nowrap width="6%" ><input type="text" name="OT_amt_<%=rs.fields.item("lb_id")%>" id="OT_amt_<%=rs.fields.item("lb_id")%>" size="5" value="" <%'=disabled_txt%> readonly class="bgdisable"></td>
<td class="btline center" nowrap width="8%" ><input type="text" name="soc_sec_<%=rs.fields.item("lb_id")%>" id="soc_sec_<%=rs.fields.item("lb_id")%>" size="7" value="<%=soc_sec_v%>" <%=disable_txt_soc%> onFocus="startCalc(<%=rs.fields.item("lb_id")%>);" onBlur="stopCalc(<%=rs.fields.item("lb_id")%>);"></td>
<td class="btline center" nowrap width="8%"><input type="text" name="pmPay_<%=rs.fields.item("lb_id")%>" id="pmPay_<%=rs.fields.item("lb_id")%>" size="7" value="<%=if_pm_v%>" onFocus="startCalc(<%=rs.fields.item("lb_id")%>);" onBlur="stopCalc(<%=rs.fields.item("lb_id")%>);" <%'=disable_txt_pm%> readonly class="bgdisable"></td>
<td class="btline" nowrap style="padding-left: 10px" width="8%" ><input type="text" name="ex_pay_<%=rs.fields.item("lb_id")%>" id="ex_pay_<%=rs.fields.item("lb_id")%>" size="7" onFocus="startCalc(<%=rs.fields.item("lb_id")%>);" onBlur="stopCalc(<%=rs.fields.item("lb_id")%>);"></td>
<td class="btline bold " width="10%"><input type="text" name="net_wage_<%=rs.fields.item("lb_id")%>" id="net_wage_<%=rs.fields.item("lb_id")%>" size="7" readonly class="bgdisable">
<input type="hidden" name="lb_type_<%=rs.fields.item("lb_id")%>" id="lb_type_<%=rs.fields.item("lb_id")%>" size="7" value="<%=rs.fields.item("lb_type")%>">
<input type="hidden" name="date_from_<%=rs.fields.item("lb_id")%>" id="date_from_<%=rs.fields.item("lb_id")%>" size="7" value="<%=date_from_txt%>">
<input type="hidden" name="date_to_<%=rs.fields.item("lb_id")%>" id="date_to_<%=rs.fields.item("lb_id")%>" size="7" value="<%=date_to_txt%>">
<input type="hidden" name="lb_id_<%=rs.fields.item("lb_id")%>" id="lb_id_<%=rs.fields.item("lb_id")%>" size="7" value="<%=rs.fields.item("lb_id")%>">
<input type="hidden" value="N" name="edit_salary_<%=rs.fields.item("lb_id")%>">
</td>
<td class="btline"><input type="text" name="sar_note" value="" size="14"></td>
<td class="btline" > <!--submit button removed--></td>
</tr>
<!--form tag removed-->
<%
Rs.movenext
n = n + 1
Loop
End if
Rs.close
set Rs=nothing
Call DBConnClose()
%>
<tr>
<td colspan="12" align="center" style="padding:10px;">
<input type="submit" value="Save2">
</td>
</tr>
<!--move form tag after end of table-->
</form>
...and your JavaScript (I just did it in Notepad so hopefully it works)...
<script>
var intervals = {};
function startCalc(key){
intervals[key] = setInterval(function() {
calc(key);
},1);
}
function calc(key){
// var oForm = document.forms[key];
working_day = document.getElementById("working_day_" + key).value; //oForm.working_day.value;
wage = document.getElementById("wage_" + key).value; //oForm.wage.value;
lb_type_v = document.getElementById("lb_type_" + key).value; //oForm.lb_type.value;
if (lb_type_v == "daily")
{
wage = wage * working_day;
}
else
{
wage = wage;
}
OT_rate = document.getElementById("OT_rate_" + key).value; //oForm.OT_rate.value;
OT = document.getElementById("OT_" + key).value; //oForm.OT.value;
OT_amt = OT_rate * OT;
soc_sec = document.getElementById("soc_sec_" + key).value; //oForm.soc_sec.value;
ex_pay= document.getElementById("ex_pay_" + key).value; //oForm.ex_pay.value;
pmPay = document.getElementById("pmPay_" + key).value; //oForm.pmPay.value;
net_wage = (wage * 1) + (OT_amt * 1) - (soc_sec * 1) + (ex_pay * 1) + (pmPay * 1);
document.getElementById("OT_amt_" + key).value = OT_amt; //oForm.OT_amt.value = OT_amt;
document.getElementById("net_wage_" + key).value = net_wage.toFixed(2); //oForm.net_wage.value = net_wage.toFixed(2);
}
function stopCalc(key){
clearInterval(intervals[key]);
}
</script>
You will also need to modify the page that your form submits to. Hopefully you can do this using the instructions I gave above???
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.