Javascript Form calculator

Javascript Form calculator - javascript

When I type values in the far right text boxes, then click "click to calculate" i want the values of all the text boxes to add up and display. I cannot figure it out. when i click the click to calculate button, it does nothing. not a thing!
<SCRIPT>
function add()
{
var a = document.getElementById("fscf_field4_8").value;
var b = document.getElementById("fscf_field4_10").value;
var c = document.getElementById("fscf_field4_12").value;
var d = document.getElementById("fscf_field4_14").value;
var e = document.getElementById("fscf_field4_16").value;
document.getElementById("fscf_field4_19").value =a+b+c+d+e;
}
</script>
<table>
<tr>
<td>
<div id="FSContact4" style="width:375px;">
<form action="/payment/#FSContact4" id="fscf_form4" method="post">
<input type="hidden" name="fscf_submitted" value="0">
<input type="hidden" name="fs_postonce_4" value="99193296484a8d52d2b9579199ca2f0c,1384214867">
<input type="hidden" name="si_contact_action" value="send">
<input type="hidden" name="form_id" value="4">
<div id="fscf_required4">
<span style="text-align:left;">*</span> <span style="text-align:left;">indicates required field</span>
</div>
<input type="hidden" name="mailto_id" value="1">
<div id="fscf_div_clear4_4" style="clear:both;">
<div id="fscf_div_field4_4" style="clear:left; float:left; width:99%; max-width:550px; margin-right:10px;">
<div id="fscf_label4_4" style="text-align:left; padding-top:5px;">
<label style="text-align:left;" for="fscf_field4_4">Company Name<span style="text-align:left;">*</span></label>
</div>
<div style="text-align:left;">
<input style="text-align:left; margin:0;" type="text" id="fscf_field4_4" name="company-name" value="">
</div>
</div>
</div>
<div id="fscf_div_clear4_5" style="clear:both;">
<div id="fscf_div_field4_5" style="clear:left; float:left; width:99%; max-width:550px; margin-right:10px;">
<div id="fscf_label4_5" style="text-align:left; padding-top:5px;">
<label style="text-align:left;" for="fscf_field4_5">Person Doing the Transaction<span style="text-align:left;">*</span></label>
</div>
<div style="text-align:left;">
<input style="text-align:left; margin:0;" type="text" id="fscf_field4_5" name="person-doing-the-transaction" value="">
</div>
</div>
</div>
<div id="fscf_div_clear4_6" style="clear:both;">
<div id="fscf_div_field4_6" style="clear:left; float:left; width:99%; max-width:550px; margin-right:10px;">
<div id="fscf_label4_6" style="text-align:left; padding-top:5px;">
<label style="text-align:left;" for="fscf_field4_6">email<span style="text-align:left;">*</span></label>
</div>
<div style="text-align:left;">
<input style="text-align:left; margin:0;" type="text" id="fscf_field4_6" name="email01" value="">
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<table border="1" bordercolor="#FFCC00" style="background-color:#FFFFCC" width="100%" cellpadding="3" cellspacing="3">
<tr>
<td>Invoice Number</td>
<td>Amount (USD)</td>
</tr>
<tr>
<td><input type="text" id="fscf_field4_7 name="Invoice Number 1"></td>
<td><input type="text" id="fscf_field4_8 name="Amount 1"></td>
</tr>
<tr>
<td><input type="text" id="fscf_field4_9 name="Invoice Number 2"></td>
<td><input type="text" id="fscf_field4_10 name="Amount 2"></td>
</tr>
<tr>
<td><input type="text" id="fscf_field4_11 name="Invoice Number 3"></td>
<td><input type="text" id="fscf_field4_12 name="Amount 3"></td>
</tr>
<tr>
<td><input type="text" id="fscf_field4_13 name="Invoice Number 4"></td>
<td><input type="text" id="fscf_field4_14 name="Amount 4"></td>
</tr>
<tr>
<td><input type="text" id="fscf_field4_15 name="Invoice Number 5"></td>
<td><input type="text" id="fscf_field4_16 name="Amount 5"></td>
</tr>
<tr>
<td><input type="button" id="click" value="Click to Calculate" onclick="add();"></td>
<td><input type="text" id="fscf_field4_19"></td>
</tr>
</table>
<div id="fscf_submit_div4" style="text-align:left; padding-top:2px;">
<input type="submit" id="fscf_submit4" style="cursor:pointer; margin:0;" value="Submit">
</div>
</form>
</div>
</tr>
</td>
</table>

