Javascript beginner: Trouble with multiple arrays initiated by buttonMsg - javascript

I'm having problems with my arrays. My first buttonMsg() displayed the prompt correctly and the input went straight to the text box.
Now I'm having trouble duplicating that same code into my second array.
When I tried nothing would work. I'm thinking it has to do with buttonMsg.
<html>
<head>
<title></title>
<script type="text/javascript">
function buttonMsg(){
varData = new Array();
varData[0] = prompt("Please enter first name.","")
varData[1] = prompt("Please enter last name.","")
varData[2] = prompt("Please enter phone number.","")
varData[3] = prompt("Please enter address.","")
document.getElementsByName('inputbox')[0].value = varData[0]
document.getElementsByName('inputbox')[1].value = varData[1]
document.getElementsByName('inputbox')[2].value = varData[2]
document.getElementsByName('inputbox')[3].value = varData[3]
}
function buttonMsg(1){
varDater = new Array(1);
varDater[0] = prompt("Please enter first name.","")
varDater[1] = prompt("Please enter last name.","")
varDater[2] = prompt("Please enter phone number.","")
varDater[3] = prompt("Please enter address.","")
document.getElementsByName('inputbox')[0].value = varDater[0]
document.getElementsByName('inputbox')[1].value = varDater[1]
document.getElementsByName('inputbox')[2].value = varDater[2]
document.getElementsByName('inputbox')[3].value = varDater[3]
}
</script>
</head>
<body>
<table border="1">
<tr>
<td>0,0 CustomerID</td>
<td>1 FirstName</td>
<td>2 LastName</td>
<td>3 Phone</td>
<td>4 Address</td>
</tr>
<tr>
<td>1 Customer1 <input type="button" value="Input" onclick="buttonMsg()"/></td>
<td><input type="text" name="inputbox" value=""></td>
<td><input type="text" name="inputbox" value=""></td>
<td><input type="text" name="inputbox" value=""></td>
<td><input type="text" name="inputbox" value=""></td>
</tr>
<tr>
<td>2 Customer2 <input type="button" value="Input" onclick="buttonMsg(1)"/></td>
<td><input type="text" name="inputbox" value=""></td>
<td><input type="text" name="inputbox" value=""></td>
<td><input type="text" name="inputbox" value=""></td>
<td><input type="text" name="inputbox" value=""></td>
</tr>
<tr>
<td>3 Customer3</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>4 Customer4</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>

Looks like the problem is that the inputs are all named "inputbox", so really there will be no output difference between the first and second functions. They will both populate the first 4 elements named "inputbox" on the page, so clicking on the second button will still populate the first section's input boxes. It might make more sense to pass in the name of the section's inputs into the function like this:
buttonMsg(inputname){
var inputs = document.getElementsByName(inputname);
inputs[0].value = prompt("Please enter first name.","");
inputs[1].value = prompt("Please enter last name.","");
inputs[2].value = prompt("Please enter phone number.","");
inputs[3].value = prompt("Please enter address.","");
}
then have the buttons pass the names of the inputs like this:
<tr>
<td>1 Customer1 <input type="button" value="Input" onclick="buttonMsg('inputbox1')" /></td>
<td><INPUT TYPE="text" NAME="inputbox1" VALUE=""></td>
<td><INPUT TYPE="text" NAME="inputbox1" VALUE=""></td>
<td><INPUT TYPE="text" NAME="inputbox1" VALUE=""></td>
<td><INPUT TYPE="text" NAME="inputbox1" VALUE=""></td>
</tr>
and change out "inputbox1" to different names for each of the items.

