PDA

View Full Version : javascript concatenate



Medyman
01-21-2008, 01:34 AM
If I have something like this:


// text output
this.txtOut = document.getElementById(this.TXT_OUT);

and I want to add a "$" in front of it, how would i do that?

Twey
01-21-2008, 02:32 AM
That's not text. I'm presuming that's a form element, so you want .value:
this.txtOut = "$" + document.getElementById(this.TXT_OUT).value;

Medyman
01-21-2008, 02:41 AM
Hmmm...

Doesn't seem to work.

Here's the entire script, if it helps:


// mredkj.com
// OrderForm.js - v0.4
// v0.4 - 2007-02-01
// v0.3 - 2006-04-09
// v0.2 - 2006-04-08
// v0.1 - 2006-04-06

function OrderForm(prefix, precision, firstChoice) {

this.prefix = prefix ? prefix : '';

// ****************************
// Configure here
// ****************************
// names - Set these according to how the html ids are set
this.FORM_NAME = this.prefix + 'frmOrder';
this.BTN_TOTAL = this.prefix + 'btnTotal';
this.TXT_OUT = this.prefix + 'txtTotal';

// partial names - Set these according to how the html ids are set
this.CHK = this.prefix + 'chk';
this.SEL = this.prefix + 'sel';
this.PRICE = this.prefix + 'txtPrice';

// precision for the decimal places
// If not set, then no decimal adjustment is made
this.precision = precision ? precision : -1;

// if the drop down has the first choice after index 1
// this is used when checking or unchecking a checkbox
this.firstChoice = firstChoice ? firstChoice : 1;
// ****************************

// form
this.frm = document.getElementById(this.FORM_NAME);

// checkboxes
this.chkReg = new RegExp(this.CHK + '([0-9]+)');
this.getCheck = function(chkId) {
return document.getElementById(this.CHK + chkId);
};

// selects
this.selReg = new RegExp(this.SEL + '([0-9]+)');
this.getSelect = function(selId) {
return document.getElementById(this.SEL + selId);
};

// price spans
this.priceReg = new RegExp(this.PRICE + '([0-9]+)');

// text output
this.txtOut = "$" + document.getElementById(this.TXT_OUT).value;

// button
this.btnTotal = document.getElementById(this.BTN_TOTAL);

// price array
this.prices = new Array();

var o = this;
this.getCheckEvent = function() {
return function() {
o.checkRetotal(o, this);
};
};

this.getSelectEvent = function() {
return function() {
o.totalCost(o);
};
};

this.getBtnEvent = function() {
return function() {
o.totalCost(o);
};
};

/*
* Calculate the cost
*
* Required:
* Span tags around the prices with IDs formatted
* so each item's numbers correspond its select elements and input checkboxes.
*/
this.totalCost = function(orderObj) {
var spanObj = orderObj.frm.getElementsByTagName('span');
var total = 0.0;
for (var i=0; i<spanObj.length; i++) {
var regResult = orderObj.priceReg.exec(spanObj[i].id);
if (regResult) {
var itemNum = regResult[1];
var chkObj = orderObj.getCheck(itemNum);
var selObj = orderObj.getSelect(itemNum);
var price = orderObj.prices[itemNum];
var quantity = 0;
if (selObj) {
quantity = parseFloat(selObj.options[selObj.selectedIndex].text);
quantity = isNaN(quantity) ? 0 : quantity;
if (chkObj) chkObj.checked = quantity;
} else if (chkObj) {
quantity = chkObj.checked ? 1 : 0;
}
total += quantity * price;
}
}
if (this.precision == -1) {
orderObj.txtOut.value = total
} else {
orderObj.txtOut.value = total.toFixed(this.precision);
}
};

/*
* Handle clicks on the checkboxes
*
* Required:
* The corresponding select elements and input checkboxes need to be numbered the same
*
*/
this.checkRetotal = function(orderObj, obj) {
var regResult = orderObj.chkReg.exec(obj.id);
if (regResult) {
var optObj = orderObj.getSelect(regResult[1]);
if (optObj) {
if (obj.checked) {
optObj.selectedIndex = orderObj.firstChoice;
} else {
optObj.selectedIndex = 0;
}
}
orderObj.totalCost(orderObj);
}
};

/*
* Set up events
*/
this.setEvents = function(orderObj) {
var spanObj = orderObj.frm.getElementsByTagName('span');
for (var i=0; i<spanObj.length; i++) {
var regResult = orderObj.priceReg.exec(spanObj[i].id);
if (regResult) {
var itemNum = regResult[1];
var chkObj = orderObj.getCheck(itemNum);
var selObj = orderObj.getSelect(itemNum);
if (chkObj) {
chkObj.onclick = orderObj.getCheckEvent();
}
if (selObj) {
selObj.onchange = orderObj.getSelectEvent();
}
if (orderObj.btnTotal) {
orderObj.btnTotal.onclick = orderObj.getBtnEvent();
}
}
}
};
this.setEvents(this);

/*
*
* Grab the prices from the html
* Required:
* Prices should be wrapped in span tags, numbers only.
*/
this.grabPrices = function(orderObj) {
var spanObj = orderObj.frm.getElementsByTagName('span');
for (var i=0; i<spanObj.length; i++) {
if (orderObj.priceReg.test(spanObj[i].id)) {
var regResult = orderObj.priceReg.exec(spanObj[i].id);
if (regResult) {
orderObj.prices[regResult[1]] = parseFloat(spanObj[i].innerHTML);
}
}
}
};
this.grabPrices(this);

}



