how to get the second value from select option in javascript - javascript

How do I get the second value of "investortype" and show it within "exploremax"?
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
function addCommas(nStr) // adds commas for long numbers in function explore().. eg. 123456 = 123,456
{
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
function explore() { // this function will calculate how much credits_all and credits_2_all it costs to explore "total". In addition to that I’d also like it to show exploremax.. but it doesn’t work.
var value = document.getElementById(investortype).value;
var split = value.split(":");
var v1 = split[0];
var v2 = split[1];
var toexplore = Number($("toexplore").value);
var total = Number($("total").value);
var exploremax = Math.round(((total * 0.12 * v2) * 1) / 1);
var credit = Math.round(((total * 0.51 * v1) + 700) * Math.pow(10, 10)) / Math.pow(10, 10);
var credit_2 = Math.round(((total * 0.51 * v1) + 850) * Math.pow(10, 10)) / Math.pow(10, 10);
var credit_all = addCommas(Math.round((toexplore * credit) * 1) / 1);
var credit_2_all = addCommas(Math.round((toexplore * credit_2_all) * 1) / 1);
var show_exploremax = addCommas(exploremax);
if ((toexplore == "" || toexplore == null) && (total == "" || total == null)) {
$("credit_all").innerHTML = "Error";
$("credit_2_all").innerHTML = "Error";
$("show_exploremax").innerHTML = "Error";
} else {
$("credit_all").innerHTML = credit_all;
$("credit_2_all").innerHTML = credit_2_all;
$("show_exploremax").innerHTML = show_exploremax;
}
}
</script>
I added the HTML. "show_exploremax" is supposed to read the second value from the "investortype" dropdown menu, but I’m having trouble getting it to do that.
<form action="" id="explore_cost">
<p>
<table width="50%" cellspacing="0px" align="center">
<tbody>
<tr>
<td colspan="2" align="center"><b>Land Explore Cost</b></td>
</tr>
<tr>
<td>Investor type:</td>
<td align="center"><select id="investortype" class="dropdown">
<option value="1:1">Standard</option>
<option value="1.2:0.5">Invasive</option>
<option value="1.1:0.9">Economist</option>
<option value="0.1:9.99">Self-sufficient</option>
<option value="1:1">2nd credit</option>
<option value="1.1:1">Researcher</option>
<!-- I tried to split the values with ":" -->
</select>
</td>
</tr>
<tr>
<td >Amount of Land:</td>
<td align="center"><input id="total" type="text" /></td>
</tr>
<tr>
<td>Land to explore:</td>
<td align="center"><input id="toexplore" type="text" /></td>
</tr>
<tr>
<td>Credit Needed:</td>
<td> <font id="credit_all"></font></td>
</tr>
<tr>
<td>2nd credit Needed:</td>
<td> <font id="credit_2_all"></font></td>
</tr>
<tr>
<td>Explore max:</td>
<td> <font id="show_exploremax"></font></td>
</tr>
<tr><br />
<td align="center" colspan="2"><input type="button" value="Submit" class="button1" onclick="explore()" /></td>
</tr>
</tbody>
EDIT: added html.

document.addEventListener( "DOMContentLoaded", init, false );
function init()
{
var select = document.getElementById('investortype');
select.addEventListener( "change", function() {
var option = select.options[select.selectedIndex];
document.getElementById('show_exploremax').innerText = option.dataset.max;
}, false);
select.selectedIndex = -1;
};
<h4>Pick One</h4>
<select id="investortype" class="dropdown">
<option data-credit="1" data-max="1">Standard</option>
<option data-credit="1.2" data-max="0.5" >Invasive</option>
<option data-credit="1.1" data-max="0.9" >Economist</option>
<option data-credit="0.1" data-max="9.99" value="0.1:9.99">Self-sufficient</option>
<option data-credit="1" data-max="1">2nd credit</option>
<option data-credit="1.1" data-max="1">Researcher</option>
</select>
<h4>2nd option:</h4>
Max: <span id="show_exploremax"></span>

Related

how to pass span value into laravel controller

I am developing some ticket selling program, where I made an auto calculating ticket price. I put the total price into a <span> tag. I'm trying to put it on <input> tag so it will be easier to pass the value into controller, but it doesn't work. I've already searching for the solution but it never comes to end. This is what my blade looks like:
<table class="text-center table-bordered" style="width:100%;">
<thead>
<tr>
<th>Quantity</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr class="quantz">
<td class="product-quantity">
<input type="hidden" name="price[]" class="price" id="price" size="5px" readonly value="25000">
<input type="number" onchange="update();return false;" name="qty" value="1" min="1" id="quant" class="fl qty-text" >
</td>
<td class="product-total">
<span id="demo">IDR 25.000,-</span>
</td>
</tr>
<tr>
<td><h3><small>Your Cart Total - </small></h3></td>
<td><h3><input type="hidden" name="totalz" value=""><span id="sub_total">IDR 25.000,-</span></h3></td>
</tr>
</tbody>
</table>
and this is what i wrote in my jquery to get the value:
<script>
function update() {
var total = 0;
var fees = 0;
var total_fees = 0;
var tax_fix = 0;
var with_fee = 0;
var discount_amt = 0;
var no_fee= 0;
var tax= 0;
$("#form-ui tr.quantz").each(function(i,o){
if($(o).find("#quant").val()>=0){
total += $(o).find("#quant").val() * $(o).find(".price").val();
$(o).find("#demo").html(rupiah($(o).find("#quant").val() * $(o).find(".price").val()));
}
});
console.log()
fees = (total*1);
total_fees = total+fees ;
no_fee = total;
with_fee = total + total_fees;
//sub total
$("#st").val(total);
$("#sub_total").html(rupiah(total));
//convinence_fee
if(total == 0){
fees = 0;
total_fees = 0;
}
$("#fee").val(fees);
$("#conv").html(rupiah(fees));
//total_paid
$("#total_price").val(total_fees);
$("#total_paid").html(rupiah(total_fees));
$("#hide_price").val(total_fees);
}
$("#form_payment tr.quantity").change(update);
function rupiah(value){
value += '';
x = value.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + '.' + '$2');
}
return 'IDR ' + x1 + x2 + ",-";
};
</script>
is there any solution regarding this problem? should I put something in my script or my controller?
Possible with JQuery, jQuery supports chaining objects return.
In HTML :
<span id="demo">IDR 25.000,-</span>
<input id="totalz" type="hidden" name="totalz" value="">
In JS :
var data = $('#demo').html();
$('#total').val(data);
Make sure that, you have single id demo, total, if you have multiple id with same attribute, then it will conflict with JavaScript

