Filling multiple textboxes using javascript - javascript

Javascript rookie here. I have a small page with a first name/last name and a lookup/clear button. The page then has 15 textboxes below.
I would like for the user to be able to search for the first and last name, and fill up the next empty textbox.
Currently the user can search for a person, and fill the first textbox, but if they search again....it will just replace what is in the first textbox. Here is my relevant code:
<form name="isForm" action="">
<table width="75%" border="0" cellspacing="0">
<tr>
<td colspan="4" class="columnHeaderClass">Search for ID by Name</td>
</tr>
<tr>
<td>Last Name:
<input type="hidden" id=queryType name=queryType value="P" />
<input type="text" size="20" autocomplete="off" id="searchField" name="searchField" />
</td>
<td>First Name:
<input type="text" size="20" autocomplete="off" id="firstField" name="firstField" />
</td>
<td align="center" valign="bottom">
<input id="submit_btn" type="button" value="Lookup/Clear" class="buttonStyle"
onclick="initFieldsDivs(document.isForm.searchField, document.isForm.nameField, document.isForm.idField, document.isForm.firstField);
document.getElementById('nameField').innerHTML='';
this.disabled = true;
doCompletion();" >
</td>
<td><div id="nameField"></div></td>
</tr>
<tr>
<td colspan="4">
<table id="completeTable" border="1" bordercolor="black" cellpadding="0" cellspacing="0">
</table>
</td>
</tr>
<td colspan="3"> </td>
</tr>
</table>
<table width="75%" border="0" cellspacing="0">
<tr>
<td colspan="3" class="columnHeaderClass">ID(s)</td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td align="right"><input name="Student_ID" type="text" id="idField" /></td>
<td align="center"><input name="Student_ID1" type="text" id="idField1" /></td>
<td align="left"><input name="Student_ID2" type="text" id="idField2" /></td>
</tr>
<tr>
<td align="right"><input name="Student_ID3" type="text" id="idField3" /></td>
<td align="center"><input name="Student_ID4" type="text" id="idField4" /></td>
<td align="left"><input name="Student_ID5" type="text" id="idField5" /></td>
</tr>
<tr>
<td align="right"><input name="Student_ID6" type="text" id="idField6" /></td>
<td align="center"><input name="Student_ID7" type="text" id="idField7" /></td>
<td align="left"><input name="Student_ID8" type="text" id="idField8" /></td>
</tr>
<tr>
<td align="right"><input name="Student_ID9" type="text" id="idField9" /></td>
<td align="center"><input name="Student_ID10" type="text" id="idField10" /></td>
<td align="left"><input name="Student_ID11" type="text" id="idField11" /></td>
</tr>
<tr>
<td align="right"><input name="Student_ID12" type="text" id="idField12" /></td>
<td align="center"><input name="Student_ID13" type="text" id="idField13" /></td>
<td align="left"><input name="Student_ID14" type="text" id="idField14" /></td>
</tr>
<tr>
<td colspan="3">
<div class="submit">
<input type="submit" name="SUBMIT" value="SUBMIT" accesskey="S">
</div>
</td>
</tr>
</table>
So the small amount of javascript that is written.... initFieldDivs() grabs the id of whoever was chosen and puts it into the first textbox (I would like to solve this without changing this function). So, is there anyway to move on to the next textbox when the first is full? thanks in advance, and please ask if you have questions, I know this is confusing.

I think you want something like
function fillNextEmptyTb() {
var allInputs = document.getElementsByTagName("input");
for (var i = 0; i < allInputs.length; i++)
if (allInputs[i].type === "text" && allInputs[i].value == "") {
allInputs[i].value = "whatever you want";
return;
}
}
Or the jQuery way, if you're using it, or plan to try it:
var nextEmpty = $('input:text[value=""]')[0];
$(nextEmpty).val("whatever you want");

Related

Access HTML input array field via javascript