It is for a form...a calculator, of sorts to be exact.
Source: http://www.mredkj.com/javascript/orderform.html

jscheuer1
01-21-2008, 03:05 AM
If I have something like this:


// text output
this.txtOut = document.getElementById(this.TXT_OUT);

and I want to add a "$" in front of it, how would i do that?

That's only where the element that is to receive the total is declared. You cannot add any text there. Here is where the value is 'published':



/*
* Calculate the cost
*
* Required:
* Span tags around the prices with IDs formatted
* so each item's numbers correspond its select elements and input checkboxes.
*/
this.totalCost = function(orderObj) {
var spanObj = orderObj.frm.getElementsByTagName('span');
var total = 0.0;
for (var i=0; i<spanObj.length; i++) {
var regResult = orderObj.priceReg.exec(spanObj[i].id);
if (regResult) {
var itemNum = regResult[1];
var chkObj = orderObj.getCheck(itemNum);
var selObj = orderObj.getSelect(itemNum);
var price = orderObj.prices[itemNum];
var quantity = 0;
if (selObj) {
quantity = parseFloat(selObj.options[selObj.selectedIndex].text);
quantity = isNaN(quantity) ? 0 : quantity;
if (chkObj) chkObj.checked = quantity;
} else if (chkObj) {
quantity = chkObj.checked ? 1 : 0;
}
total += quantity * price;
}
}
if (this.precision == -1) {
orderObj.txtOut.value = total
} else {
orderObj.txtOut.value = total.toFixed(this.precision);
}
};

Notice particularly in the last few lines, the two that are highlighted red. Let's zoom in on those:


if (this.precision == -1) {
orderObj.txtOut.value = '$' + total
} else {
orderObj.txtOut.value = '$' + total.toFixed(this.precision);
}

Medyman
01-21-2008, 03:12 AM
Gotcha. Thanks :)

sellotape
03-21-2011, 10:56 AM
Hi there.

I am also using this script as the OP is using in a small project I am doing however I require the SELECT and OPTION to be replaced with INPUT tags instead so that a user inputs the quantity rather than select it from a drop down.

Any advice as to how I could do this please?

Here's the coding I have so far...




<head>
<title>Order Form</title>
</head>

<script type="text/javascript">
//<![CDATA[
window.onload = setupScripts;
function setupScripts()
{
var anOrder1 = new OrderForm();
}
//]]>
</script>

<hr style="color:#ccc; height:1px;">

<form id="frmOrder">

<table style="font-size:12px; width:500px; border="1" style="border-color:#F7DB00;border-width:1px;">

<!--// Apples--->