Resetting specific form in popup div

I have a page that lists previously entries made by a user with a link to each that will call a function that opens an edit page in a pop-up div.
The edit page just contains a form with update and reset buttons but whenever I select the reset button to return the form to its initial state nothing happens.
I've had a look online the last couple of days to try and get some more understanding of what might be causing this but it's like the javascript function that is called on clicking of the Reset button just ignores the document.getElementById(form).reset() command as there is no javascript error returned.
Here is a sample of the code on parent.cfm
<script language="javascript" src="functions.js" type="text/javascript"></script>
<table border="0" cellspacing="5" cellpadding="0" width="850">
<form action="##" method="post" name="parentForm" id="parentForm">
<input type="hidden" name="formSubmitted" id="formSubmitted" value="1" />
<tr>
<td>Label 1</td>
<td>
<select name="field1" id="field1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
<tr>
<td>Label 2</td>
<td>
<select name="field2" id="field2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
<tr>
<td>Label 3</td>
<td><input type="text" name="field3" id="field3" /></td>
</tr>
<tr>
<td>Label 4</td>
<td>
<select name="field4" id="field4">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
<tr>
<td>Label 5</td>
<td><textarea name="field5" id="field5" rows="10" cols="75"></textarea></td>
</tr>
<tr>
<td><input type="button" name="resetFormBtn" id="resetFormBtn" onClick="resetForm('parentForm');" value="RESET" /></td>
<td><input type="button" name="formSubmittedBtn" id="formSubmittedBtn" onClick="checkForm('parentForm');" value="ADD" /></td>
</tr>
</form>
</table>
<cfif qryRecords.RecordCount GT 0>
<table border="0" cellspacing="5" cellpadding="0" width="850">
<cfloop query="qryRecords">
<tr>
<td>Column Name 1</td>
<td>#columnName1#</td>
</tr>
<tr>
<td>Column Name 2</td>
<td>#columnName2#</td>
</tr>
<tr>
<td>Column Name 3</td>
<td>#columnName3#</td>
</tr>
<tr>
<td>Column Name 4</td>
<td>#columnName4#</td>
</tr>
<tr>
<td>Column Name 5</td>
<td>#columnName5#</td>
</tr>
<tr>
<td colspan="2">
<button name="editRecordBtn" onClick="openPage('childPage.cfm?recordID=#qryRecords.recordID#')">EDIT RECORD</button>
</td>
<td colspan="2">
<form action="##" name="removeRecord" id="removeRecord" method="post">
<input type="hidden" name="recordID" value="#qryRecords.recordID#" />
</form>
<button name="removeRecordBtn" onClick="document.getElementById('removeRecord').submit();">REMOVE RECORD</button>
</td>
</tr>
</cfloop>
</table>
</cfif>
And this is child.cfm which opens in the popup:
<script language="javascript" src="functions.js" type="text/javascript"></script>
<cfoutput>
<table border="0" cellspacing="5" cellpadding="0" width="850">
<form action="##" method="post" name="recordEditForm" id="recordEditForm">
<input type="hidden" name="editFormSubmitted" id="editFormSubmitted" value="1" />
<tr>
<td>Label 1</td>
<td>
<select name="field1" id="field1">
<option value="1" <cfif Form.field1 EQ Variables.field1>selected</cfif>>1</option>
<option value="2" <cfif Form.field1 EQ Variables.field1>selected</cfif>>2</option>
<option value="3" <cfif Form.field1 EQ Variables.field1>selected</cfif>>3</option>
</select>
</td>
</tr>
<tr>
<td>Label 2</td>
<td>
<select name="field2" id="field2">
<option value="1" <cfif Form.field2 EQ Variables.field2>selected</cfif>>1</option>
<option value="2" <cfif Form.field2 EQ Variables.field2>selected</cfif>>2</option>
<option value="3" <cfif Form.field2 EQ Variables.field2>selected</cfif>>3</option>
</select>
</td>
</tr>
<tr>
<td>Label 3</td>
<td><input type="text" name="field3" id="field3" value="#Variables.field3#" /></td>
</tr>
<tr>
<td>Label 4</td>
<td>
<select name="field4" id="field4">
<option value="1" <cfif Form.field4 EQ Variables.field4>selected</cfif>>1</option>
<option value="2" <cfif Form.field4 EQ Variables.field4>selected</cfif>>2</option>
<option value="3" <cfif Form.field4 EQ Variables.field4>selected</cfif>>3</option>
</select>
</td>
</tr>
<tr>
<td>Label 5</td>
<td><textarea name="field5" id="field5" rows="10" cols="75">#Variables.field5#</textarea></td>
</tr>
<tr>
<td colspan="2">
<input type="button" name="resetRecordBtn" id="resetRecordBtn" onClick="resetForm('recordEditForm');" value="RESET" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" name="editRecordBtn" id="editRecordBtn" onClick="checkForm('recordEditForm');" value="EDIT RECORD" />
</td>
</tr>
</form>
</table>
</cfoutput>
And this is the two functions called in functions.js:
function resetForm(formName) {
var form = formName;
document.getElementById(form).reset();
}
function openPage(source,width) {
var source = source;
var randStr = makeRandString(10);
var hasQueryString = source.indexOf("?");
if (hasQueryString > 0) {
source = source + '&';
} else {
source = source + '?';
}
source = source + 'rid=' + randStr;
var align = 'center';
var top = 80;
if (width != undefined) {
var width = width;
} else {
var width = 805;
}
var padding = 20;
var disableColor = '#666666';
var disableOpacity = 40;
var backgroundColor = '#FFFFFF';
var borderColor = '#4b8bc8';
var borderWeight = 2;
var borderRadius = 5;
var fadeOutTime = 300;
var loadingImage = '/resources/images/layout/loading2.gif';
modalPopup(align, top, width, padding, disableColor, disableOpacity, backgroundColor, borderColor, borderWeight, borderRadius, fadeOutTime, source, loadingImage);
}
function modalPopup(align, top, width, padding, disableColor, disableOpacity, backgroundColor, borderColor, borderWeight, borderRadius, fadeOutTime, url, loadingImage){
var containerid = "innerModalPopupDiv";
var popupDiv = document.createElement('div');
var popupMessage = document.createElement('div');
var blockDiv = document.createElement('div');
popupDiv.setAttribute('id', 'outerModalPopupDiv');
popupDiv.setAttribute('class', 'outerModalPopupDiv');
popupMessage.setAttribute('id', 'innerModalPopupDiv');
popupMessage.setAttribute('class', 'innerModalPopupDiv');
blockDiv.setAttribute('id', 'blockModalPopupDiv');
blockDiv.setAttribute('class', 'blockModalPopupDiv');
blockDiv.setAttribute('onClick', 'closePopup(' + fadeOutTime + ')');
document.body.appendChild(popupDiv);
popupDiv.appendChild(popupMessage);
document.body.appendChild(blockDiv);
if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){ //test for MSIE x.x;
var ieversion=new Number(RegExp.$1) // capture x.x portion and store as a number
if(ieversion>6) {
getScrollHeight(top);
}
} else {
getScrollHeight(top);
}
document.getElementById('outerModalPopupDiv').style.display='block';
document.getElementById('outerModalPopupDiv').style.width = width + 'px';
document.getElementById('outerModalPopupDiv').style.padding = borderWeight + 'px';
document.getElementById('outerModalPopupDiv').style.background = borderColor;
document.getElementById('outerModalPopupDiv').style.borderRadius = borderRadius + 'px';
document.getElementById('outerModalPopupDiv').style.MozBorderRadius = borderRadius + 'px';
document.getElementById('outerModalPopupDiv').style.WebkitBorderRadius = borderRadius + 'px';
document.getElementById('outerModalPopupDiv').style.borderWidth = 0 + 'px';
document.getElementById('outerModalPopupDiv').style.position = 'absolute';
document.getElementById('outerModalPopupDiv').style.zIndex = 100;
document.getElementById('innerModalPopupDiv').style.padding = padding + 'px';
document.getElementById('innerModalPopupDiv').style.background = backgroundColor;
document.getElementById('innerModalPopupDiv').style.borderRadius = (borderRadius - 3) + 'px';
document.getElementById('innerModalPopupDiv').style.MozBorderRadius = (borderRadius - 3) + 'px';
document.getElementById('innerModalPopupDiv').style.WebkitBorderRadius = (borderRadius - 3) + 'px';
document.getElementById('blockModalPopupDiv').style.width = 100 + '%';
document.getElementById('blockModalPopupDiv').style.border = 0 + 'px';
document.getElementById('blockModalPopupDiv').style.padding = 0 + 'px';
document.getElementById('blockModalPopupDiv').style.margin = 0 + 'px';
document.getElementById('blockModalPopupDiv').style.background = disableColor;
document.getElementById('blockModalPopupDiv').style.opacity = (disableOpacity / 100);
document.getElementById('blockModalPopupDiv').style.filter = 'alpha(Opacity=' + disableOpacity + ')';
document.getElementById('blockModalPopupDiv').style.zIndex = 99;
document.getElementById('blockModalPopupDiv').style.position = 'fixed';
document.getElementById('blockModalPopupDiv').style.top = 0 + 'px';
document.getElementById('blockModalPopupDiv').style.left = 0 + 'px';
if(align=="center") {
document.getElementById('outerModalPopupDiv').style.marginLeft = (-1 * (width / 2)) + 'px';
document.getElementById('outerModalPopupDiv').style.left = 50 + '%';
} else if(align=="left") {
document.getElementById('outerModalPopupDiv').style.marginLeft = 0 + 'px';
document.getElementById('outerModalPopupDiv').style.left = 10 + 'px';
} else if(align=="right") {
document.getElementById('outerModalPopupDiv').style.marginRight = 0 + 'px';
document.getElementById('outerModalPopupDiv').style.right = 10 + 'px';
} else {
document.getElementById('outerModalPopupDiv').style.marginLeft = (-1 * (width / 2)) + 'px';
document.getElementById('outerModalPopupDiv').style.left = 50 + '%';
}
blockPage();
var page_request = false;
if (window.XMLHttpRequest) {
page_request = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
page_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) { }
}
} else {
return false;
}
page_request.onreadystatechange=function(){
if((url.search(/.jpg/i)==-1) && (url.search(/.jpeg/i)==-1) && (url.search(/.gif/i)==-1) && (url.search(/.png/i)==-1) && (url.search(/.bmp/i)==-1)) {
pageloader(page_request, containerid, loadingImage);
} else {
imageloader(url, containerid, loadingImage);
}
}
page_request.open('GET', url, true);
page_request.send(null);
}
What is the best method for getting this form to reset?
Use input type reset
<input type="reset" value="reset button" />