Changing the code from:
function buttonMsg(1){
varDater = new Array(1);
to
function buttonMsg1(){
varDater = new Array();
and then calling buttonMsg1(); later should fix the problem.
However I suggest you further research into initializing arrays and how functions work in javascript. As the () in a function are used to send arguments (variables) to later be used in that function. In this scenario they should be left blank.
This site provides a good starting point to help understand functions.
Further looking at your code shows me that you'd also want to change the:
document.getElementsByName('inputbox')[0]
in the second function to
document.getElementsByName('inputbox')[4]
etc for all the values in that second function.
However this is definately not the best method to use for scalability (if you want more than two customers) and I suggest using a function that takes different element names as an argument.

The code shouldn't even work. Chrome reports error and halts script execution.
The declaration of the second function has an invalid argument variable name.
What characters are valid for JavaScript variable names?
Also, as already stated, there are duplicate names.
If you're allowed to use jQuery, the following might be a more interesting solution:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<title>Example</title>
<script type="text/javascript">
(function($){
$(document).ready(function(){
$('input.promptInput').bind('click', function() {
varData = new Array();
varData[0] = prompt("Please enter first name.","")
varData[1] = prompt("Please enter last name.","")
varData[2] = prompt("Please enter phone number.","")
varData[3] = prompt("Please enter address.","")
$(this).parents('tr:first').find('input[type="text"]').each(function(i, input){
$(input).val(varData[i]);
});
});
});
})(jQuery);
</script>
</head>
<body>
<table border="1">
<tr>
<td>0,0 CustomerID</td>
<td>1 FirstName</td>
<td>2 LastName</td>
<td>3 Phone</td>
<td>4 Address</td>
</tr>
<tr>
<td>1 Customer1 <input class="promptInput" type="button" value="Input"/></td>
<td><input type="text" name="customer_1_firstname" value=""></td>
<td><input type="text" name="customer_1_lastname" value=""></td>
<td><input type="text" name="customer_1_phone" value=""></td>
<td><input type="text" name="customer_1_address" value=""></td>
</tr>
<tr>
<td>1 Customer1 <input class="promptInput" type="button" value="Input"/></td>
<td><input type="text" name="customer_2_firstname" value=""></td>
<td><input type="text" name="customer_2_lastname" value=""></td>
<td><input type="text" name="customer_2_phone" value=""></td>
<td><input type="text" name="customer_2_address" value=""></td>
</tr>
<tr>
<td>3 Customer3</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>4 Customer4</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>

Related

How to customize jAutoCalc plugin

I have a simple question regarding jAutoCalc, my question can be answered in two ways:
1> How to customize the jAutoCalc plugin so that we can make it able to be used for input array names instead of just names.
my code is here:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://rawgit.com/c17r/jAutoCalc/master/jAutoCalc.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
function autoCalcSetup() {
$('form[name=cart]').jAutoCalc('destroy');
$('form[name=cart] tr[name=line_items]').jAutoCalc({
keyEventsFire: true,
decimalPlaces: 2,
emptyAsZero: true
});
$('form[name=cart]').jAutoCalc({
decimalPlaces: 2
});
}
autoCalcSetup();
$('button[name=remove]').click(function(e) {
e.preventDefault();
var form = $(this).parents('form')
$(this).parents('tr').remove();
autoCalcSetup();
});
$('button[name=add]').click(function(e) {
e.preventDefault();
var $table = $(this).parents('table');
var $top = $table.find('tr[name=line_items]').first();
var $new = $top.clone(true);
$new.jAutoCalc('destroy');
$new.insertBefore($top);
$new.find('input[type=text]').val('');
autoCalcSetup();
});
});
</script>
</head>
<body>
<form name="cart">
<table name="cart">
<tr>
<th></th>
<th>Item</th>
<th>Qty</th>
<th>Price</th>
<th> </th>
<th>Item Total</th>
</tr>
<tr name="line_items">
<td><button name="remove">Remove</button></td>
<td>Stuff</td>
<td><input type="text" name="qty" value="1"></td>
<td><input type="text" name="price" value="9.99"></td>
<td> </td>
<td><input type="text" name="item_total" value="" jAutoCalc="{qty} * {price}"></td>
</tr>
<tr name="line_items">
<td><button name="remove">Remove</button></td>
<td>More Stuff</td>
<td><input type="text" name="qty" value="2"></td>
<td><input type="text" name="price" value="12.50"></td>
<td> </td>
<td><input type="text" name="item_total" value="" jAutoCalc="{qty} * {price}"></td>
</tr>
<tr name="line_items">
<td><button name="remove">Remove</button></td>
<td>And More Stuff</td>
<td><input type="text" name="qty" value="3"></td>
<td><input type="text" name="price" value="99.99"></td>
<td> </td>
<td><input type="text" name="item_total" value="" jAutoCalc="{qty} * {price}"></td>
</tr>
<tr>
<td colspan="3"> </td>
<td>Subtotal</td>
<td> </td>
<td><input type="text" name="sub_total" value="" jAutoCalc="SUM({item_total})"></td>
</tr>
<tr>
<td colspan="3"> </td>
<td>
Tax:
<select name="tax">
<option value=".06">CT Tax</option>
<option selected value=".00">Tax Free</option>
</select>
</td>
<td> </td>
<td><input type="text" name="tax_total" value="" jAutoCalc="{sub_total} * {tax}"></td>
</tr>
<tr>
<td colspan="3"> </td>
<td>Total</td>
<td> </td>
<td><input type="text" name="grand_total" value="" jAutoCalc="{sub_total} + {tax_total}"></td>
</tr>
<tr>
<td colspan="99"><button name="add">Add Row</button></td>
</tr>
</table>
</form>
</body>
</html>
since the names are same for dynamically generated input's i want use input array. The problem is that if i do so then I'm unable to use the plugin features!
2> The question can be answered in second way by providing methods to use plugin while using input arrays
I know its an old post but maybe others may have same issue.
Try to open jautocalc.js find this function "getFieldSelector(field)" and edit this code.
return ':input[name="' + field + '"]';
to
return ':input[name="' + field + '[]"]';
I think the whole problem is with javascript
the javascript should be like
$(document).ready(function(){
$('.item_total').keyup(function(){
$('your result input name here).text($('.item_total').val() * 1.5);
});
});
this link will help you:
http://jsfiddle.net/7BDwP/
You will get idea from the above link what i am trying to say

How to get reference to another object on other column on same row in a table in Javascript?

I want to set disabled=false for the input box on 3rd column when a user 'check' the checkbox on the 2nd column on Same row
And again disable if user 'uncheck' the checkbox.
<!DOCTYPE html>
<html>
<body>
<p>Check the checkbox to display which type of form element it is.</p>
<table border='1' cellpadding='5'>
<tr>
<td>Item1</td>
<td><input type="checkbox" onclick="myFunction(this)"></td>
<td><input type='number' disabled></td>
<tr>
<tr>
<td>Item2</td>
<td><input type="checkbox" onclick="myFunction(this)"></td>
<td><input type='number' disabled></td>
<tr>
<tr>
<td>Item3</td>
<td><input type="checkbox" onclick="myFunction(this)"></td>
<td><input type='number' disabled></td>
<tr>
</table>
<script>
// function myFunction(item) {
// var x = document.getElementById(item).....how to get a reference to parent;
// x.disabled=false;
// }
</script>
</body>
</html>
I tried with this reference but that have not gave me any solution.
So how can i get the reference to the input box from the checkbox?
I browsed internet but have not get any solution .
You could give the inputs an id attribute for later addressing this element.
function myFunction(item) {
var x = document.getElementById(item);
x.disabled = !x.disabled;
}
<p>Check the checkbox to display which type of form element it is.</p>
<table border="1" cellpadding="5">
<tr>
<td>Item1</td>
<td><input type="checkbox" onclick="myFunction('itemInput1')"></td>
<td><input type="number" id="itemInput1" disabled></td>
</tr>
<tr>
<td>Item2</td>
<td><input type="checkbox" onclick="myFunction('itemInput2')"></td>
<td><input type="number" id="itemInput2" disabled></td>
</tr>
<tr>
<td>Item3</td>
<td><input type="checkbox" onclick="myFunction('itemInput3')"></td>
<td><input type="number" id="itemInput3" disabled></td>
<tr>
</table>
With Element.closest, as #August mentioned and Document.querySelector
function myFunction(element) {
var x = element.closest('tr').querySelector('input[type="number"]');
x.disabled = !x.disabled;
}
<p>Check the checkbox to display which type of form element it is.</p>
<table border="1" cellpadding="5">
<tr>
<td>Item1</td>
<td><input type="checkbox" onclick="myFunction(this)"></td>
<td><input type="number" disabled></td>
</tr>
<tr>
<td>Item2</td>
<td><input type="checkbox" onclick="myFunction(this)"></td>
<td><input type="number" disabled></td>
</tr>
<tr>
<td>Item3</td>
<td><input type="checkbox" onclick="myFunction(this)"></td>
<td><input type="number" disabled></td>
<tr>
</table>
Don't go back to DOM with document.getElementById to get your element, there is no point of doing that.
Try to use the event reference, when calling myFunction the event (onclick) is passed which has property "target".
To understand better do console.log(item); inside the function.
From there, inside your function you could do item.target.closest('tr') to identify the parent of the cell.
<script>
function myFunction(item) {
console.log(item);
var x = item.target.closest('tr');
x.disabled=false;
}
</script>
Documentation for closest() method

JS Calculations for numbers in text fields, and showing correct decimal points

I'm creating a form where people can list a product but the website takes a listing fee once the item sells
I've got a JS Fiddle working but my fields are not showing the correct decimal points
So:
you put a number value in the price field
then the JS puts the price including tax (12,5%) into the next field
then shows you the 25% that the website owner will receive once sold
the shows the amount the seller will receive once item sells.
You can see what I've managed to get working in the below fiddle, but my JS is just so sloppy and I'm not sure how to get it to work exactly how I want.
Any assistance would be greatly appreciated
https://jsfiddle.net/Lq2cv4w9/1/
<form>
<table class="webform" cellspacing="0" cellpadding="2" border="0">
<tbody>
<tr>
<td><label for="CAT_Custom_2">Price</label><br />
<input type="text" maxlength="4000" onchange="output()" name="CAT_Custom_2" id="CAT_Custom_2" class="cat_textbox" /></td>
</tr>
<tr>
<td><label for="CAT_Custom_13">Price Including Tax's</label><br />
<input type="text" maxlength="4000" name="CAT_Custom_13" id="CAT_Custom_13" class="cat_textbox" /></td>
</tr>
<tr>
<td><label for="CAT_Custom_14">Cloudwine Commission 25%</label><br />
<input type="text" maxlength="4000" name="CAT_Custom_14" id="CAT_Custom_14" class="cat_textbox" /></td>
</tr>
<tr>
<td><label for="CAT_Custom_15">Seller Receives</label><br />
<input type="text" maxlength="4000" name="CAT_Custom_15" id="CAT_Custom_15" class="cat_textbox" /></td>
</tr>
<tr>
<td><label for="CAT_Custom_11">Listed Price</label><br />
<input type="text" maxlength="4000" name="CAT_Custom_11" id="CAT_Custom_11" class="cat_textbox" /></td>
</tr>
<tr>
<td><input class="cat_button" type="submit" value="Submit" id="catcustomcontentbutton" /></td>
</tr>
</tbody>
</table>
<script type="text/javascript" src="/CatalystScripts/ValidationFunctions.js?vs=b89.r513012-phase1"></script>
<script type="text/javascript">
function output() {
var value1 = document.getElementById('CAT_Custom_2').value;
document.getElementById('CAT_Custom_13').value = parseInt(value1) * (0.125) + parseInt(value1);
var value2 = document.getElementById('CAT_Custom_13').value;
document.getElementById('CAT_Custom_14').value = parseInt(value2) * (0.25);
var value3 = document.getElementById('CAT_Custom_14').value;
document.getElementById('CAT_Custom_15').value = parseInt(value2) - parseInt(value3);
document.getElementById('CAT_Custom_11').value = parseInt(value2);
}
</script>
</form>

How to fix this calculate script which has "NaN" in cost box?

I have a calculate script for cost, but I have a little problem when I try to empty price box, there is "NaN" in cost box.
I do not know where is the problem. I have made following changes: digitsVal=isNaN(digitsVal)?0:digitsVal; became var digitsVal=isNaN(digitsVal)?0:digitsVal; and first this code is working, but second I try to empty in cost box, there is still "NaN" in cost box.
How to fix this calculate script ?. Are there solution about this script?
Example :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>berkelilingkesemua.info</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
var price=$('#price'),
phone=$('#phone_number'),
digits=$('#digits'),
sum=$('#sum');
function calculateSum() {
var digitsVal=parseInt(phone.val().substr(-2));
digitsVal=isNaN(digitsVal)?0:digitsVal;
digits.val(digitsVal);
sum.val(parseFloat(price.val())+digitsVal);
};
phone.on('keyup', calculateSum);
price.on('keyup', calculateSum);
});
</script>
<table width="300px" border="1">
<tr>
<td width="40px">1</td>
<td>Price</td>
<td><input class="txt" name="price" type="text" id="price"></td>
</tr>
<tr>
<td>2</td>
<td>Phone Number</td>
<td><input name="phone_number" type="text" id="phone_number"></td>
</tr>
<tr>
<td>3</td>
<td>2 Digits</td>
<td><input class="txt" name="digits" type="text" id="digits" readonly></td>
</tr>
<tr id="summation">
<td> </td>
<td align="right">Cost :</td>
<td align="center"><input type="text" name="sum" id="sum" value="0"></span></td>
</tr>
</table>
</body>
</html>
Replace:
sum.val(parseFloat(price.val())+digitsVal);
With:
isNaN(parseFloat(price.val())+digitsVal) ? sum.val(0) : sum.val(parseFloat(price.val())+digitsVal);
I think this should work for you