<tr>
<td>
<input type="checkbox" id="chk0" style="display:none;" />
</td>

<td>
<img src="./images/apples.jpg"> &nbsp; Apples
</td>

<td>
<strong></strong> <span id="txtPrice0">1.20</span>
</td>

<td>


<select id="sel0">
<option value="val0">0</option>
<option value="val1">1</option>
<option value="val2">2</option>
<option value="val3">3</option>
<option value="val4">4</option>
<option value="val5">5</option>
<option value="val6">6</option>
<option value="val7">7</option>
<option value="val8">8</option>
<option value="val9">9</option>
<option value="val10">10</option>

</select>

</td>
</tr>
</div>

</table>

<br />

<center>
<hr style="color:#ccc; height:1px;">
<h3 style="color:#999;">

<input type="text" id="txtTotal" style="border:none; text-align:center; color:#333; font-size:20px; font-weight:bold;"/>
p
</h3>
<hr style="color:#ccc; height:1px;">


</center>

</form>



<script type="text/javascript" >

function OrderForm(prefix, precision, firstChoice) {

this.prefix = prefix ? prefix : '';

// ****************************
// Configure here
// ****************************
// names - Set these according to how the html ids are set
this.FORM_NAME = this.prefix + 'frmOrder';
this.BTN_TOTAL = this.prefix + 'btnTotal';
this.TXT_OUT = this.prefix + 'txtTotal';

// partial names - Set these according to how the html ids are set
this.CHK = this.prefix + 'chk';
this.SEL = this.prefix + 'sel';
this.PRICE = this.prefix + 'txtPrice';

// precision for the decimal places
// If not set, then no decimal adjustment is made
this.precision = precision ? precision :-1;

// if the drop down has the first choice after index 1
// this is used when checking or unchecking a checkbox
this.firstChoice = firstChoice ? firstChoice : 1;
// ****************************

// form
this.frm = document.getElementById(this.FORM_NAME);

// checkboxes
this.chkReg = new RegExp(this.CHK + '([0-9]+)');
this.getCheck = function(chkId) {
return document.getElementById(this.CHK + chkId);
};

// selects
this.selReg = new RegExp(this.SEL + '([0-9]+)');
this.getInput = function(selId) {
return document.getElementById(this.SEL + selId);
};

// price spans
this.priceReg = new RegExp(this.PRICE + '([0-9]+)');

// text output
this.txtOut = document.getElementById(this.TXT_OUT);

// button
this.btnTotal = document.getElementById(this.BTN_TOTAL);

// price array
this.prices = new Array();

var o = this;
this.getCheckEvent = function() {
return function() {
o.checkRetotal(o, this);
};
};

this.getInputEvent = function() {
return function() {
o.totalCost(o);
};
};

this.getBtnEvent = function() {
return function() {
o.totalCost(o);
};
};

/*
* Calculate the cost
*
* Required:
* Span tags around the prices with IDs formatted
* so each item's numbers correspond its select elements and input checkboxes.
*/
this.totalCost = function(orderObj) {
var spanObj = orderObj.frm.getElementsByTagName('span');
var total = 0.0;
for (var i=0; i<spanObj.length; i++) {
var regResult = orderObj.priceReg.exec(spanObj[i].id);
if (regResult) {
var itemNum = regResult[1];
var chkObj = orderObj.getCheck(itemNum);
var selObj = orderObj.getInput(itemNum);
var price = orderObj.prices[itemNum];
var quantity = 0;
if (selObj) {
quantity = parseFloat(selObj.options[selObj.selectedIndex].text);
quantity = isNaN(quantity) ? 0 : quantity;
if (chkObj) chkObj.checked = quantity;
} else if (chkObj) {
quantity = chkObj.checked ? 1 : 0;
}
total += quantity * price;
}
}
if (this.precision == -1) {
orderObj.txtOut.value = total
} else {
orderObj.txtOut.value = total.toFixed(this.precision);
}
};

/*
* Handle clicks on the checkboxes
*
* Required:
* The corresponding select elements and input checkboxes need to be numbered the same
*
*/
this.checkRetotal = function(orderObj, obj) {
var regResult = orderObj.chkReg.exec(obj.id);
if (regResult) {
var optObj = orderObj.getInput(regResult[1]);
if (optObj) {
if (obj.checked) {
optObj.selectedIndex = orderObj.firstChoice;
} else {
optObj.selectedIndex = 0;
}
}
orderObj.totalCost(orderObj);
}
};

/*
* Set up events
*/
this.setEvents = function(orderObj) {
var spanObj = orderObj.frm.getElementsByTagName('span');
for (var i=0; i<spanObj.length; i++) {
var regResult = orderObj.priceReg.exec(spanObj[i].id);
if (regResult) {
var itemNum = regResult[1];
var chkObj = orderObj.getCheck(itemNum);
var selObj = orderObj.getInput(itemNum);
if (chkObj) {
chkObj.onclick = orderObj.getCheckEvent();
}
if (selObj) {
selObj.onchange = orderObj.getInputEvent();
}
if (orderObj.btnTotal) {
orderObj.btnTotal.onclick = orderObj.getBtnEvent();
}
}
}
};
this.setEvents(this);

/*
*
* Grab the prices from the html
* Required:
* Prices should be wrapped in span tags, numbers only.
*/
this.grabPrices = function(orderObj) {
var spanObj = orderObj.frm.getElementsByTagName('span');
for (var i=0; i<spanObj.length; i++) {
if (orderObj.priceReg.test(spanObj[i].id)) {
var regResult = orderObj.priceReg.exec(spanObj[i].id);
if (regResult) {
orderObj.prices[regResult[1]] = parseFloat(spanObj[i].innerHTML);
}
}
}
};
this.grabPrices(this);

}

