I have a webpage where I'm processing an HTML form using JavaScript and onClick, but the JavaScript code isn't being executed.
This is my form:
<form action="" method="post" id="reportform">
<input type="radio" name="report" value="customer"><p>Customers</p>
<input type="radio" name="report" value="item"><p>Items Sold</p>
<input type="radio" name="report" value="department"><p>Sales Departments</p>
<input type="radio" name="report" value="person"><p>Sales People</p>
<input type="button" name="reportsubmit" value="Submit" onClick="checkReport(this.form)">
</form>
And this is the JavaScript code (by this way both the JavaScript and the form are located in the body tag):
function checkReport (form)
{
var checked = form.querySelector('input:checked');
var value = checked ? checked.value : null;
if (value == "customer")
{
var href = "http://bdpastudents.com/~a7068104/2013-2014/Lab_13/Reports/Reports.php";
var idx = href.indexOf("Reports", 0);
var new_href = href.slice(0,idx+19) + "#customer" + href.slice(idx+19);
window.location.replace(new_href);
}
else if (value == "item")
{
var href = "http://bdpastudents.com/~a7068104/2013-2014/Lab_13/Reports/Reports.php";
var idx = href.indexOf("Reports", 0);
var new_href = href.slice(0,idx+19) + "#item" + href.slice(idx+19);
window.location.replace(new_href);
}
else if (value == "department")
{
var href = "http://bdpastudents.com/~a7068104/2013-2014/Lab_13/Reports/Reports.php";
var idx = href.indexOf("Reports", 0);
var new_href = href.slice(0,idx+19) + "#department" + href.slice(idx+19);
window.location.replace(new_href);
}
else if (value == "person")
{
var href = "http://bdpastudents.com/~a7068104/2013-2014/Lab_13/Reports/Reports.php";
var idx = href.indexOf("Reports", 0);
var new_href = href.slice(0,idx+19) + "#person" + href.slice(idx+19);
window.location.replace(new_href);
}
}
function checkCustomer(form)
{
var checked = form.querySelector('input:checked');
var value = checked ? checked.value : null;
if (value == "all")
{
var href = "http://bdpastudents.com/~a7068104/2013-2014/Lab_13/Reports/Reports.php";
var idx = href.indexOf("Reports", 0);
var new_href = href.slice(0,idx+19) + "#allcustomers" + href.slice(idx+19);
window.location.replace(new_href);
}
else if (value == "one")
{
var href = "http://bdpastudents.com/~a7068104/2013-2014/Lab_13/Reports/Reports.php";
var idx = href.indexOf("Reports", 0);
var new_href = href.slice(0,idx+19) + "#onecustomer" + href.slice(idx+19);
window.location.replace(new_href);
}
}
Your HTML is illegal. You have not closed your input tags. Who knew, you don't have to close your tags. Sorry about that.
Can you replicate your problem on this fiddle? Or does this work for you?
var form = document.getElementById('reportForm');
http://jsfiddle.net/mgDGN/
Related
Over my head with javascript. I'm trying to get the cards to shuffle when clicking next.
Currently, it moves forward with one random shuffle and stops. Back and forward buttons then no longer work at that point.
Please help—many thanks.
When I'm lost and unsure what sample of the code to pinpoint, the captions go up to 499. The sample is also here: https://rrrhhhhhhhhh.github.io/sentences/
Very new to javascript. So any help is greatly appreciated. Very open to better ways to achieve this???
How I have it set up:
HTML:
var r = -1;
var mx = 499; // maximum
var a = new Array();
function AddNumsToDict(){
var m,n,i,j;
i = 0;
j = 0;
while (i <= 499)
{
m = (500 * Math.random()) + 1;
n = Math.floor(m);
for (j=0;j<=499;j++)
{
if (a[j] == (n-1))
{
j = -1;
break;
}
}
if (j != -1)
{
//a.push(n-1);
a[i] = (n-1);
i++;
j=0;
}
}
return;
}
function startup()
{
writit('SENTENCES<br><br><br>Robert Grenier', 'test');
SetCookie("pg", -1);
AddNumsToDict();
}
function SetCookie(sName, sValue)
{
document.cookie = sName + "=" + escape(sValue) + ";"
}
function GetCookie(sName)
{
// cookies are separated by semicolons
var aCookie = document.cookie.split("; ");
for (var i=0; i < aCookie.length; i++)
{
// a name/value pair (a crumb) is separated by an equal sign
var aCrumb = aCookie[i].split("=");
if (sName == aCrumb[0])
return unescape(aCrumb[1]);
}
// a cookie with the requested name does not exist
return null;
}
function doBack(){
//var oPrev = xbElem('prev');
//var oNxt = xbElem('nxt');
//if ((oNxt) && (oPrev))
//{
var num = GetCookie("pg");
if (num == mx){ //maximum
SetCookie("pg",parseInt(num) - 1);
num = GetCookie("pg");
}
// oNxt.disabled = false;
// if (num <= 1){
// oPrev.disabled = true;
// }
if (num >= 1){
num--;
writit(Caption[a[num]], 'test');
SetCookie("pg",num);
}
//}
}
function doNext(){
//var oPrev = xbElem('prev');
//var oNxt = xbElem('nxt');
// if ((oNxt) && (oPrev))
// {
var num = GetCookie("pg");
// if (num > -1){
// oPrev.disabled = false;
// }
// else{
// oPrev.disabled = true;
// }
// if (num >= parseInt(mx)-1){ //maximum - 1
// oNxt.disabled = true;
// }
// else {
// oNxt.disabled = false;
// }
if (num <= parseInt(mx)-2){
num++;
writit(Caption[a[num]],'test');
SetCookie("pg",num);
}
// }
}
function writit(text,id)
{
if (document.getElementById)
{
x = document.getElementById(id);
x.innerHTML = '';
x.innerHTML = text;
}
else if (document.all)
{
x = document.all[id];
x.innerHTML = text;
}
else if (document.layers)
{
x = document.layers[id];
l = (480-(getNumLines(text)*8))/2;
w = (764-(getWidestLine(text)*8))/2;
text2 = '<td id=rel align="center" CLASS="testclass" style="font:12px courier,courier new;padding-left:' + w.toString() + 'px' + ';padding-top:' + l.toString() + 'px' + '">' + text + '</td>';
x.document.open();
x.document.write(text2);
x.document.close();
}
}
function getNumLines(mystr)
{
var a = mystr.split("<br>")
return(a.length);
}
function getWidestLine(mystr)
{
if (mystr.indexOf(" ") != -1)
{
re = / */g;
mystr = mystr.replace(re,"Z");
//alert(mystr);
}
if (mystr.indexOf("<u>") != -1)
{
re = /<u>*/g;
mystr = mystr.replace(re, "");
re = /<\/u>*/g;
mystr = mystr.replace(re, "");
}
if (mystr.indexOf("<br>") != -1)
{
var ss, t;
var lngest;
ss = mystr.split("<br>");
lngest = ss[0].length;
for (t=0; t < ss.length; t++)
{
if (ss[t].length > lngest)
{
lngest = ss[t].length;
}
}
}
else {
lngest = mystr.length;
}
return(lngest);
}
// -->
</script>
<body bgcolor="gainsboro" onload="startup();">
<table bgcolor="white" border height="480px" width="764px" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<table nowrap>
<tr>
<td><img width="700px" height="1px" src="./resources/images/w.gif"></td>
<td>
<div class="testclass" id="test"></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<center>
<form>
<p>
<input type="button" onclick="doBack(); return false" value="Back">
<input type="button" onclick="doNext(); return false" value="Next">
JS:
var _____WB$wombat$assign$function_____ = function(name) {return (self._wb_wombat && self._wb_wombat.local_init && self._wb_wombat.local_init(name)) || self[name]; };
if (!self.__WB_pmw) { self.__WB_pmw = function(obj) { this.__WB_source = obj; return this; } }
{
let window = _____WB$wombat$assign$function_____("window");
let self = _____WB$wombat$assign$function_____("self");
let document = _____WB$wombat$assign$function_____("document");
let location = _____WB$wombat$assign$function_____("location");
let top = _____WB$wombat$assign$function_____("top");
let parent = _____WB$wombat$assign$function_____("parent");
let frames = _____WB$wombat$assign$function_____("frames");
let opener = _____WB$wombat$assign$function_____("opener");
function CaptionArray(len) {
this.length=len
}
Caption = new CaptionArray(499);
Caption[0] = "leaf and the ants as latterly"
Caption[1] = "thought<br>living in<br>Davis would<br>be ok"
Caption[2] = "sure arm today"
Caption[3] = "AMY<br><br>no we<br>both do<br>different<br>songs together"
Caption[4] = "much of anything she doesn't like that at all"
Caption[5] = "SUNG AS LAKE<br><br><br>that never wanted back to come"
Caption[6] = "five sound shut doors"
Caption[7] = "oh<br>my nose is<br>so<br>red<br>Obediah<br>dear"
Caption[8] = "these<br>cubes<br>have been<br>on the floor"
Caption[9] = "sweating importunate"
Caption[10] = "all over noises phone rings"
Caption[11] = "I think this is the water supply for Lake Johnsbury"
Caption[12] = "Paw so greasy"
Caption[13] = "BLACK & WHITE RAIN<br><br><br>clear water grey drops<br><br><br>on windshields in a line<br><br><br>of cars progressing slowly<br><br><br>with windshield wipers wiping"
Caption[14] = "EMILY<br><br>Roger,<br><br>are you<br><br>thinking of me"
Caption[15] = "STICKS<br><br><br>rhythm is inside the sound like another"
Caption[16] = "I think their dog always barks when coming back from the woods"
Caption[17] = "weren't there<br><br>conversations"
Caption[18] = "LOOKING AT FIRE<br><br><u>ashes</u> to ashes<br><br>looking at the fire<br><br>at has been added"
Caption[19] = "a the bank"
}
I have been studying JavaScript and experiment with some things. I have build a small application (see code below). Everything is going well untill the function eindResultaat(). Here it seems that there is something with resultaat3 (it is NaN) but I can not figure out why. resultaat1 and resultaat2 are getting processed in the same way and there it goes fine.
var resultatenArray = [];
var eindcijfer, eRes1, eRes2, eRes3, resultaat1, resultaat2, resultaat3;
function berekening1() {
resultaat1 = document.getElementById("eersteTentamen").value;
console.log("Dit is resultaat1 " + resultaat1);
if ((resultaat1 == "GR") || (resultaat1 == "gr")) {
document.getElementById("res1").innerHTML = "Geen resultaat";
resultaat1 = resultaat1 || 0;
//eRes1 = 0.0;
} else {
let res1 = document.getElementById("res1");
res1.innerHTML = resultaat1;
res1.style.color = resultaat1 >= 5.5 ? 'green' : 'red';
document.getElementById("res1").innerHTML = resultaat1;
//eRes1 = resultaat1;
resultatenArray.push(resultaat1);
console.log(resultatenArray);
}
}
function berekening2() {
resultaat2 = document.getElementById("tweedeTentamen").value;
console.log("Dit is resultaat2 " + resultaat2);
if ((resultaat2 == "GR") || (resultaat2 == "gr")) {
document.getElementById("res2").innerHTML = "Geen resultaat";
eRes2 = 0.0;
} else {
let res2 = document.getElementById("res2");
res2.innerHTML = resultaat2;
res2.style.color = resultaat2 >= 5.5 ? 'green' : 'red';
document.getElementById("res2").innerHTML = resultaat2;
//eRes2 = resultaat2;
resultatenArray.push(resultaat2);
console.log(resultatenArray);
}
}
function berekening3() {
resultaat3 = document.getElementById("derdeTentamen").value;
console.log("Dit is resultaat3 " + resultaat3);
if ((resultaat3 == "GR") || (resultaat3 == "gr")) {
document.getElementById("res3").innerHTML = "Geen resultaat";
var resultaat3 = 0.0;
//eRes3 = 0;
console.log(resultaat3);
} else {
let res3 = document.getElementById("res3");
res3.innerHTML = resultaat3;
res3.style.color = resultaat3 >= 5.5 ? 'green' : 'red';
document.getElementById("res3").innerHTML = resultaat3;
//eRes3 = resultaat3;
resultatenArray.push(resultaat3);
console.log(resultatenArray);
}
console.log(isNaN(resultaat3));
}
function eindResultaat() {
var aantalDeelTentamens = resultatenArray.length;
console.log(aantalDeelTentamens);
console.log("resultaten: " + resultaat1, resultaat2, resultaat3);
//console.log("eRes resultaten:" + eRes1, eRes2, eRes3);
//parseFloat(resultaat1);
//parseFloat(resultaat2);
//parseFloat(resultaat3);
console.log(isNaN(resultaat1));
console.log(isNaN(resultaat2));
console.log(isNaN(resultaat3));
eindcijfer = ((resultaat1 + resultaat2 + resultaat3) / aantalDeelTentamens).toFixed(1);
//var eindcijfer = ((eRes1 + eRes2 + eRes3)/aantalDeelTentamens).toFixed(1);
console.log(eindcijfer);
console.log(isNaN(eindcijfer));
document.getElementById("eindresultaat").innerHTML = eindcijfer;
}
Resultaat <b>eerste</b> deeltentamen: <input type="text" value="" id="eersteTentamen"><input type="submit" name=buttonResultaat1 value="Resultaat bevestigen" onclick="berekening1()"><br><br> Resultaat <b>tweede</b> deeltentamen: <input type="text" value=""
id="tweedeTentamen"><input type="submit" name=buttonResultaat2 value="Resultaat bevestigen" onclick="berekening2()"><br><br> Resultaat <b>derde</b> deeltentamen: <input type="text" value="" id="derdeTentamen"><input type="submit" name=buttonResultaat3
value="Resultaat bevestigen" onclick="berekening3()"><br><br>
<hr> Resultaat <b>eerste</b> deeltentamen: <span id="res1"></span><br> Resultaat <b>tweede</b> deeltentamen: <span id="res2"></span><br> Resultaat <b>derde</b> deeltentamen: <span id="res3"></span><br><br>
<hr>
<br>
<input type="submit" name=eindresultaat value="Bereken eindresultaat" onclick="eindResultaat()"><br><br>
<b>Het eindresultaat is: </b> <span id="eindresultaat"></span>
Indeed, it was deleting the var at some places so the code works. No I am busy with what to do if someone makes 2 test in stead of 3. So the average must be calculated over 2 tests.
I"m trying to replace the values but always gets "undefined".
working
ids[0] = "n";
not working:
ids[0] = "nesya";
The full code here:
<body>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<form name="form1" method="post" action="">
<p>ids <input type="text" id="ids" name="id" class="ui-autocomplete-input" autocomplete="off"></p>
<p>use <input type="text" id="use" name="username" class="ui-autocomplete-input" autocomplete="off"></p>
<p>ful <input type="text" id="ful" name="full_name" class="ui-autocomplete-input" autocomplete="off"></p>
</form>
<script type="text/javascript">//<![CDATA[
var ids = new Array();
var use = new Array();
var ful = new Array();
ids[0] = "nesya";
use[0] = "aaa";
ful[0] = "text1";
ids[1] = "2";
use[1] = "bbb";
ful[1] = "text2";
ids[2] = "3";
use[2] = "ccc";
ful[2] = "text3";
function Choice(autoEle) {
if(autoEle === 'use') {
selectedIndex = use.indexOf( $('#use').val());
} else if(autoEle === 'ful') {
selectedIndex = ful.indexOf( $('#ful').val());
} else {
selectedIndex = ids.indexOf( $('#ids').val());
}
document.getElementById("ids").value = ids[selectedIndex];
document.getElementById("use").value = use[selectedIndex];
document.getElementById("ful").value = ful[selectedIndex];
}
$("#use").autocomplete({
source: use,
select: function(){
$('#selectUsers option[value="' + (use.indexOf( $('#use').val()) + 1) + '"]').attr('selected','selected');
Choice('use');
}
});
$("#ids").autocomplete({
source: ids,
select: function(){
$('#selectUsers option[value="' + (ids.indexOf( $('#ids').val()) + 1) + '"]').attr('selected','selected');
Choice('ids');
}
});
$("#ful").autocomplete({
source: ful,
select: function(){
$('#selectUsers option[value="' + (ful.indexOf( $('#ful').val()) + 1) + '"]').attr('selected','selected');
Choice('ful');
}
});
//]]>
</script>
</body>
Check the below code :
var ids = new Array();
var use = new Array();
var ful = new Array();
ids[0] = "nesya";
use[0] = "aaa";
ful[0] = "text1";
ids[1] = "2";
use[1] = "bbb";
ful[1] = "text2";
ids[2] = "3";
use[2] = "ccc";
ful[2] = "text3";
function Choice(autoEle, item) {
if(autoEle === 'use') {
selectedIndex = use.indexOf(item);
} else if(autoEle === 'ful') {
selectedIndex = ful.indexOf(item);
} else {
selectedIndex = ids.indexOf(item);
}
document.getElementById("ids").value = ids[selectedIndex];
document.getElementById("use").value = use[selectedIndex];
document.getElementById("ful").value = ful[selectedIndex];
}
$("#use").autocomplete({
source: use,
select: function(e, data){
$('#selectUsers option[value="' + (use.indexOf( $('#use').val()) + 1) + '"]').attr('selected','selected');
Choice('use', data.item.value);
}
});
$("#ids").autocomplete({
source: ids,
select: function(e, data){
$('#selectUsers option[value="' + (ids.indexOf( $('#ids').val()) + 1) + '"]').attr('selected','selected');
Choice('ids', data.item.value);
}
});
$("#ful").autocomplete({
source: ful,
select: function(e, data){
$('#selectUsers option[value="' + (ful.indexOf( $('#ful').val()) + 1) + '"]').attr('selected','selected');
Choice('ful', data.item.value);
}
});
I am trying to remove text after numbers typed and add decimal
I have multiple input type="text" where on keypress I am adding a comma in INR (Indian Rupee) standard but when I type more than three numbers the entire value is removed and '0' is added. Also my code is not allowing the decimal .00 number as it should. What am I doing wrong?
JS Fiddle
HTML:
<input name="txtMSExMarCardFee" type="number" id="txtMSExMarCardFee" class="Stylednumber">
<input name="txtMSExMarCardFee1" type="number" id="txtMSExMarCardFee1" class="Stylednumber">
<input name="txtMSExMarCardFee2" type="number" id="txtMSExMarCardFee2" class="Stylednumber">
JS:
$('input.Stylednumber').keyup(function(){
var x=$(this).val();
x=x.toString();
var afterPoint = '';
if(x.indexOf('.') > 0)
afterPoint = x.substring(x.indexOf('.'),x.length);
x = Math.floor(x);
x=x.toString();
var lastThree = x.substring(x.length-3);
var otherNumbers = x.substring(0,x.length-3);
if(otherNumbers != '')
lastThree = ',' + lastThree;
var res = otherNumbers.replace(/\B(?=(\d{2})+(?!\d))/g, ",") + lastThree + afterPoint;
$(this).val(res );
});
This requires that you cleanup the input before you pass it to through the regex
String.prototype.replaceAll = function(search, replacement) {
var target = this;
return target.replace(new RegExp(search, 'g'), replacement);
};
$('input.Stylednumber').keyup(function() {
var input = $(this).val().replaceAll(',', '');
if (input.length < 1)
$(this).val('0.00');
else {
var val = parseFloat(input);
var formatted = inrFormat(input);
if (formatted.indexOf('.') > 0) {
var split = formatted.split('.');
formatted = split[0] + '.' + split[1].substring(0, 2);
}
$(this).val(formatted);
}
});
function inrFormat(val) {
var x = val;
x = x.toString();
var afterPoint = '';
if (x.indexOf('.') > 0)
afterPoint = x.substring(x.indexOf('.'), x.length);
x = Math.floor(x);
x = x.toString();
var lastThree = x.substring(x.length - 3);
var otherNumbers = x.substring(0, x.length - 3);
if (otherNumbers != '')
lastThree = ',' + lastThree;
var res = otherNumbers.replace(/\B(?=(\d{2})+(?!\d))/g, ",") + lastThree + afterPoint;
return res;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="txtMSExMarCardFee" type="text" id="txtMSExMarCardFee" class="Stylednumber">
<input name="txtMSExMarCardFee1" type="number" id="txtMSExMarCardFee1" class="Stylednumber">
<input name="txtMSExMarCardFee2" type="number" id="txtMSExMarCardFee2" class="Stylednumber">
Try using this:
$('input.Stylednumber').keyup(function(){
var t = $(this), v = t.val();
if(!v.match(/\.\d{2}$/)){
v += '.00';
}
v = parseFloat(v.replace(/,/g, ''));
if(!v){ // was not a number
t.val('0.00');
return false;
}
v = v.toFixed(2);
if(v.length > 6){
t.val(v.slice(0, -6).replace(/(/d{3})/, '$1,')+v.slice(-6));
}
else{
t.val(v);
}
});
When the checkbox is not checked it will show $0.00.
When I check the checkbox, it will show 1.00. I want it to show $1.00. How can I do that?
Demo on JS Fiddle
This is the code:
<form id="form1" method="post">
<input type="text" id="totalcost" value="$0.00">
<input type="checkbox" value="aa_1">
<input type="checkbox" value="aa_2">
<input type="checkbox" value="aa_3">
</form>
<script type="text/javascript">
var clickHandlers = (function () {
var form1 = document.getElementById("form1"),
totalcost = document.getElementById("totalcost"),
// if this is always the last input in the form, we could avoid hitting document again with
// totalcost = form1[form1.length - 1];
sum = 0;
form1.onclick = function (e) {
e = e || window.event;
var thisInput = e.target || e.srcElement;
if (thisInput.nodeName.toLowerCase() === 'input') {
if (thisInput.checked) {
var val = thisInput.value, // "bgh_9.99"
split_array = val.split("_"), // ["bgh", "9.99"]
pay_out_value = split_array[1]; // "9.99"
sum += parseFloat(pay_out_value); // 9.99
} else {
if (thisInput.type.toLowerCase() === 'checkbox') {
var val = thisInput.value, // "bgh_9.99"
split_array = val.split("_"), // ["bgh", "9.99"]
pay_out_value = split_array[1]; // "9.99"
sum -= parseFloat(pay_out_value); // 9.99
}
}
totalcost.value = (sum > 0) ? sum.toFixed(2) : "$0.00";
}
}
return null;
}());
</script>
Simply change this line:
totalcost.value = (sum > 0) ? sum.toFixed(2) : "$0.00";
to
totalcost.value = (sum > 0) ? "$" + sum.toFixed(2) : "$0.00";
^
This will add $ before your price !
FIDDLE
Just append the $ to the value:
totalcost.value = (sum > 0) ? '$' + sum.toFixed(2) : "$0.00";
Fiddle