HTML + JavaScript results textbox to a NaN error

So I have this little homework im struggling with. Everytime I declare a variable as parseFloat in Javascript. It just results the textbox a NaN. Here's the code:
<!DOCTYPE html>
<html>
<head>
<title>Bank Statement</title>
</head>
<body>
<center>
<h1 style="font-size:43pt">Statement of Account</h1>
<p>
<form name=fr1>
Customer Name: <input type=text name=ct>
Account No. : <input type=text name=acct><br><br>
<table border=4>
<tr>
<th>Description</th>
<th>Debit</th>
<th>Credit</th>
<th>Balance</th>
</tr>
<tr>
<th>Last Balance</th>
<td> </td>
<td> </td>
<td><input type=text name=b1></td>
</tr>
<tr>
<th>Monthly Salary</th>
<td><input type=text name=d2></td>
<td><input type=text name=c2></td>
<td><input type=text name=b2></td>
</tr>
<tr>
<th>ATM</th>
<td><input type=text name=d3></td>
<td><input type=text name=c3></td>
<td><input type=text name=b3></td>
</tr>
<tr>
<th>Refund</th>
<td><input type=text name=d4></td>
<td><input type=text name=c4></td>
<td><input type=text name=b4></td>
</tr>
<tr>
<th>ATM</th>
<td><input type=text name=d5></td>
<td><input type=text name=c5></td>
<td><input type=text name=b5></td>
</tr>
<tr>
<th>Telephone Bill</th>
<td><input type=text name=d6></td>
<td><input type=text name=c6></td>
<td><input type=text name=b6></td>
</tr>
<tr>
<th>Total Movement</th>
<td><input type=text name=d7></td>
<td><input type=text name=c7></td>
<td> </td>
</tr>
</table><br>
<input type=button value="Show" onclick=show()>
<input type=reset value="Clear">
</form>
<script language="javascript">
function show()
{
b1=document.fr1.b1.value;
b2=document.fr1.b2.value;
b3=document.fr1.b3.value;
b4=document.fr1.b4.value;
b5=document.fr1.b5.value;
b6=document.fr1.b6.value;
d2=document.fr1.d2.value;
d3=document.fr1.d3.value;
d4=document.fr1.d4.value;
d5=document.fr1.d5.value;
d6=document.fr1.d6.value;
d7=document.fr1.d7.value;
c2=document.fr1.c2.value;
c3=document.fr1.c3.value;
c4=document.fr1.c4.value;
c5=document.fr1.c5.value;
c6=document.fr1.c6.value;
c7=document.fr1.c7.value;
b1=parseFloat(b1);
b2=parseFloat(b2);
b3=parseFloat(b3);
b4=parseFloat(b4);
b5=parseFloat(b5);
b6=parseFloat(b6);
d2=parseFloat(d2);
d3=parseFloat(d3);
d4=parseFloat(d4);
d5=parseFloat(d5);
d6=parseFloat(d6);
d7=parseFloat(d7);
c2=parseFloat(c2);
c3=parseFloat(c3);
c4=parseFloat(c4);
c5=parseFloat(c5);
c6=parseFloat(c6);
c7=parseFloat(c7);
document.fr1.b2.value=(b1-d2+c2);
document.fr1.b3.value=(b2-d3+c3);
document.fr1.b4.value=(b3-d4+c4);
document.fr1.b5.value=(b4-d5+c5);
document.fr1.b6.value=(b5-d6+c6);
document.fr1.d7.value=(d2+d3+d4+d5+d6);
document.fr1.c7.value=(c2+c3+c4+c5+c6);
}
</script>
</center>
</body>
</html>
So I dont know why it's giving me NaN. Any tips or info I missed?
EDIT: This is what im getting at NaN: http://gyazo.com/73ae7a6d0fbbf4500b7547425c367349
-- Notice that the Blance and Credit give the 2nd balance NaN
There are two errors in the code:
You're falling prey to The Horror of Implicit Globals by not declaring your local variables.
You're parsing fields with blank values and not checking the result. parseFloat("") returns NaN.
If you declare your variables and check that you're not parsing blank fields, you won't have NaN slipping into things.
If you want to treat a blank field as 0, you can use JavaScript's curiously-powerful || operator for that:
b1 = parseFloat(b1) || 0;
Separately from those errors, any time you find yourself writing long lists of variable names like b1, b2, b3, etc., look at using a loop and/or arrays.

Categories