</script>




I'm not sure where to go from here...


Thanks.

jscheuer1
03-21-2011, 05:02 PM
Something like:


<head>
<title>Order Form</title>
</head>

<script type="text/javascript">
//<![CDATA[
window.onload = setupScripts;
function setupScripts()
{
var anOrder1 = new OrderForm('', 2);
}
//]]>
</script>

<hr style="color:#ccc; height:1px;">

<form id="frmOrder">

<table style="font-size:12px; width:500px; border="1" style="border-color:#F7DB00;border-width:1px;">

<!--// Apples--->

<tr>
<td>
<input type="checkbox" id="chk0" style="display:none;" />
</td>

<td>
<img src="./images/apples.jpg"> &nbsp; Apples
</td>

<td>
<strong></strong> <span id="txtPrice0">1.20</span>
</td>

<td>

Quantity: <input type="text" size=3 id="sel0" value="0">
<!-- <select>
<option value="val0">0</option>
<option value="val1">1</option>
<option value="val2">2</option>
<option value="val3">3</option>
<option value="val4">4</option>
<option value="val5">5</option>
<option value="val6">6</option>
<option value="val7">7</option>
<option value="val8">8</option>
<option value="val9">9</option>
<option value="val10">10</option>

</select> -->

</td>
</tr>
</div>

</table>

<br />

<center>
<hr style="color:#ccc; height:1px;">
<h3 style="color:#999;">

<input type="text" id="txtTotal" style="border:none; text-align:center; color:#333; font-size:20px; font-weight:bold;"/>
p
</h3>
<hr style="color:#ccc; height:1px;">


</center>

</form>



<script type="text/javascript" >