The following HTML code references javascript to update another input field in the same row based on calculated values. I can't seem to reference the HTML field as it is coming back undefined. The issue is that the HTML input array value is NAME[EmployeeID] so I'm passing the EmployeeID to the function in order to reference the correct HTML field. Just can't seem to figure out how to format the innerHTML command.
<script language="javascript"><!--
function updateAdvance(eWorked, eID, AdvanceAmt, eRate) {
if (AdvanceAmt > 0) {
var ePay = eWorked * eRate;
if (ePay < AdvanceAmt) {
document.getElementById(Amt2Adv[eID]).innerHTML = AdvanceAmt.toFixed(2);
} else {
document.getElementById(Amt2Adv[eID]).innerHTML = ePay.toFixed(2);
}
}
}
//--></script>
HTML Code
<tr>
<td colspan="10"><form name="compensation" action="https://somewhere.com/something.php?date=2018-11-09&action=compensation" method="post"><table border="0" width="100%" cellspacing="0" cellpadding="2">
<tr>
<td class="contentHeading" align="center" colspan="8"><b>Compensation</b></td>
</tr>
<tr>
<td align="center"><b>Select</b></td>
<td align="center"><b>Employee</b></td>
<td align="center"><b>Type</b></td>
<td align="center"><b>Period</b></td>
<td align="center"><b>Amount</b></td>
<td align="center"><b>Worked</b></td>
<td align="center"><b>Amt->Adv</b></td>
<td align="center"><b>Advance</b></td>
<td align="center"><b>GiftCard</b></td>
</tr>
<tr>
<td align="center"><input type="checkbox" name="employee[4]" value="1" CHECKED></td>
<td align="center">Joe Fabitz</td>
<td align="center">Cash</td>
<td align="center">Hourly</td>
<td align="center">$10.00</td>
<td align="center"><input type="text" name="worked[4]" value="8.00" size="3" onKeyUp="updateAdvance(this.value, '4','30.00','10.00')"><input type="hidden" name="period[4]" value="1"></td>
<td align="center">$<input type="text" name="amt2adv[4]" value="0.00" size="4"></td>
<td align="center">$<input type="text" name="advance[4]" value="0.00" size="4"></td>
<td align="center">0</td>
</tr>
<tr>
<td align="center"><input type="checkbox" name="employee[3]" value="1" CHECKED></td>
<td align="center">Jane Fabitz</td>
<td align="center">Cash</td>
<td align="center">Hourly</td>
<td align="center">$10.00</td>
<td align="center"><input type="text" name="worked[3]" value="8.00" size="3" onKeyUp="updateAdvance(this.value, '3','100.00','10.00')"><input type="hidden" name="period[3]" value="1"></td>
<td align="center">$<input type="text" name="amt2adv[3]" value="20.00" size="4"></td>
<td align="center">$<input type="text" name="advance[3]" value="0.00" size="4"></td>
<td align="center">0</td>
</tr>
<tr>
<td align="center" colspan="8"><button type="submit" name="" class="css3button">Save</button> <button type="button" name="" class="css3button">Cancel</button></td>
</tr>
</table></form></td>
</tr>
If you want to select an element with getElementById, you will need an element that has an id attribute as mentioned by CertainPerformance in the comment.
If you wish to get the elements by their name, you can use
document.querySelector which returns the first element that matches the provided query, or
document.getElementsByName which returns all the elements with the supplied name
To set the display value of inputs, you will need to set the value of your input, not innerHTML.
Also, String does not have toFixed method, you will need to parse AdvanceAmt to Number first.
function updateAdvance(eWorked, eID, AdvanceAmt, eRate) {
AdvanceAmt = parseFloat(AdvanceAmt);
if (AdvanceAmt > 0) {
var ePay = eWorked * eRate;
var selector = `input[name="amt2adv\[${eID}\]"]`;
if (ePay < AdvanceAmt) {
document.querySelector(selector).value = AdvanceAmt.toFixed(2);
} else {
document.querySelector(selector).value = ePay.toFixed(2);
}
}
}
<table>
<tr>
<td colspan="10"><form name="compensation" action="https://somewhere.com/something.php?date=2018-11-09&action=compensation" method="post"><table border="0" width="100%" cellspacing="0" cellpadding="2">
<tr>
<td class="contentHeading" align="center" colspan="8"><b>Compensation</b></td>
</tr>
<tr>
<td align="center"><b>Select</b></td>
<td align="center"><b>Employee</b></td>
<td align="center"><b>Type</b></td>
<td align="center"><b>Period</b></td>
<td align="center"><b>Amount</b></td>
<td align="center"><b>Worked</b></td>
<td align="center"><b>Amt->Adv</b></td>
<td align="center"><b>Advance</b></td>
<td align="center"><b>GiftCard</b></td>
</tr>
<tr>
<td align="center"><input type="checkbox" name="employee[4]" value="1" CHECKED></td>
<td align="center">Joe Fabitz</td>
<td align="center">Cash</td>
<td align="center">Hourly</td>
<td align="center">$10.00</td>
<td align="center"><input type="text" name="worked[4]" value="8.00" size="3" onKeyUp="updateAdvance(this.value, '4','30.00','10.00')"><input type="hidden" name="period[4]" value="1"></td>
<td align="center">$<input type="text" name="amt2adv[4]" value="0.00" size="4"></td>
<td align="center">$<input type="text" name="advance[4]" value="0.00" size="4"></td>
<td align="center">0</td>
</tr>
<tr>
<td align="center"><input type="checkbox" name="employee[3]" value="1" CHECKED></td>
<td align="center">Jane Fabitz</td>
<td align="center">Cash</td>
<td align="center">Hourly</td>
<td align="center">$10.00</td>
<td align="center"><input type="text" name="worked[3]" value="8.00" size="3" onKeyUp="updateAdvance(this.value, '3','100.00','10.00')"><input type="hidden" name="period[3]" value="1"></td>
<td align="center">$<input type="text" name="amt2adv[3]" value="20.00" size="4"></td>
<td align="center">$<input type="text" name="advance[3]" value="0.00" size="4"></td>
<td align="center">0</td>
</tr>
<tr>
<td align="center" colspan="8"><button type="submit" name="" class="css3button">Save</button> <button type="button" name="" class="css3button">Cancel</button></td>
</tr>
</table></form></td>
</tr>
</table>