You are not closing the id value of your table properly.
Error:<input type="text" id="fscf_field4_7 name="Invoice Number 1">
There is no closing Quotes for id value(fscf_field4_7)
above. try to close id value if all TextBox's properly.
Replace your table with following:
<table border="1" bordercolor="#FFCC00" style="background-color:#FFFFCC" width="100%" cellpadding="3" cellspacing="3">
<tr>
<td>Invoice Number</td>
<td>Amount (USD)</td>
</tr>
<tr>
<td><input type="text" id="fscf_field4_7" name="Invoice Number 1"/></td>
<td><input type="text" id="fscf_field4_8" name="Amount 1"></td>
</tr>
<tr>
<td><input type="text" id="fscf_field4_9" name="Invoice Number 2"></td>
<td><input type="text" id="fscf_field4_10" name="Amount 2"></td>
</tr>
<tr>
<td><input type="text" id="fscf_field4_11" name="Invoice Number 3"></td>
<td><input type="text" id="fscf_field4_12" name="Amount 3"></td>
</tr>
<tr>
<td><input type="text" id="fscf_field4_13" name="Invoice Number 4"></td>
<td><input type="text" id="fscf_field4_14" name="Amount 4"></td>
</tr>
<tr>
<td><input type="text" id="fscf_field4_15" name="Invoice Number 5"></td>
<td><input type="text" id="fscf_field4_16" name="Amount 5"></td>
</tr>
<tr>
<td><input type="button" id="click" value="Click to Calculate" onclick="add()"></td>
<td><input type="text" id="fscf_field4_19"></td>
</tr>
</table>

To start with, you forgot to close the quotation marks of all the IDs of inputs. Try doing it.
i.e.
<input type="text" id="fscf_field4_8 name="Amount 1">
needs to be:
<input type="text" id="fscf_field4_8" name="Amount 1">
Also you need to add parseInt() when you parsing string's int value. below i put the new code snippet
Confirmation: Just tried your code with proper quotation marks and intParse(),it works
Your final code for integer parse:
<SCRIPT>
function add()
{
var a = parseInt(document.getElementById("fscf_field4_8").value);
var b = parseInt(document.getElementById("fscf_field4_10").value);
var c = parseInt(document.getElementById("fscf_field4_12").value);
var d = parseInt(document.getElementById("fscf_field4_14").value);
var e = parseInt(document.getElementById("fscf_field4_16").value);
document.getElementById("fscf_field4_19").value =a+b+c+d+e;
}
</script>

Please check this working sample http://jsfiddle.net/6AYFg/
Properly close all your tags and attributes first
parse values from all elements to int
<td><input type="text" id="fscf_field4_7 name="Invoice Number 1"></td>
function add()
{
var a = document.getElementById("fscf_field4_8").value;
var b = document.getElementById("fscf_field4_10").value;
var c = document.getElementById("fscf_field4_12").value;
var d = document.getElementById("fscf_field4_14").value;
var e = document.getElementById("fscf_field4_16").value;
document.getElementById("fscf_field4_19").value =a+b+c+d+e;
}

Related

change event on multiple text box in a modal

I have a table and each row of the table has a checkbox, textbox and name field.
Following is the html
<tr>
<td><input type="checkbox" name="visible" id="soil_row_cb" checked></td>
<td><input type="text" name="position" style="text-align: center;" maxlength="3" size="3" value="NA"></td>
<td>Name</td>
<td><input type="text" name="factor" style="text-align: center;" maxlength="3" size="3" value="NA"></td>
</tr>
i want to read the value as soon as it is entered in any of the text box with name = position