Calling multiple functions with onchange

All this is a little bit over my experience but I have looked everywhere I could, and researched this stuff for 6 hours so far today and am just running into brick walls.
I have a table, where a user enters two variables and from those two variables 12 different numbers are spit out.
The problem those numbers are spit out as plain text strings into readonly text fields, and I need them to be displayed as (US) currency.
All of the input fields in the table are using onchange to run the first function which does the calculations, but the second and third functions which I found online I can not get to run.
HTML:
<form name="form" >
<table width="550" border="0">
<tr>
<td width="265" height="30"><div align="right">Number of Business Customers</div></td>
</tr>
<TR>
<td width="265" height="30"><div align="right">Number of Business Clients:</div></td>
<td width="142" div align="center"><input style="font-size:12px;text-align:center;" name="sum1" onChange="updatesum();CurrencyFormatted();CommaFormatted90;" /></td>
<td width="129" div align="center"> </td>
</tr>
<TR>
<td height="30"><div align="right">Average Number of Employees:</td>
<TD div align="center"><input style="font-size:12px;text-align:center;" name="sum2" onChange="updatesum();CurrencyFormatted();CommaFormatted();" /></TD>
<TD div align="center"> </TD>
<TR>
<td height="30"><div align="right">Anticipated Employee Tax Reduction:</div></td>
<TD div align="center"><input style="font-size:12px;text-align:center;border:none;" name="sum16" readonly "></TD>
<TD div align="center"><input style="font-size:12px;text-align:center;border:none" name="sum26" readonly><BR /></TD>
</TR>
<TR>
<td height="30"><div align="right">Potential Payroll Tax Reduction (annually):</div></td>
<TD div align="center"><input style="font-size:12px;text-align:center;border:none" name="sum17" readonly ></TD>
<TD div align="center"><input style="font-size:12px;text-align:center;border:none" name="sum27" readonly ></TD>
</TR>
<TR>
<td height="30"><div align="right">Potential Payroll Tax Reduction (monthly):</td>
<TD div align="center"><input type="text" style="font-size:12px;text-align:center;border:none" name="sum18" readonly ></td>
<TD div align="center"><input style="font-size:12px;text-align:center;border:none" name="sum28" readonly ></td>
</TR>
<TR>
<td height="30"><div align="right">Pearl Logic Billing (50% of savings, for 12 months):</td>
<TD div align="center"><input style="font-size:12px;text-align:center;border:none" name="sum19" readonly ></td>
<TD div align="center"><input style="font-size:12px;text-align:center;border:none" name="sum29" readonly ></td>
</TR>
<TR>
<td height="30"><div align="right">Sales Agent Monthly Comp (8%):</td>
<TD div align="center"><input style="font-size:12px;text-align:center;border:none" name="sum14" readonly ></td>
<TD div align="center"><input style="font-size:12px;text-align:center;border:none" name="sum24" readonly ></td>
</TR>
<TR>
<td height="30"><div align="right">Sales Agent Total Comp (8%):</td>
<TD div align="center"><input style="font-size:12px;text-align:center;border:none" name="sum15" readonly ></td>
<TD div align="center"><input style="font-size:12px;text-align:center;border:none" name="sum25" readonly ></td>
</TR>
</table>
</form>
Javascript:
function updatesum() {
document.form.sum14.value = ((((((document.form.sum1.value -0)*(document.form.sum2.value -0)*300))/12)/2)*.08);
document.form.sum24.value = ((((((document.form.sum1.value -0)*(document.form.sum2.value -0)*400))/12)/2)*.08);
document.form.sum15.value = (((((((document.form.sum1.value -0)*(document.form.sum2.value -0)*300))/12)/2)*.08)*12);
document.form.sum25.value = (((((((document.form.sum1.value -0)*(document.form.sum2.value -0)*400))/12)/2)*.08)*12);
document.form.sum16.value = 300;
document.form.sum26.value = 400;
document.form.sum17.value = ((document.form.sum1.value -0)*(document.form.sum2.value -0)*300);
document.form.sum27.value = ((document.form.sum1.value -0)*(document.form.sum2.value -0)*400);
document.form.sum18.value = (((document.form.sum1.value -0)*(document.form.sum2.value -0)*300)/12);
document.form.sum28.value = (((document.form.sum1.value -0)*(document.form.sum2.value -0)*400)/12);
document.form.sum19.value = ((((document.form.sum1.value -0)*(document.form.sum2.value -0)*300)/12)/2);
document.form.sum29.value = ((((document.form.sum1.value -0)*(document.form.sum2.value -0)*400)/12)/2);
}
//--></script>
<script type="text/javascript"><!--
function CurrencyFormatted()
{
var i = parseFloat(amount);
if(isNaN(i)) { i = 0.00; }
var minus = '';
if(i < 0) { minus = '-'; }
i = Math.abs(i);
i = parseInt((i + .005) * 100);
i = i / 100;
s = new String(i);
if(s.indexOf('.') < 0) { s += '.00'; }
if(s.indexOf('.') == (s.length - 2)) { s += '0'; }
s = minus + s;
return s;
}
//--></script>
<script type="text/javascript"><!--
function CommaFormatted()
{
var delimiter = ","; // replace comma if desired
var a = amount.split('.',2)
var d = a[1];
var i = parseInt(a[0]);
if(isNaN(i)) { return ''; }
var minus = '';
if(i < 0) { minus = '-'; }
i = Math.abs(i);
var n = new String(i);
var a = [];
while(n.length > 3)
{
var nn = n.substr(n.length-3);
a.unshift(nn);
n = n.substr(0,n.length-3);
}
if(n.length > 0) { a.unshift(n); }
n = a.join(delimiter);
if(d.length < 1) { amount = n; }
else { amount = n + '.' + d; }
amount = minus + amount;
return amount;
}
//--></script>
Your functions have an undefined amount variable. Presumably they just crash with an error.
First you need to remove those function calls from the onChange listener.
Second, change the functions to take an unformatted value and return a formatted one
function CurrencyFormatted(amount) { //<-- notice the method parameter
var i = parseFloat(amount);
if(isNaN(i)) { i = 0.00; }
var minus = '';
if(i < 0) { minus = '-'; }
i = Math.abs(i);
i = parseInt((i + .005) * 100);
i = i / 100;
s = new String(i);
if(s.indexOf('.') < 0) { s += '.00'; }
if(s.indexOf('.') == (s.length - 2)) { s += '0'; }
s = minus + s;
return s;
}
Now change each of your set calls in your updatesum to first format the value
var sum14 = ((((((document.form.sum1.value -0)*(document.form.sum2.value -0)*300))/12)/2)*.08);
var formattedSum14 = CommaFormatted(CurrencyFormatted(sum14));
document.form.sum14.value = sum14;