Change background Color for group radio inputs

Problem I have a form that the user fills out (basic things like your name, phone number, email, etc). It has a question that asks the user if you want your suggestion to remain anonymous and the user either selects yes or no.
The following image is what I am talking about:
If the user does not select either of the selections and submits the form, a alert box appears notifying the user to select one.
I am able to color a single radio selection red if the user has not selected either of them. I am able to color both radio selections red like the following:
And here is the function that checks whether or not either of those radio buttons have been selected:
myOption = -1;
for ( i=0; i < SubmitIdea.Anonymous.length; i++ ) {
if ( SubmitIdea.Anonymous[i].checked ) {
myOption = i;
}
}
if ( myOption == -1 ) {
alert( "Do you wish to remain anonymous?" );
SubmitIdea.Anonymous[0].focus();
SubmitIdea.Anonymous[0].style.backgroundColor = "red";
SubmitIdea.Anonymous[1].focus();
SubmitIdea.Anonymous[1].style.backgroundColor = "red";
return false;
}
However, I would like the rectangular background border surrounding both the Yes and No radio selection, not individually. This rectangular border will only occur if neither radio selection has been choosen when the user has submitted their results.
The following is the html:
<form name="SubmitIdea" method="POST" class="h">
<table Border="0" align="center">
<tr>
<td colspan="5"> </td>
</tr>
<cfoutput>
<tr>
<td class="m">Name: </font></td>
<td nowrap="nowrap" class="r">
<input type="text" name="Name" value="" class="a" maxlength="32">
</td>
<td width="50"> </td>
<td class="mm">Today's Date: </font></td>
<td class="mm">#TodaysDt#</td></tr>
</tr>
<tr>
<td class="mm">Department: </font></td>
<td nowrap="nowrap" class="r">
<input type="text" name="Department" value="" class="a" maxlength="32">
</td>
<td width="50"> </td>
<td class="mm">Supervisor Name: </font></td>
<td nowrap="nowrap" class="r">
<input type="text" name="Supervisor" value="" class="a" maxlength="32">
</tr>
<tr>
<td class="mm">Email: </font></td>
<td nowrap="nowrap" class="r">
<input type="text" name="NomEmail" value="" class="a" maxlength="32" size="25"> <br />
</td>
<td width="50"> </td>
<td class="mm">Phone: </font></td>
<td nowrap="nowrap" class="r">
<input type="text" name="Phone" value="" class="a" maxlength="32">
</tr>
</table>
<table border="0" width="500" align="center">
<tr>
<td class="c" align="center">
Your name will be shared and published along with your suggestion unless you want to remain anonymous. Do you wish to remain anonymous? <input type="radio" name="Anonymous" value="Yes"> <strong>Yes</strong> <input type="radio" value="No" name="Anonymous"> <strong>No</strong>
</td>
</tr>
</table>
</cfoutput>
<table border="0" align="center">
<tr>
<td colspan="5" class="r"><strong>Please provide a brief summary of your idea:</strong></td>
</tr>
</table>
<table border="0" align="center">
<tr>
<td colspan="5"></td>
</tr>
<tr>
<td colspan="5">
<textarea name="reason" id="textarea1" cols="6" maxlength="500" class="c"
style="background-color: transparent; color:##000000; font-size:14px;"
onFocus="clearTxt(this)" onkeydown="limitTxtArea(this); cntTxt(this, 500, 'cnt');" onkeyup="limitTxtArea(this); cntTxt(this, 500, 'cnt');"></textarea>
<span id="cnt" style="color:##FF0000">500</span> character(s) remaining.<br /></td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
</table>
<table border="0" align="center">
<tr>
<td colspan="5" class="r"><strong>I believe this suggestion will: (check all that apply)</strong></td>
</tr>
</table>
<table border="0" align="center">
<tr>
<td class="e"><input type="checkbox" name="Sugg1" value="Improve Productivity/Quality">Improve Productivity/Quality </font></td>
<td colspan="4"> </td>
<td class="e"><input type="checkbox" name="Sugg2" value="Improve Process">Improve Process </font></td>
</tr>
<tr>
<td class="e"><input type="checkbox" name="Sugg3" value="Increase Revenue">Increase Revenue </font></td>
<td colspan="4"> </td>
<td class="e"><input type="checkbox" name="Sugg4" value="Decrease Expenses/Costs">Decrease Expenses/Costs </font></td>
</tr>
<tr>
<td class="e"><input type="checkbox" name="Sugg5" value="Improve safety in the workplace">Improve safety in the workplace </font></td>
<td colspan="4"> </td>
<td class="e"><input type="checkbox" name="Sugg6" value="Improve Customer Service">Improve Customer Service </font></td>
</tr>
<tr>
<td class="e"><input type="checkbox" name="Sugg7" value="Enhance employee satisfaction / corporate culture">Enhance employee satisfaction/<br>corporate culture </font></td>
<td colspan="4"> </td>
<td class="e"><input type="checkbox" name="Sugg0" value="Other">Other <input type="text" name="OtherSuggest" value="" class="a" maxlength="32"></font></td>
</tr>
</table>
<table border="0" align="center">
<tr>
<td colspan="5" class="r"><strong>Possible challenges to implementation:</strong></td>
</tr>
</table>
<table border="0" align="center">
<tr>
<td colspan="5">
<textarea name="reasontwo" id="textarea2" cols="6" maxlength="500" class="c"
style="background-color: transparent; color:##000000; font-size:14px;"
onFocus="clearTxtTwo(this)" onkeydown="limitTxtAreaTwo(this); cntTxtTwo(this, 500, 'cnttwo');" onkeyup="limitTxtAreaTwo(this); cntTxtTwo(this, 500, 'cnttwo');"></textarea>
<span id="cnttwo" style="color:##FF0000">500</span> character(s) remaining.<br /></td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
</table>
<table border="0" align="center">
<tr>
<td colspan="5" class="r"><strong>What metrics could be used to track results?</strong></td>
</tr>
</table>
<table border="0" align="center">
<tr>
<td colspan="5">
<textarea name="reasonthree" id="textarea3" cols="6" maxlength="500" class="c"
style="background-color: transparent; color:##000000; font-size:14px;"
onFocus="clearTxtThree(this)" onkeydown="limitTxtAreaThree(this); cntTxtThree(this, 500, 'cntthree');" onkeyup="limitTxtAreaThree(this); cntTxtThree(this, 500, 'cntthree');"></textarea>
<span id="cntthree" style="color:##FF0000">500</span> character(s) remaining.<br /><br /></td>
</tr>
</table>
<br />
<table align="center">
<TR>
<TD align="center"><input type="button" value=" Submit " onClick="SubmitMe()" name="SubmitIdeaBtn" style="font-size:14px; font-family:Arial, Helvetica, sans-serif">
</td>
</tr>
</table>
</form>
Thank You
UPDATE
The following is what I did:
document.addEventListener("DOMContentLoaded", function(event) {
document.addEventListener("click", function(clickEvent) {
if (clickEvent.target.id == 'check') {
var anonymousInputs = document.getElementsByName('Anonymous');
var anonymousContainer = document.getElementById('anonymousContainer');
var anonymousSelected = Array.prototype.find.call(anonymousInputs,function(radioInput) {return radioInput.checked;});
if (anonymousSelected) {
anonymousContainer.className = '';
}
else {
if (anonymousContainer) {
alert( "Do you wish to remain anonymous?" );
anonymousContainer.className += 'borderedContainer';
}
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table border="0" width="500" align="center">
<tr>
<td class="c" align="center">
<div>
Your name will be shared and published along with your suggestion unless you want to remain anonymous. Do you wish to remain anonymous? <span id="anonymousContainer"><input type="radio" name="Anonymous" value="Yes"> <strong>Yes</strong>
<input type="radio" value="No" name="Anonymous">
<strong>No</strong>
</span>
</div>
</td>
</tr>
</table>
<table align="center">
<TR>
<TD align="center"><input id="check" type="button" value=" Submit " onClick="SubmitMe()" name="SubmitIdeaBtn" style="font-size:14px; font-family:Arial, Helvetica, sans-serif">
</td>
</tr>
</table>
So I am not sure what I am doing wrong.
You can put the radio buttons in a container (e.g. a span) and then set the border on the container. See the example below, after clicking the button labeled check.
The snippet uses the hex value for red but feel free to adjust to a different value. Using 'red' as the value may produce varying results across browsers/Operating systems. For more information, refer to the MDN color page.
The snippet also uses Array.find() to determine if any of the radio inputs are checked.
Note:
I originally utilized document.addEventListener() for event delegation and to wait until the DOM was loaded but the OP is using IE 8 or earlier and had issues with that, so I removed that code.
function checkAnonymousSelected(clickEvent) {
var anonymousInputs = document.getElementsByName('Anonymous');
var anonymousContainer = document.getElementById('anonymousContainer');
var anonymousSelected = Array.prototype.find.call(anonymousInputs, function(radioInput) {
return radioInput.checked;
});
if (anonymousSelected) {
anonymousContainer.className = '';
} else {
if (anonymousContainer) {
anonymousContainer.className += 'borderedContainer';
}
}
}
//support IE 8- for OP so do this instead of using document.attachEventListener
//to wait until the DOM is ready and attach event listeners to the buttons...
document.getElementById('check').onclick = checkAnonymousSelected;
document.getElementById('anonymousYes').onclick = checkAnonymousSelected;
document.getElementById('anonymousNo').onclick = checkAnonymousSelected;
.borderedContainer {
border: 3px solid #ff0000;
}
<div>
Your name will be shared and published along with your suggestion unless you want to remain anonymous. Do you wish to remain anonymous? <span id="anonymousContainer"><input type="radio" name="Anonymous" value="Yes" id="anonymousYes" > <strong>Yes</strong>
<input type="radio" value="No" name="Anonymous" id="anonymousNo" >
<strong>No</strong>
</span>
</div>
<button id="check">check</button>

javascript regular expression replace html attribute except some tag

I want use regular expression to replace html attribute ng-model='model.xxx' to ng-model='model.newname.xxx', but I don't need replace attribute between <tbody>
<tr class='template' ng-repeat='model in model.child'></tr></tbody>;
<table width="592" height="842" border="1" align="center">
<tr>
<td align="center" colspan="2" width="16%">serve_resource_name</td>
<td colspan="8"><input class="text" name="serve_resource_name" type="text" ng-model="model.serve_resource_name" id="serve_resource_name" title="serve_resource_name" value="" maxlength="" plugins="text" fallowblank="false" datatype="text"/></td>
</tr>
<tr>
<td align="center" rowspan="4" width="8%">clinet</td>
<td align="center" style="width:8%">system</td>
<td colspan="3"><input class="text" name="system" type="text" ng-model="model.system" id="system" title="系统" value="" maxlength="" plugins="text" fallowblank="false" datatype="text"/></td>
<td align="center" colspan="2" width="16%">IP</td>
<td colspan="3"><input class="text" name="ip" type="text" ng-model="model.ip" id="ip" title="IP" value="" maxlength="" plugins="text" fallowblank="false" datatype="text"/></td>
</tr>
<tr>
<td align="center">username</td>
<td colspan="3"><input class="text" name="username" type="text" ng-model="model.username" id="username" title="用户名" value="" maxlength="" plugins="text" fallowblank="false" datatype="text"/></td>
<td align="center" colspan="2" width="16%">password</td>
<td colspan="3"><input class="text" name="password" type="text" ng-model="model.password" id="password" title="密码" value="" maxlength="" plugins="text" fallowblank="false" datatype="text"/></td>
</tr>
<tr>
<td align="center" width="16%">time_limit</td>
<td colspan="8"><input class="text" name="time_limit" type="text" ng-model="model.time_limit" id="time_limit" title="期限" value="" maxlength="" plugins="text" fallowblank="false" datatype="text"/></td>
</tr>``
<tr>
<td align="center" width="8%" height="150px">flow control</td>
<td colspan="9" style="padding:0; vertical-align:top;">
<div style="overflow:auto; height:150px;">
<table id="697e5afad8e540659efb412ea0347b5d" name="flowControl" fnote="flow control" fdatatype="1" plugins="childtable" border="1" cellspacing="0" cellpadding="0">
<thead>
<tr class="firstRow">
<td align="center" width="24%">time_quantum</td>
<td align="center" width="24%">interval</td>
<td align="center" width="24%">time_interval_min</td>
<td align="center" width="24%">visit_count_limit</td>
<td align="center" ><div class="img-add" ng-click="imgAdd('model.table')"></div></td>
</tr>
</thead>
<tbody>
<tr class="template" ng-repeat="model in model.child">
<td ><input name="time_start" type="text" ng-model="model.time_start" id="time_start" title="time_start" value="" maxlength="" placeholder="8:00"/>-<input name="time_end" type="text" ng-model="model.time_end" id="time_end" title="time_end" value=""placeholder="22:00"/></td>
<td ><input name="time_interval_count" type="text" ng-model="model.time_interval_count" id="time_interval_count" title="time_interval_count" value="" /></td>
<td ><input class="text" name="visit_count_limit" type="text" ng-model="model.visit_count_limit" id="visit_count_limit" title="visit_count_limit" value="" "/></td>
<td ><input class="text" name="visit_flux_limit" type="text" ng-model="model.visit_flux_limit" id="visit_flux_limit" title="visit_flux_limit" value="" /></td>
</tr>
</tbody>
</table></div>
</td>
</tr>
<tr>
<td align="center" width="8%">remark</td>
<td colspan="9">
<div class="word-text"><textarea class="bor" id="remark" name="remark" ng-model="model.remark" title="remark" maxlength="" plugins="textarea" fallowblank="false"></textarea></div>
</td>
</tr>
</table>`

How to hide elements depending on the state of radio buttons with Javascript

I have a data entry form on my site which contains multiple checkboxes, two radio buttons and a text fields. I want to make the text field show if "cheque" radio buttons is selected and hide that text box with value of Cheque text box's if "cash" radio button is selected.
The radio buttons and text area are as follows:
<tr>
<td valign="top" width="300">Balance Amount:</td>
<td valign="top" width="300" align="left">
<input type="number" class="k-textbox" name="balance_amount" id="balance_amount" placeholder="" size="30" value=" <?php echo $balance_amount; ?>" readonly ></input>
</td>
</tr>
<tr>
<td valign="top" width="300">Mode Of Payement :</td>
<td valign="top" width="300" align="left">
Cheque :<input type="radio" name="mode_of_payment" id="cheq" value="1" >
Cash :<input type="radio" name="mode_of_payment" id="cash" value="2" checked >
</td>
</tr>
<tr id="bankName">
<td valign="top" width="300">Bank Name :</td>
<td valign="top" width="300" align="left">
<input type="text" class="k-textbox" name="bank_name" id="bank_name" placeholder=""/>
</td>
</tr>
<tr id="branch">
<td valign="top" width="300">Branch :</td>
<td valign="top" width="300" align="left">
<input type="text" class="k-textbox" name="branch_name" id="branch_name" placeholder="" />
</td>
</tr>
<tr id="Acc_No">
<td valign="top" width="300">Account No :</td>
<td valign="top" width="300" align="left">
<input type="text" class="k-textbox" name="account_no" id="account_no" placeholder="" />
</td>
</tr>
<tr id="chq_no">
<td valign="top" width="300">Cheque No</td>
<td valign="top" width="300" align="left">
<input type="number" id="cheque_number" name="cheque_number" class="k-textbox" placeholder="Enter Cheque No" /></td>
</tr>
<tr id="chq_date">
<td valign="top" width="300">Cheque Date</td>
<td valign="top" width="300" align="left">
<input id="cheque_date" name="cheque_date" value="<?php echo $cheque_date; ?>" type="text" ></input></td>
</tr>
<tr id="pay_at">
<td valign="top" width="300">Payable At</td>
<td valign="top" width="300" align="left">
<input id="payable_at" name="payable_at" class="k-textbox" type="text" ></input></td>
</tr>
<tr>
<td valign="top" width="300">Paid Amount</td>
<td valign="top" width="300" align="left">
<input type="number" id="paid_amount" name="paid_amount" class="k-textbox" placeholder="Enter Digit" required validationMessage="Please Enter the Amount"/></td>
</tr>
<tr>
<td valign="top" width="300">Amount In Words</td>
<td valign="top" width="300" align="left">
<input type="number" id="amount_in_words" name="amount_in_words" class="k-textbox" placeholder="Enter Words" required validationMessage="Please Enter Amount In Words"/></td>
</tr>
Try a change handler for the radio buttons.
Also add a class cheque to the cheque specific rows like
<tr id="chq_no" class="cheque">
<td valign="top" width="300">Cheque No</td>
<td valign="top" width="300" align="left">
<input type="number" id="cheque_number" name="cheque_number" class="k-textbox" placeholder="Enter Cheque No" /></td>
</tr>
<tr id="chq_date" class="cheque">
<td valign="top" width="300">Cheque Date</td>
<td valign="top" width="300" align="left">
<input id="cheque_date" name="cheque_date" value="<?php echo $cheque_date; ?>" type="text" ></input></td>
</tr>
then
jQuery(function(){
$('input[name="mode_of_payment"]').change(function(){
$('.cheque').toggle(this.checked && this.value==1)
}).change()
})
Demo: Fiddle
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$("#chq_no").hide();
$("#chq_date").hide();
$(":radio").click(function(e) {
switch($(this).val()){
case "1":
$("#chq_no").show();
$("#chq_date").show();
break;
case "2":
$("#chq_no").hide();
$("#chq_date").hide();
break;
}
});
});
</script>
</head>
<body>
<table>
<tr>
<td valign="top" width="300">Balance Amount:</td>
<td valign="top" width="300" align="left">
<input type="number" class="k-textbox" name="balance_amount" id="balance_amount" placeholder="" size="30" value=" <?php echo $balance_amount; ?>" readonly ></input>
</td>
</tr>
<tr>
<td valign="top" width="300">Mode Of Payement :</td>
<td valign="top" width="300" align="left">
Cheque :<input type="radio" name="mode_of_payment" id="cheq" value="1" >
Cash :<input type="radio" name="mode_of_payment" id="cash" value="2" checked >
</td>
</tr>
<tr id="bankName">
<td valign="top" width="300">Bank Name :</td>
<td valign="top" width="300" align="left">
<input type="text" class="k-textbox" name="bank_name" id="bank_name" placeholder=""/>
</td>
</tr>
<tr id="branch">
<td valign="top" width="300">Branch :</td>
<td valign="top" width="300" align="left">
<input type="text" class="k-textbox" name="branch_name" id="branch_name" placeholder="" />
</td>
</tr>
<tr id="Acc_No">
<td valign="top" width="300">Account No :</td>
<td valign="top" width="300" align="left">
<input type="text" class="k-textbox" name="account_no" id="account_no" placeholder="" />
</td>
</tr>
<tr id="chq_no">
<td valign="top" width="300">Cheque No</td>
<td valign="top" width="300" align="left">
<input type="number" id="cheque_number" name="cheque_number" class="k-textbox" placeholder="Enter Cheque No" /></td>
</tr>
<tr id="chq_date">
<td valign="top" width="300">Cheque Date</td>
<td valign="top" width="300" align="left">
<input id="cheque_date" name="cheque_date" value="<?php echo $cheque_date; ?>" type="text" ></input></td>
</tr>
<tr id="pay_at">
<td valign="top" width="300">Payable At</td>
<td valign="top" width="300" align="left">
<input id="payable_at" name="payable_at" class="k-textbox" type="text" ></input></td>
</tr>
<tr>
<td valign="top" width="300">Paid Amount</td>
<td valign="top" width="300" align="left">
<input type="number" id="paid_amount" name="paid_amount" class="k-textbox" placeholder="Enter Digit" required validationMessage="Please Enter the Amount"/></td>
</tr>
<tr>
<td valign="top" width="300">Amount In Words</td>
<td valign="top" width="300" align="left">
<input type="number" id="amount_in_words" name="amount_in_words" class="k-textbox" placeholder="Enter Words" required validationMessage="Please Enter Amount In Words"/></td>
</tr>
</table>
</body>
</html>
Try This
$(document).ready(function () {
$('input[name=mode_of_payment]').change(function () {
$('#chq_no').toggle(this.checked && this.value == 1);
$('#chq_date').toggle(this.checked && this.value == 1);
}).change();
});
i think you have to try show() and hide() function of java script and also use Css property like display:block and display:hidden for hide and show text box.
#namrata shrivas

JS trouble in computing a value from a table column and writing to another, from text input to textarea

I can't find what is wrong in my code, as it does nothing...
my js has:
function calc()
{
for(i=1;i<=4;i++)
{
document.getElementById("cost"+i).value= (document.getElementById("pret"+i).value*document.getElementById("cant"+i).value)*1.24;
document.biblioteca.total.value+=document.getElementById("cost"+i).value;
}
}
and the html is:
<form name="biblioteca">
<table width=600 border="3">
<tr>
<th width="50%">Carte</th>
<th width="15%">Pret</th>
<th width="15%">Cantitate</th>
<th>Cost(TVA inclus)</th>
</tr>
<tr>
<td>Manuscrisul gasit la Accra - Paulo Coelho</td>
<td id="pret1" value="20">20</td>
<td><input type="text" value="" id="cant1"></td>
<td><textarea name="cost1" id="cost1" rows="1" value=""></textarea></td>
</tr>
<tr>
<td>Poarta coliviei - Katie Hickman</td>
<td id="pret2" value="10">10</td>
<td><input type="text" value="" id="cant2"></td>
<td><textarea name="cost2" id="cost2" rows="1" value=""></textarea></td>
</tr>
<tr>
<td>Cincizeci de umbre ale lui Grey - E.L. James </td>
<td id="pret3" value="44">44</td>
<td><input type="text" value="" id="cant3"></td>
<td><textarea name="cost3" id="cost3" rows="1" value=""></textarea></td>
</tr>
<tr>
<td>Ciresarii. Vol.2: Castelul Fetei In Alb - Constantin Chirita</td>
<td id="pret4" value=6>6</td>
<td><input type="text" value="" id="cant4"></td>
<td><textarea name="cost4" id="cost4" rows="1" value=""></textarea></td>
</tr>
<tr>
<td colspan=2></td>
<td>Total:</td>
<td><textarea name="total" rows="1" readonly value=""></textarea></td>
</tr>
</table>
<input type="button" name="calc" value="Caluleaza" onclick="calc()">
</form>
It should take the value from the second column, multiply it by the third column, and then by 1.24, and write the result in the forth column. then, this result should be summarized in the last column, of the last row, the total. but it does nothing. i tried different ways, stopped at this one because was the first that came in mind. I also tried assigning object=document.getElementById("cost"+i) then use object.value, but it's the same thing, and it does not work. I can'n find what's wrong.
After comments, whole html looks like this:
<html>
<head>
<script type="text/javascript">
function calculate()
{
document.biblioteca.total.value = 0;
for(i=1;i<=4;i++)
{
document.getElementById("cost"+i).value= (parseInt(document.getElementById("pret"+i).innerText)*parseFloat(document.getElementById("cant"+i).value))*1.24;
document.biblioteca.total.value = parseFloat(document.biblioteca.total.value) + parseFloat(document.getElementById("cost"+i).value);
}
}
</script>
</head>
<body>
<h1>Biblioteca</h1>
<form name="biblioteca">
<table width=600 border="3">
<tr>
<th width="50%">Carte</th>
<th width="15%">Pret</th>
<th width="15%">Cantitate</th>
<th>Cost(TVA inclus)</th>
</tr>
<tr>
<td>Manuscrisul gasit la Accra - Paulo Coelho</td>
<td id="pret1">20</td>
<td><input type="text" value="" id="cant1"></td>
<td><textarea name="cost1" id="cost1" rows="1" value=""></textarea></td>
</tr>
<tr>
<td>Poarta coliviei - Katie Hickman</td>
<td id="pret2">10</td>
<td><input type="text" value="" id="cant2"></td>
<td><textarea name="cost2" id="cost2" rows="1" value=""></textarea></td>
</tr>
<tr>
<td>Cincizeci de umbre ale lui Grey - E.L. James </td>
<td id="pret3">44</td>
<td><input type="text" value="" id="cant3"></td>
<td><textarea name="cost3" id="cost3" rows="1" value=""></textarea></td>
</tr>
<tr>
<td>Ciresarii. Vol.2: Castelul Fetei In Alb - Constantin Chirita</td>
<td id="pret4">6</td>
<td><input type="text" value="" id="cant4"></td>
<td><textarea name="cost4" id="cost4" rows="1" value=""></textarea></td>
</tr>
<tr>
<td colspan=2></td>
<td>Total:</td>
<td><textarea name="total" rows="1" readonly value=""></textarea></td>
</tr>
</table>
<input type="button" value="Caluleaza" onclick="calculate()">
</form>
</body>
</html>
either I;m very tired and can't see some obvious stupid mistake, or there is something fishy....because still doesn't work.
The values stored by those <input> elements aren't numbers. They're strings. You need to convert them into floats or integers:
var total_element = document.biblioteca.total;
var cost_element = document.getElementById("cost" + i);
var pret_element = document.getElementById("pret" + i);
var cant_element = document.getElementById("cant" + i);
var pret = parseFloat(pret_element.value);
var cant = parseFloat(cant_element.value);
cost_element.value = pret * cant * 1.24;
total_element.value += cost_element.value;
To start, you are trying to do math on string values when you are grabbing the value from the input tags.
Also, your function is not running because you can not use calc() as the function name ( for some reason)
Try replacing your code with this.
JS:
function calculate()
{
document.biblioteca.total.value = 0;
for(i=1;i<=4;i++)
{
document.getElementById("cost"+i).value= (parseInt(document.getElementById("pret"+i).innerText)*parseFloat(document.getElementById("cant"+i).value))*1.24;
document.biblioteca.total.value = parseFloat(document.biblioteca.total.value) + parseFloat(document.getElementById("cost"+i).value);
}
}
HTML:
<form name="biblioteca">
<table width=600 border="3">
<tr>
<th width="50%">Carte</th>
<th width="15%">Pret</th>
<th width="15%">Cantitate</th>
<th>Cost(TVA inclus)</th>
</tr>
<tr>
<td>Manuscrisul gasit la Accra - Paulo Coelho</td>
<td id="pret1" value="20">20</td>
<td><input type="text" value="" id="cant1"></td>
<td><textarea name="cost1" id="cost1" rows="1" value=""></textarea></td>
</tr>
<tr>
<td>Poarta coliviei - Katie Hickman</td>
<td id="pret2" value="10">10</td>
<td><input type="text" value="" id="cant2"></td>
<td><textarea name="cost2" id="cost2" rows="1" value=""></textarea></td>
</tr>
<tr>
<td>Cincizeci de umbre ale lui Grey - E.L. James </td>
<td id="pret3" value="44">44</td>
<td><input type="text" value="" id="cant3"></td>
<td><textarea name="cost3" id="cost3" rows="1" value=""></textarea></td>
</tr>
<tr>
<td>Ciresarii. Vol.2: Castelul Fetei In Alb - Constantin Chirita</td>
<td id="pret4" value=6>6</td>
<td><input type="text" value="" id="cant4"></td>
<td><textarea name="cost4" id="cost4" rows="1" value=""></textarea></td>
</tr>
<tr>
<td colspan=2></td>
<td>Total:</td>
<td><textarea name="total" rows="1" readonly value=""></textarea></td>
</tr>
</table>
<input type="button" name="calc" value="Caluleaza" onclick="calculcate()">
</form>

Categories