Please Have a look
$("input[name='position']").keyup(function() {
var valueOfInput = $(this).val(); //value
var indexOfTr = $(this).parents('tr').index(); //index
console.log(valueOfInput, '-->', indexOfTr);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="mytable">
<tbody>
<tr>
<td><input type="checkbox" name="visible" id="soil_row_cb" checked></td>
<td><input type="text" name="position" style="text-align: center;" maxlength="3" size="3" value="NA" /></td>
<td><input type="text" name="position" style="text-align: center;" maxlength="3" size="3" value="w" /></td>
</tr>
<tr>
<td><input type="checkbox" name="visible" id="soil_row_cb" checked></td>
<td><input type="text" name="position" style="text-align: center;" maxlength="3" size="3" value="s" /></td>
<td>Name</td>
</tr>
</tbody>
</table>

you can use name as array and make common class name for input field...
hope it work...
$('.myclassname').on("keyup",function(){
var row_index = $(this).closest("tr").index();
// row_index = row_index-1; // if you have tr header then enable this also...
var textvalue = $("[name='position[]']").eq(row_index).val();
alert(textvalue);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="mytable">
<tbody>
<tr>
<td><input type="checkbox" name="visible" id="soil_row_cb" checked></td>
<td><input type="text" name="position[]" class="myclassname" style="text-align: center;" maxlength="3" size="3" value="NA" /></td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" name="visible" id="soil_row_cb" checked></td>
<td><input type="text" name="position[]" class="myclassname" style="text-align: center;" maxlength="3" size="3" value="s" /></td>
<td>Name</td>
</tr>
</tbody>
</table>

How to display data from array of objects in a textbox using javascript?

I want to display data stored in an array in form-
for example:
var users =
[
{
'name':'John',
'age':'10'
},
{
'name':'Rose',
'age':'18'
}
];
and I want to display name and age of users logged in, in the form below:
<form id="myform">
<div>
</div>
<h2 align="center"> Edit Details</h2>
<table id="table1"; cellspacing="5px" cellpadding="5%"; align="center">
<tr>
<td align="right" class="style1">First Name:</td>
<td class="style1"><input id="firstname" type="text" placeholder="FirstName" /></td>
</tr>
<tr>
<td align="right">Last Name:</td>
<td><input id="lastname" type="text" placeholder="LastName" /></td>
</tr>
<tr>
<td align="right">Email ID:</td>
<td><input id="email" type="text" placeholder="Email" /></td>
</tr>
<tr>
<td align="right">User Name:</td>
<td><input id="username" type="text" placeholder="UserName" /></td>
</tr>
<tr>
<td align="right">Password:</td>
<td><input id="password" type="password" placeholder="Password" /></td>
</tr>
<tr>
<td> <input type="button" value="Edit" onclick="edit()" />
<td> <input type="button" value="Reset" />
</td>
</tr>
</table>
</form>

You can just change the text content with pure javascript.
name.textContent = 'First name' + users[0].name;
Of course, you will need to select all the fields you want to change.

jQuery append text to multiple input fields

I want to append the same text from a input field to other multiple fields when a button is clicked.
Here is the form :
<div class="affiliate-id-form">
<input type="text" name="affiliateID" id="affiliateID" placeholder="Enter your affiliate ID eg. 124531" />
<input type="button" name="generate-links" id="btnGenerateLinks" value="Generate Links">
</div>
And here is the code of the input fields where I want the text to be appended.
<div class="affiliate-links">
<table class="affiliateLinksTable">
<tbody>
<tr>
<td><label for=""> FIrst Product Name</label></td>
<td><input id="affiliateLinkGenerated" type="text" name="affiliate-link" value="http://firstproduct.html?A="></td>
</tr>
<tr>
<td><label for=""> Second Product Name</label></td>
<td><input id="affiliateLinkGenerated" type="text" name="affiliate-link" value="http://secondproduct.html?A="></td>
</tr>
<tr>
<td><label for=""> FIrst Product Name</label></td>
<td><input id="affiliateLinkGenerated" type="text" name="affiliate-link" value="http://thirdproduct.html?A="></td>
</tr>
<tr>
<td><label for=""> FIrst Product Name</label></td>
<td><input id="affiliateLinkGenerated" type="text" name="affiliate-link" value="http://fourthproduct.html?A="></td>
</tr>
<tr>
<td><label for=""> FIrst Product Name</label></td>
<td><input id="affiliateLinkGenerated" type="text" name="affiliate-link" value="http://fifthproduct.html?A="></td>
</tr>
<tr>
<td><label for=""> FIrst Product Name</label></td>
<td><input id="affiliateLinkGenerated" type="text" name="affiliate-link" value="http://sixthproduct.html?A="></td>
</tr>
<tr>
<td><label for=""> FIrst Product Name</label></td>
<td><input id="affiliateLinkGenerated" type="text" name="affiliate-link" value="http://seventhproduct.html?A="></td>
</tr>
</tbody>
</table>
<div >

I think you want to not just append but also each time replace the "A=" so with this assumption i have added a data attribute in your html for each input data-link="http://firstproduct.html?A=". This way you can do very easy.
$('#btnGenerateLinks').on('click', function() {
var valNeed = $('#affiliateID').val();
// if (valNeed.trim().length) { // In case you want filter blank string
$('input[name="affiliate-link"]').each(function() {
$(this).val($(this).data('link') + valNeed);
})
// }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="affiliate-id-form">
<input type="text" name="affiliateID" id="affiliateID" placeholder="Enter your affiliate ID eg. 124531" />
<input type="button" name="generate-links" id="btnGenerateLinks" value="Generate Links">
</div>
<div class="affiliate-links">
<table class="affiliateLinksTable">
<tbody>
<tr>
<td>
<label for="">FIrst Product Name</label>
</td>
<td>
<input id="affiliateLinkGenerated" type="text" data-link="http://firstproduct.html?A=" name="affiliate-link" value="http://firstproduct.html?A=">
</td>
</tr>
<tr>
<td>
<label for="">Second Product Name</label>
</td>
<td>
<input id="affiliateLinkGenerated" type="text" data-link="http://secondproduct.html?A=" name="affiliate-link" value="http://secondproduct.html?A=">
</td>
</tr>
<tr>
<td>
<label for="">FIrst Product Name</label>
</td>
<td>
<input id="affiliateLinkGenerated" type="text" data-link="http://thirdproduct.html?A=" name="affiliate-link" value="http://thirdproduct.html?A=">
</td>
</tr>
<tr>
<td>
<label for="">FIrst Product Name</label>
</td>
<td>
<input id="affiliateLinkGenerated" type="text" data-link="http://fourthproduct.html?A=" name="affiliate-link" value="http://fourthproduct.html?A=">
</td>
</tr>
<tr>
<td>
<label for="">FIrst Product Name</label>
</td>
<td>
<input id="affiliateLinkGenerated" type="text" data-link="http://fifthproduct.html?A=" name="affiliate-link" value="http://fifthproduct.html?A=">
</td>
</tr>
<tr>
<td>
<label for="">FIrst Product Name</label>
</td>
<td>
<input id="affiliateLinkGenerated" type="text" data-link="http://sixthproduct.html?A=" name="affiliate-link" value="http://sixthproduct.html?A=">
</td>
</tr>
<tr>
<td>
<label for="">FIrst Product Name</label>
</td>
<td>
<input id="affiliateLinkGenerated" type="text" data-link="http://seventhproduct.html?A=" name="affiliate-link" value="http://seventhproduct.html?A=">
</td>
</tr>
</tbody>
</table>
<div>

$("#btnGenerateLinks").on("click", function() {
$(".myClass").each(function() {
$(this).val($(this).val() + $("#affiliateID").val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="affiliate-links">
<table class="affiliateLinksTable">
<tbody>
<tr>
<td><label for=""> FIrst Product Name</label></td>
<td><input class="myClass" id="affiliateLinkGenerated" type="text" name="affiliate-link" value="http://firstproduct.html?A="></td>
</tr>
<tr>
<td><label for=""> Second Product Name</label></td>
<td><input class="myClass" id="affiliateLinkGenerated" type="text" name="affiliate-link" value="http://secondproduct.html?A="></td>
</tr>
<tr>
<td><label for=""> FIrst Product Name</label></td>
<td><input class="myClass" id="affiliateLinkGenerated" type="text" name="affiliate-link" value="http://thirdproduct.html?A="></td>
</tr>
<tr>
<td><label for=""> FIrst Product Name</label></td>
<td><input class="myClass" id="affiliateLinkGenerated" type="text" name="affiliate-link" value="http://fourthproduct.html?A="></td>
</tr>
<tr>
<td><label for=""> FIrst Product Name</label></td>
<td><input class="myClass" id="affiliateLinkGenerated" type="text" name="affiliate-link" value="http://fifthproduct.html?A="></td>
</tr>
<tr>
<td><label for=""> FIrst Product Name</label></td>
<td><input class="myClass" id="affiliateLinkGenerated" type="text" name="affiliate-link" value="http://sixthproduct.html?A="></td>
</tr>
<tr>
<td><label for=""> FIrst Product Name</label></td>
<td><input class="myClass" id="affiliateLinkGenerated" type="text" name="affiliate-link" value="http://seventhproduct.html?A="></td>
</tr>
</tbody>
</table>
<div >
<div class="affiliate-id-form">
<input type="text" name="affiliateID" id="affiliateID" placeholder="Enter your affiliate ID eg. 124531" />
<input type="button" name="generate-links" id="btnGenerateLinks" value="Generate Links">
</div>

id of element in document should be unique. Substitute class="affiliateLinkGenerated" for id="affiliateLinkGenerated" at <input> elements.
Attach click event to "btnGenerateLinks" element, use .querySelectorAll() to select ".affiliateLinkGenerated" input elements, iterate elements at for loop, set .value of each element to .previousElementSibling of clicked <input type="button"> element.
document.getElementById("btnGenerateLinks")
.addEventListener("click", function() {
var prev = this.previousElementSibling;
var inputs = document.querySelectorAll(".affiliateLinkGenerated");
for (var i = 0; i < inputs.length; i++) {
inputs[i].value = prev.value;
}
})
<div class="affiliate-id-form">
<input type="text" name="affiliateID" id="affiliateID" placeholder="Enter your affiliate ID eg. 124531" />
<input type="button" name="generate-links" id="btnGenerateLinks" value="Generate Links">
</div>
<div class="affiliate-links">
<table class="affiliateLinksTable">
<tbody>
<tr>
<td>
<label for="">FIrst Product Name</label>
</td>
<td>
<input class="affiliateLinkGenerated" type="text" name="affiliate-link" value="http://firstproduct.html?A=">
</td>
</tr>
<tr>
<td>
<label for="">Second Product Name</label>
</td>
<td>
<input class="affiliateLinkGenerated" type="text" name="affiliate-link" value="http://secondproduct.html?A=">
</td>
</tr>
<tr>
<td>
<label for="">FIrst Product Name</label>
</td>
<td>
<input class="affiliateLinkGenerated" type="text" name="affiliate-link" value="http://thirdproduct.html?A=">
</td>
</tr>
<tr>
<td>
<label for="">FIrst Product Name</label>
</td>
<td>
<input class="affiliateLinkGenerated" type="text" name="affiliate-link" value="http://fourthproduct.html?A=">
</td>
</tr>
<tr>
<td>
<label for="">FIrst Product Name</label>
</td>
<td>
<input class="affiliateLinkGenerated" type="text" name="affiliate-link" value="http://fifthproduct.html?A=">
</td>
</tr>
<tr>
<td>
<label for="">FIrst Product Name</label>
</td>
<td>
<input class="affiliateLinkGenerated" type="text" name="affiliate-link" value="http://sixthproduct.html?A=">
</td>
</tr>
<tr>
<td>
<label for="">FIrst Product Name</label>
</td>
<td>
<input class="affiliateLinkGenerated" type="text" name="affiliate-link" value="http://seventhproduct.html?A=">
</td>
</tr>
</tbody>
</table>
</div>

input read through scan briefly appears and then resets instantly. How do I fix this?

I can't get this code block to work properly:
<script>
function Message(){
document.getElementById("sname").innerHTML = document.getElementById("name").value;
}
</script>
</head>
<body>
<form>
<table>
<tr>
<td style="width:20%">User Name:</td>
<td><input type="text" id="name" name="name" /></td>
</tr>
<tr><td>Password:</td><td><input type="password" name="password"/></td></tr>
<tr>
<td style="text-align:right">
<input type="submit" onclick="Message()"/>
</td>
</tr>
</table>
</form>
<div>
<p>Hi <span id="sname">0</span></p>
</div>
</body>

Try this
</head>
<body>
<form onsubmit="event.preventDefault();">
<table>
<tr>
<td style="width:20%">User Name:</td>
<td><input type="text" id="name" name="name" /></td>
</tr>
<tr><td>Password:</td><td><input type="password" name="password"/></td></tr>
<tr>
<td style="text-align:right">
<input type="submit" onclick="Message()"/>
</td>
</tr>
</table>
</form>
<div>
<p>Hi <span id="sname">0</span></p>
</div>
<script>
function Message(){ document.getElementById("sname").innerHTML = document.getElementById("name").value; return false;}
</script>
</body>

That's a submit button. Make type='button' instead.

Solution #1
function Message(){
event.preventDefault();
document.getElementById("sname").innerHTML = document.getElementById("name").value;
}
<form>
<table>
<tr>
<td style="width:20%">User Name:</td>
<td><input type="text" id="name" name="name" /></td>
</tr>
<tr><td>Password:</td><td><input type="password" name="password"/></td></tr>
<tr>
<td style="text-align:right">
<input type="submit" onclick="Message()"/>
</td>
</tr>
</table>
</form>
<div>
<p>Hi <span id="sname">0</span></p>
</div>
Solution #2 you can just use button instead of input.
function Message(){
document.getElementById("sname").innerHTML = document.getElementById("name").value;
}
<form>
<table>
<tr>
<td style="width:20%">User Name:</td>
<td><input type="text" id="name" name="name" /></td>
</tr>
<tr><td>Password:</td><td><input type="password" name="password"/></td></tr>
<tr>
<td style="text-align:right">
<button type="button" onclick="Message()"/>Click me</button>
</td>
</tr>
</table>
</form>
<div>
<p>Hi <span id="sname">0</span></p>
</div>
Hope it helps!

Javascript TypeError: xxx is not a function

Friends I came to a bit of problem. Everything was working fine before. But I can't rectify why it starts giving me such error.
Here is my JavaScript Code:
function newSupplier() {
$('div#AddSupplier div.msg').html('').hide();
$('div#AddSupplier div.loader').show();
registerSupplier($('div#AddSupplier table.frm :input').serialize()).done(function (a) {
if (a.Msg) {
$('div#AddSupplier div.msg').html(a.Msg).removeClass('success').addClass('error').fadeIn();
}
else if (a.supid) {
$('div#AddSupplier div.msg').html('Supplier <span class="l2">' + a.supid + '</span> Registered').removeClass('error').addClass('success').fadeIn();
$('div#AddSupplier table.frm :input').val('');
}
}).always(function () {
$('div#AddSupplier div.loader').hide();
}).fail(function () {
$('div#AddSupplier div.msg').html(errMsgNet).removeClass('success').addClass('error').fadeIn();
});
}
And here is the code of registerSupplier() function:
function registerSupplier(dataToPost) {
return $.ajax({
type: "POST",
url: jsonpath + 'Json.ashx?method=RegisterSupplier',
data: dataToPost
});
}
And here is the complete JS file: http://preview.myignou.com/Docs/jScript.js
Related HTML
<div id="ViewOrder">
<h2>View Order Details</h2>
<div class="tab-content">
<table class="frm">
<tr>
<td><label>Enter Order Number</label></td>
<td><input type="text" name="orderNumber" onkeyup="$('#ViewOrder>div>div').fadeOut();" /><input type="button" class="but1 m-side" value="OK" onclick="LoadMaterialOrder();"/></td>
<td>
<div class="process"> </div>
</td>
</tr>
</table>
<div>
<div class="border shadow m-tb">
<h2 class="header">Order Details</h2>
<div id="orderDetails" class="tab-content">
<table class="frm">
<tr>
<td><label>Supplier</label></td>
<td><select id="newSupplier" name="supplier"></select></td>
<td class="r-align"><input type="button" value="Load Suppliers" onclick="loadSuppliers('#newSupplier')" /></td>
</tr>
<tr>
<td><label>Order Date</label></td>
<td><input type="text" name="orderDate" /></td>
</tr>
<tr>
<td><label>Delivery Date</label></td>
<td><input type="text" name="deliveryDate" /></td>
</tr>
<tr>
<td><label>Cancel Date</label></td>
<td><input type="text" name="cancelDate" /></td>
</tr>
<tr>
<td><label>Payment Due Mark</label></td>
<td><input id="payDue2" type="checkbox" name="isPayDue" /><label for="payDue2">Yes</label></td>
</tr>
<tr>
<td><label>Remember Mark</label></td>
<td><input id="remark2" type="checkbox" name="isMarked" /><label for="remark2">Yes</label></td>
</tr>
</table>
</div>
<table class="footer-buttons">
<tr>
<td>
<div class="msg"></div>
<div class="loader" style="display:none;"><img alt="loader" src="CSS/Images/loader.gif" /></div>
</td>
<td><input type="button" class="but1 sub-but" value="Save Changes" onclick=""/><input type="reset" value="Reset" /></td>
</tr>
</table>
</div>
<br />
<div class="border shadow m-tb">
<h2 class="header">Payment Records</h2>
<div id="paymentHistory" class="tab-content">
<table class="tab pay-his">
<tr class="th">
<td></td>
<td>Trans#</td>
<td>Date</td>
<td>Comment</td>
<td>Type</td>
<td>Credit</td>
<td>Debit</td>
<td>Balance</td>
<td>Associated Agent</td>
</tr>
<tr>
<td><input type="radio" name="paySelect" /></td>
<td>101-1</td>
<td>12-12-12</td>
<td>Abclk lask aa</td>
<td>Credit</td>
<td>500</td>
<td></td>
<td>500.00</td>
<td>Shashwat Tripathi</td>
</tr>
<tr>
<td><input type="radio" name="paySelect" /></td>
<td>101-2</td>
<td>12-12-12</td>
<td>Shashwat Tripathi</td>
<td>Debit</td>
<td></td>
<td>500</td>
<td>500.00</td>
<td>Sudhir</td>
</tr>
<tr>
<td><input type="radio" name="paySelect" /></td>
<td>101-3</td>
<td>12-12-12</td>
<td>Shashwat Tripathi</td>
<td>Credit</td>
<td>500</td>
<td></td>
<td>500.00</td>
<td>Sudhir Gaur</td>
</tr>
</table>
<br />
<input type="button" class="but2" value="Edit"
onclick="$('#ViewOrder #payEdit').slideDown(function () { $('html, body').animate({ scrollTop: $('#paymentHistory').offset().top-20 }, 500); });" /><input type="button" class="but2 m-side" value="Delete" />
<div id="payEdit" class="border m-tb shadow" style="display:none;">
<h2 class="header">Edit Payment</h2>
<div class="tab-content">
<table class="frm">
<tr>
<td><label>Date</label></td>
<td><input type="text" name="date" placeholder="dd-mm-yy"/></td>
</tr>
<tr>
<td><label>Type</label></td>
<td>
<select name="type">
<option>Credit</option>
<option>Debit</option>
<option>Expense</option>
</select>
</td>
</tr>
<tr>
<td><label>Amount</label></td>
<td><input type="text" name="amount" placeholder="धनराशी..." /></td>
</tr>
<tr>
<td><label>Comment</label></td>
<td><textarea name="comment" rows="4" cols="10"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="button" class="but1" value="Save Changes" /><input type="button" class="but2 m-side" onclick="$('#payEdit').slideUp();" value="Cancel" /></td>
</tr>
</table>
</div>
</div>
<br />
<h2>Register New Payment</h2>
<hr />
<div id="newMatOrderPayment">
<table class="frm">
<tr>
<td><label>Date</label></td>
<td><input type="text" name="date" placeholder="dd-mm-yy" /></td>
</tr>
<tr>
<td><label>Type</label></td>
<td>
<select name="type">
<option>Credit</option>
<option>Debit</option>
<option>Expense</option>
</select>
</td>
</tr>
<tr>
<td><label>Amount</label></td>
<td><input type="text" name="amount" placeholder="धनराशी..." /></td>
</tr>
<tr>
<td><label>Comment</label></td>
<td><textarea name="comment" rows="4" cols="10"></textarea></td>
</tr>
</table>
</div>
</div>
<table class="footer-buttons">
<tr>
<td>
<div class="msg"></div>
<div class="loader" style="display:none;"><img alt="loader" src="CSS/Images/loader.gif" /></div>
</td>
<td><input type="button" class="but1" value="Register Payment" onclick=""/><input type="button" class="but2" onclick="$('#NewMatOrderPayment :text').val('');" value="Reset" /></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div id="AddSupplier">
<h2>Register New Suppiler</h2>
<div class="tab-content">
<table class="frm">
<tr>
<td><label>Supplier ID</label></td>
<td><input type="text" name="supId" /></td>
</tr>
<tr>
<td><label>Contact Number</label></td>
<td><input type="text" name="contact" /></td>
</tr>
<tr>
<td><label>Address</label></td>
<td><textarea name="address" cols="10" rows="4"></textarea></td>
</tr>
<tr>
<td><label>Email address</label></td>
<td><input type="text" name="email" /></td>
</tr>
<tr>
<td><label>City</label></td>
<td><input type="text" name="city" /></td>
</tr>
</table>
</div>
<table class="footer-buttons">
<tr>
<td>
<div class="msg"></div>
<div class="loader" style="display:none;"><img alt="loader" src="CSS/Images/loader.gif" /></div>
</td>
<td><input type="button" class="but1 sub-but" value="Register" onclick="newSupplier();"/><input type="reset" value="रीसेट" /></td>
</tr>
</table>
</div>
If I am calling this function directly from FF and Firebug console then It is getting called.
But on button click I am getting error TypeError: newSupplier is not a function
Please ask me If u need additional code.

the first select tag in your html code has ID newSupplier just like the name of the function. some browsers can access the node elements just by specifying the ID in the js code and then the function defined is overridden by the element in the DOM.
you need to rename the function name or the element ID.

Develop Reference

JavaScript is the programming language of the Web.

Javascript Form calculator - javascript

Related

change event on multiple text box in a modal

How to display data from array of objects in a textbox using javascript?

jQuery append text to multiple input fields

input read through scan briefly appears and then resets instantly. How do I fix this?

Javascript TypeError: xxx is not a function

Categories

Resources