function OrderForm(prefix, precision, firstChoice) {

this.prefix = prefix ? prefix : '';

// ****************************
// Configure here
// ****************************
// names - Set these according to how the html ids are set
this.FORM_NAME = this.prefix + 'frmOrder';
this.BTN_TOTAL = this.prefix + 'btnTotal';
this.TXT_OUT = this.prefix + 'txtTotal';

// partial names - Set these according to how the html ids are set
this.CHK = this.prefix + 'chk';
this.SEL = this.prefix + 'sel';
this.PRICE = this.prefix + 'txtPrice';

// precision for the decimal places
// If not set, then no decimal adjustment is made
this.precision = precision ? precision :-1;

// if the drop down has the first choice after index 1
// this is used when checking or unchecking a checkbox
this.firstChoice = firstChoice ? firstChoice : 1;
// ****************************

// form
this.frm = document.getElementById(this.FORM_NAME);

// checkboxes
this.chkReg = new RegExp(this.CHK + '([0-9]+)');
this.getCheck = function(chkId) {
return document.getElementById(this.CHK + chkId);
};

// selects
this.selReg = new RegExp(this.SEL + '([0-9]+)');
this.getInput = function(selId) {
return document.getElementById(this.SEL + selId);
};

// price spans
this.priceReg = new RegExp(this.PRICE + '([0-9]+)');

// text output
this.txtOut = document.getElementById(this.TXT_OUT);

// button
this.btnTotal = document.getElementById(this.BTN_TOTAL);

// price array
this.prices = new Array();

var o = this;
this.getCheckEvent = function() {
return function() {
o.checkRetotal(o, this);
};
};

this.getInputEvent = function() {
return function() {
o.totalCost(o);
};
};

this.getBtnEvent = function() {
return function() {
o.totalCost(o);
};
};

/*
* Calculate the cost
*
* Required:
* Span tags around the prices with IDs formatted
* so each item's numbers correspond its select elements and input checkboxes.
*/
this.totalCost = function(orderObj) {
var spanObj = orderObj.frm.getElementsByTagName('span');
var total = 0.0;
for (var i=0; i<spanObj.length; i++) {
var regResult = orderObj.priceReg.exec(spanObj[i].id);
if (regResult) {
var itemNum = regResult[1];
var chkObj = orderObj.getCheck(itemNum);
var selObj = orderObj.getInput(itemNum);
var price = orderObj.prices[itemNum];
var quantity = 0;
if (selObj) {
quantity = parseFloat(selObj.value);
quantity = isNaN(quantity) ? 0 : quantity;
if (chkObj) chkObj.checked = quantity;
} else if (chkObj) {
quantity = chkObj.checked ? 1 : 0;
}
total += quantity * price;
}
}
if (this.precision == -1) {
orderObj.txtOut.value = total
} else {
orderObj.txtOut.value = total.toFixed(this.precision);
}
};

/*
* Handle clicks on the checkboxes
*
* Required:
* The corresponding select elements and input checkboxes need to be numbered the same
*
*/
this.checkRetotal = function(orderObj, obj) {
var regResult = orderObj.chkReg.exec(obj.id);
if (regResult) {
var optObj = orderObj.getInput(regResult[1]);
if (optObj) {
if (obj.checked) {
optObj.selectedIndex = orderObj.firstChoice;
} else {
optObj.selectedIndex = 0;
}
}
orderObj.totalCost(orderObj);
}
};

/*
* Set up events
*/
this.setEvents = function(orderObj) {
var spanObj = orderObj.frm.getElementsByTagName('span');
for (var i=0; i<spanObj.length; i++) {
var regResult = orderObj.priceReg.exec(spanObj[i].id);
if (regResult) {
var itemNum = regResult[1];
var chkObj = orderObj.getCheck(itemNum);
var selObj = orderObj.getInput(itemNum);
if (chkObj) {
chkObj.onclick = orderObj.getCheckEvent();
}
if (selObj) {
selObj.onchange = selObj.onkeyup = orderObj.getInputEvent();
}
if (orderObj.btnTotal) {
orderObj.btnTotal.onclick = orderObj.getBtnEvent();
}
}
}
};
this.setEvents(this);

/*
*
* Grab the prices from the html
* Required:
* Prices should be wrapped in span tags, numbers only.
*/
this.grabPrices = function(orderObj) {
var spanObj = orderObj.frm.getElementsByTagName('span');
for (var i=0; i<spanObj.length; i++) {
if (orderObj.priceReg.test(spanObj[i].id)) {
var regResult = orderObj.priceReg.exec(spanObj[i].id);
if (regResult) {
orderObj.prices[regResult[1]] = parseFloat(spanObj[i].innerHTML);
}
}
}
};
this.grabPrices(this);

}

</script>