Resetting form in popup div

I have a page that lists previously entries made by a user with a link to each that will call a function that opens an edit page in a pop-up div.
The edit page just contains a form with update and reset buttons but whenever I select the reset button to return the form to its initial state nothing happens.
I've had a look online the last couple of days to try and get some more understanding of what might be causing this but it's like the javascript function that is called on clicking of the Reset button just ignores the document.getElementById(form).reset() command as there is no javascript error returned.
Here is a sample of the code on parent.cfm
<script language="javascript" src="functions.js" type="text/javascript"></script>
<table border="0" cellspacing="5" cellpadding="0" width="850">
<form action="##" method="post" name="parentForm" id="parentForm">
<input type="hidden" name="formSubmitted" id="formSubmitted" value="1" />
<tr>
<td>Label 1</td>
<td>
<select name="field1" id="field1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
<tr>
<td>Label 2</td>
<td>
<select name="field2" id="field2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
<tr>
<td>Label 3</td>
<td><input type="text" name="field3" id="field3" /></td>
</tr>
<tr>
<td>Label 4</td>
<td>
<select name="field4" id="field4">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
<tr>
<td>Label 5</td>
<td><textarea name="field5" id="field5" rows="10" cols="75"></textarea></td>
</tr>
<tr>
<td><input type="button" name="resetFormBtn" id="resetFormBtn" onClick="resetForm('parentForm');" value="RESET" /></td>
<td><input type="button" name="formSubmittedBtn" id="formSubmittedBtn" onClick="checkForm('parentForm');" value="ADD" /></td>
</tr>
</form>
</table>
<cfif qryRecords.RecordCount GT 0>
<table border="0" cellspacing="5" cellpadding="0" width="850">
<cfloop query="qryRecords">
<tr>
<td>Column Name 1</td>
<td>#columnName1#</td>
</tr>
<tr>
<td>Column Name 2</td>
<td>#columnName2#</td>
</tr>
<tr>
<td>Column Name 3</td>
<td>#columnName3#</td>
</tr>
<tr>
<td>Column Name 4</td>
<td>#columnName4#</td>
</tr>
<tr>
<td>Column Name 5</td>
<td>#columnName5#</td>
</tr>
<tr>
<td colspan="2">
<button name="editRecordBtn" onClick="openPage('childPage.cfm?recordID=#qryRecords.recordID#')">EDIT RECORD</button>
</td>
<td colspan="2">
<form action="##" name="removeRecord" id="removeRecord" method="post">
<input type="hidden" name="recordID" value="#qryRecords.recordID#" />
</form>
<button name="removeRecordBtn" onClick="document.getElementById('removeRecord').submit();">REMOVE RECORD</button>
</td>
</tr>
</cfloop>
</table>
</cfif>
And this is child.cfm which opens in the popup:
<script language="javascript" src="functions.js" type="text/javascript"></script>
<cfoutput>
<table border="0" cellspacing="5" cellpadding="0" width="850">
<form action="##" method="post" name="recordEditForm" id="recordEditForm">
<input type="hidden" name="editFormSubmitted" id="editFormSubmitted" value="1" />
<tr>
<td>Label 1</td>
<td>
<select name="field1" id="field1">
<option value="1" <cfif Form.field1 EQ Variables.field1>selected</cfif>>1</option>
<option value="2" <cfif Form.field1 EQ Variables.field1>selected</cfif>>2</option>
<option value="3" <cfif Form.field1 EQ Variables.field1>selected</cfif>>3</option>
</select>
</td>
</tr>
<tr>
<td>Label 2</td>
<td>
<select name="field2" id="field2">
<option value="1" <cfif Form.field2 EQ Variables.field2>selected</cfif>>1</option>
<option value="2" <cfif Form.field2 EQ Variables.field2>selected</cfif>>2</option>
<option value="3" <cfif Form.field2 EQ Variables.field2>selected</cfif>>3</option>
</select>
</td>
</tr>
<tr>
<td>Label 3</td>
<td><input type="text" name="field3" id="field3" value="#Variables.field3#" /></td>
</tr>
<tr>
<td>Label 4</td>
<td>
<select name="field4" id="field4">
<option value="1" <cfif Form.field4 EQ Variables.field4>selected</cfif>>1</option>
<option value="2" <cfif Form.field4 EQ Variables.field4>selected</cfif>>2</option>
<option value="3" <cfif Form.field4 EQ Variables.field4>selected</cfif>>3</option>
</select>
</td>
</tr>
<tr>
<td>Label 5</td>
<td><textarea name="field5" id="field5" rows="10" cols="75">#Variables.field5#</textarea></td>
</tr>
<tr>
<td colspan="2">
<input type="button" name="resetRecordBtn" id="resetRecordBtn" onClick="resetForm('recordEditForm');" value="RESET" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" name="editRecordBtn" id="editRecordBtn" onClick="checkForm('recordEditForm');" value="EDIT RECORD" />
</td>
</tr>
</form>
</table>
</cfoutput>
And this is the two functions called in functions.js:
function resetForm(formName) {
var form = formName;
document.getElementById(form).reset();
}
function openPage(source,width) {
var source = source;
var randStr = makeRandString(10);
var hasQueryString = source.indexOf("?");
if (hasQueryString > 0) {
source = source + '&';
} else {
source = source + '?';
}
source = source + 'rid=' + randStr;
var align = 'center';
var top = 80;
if (width != undefined) {
var width = width;
} else {
var width = 805;
}
var padding = 20;
var disableColor = '#666666';
var disableOpacity = 40;
var backgroundColor = '#FFFFFF';
var borderColor = '#4b8bc8';
var borderWeight = 2;
var borderRadius = 5;
var fadeOutTime = 300;
var loadingImage = '/resources/images/layout/loading2.gif';
modalPopup(align, top, width, padding, disableColor, disableOpacity, backgroundColor, borderColor, borderWeight, borderRadius, fadeOutTime, source, loadingImage);
}
function modalPopup(align, top, width, padding, disableColor, disableOpacity, backgroundColor, borderColor, borderWeight, borderRadius, fadeOutTime, url, loadingImage){
var containerid = "innerModalPopupDiv";
var popupDiv = document.createElement('div');
var popupMessage = document.createElement('div');
var blockDiv = document.createElement('div');
popupDiv.setAttribute('id', 'outerModalPopupDiv');
popupDiv.setAttribute('class', 'outerModalPopupDiv');
popupMessage.setAttribute('id', 'innerModalPopupDiv');
popupMessage.setAttribute('class', 'innerModalPopupDiv');
blockDiv.setAttribute('id', 'blockModalPopupDiv');
blockDiv.setAttribute('class', 'blockModalPopupDiv');
blockDiv.setAttribute('onClick', 'closePopup(' + fadeOutTime + ')');
document.body.appendChild(popupDiv);
popupDiv.appendChild(popupMessage);
document.body.appendChild(blockDiv);
if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){ //test for MSIE x.x;
var ieversion=new Number(RegExp.$1) // capture x.x portion and store as a number
if(ieversion>6) {
getScrollHeight(top);
}
} else {
getScrollHeight(top);
}
document.getElementById('outerModalPopupDiv').style.display='block';
document.getElementById('outerModalPopupDiv').style.width = width + 'px';
document.getElementById('outerModalPopupDiv').style.padding = borderWeight + 'px';
document.getElementById('outerModalPopupDiv').style.background = borderColor;
document.getElementById('outerModalPopupDiv').style.borderRadius = borderRadius + 'px';
document.getElementById('outerModalPopupDiv').style.MozBorderRadius = borderRadius + 'px';
document.getElementById('outerModalPopupDiv').style.WebkitBorderRadius = borderRadius + 'px';
document.getElementById('outerModalPopupDiv').style.borderWidth = 0 + 'px';
document.getElementById('outerModalPopupDiv').style.position = 'absolute';
document.getElementById('outerModalPopupDiv').style.zIndex = 100;
document.getElementById('innerModalPopupDiv').style.padding = padding + 'px';
document.getElementById('innerModalPopupDiv').style.background = backgroundColor;
document.getElementById('innerModalPopupDiv').style.borderRadius = (borderRadius - 3) + 'px';
document.getElementById('innerModalPopupDiv').style.MozBorderRadius = (borderRadius - 3) + 'px';
document.getElementById('innerModalPopupDiv').style.WebkitBorderRadius = (borderRadius - 3) + 'px';
document.getElementById('blockModalPopupDiv').style.width = 100 + '%';
document.getElementById('blockModalPopupDiv').style.border = 0 + 'px';
document.getElementById('blockModalPopupDiv').style.padding = 0 + 'px';
document.getElementById('blockModalPopupDiv').style.margin = 0 + 'px';
document.getElementById('blockModalPopupDiv').style.background = disableColor;
document.getElementById('blockModalPopupDiv').style.opacity = (disableOpacity / 100);
document.getElementById('blockModalPopupDiv').style.filter = 'alpha(Opacity=' + disableOpacity + ')';
document.getElementById('blockModalPopupDiv').style.zIndex = 99;
document.getElementById('blockModalPopupDiv').style.position = 'fixed';
document.getElementById('blockModalPopupDiv').style.top = 0 + 'px';
document.getElementById('blockModalPopupDiv').style.left = 0 + 'px';
if(align=="center") {
document.getElementById('outerModalPopupDiv').style.marginLeft = (-1 * (width / 2)) + 'px';
document.getElementById('outerModalPopupDiv').style.left = 50 + '%';
} else if(align=="left") {
document.getElementById('outerModalPopupDiv').style.marginLeft = 0 + 'px';
document.getElementById('outerModalPopupDiv').style.left = 10 + 'px';
} else if(align=="right") {
document.getElementById('outerModalPopupDiv').style.marginRight = 0 + 'px';
document.getElementById('outerModalPopupDiv').style.right = 10 + 'px';
} else {
document.getElementById('outerModalPopupDiv').style.marginLeft = (-1 * (width / 2)) + 'px';
document.getElementById('outerModalPopupDiv').style.left = 50 + '%';
}
blockPage();
var page_request = false;
if (window.XMLHttpRequest) {
page_request = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
page_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) { }
}
} else {
return false;
}
page_request.onreadystatechange=function(){
if((url.search(/.jpg/i)==-1) && (url.search(/.jpeg/i)==-1) && (url.search(/.gif/i)==-1) && (url.search(/.png/i)==-1) && (url.search(/.bmp/i)==-1)) {
pageloader(page_request, containerid, loadingImage);
} else {
imageloader(url, containerid, loadingImage);
}
}
page_request.open('GET', url, true);
page_request.send(null);
}
What is the best method for getting this form to reset?
The method depends on whether you want to attach the reset event to the form using onreset, or to the actual button using onclick.
Clicking on a reset button triggers to onreset event of the <form> element. In HTML the onreset event is attached to the <form> element:
<form id="form1" onreset="yourResetFunction()">
<input type="reset" value="Reset">
In this case, yourResetFunction() will be called when you click on the reset button of the form, sicne it's attached to the onreset event of the form.
If you instead want to trigger a reset when the button is clicked, change the input type of the button from "reset" to "button", and attach the reset event to the button's onclick event.
<form id="form1">
<input type="button" value="Reset" onclick="yourResetFunction()">
A similar question was also asked here: How to run JavaScript code when a form is being reset?
Try to get the forms and exec the .reset() method.
function fnResetMyForms(){
//Resets all forms
var forms = document.getElementsByTagName("form");
for (var n = 0; n < forms.length; n++) forms[n].reset();
//Resets only the form you need
//document.getElementsById("myForm").reset();
//If you dont know the id, you can ask for specific property
//for (var n=0; n<forms.length; n++) {
// if(forms[n].action=='index.php'){ /* Your code here */ }
//}
}

Calculate cheaper price by more quantity in javascript

I have created a form to calculate the price times the quantity of a item. It had more choices but I narrowed it down to one choice. But now I can't figure out how give price breaks for more quantity. Basically there are price breaks as follows:
Item A is 4.60 for 1+ item. For 10+ items 3.40, 25+ 2.68 and so on until it hits 5000+ items. This is the same for items, B and C except they are priced different.
How can I calculate this using the method below:
Html Form:
<form action="#" id="price-quote" onsubmit="return false">
<table width="501" border="0" cellpadding="10" cellspacing="20" style="padding- top:30px;">
<tr>
<th width="67" scope="row">Size:</th>
<td width="273" class="select-box"> <select id="size" name="size">
<option value="None">Select Size</option>
<option value="2.5 inches">2.5 inches</option>
<option value="3 inches">3 inches</option>
<option value="Oval">Oval</option>
</select>
</td>
</tr>
<tr>
<th scope="row">Quanitity:</th>
<td><input type="text" name="quantity" id="quantity" /></td>
</tr>
<tr>
<th scope="row"> </th>
<td><input class="button" type="button" value="Update" onmousedown="getTotal()"/></td>
</tr>
<tr>
<th> Price:</th>
<td><div id="totalPrice" style="float:right;"></div></td>
</tr>
</table>
</form>
Javascript:
var size_prices= new Array();
size_prices["None"]=0;
size_prices["2.5 inches"]=4.60;
size_prices["3 inches"]=4.90;
size_prices["Oval"]=5.10;
function getSizePrice()
{
var sizePrice;
var theForm = document.forms["price-quote"];
var selectedSize = theForm.elements["size"];
sizePrice = size_prices[selectedSize.value];
return sizePrice;
}
function getQuantity()
{
var theForm = document.forms["price-quote"];
//Get a reference to the TextBox
var quantity = theForm.elements["quantity"];
var howmany =0;
//If the textbox is not blank
if(quantity.value!="")
{
howmany = parseInt(quantity.value);
}
return howmany;
}
function getTotal()
{
var instantPrice = getSizePrice() * getQuantity();
document.getElementById('totalPrice').innerHTML =
"$"+instantPrice.toFixed(2);
}
Could someone please point me in the right direction. Thank you
function getTotal()
{
var q = getQuantity();
var unitPrice = 4.60;
if(q >= 10){
unitPrice = 3.40;
} else if (q >= 25){
unitPrice = 2.68;
}
var instantPrice = unitPrice * q;
document.getElementById('totalPrice').innerHTML =
"$"+instantPrice.toFixed(2);
}

Categories