I have been trying to get this calculator to work in my WordPress blog but haven't been successful at it.
I did get simple Hello world pop-up to work but not this. I want to calculate the "BPodds". Can you guys tell me what's wrong with this?
function calcStake() {
var BWodds = document.getElementById('BWodds').value;
var div = document.getElementById('div').value;
var BPodds = ((BWodds - 1) / div) + 1;
document.getElementById('BPodds').innerHTML = BPodds;
}
<table class="table" border="0" width="500" cellspacing="1" cellpadding="3">
<tbody>
<tr class="calcheading">
<td colspan="3"><strong>Each Way Lay Calculator</strong>
</td>
</tr>
<tr class="calchead">
<td align="center">Bookmaker Win odds:</td>
<td align="center">Place divider:</td>
<td align="center">Bookmaker Place odds:</td>
</tr>
<tr class="calcrow">
<td align="center">
<input id="BWodds" type="text" value="10" onchange="calcStake()" />
</td>
<td align="center">
<input id="div" type="text" value="4" onchange="calcStake()" />
</td>
<td align="center">
<input id="BPodds" />
</td>
</tr>
</tbody>
</table>
You should use value instead of innerHtml:
document.getElementById('BPodds').value = BPodds;
Here is the fiddle: http://jsfiddle.net/o5ze12mf/
The problem is not with Wordpress,
You are trying to put the result in INPUT with innerHTML but to change the value of INPUT you need to use .value
You code will be like this :
<script type="text/javascript">
function calcStake() {
var BWodds = document.getElementById('BWodds').value;
var div = document.getElementById('div').value;
var BPodds = ((BWodds - 1) / div) + 1;
document.getElementById('BPodds').value = BPodds;
}
</script>
<table class="table" border="0" width="500" cellspacing="1" cellpadding="3">
<tbody>
<tr class="calcheading">
<td colspan="3"><strong>Each Way Lay Calculator</strong></td>
</tr>
<tr class="calchead">
<td align="center">Bookmaker Win odds:</td>
<td align="center">Place divider:</td>
<td align="center">Bookmaker Place odds:</td>
</tr>
<tr class="calcrow">
<td align="center">
<input id="BWodds" type="text" value="10" onchange="calcStake()" />
</td>
<td align="center">
<input id="div" type="text" value="4" onchange="calcStake()" />
</td>
<td align="center">
<input id="BPodds" />
</td>
</tr>
</tbody>
</table>
I just changed
document.getElementById('BPodds').innerHTML = BPodds;
to
document.getElementById('BPodds').value = BPodds;
Related
I have a form page and certain items only appear on the list if a link is clicked on. I want the link to hide when it is clicked on and the action it calls un-hides.
This is my test page:
function toggle_it(itemID) {
// Toggle visibility between none and ''
if ((document.getElementById(itemID).style.display == 'none')) {
document.getElementById(itemID).style.display = ''
event.preventDefault()
} else {
document.getElementById(itemID).style.display = 'none';
event.preventDefault()
}
}
<table width="500" border="1" cellpadding="3">
<cfform action="" method="POST">
<tr>
<td align="center"><strong>ID</strong>
</td>
<td align="center"><strong>DESCRIPTION</strong>
</td>
<td align="center">
<strong>SAY IT</strong>
</td>
</tr>
<tr>
<td align="center">a</td>
<td>
The field with no name
</td>
<td>
<cfinput type="Text" name="aaa" value="">
</td>
</tr>
<tr id="tr1" style="display:none">
<td align="center">a1</td>
<td>Add-on1</td>
<td>
<cfinput type="Text" name="a1" value="Add-on1">
</td>
</tr>
<tr id="tr2" style="display:none">
<td align="center">a2</td>
<td>Add-on2</td>
<td>
<cfinput type="Text" name="a2" value="Add-on2">
</td>
</tr>
<tr id="tr3" style="display:none">
<td align="center">a3</td>
<td>Add-on - Daily1</td>
<td>
<cfinput type="Text" name="a1d" value="Add-on - Daily1">
</td>
</tr>
<tr id="tr4" style="display:none">
<td align="center">a4</td>
<td>Add-on - Daily2</td>
<td>
<cfinput type="Text" name="a2d" value="Add-on - Daily2">
</td>
</tr>
<tr>
<td colspan=3>
<input type="submit" name="Submit" value="Submit">
</td>
</tr>
</cfform>
</table>
<!--- ----------------------------------------------------------------- --->
<table border="0">
<tr>
<td align="right">Add-on1: </td>
<td>Add-on1
</td>
</tr>
<tr>
<td align="right">Add-on2: </td>
<td>Add-on2
</td>
</tr>
<tr>
<td align="right">Add-on3 - Daily1: </td>
<td>Add-on - Daily1
</td>
</tr>
<tr>
<td align="right">Add-on4 - Daily2: </td>
<td>Add-on - Daily2
</td>
</tr>
</table>
The code is in CF but this is a JavaScript function.
BTW. Thank you whoever wrote the original script I found on Stackoverflow a while back.
Plunker
Description: Gave html elements for toggle unique ids. Also needed to update the javascript to get the parent element of the parent element of the link clicked. This only works when there are two elements to reach the tr.
Importantly, this code has an extra unhide that isn't needed...since we are hiding it and there is nothing to click.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<table width="500" border="1" cellpadding="3">
<cfform action="" method="POST">
<tr>
<td align="center"><strong>ID</strong></td>
<td align="center"><strong>DESCRIPTION</strong></td>
<td align="center">
<strong>SAY IT</strong>
</td>
</tr>
<tr>
<td align="center">a</td>
<td>
The field with no name
</td>
<td>
<cfinput type="Text" name="aaa" value="">
</td>
</tr>
<tr id="tr1" style="display:none">
<td align="center">a1</td>
<td>Add-on1</td>
<td>
<cfinput type="Text" name="a1" value="Add-on1">
</td>
</tr>
<tr id="tr2" style="display:none">
<td align="center">a2</td>
<td>Add-on2</td>
<td>
<cfinput type="Text" name="a2" value="Add-on2">
</td>
</tr>
<tr id="tr3" style="display:none">
<td align="center">a3</td>
<td>Add-on - Daily1</td>
<td>
<cfinput type="Text" name="a1d" value="Add-on - Daily1">
</td>
</tr>
<tr id="tr4" style="display:none">
<td align="center">a4</td>
<td>Add-on - Daily2</td>
<td>
<cfinput type="Text" name="a2d" value="Add-on - Daily2">
</td>
</tr>
<tr>
<td colspan=3>
<input type="submit" name="Submit" value="Submit"></td>
</tr>
</cfform>
</table>
<!--- ----------------------------------------------------------------- --->
<table border="0">
<tr>
<td align="right">Add-on1: </td>
<td>Add-on1</td>
</tr>
<tr>
<td align="right">Add-on2: </td>
<td>Add-on2</td>
</tr>
<tr>
<td align="right">Add-on3 - Daily1: </td>
<td>Add-on - Daily1</td>
</tr>
<tr>
<td align="right">Add-on4 - Daily2: </td>
<td>Add-on - Daily2</td>
</tr>
</table>
</body>
</html>
JS
// Code goes here
function toggle_it(itemClickedID, itemID) {
// Toggle visibility between none and ''
if ((document.getElementById(itemID).style.display == 'none')) {
document.getElementById(itemID).style.display = '';
//gets the parent element of the parent element which is the row
document.getElementById(itemClickedID).parentElement.parentElement.style.display = 'none';
event.preventDefault();
} else {
event.preventDefault();
//gets the parent element of the parent element which is the row
document.getElementById(itemClickedID).parentElement.parentElement.style.display = '';
document.getElementById(itemID).style.display = 'none';
}
}
I am trying to read the length of a textbox from my register form. I have tried using document.getElementById() and textbox.value.length. Is there something very simple I'm am missing. I alert the result to the screen to show the textbox length. Thanks in advance.
Here is my last attempt:
function Register(){
Alert(RegisterForm.txt_Password.value.length);
}
TextBox structure:
<form id="RegisterForm" name="RegisterForm" method="POST" action="RegisterInsert.php" onsubmit="return Register(RegisterForm)">
<table border="0" align="center" width="100%">
<tr>
<td width="15%">Email Address:</td>
<td width="85%"><input type="text" name="txt_Email" id="txt_Email"/> </td>
</tr>
<tr>
<td width="15%">Username:</td>
<td width="85%"><input type="text" autocomplete="off" name="user_name" id="user_id" class="user_name" >
<span class="check" ></span></td>
</tr>
<tr>
<td width="15%">Password:</td>
<td width="85%"><input type="password" name="txt_Password" id="txt_Password" /></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="btn_Register" id="btn_Register" value="Register"></td>
</tr>
<tr>
</table>
<p> </p>
</form>
I use the submit button to call the Register function.
You need to get a reference to the element first:
function Register() {
var RegisterForm = document.getElementById('RegisterForm');
alert(RegisterForm.elements['txt_Password'].value.length);
}
check out this code:
var textBox = document.getElementById("myTextBox");
var textLength = textBox.value.length;
alert(document.getElementById('txt_Password').value.length);
Fellas,
I have a javscript that calculates values defined in radio buttons. For a reason I can not figure out why the script skips a group. Its seems that the skipped group (by skipped I mean the selected value does not get added) correlates with the amount of radio buttons being used in each group.
I have been pulling my hair out on this one..
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function setRadios()
{
function sumRadios(){
var total = 0, i = 0, oForm = this.form, e, len, j, c;
while(e=oForm.elements[i++]){
//This is probably the issue - Maybe it would be easier to manually define the names verses detecting them incrementally.
if(e.name.match(/^m4j-\d/)){
c=document.getElementsByName(e.name);
for(j=0;j<c.length;j++){
c[j].checked?total+=Number(c[j].value):null;
i++;
}
}
}
// Defines the field that totals the selections
oForm.elements['m4j-65'].value = total.toFixed(0);
}
// Must define form name "m4jFrom"
var i = 0, input, inputs = document.getElementById('m4jForm').getElementsByTagName('input');
while (input = inputs.item(i++))
// This executes the sum onclick
if (input.name.match(/^m4j-\d/))
input.onclick = sumRadios;
}
onload = setRadios;
</script>
<style type="text/css"></style>
</head>
<body>
<form id="m4jForm" name="m4jForm" method="post" enctype="multipart/form-data" action="">
<table border="0" align="left" cellpadding="11" cellspacing="11" class="m4j_form_table">
<tbody>
<tr id="m4je-57" >
<td colspan="2" align="left" valign="top"><table border="1" style="width: 100%;" >
<tbody>
<tr>
<td align="left" valign="top"><input class="m4jRadio" type="radio" id="m4j-57-0" name="m4j-57" value="1" >
</input> 1 </td>
</tr>
<tr>
<td align="left" valign="top"><input class="m4jRadio" type="radio" id="m4j-57-1" name="m4j-57" value="2" >
</input>
2 </td>
</tr>
</tbody>
</table></td>
</tr>
<tr id="m4je-61" >
<td colspan="2" align="left" valign="top"><table border="1" style="width: 100%;" >
<tbody>
<tr>
<td align="left" valign="top"><input class="m4jRadio" type="radio" id="m4j-61-0" name="m4j-62" value="1" >
</input>
1 </td>
</tr>
<tr>
<td align="left" valign="top"><input class="m4jRadio" type="radio" id="m4j-61-1" name="m4j-62" value="2" >
</input>
2 </td>
</tr>
</tbody>
</table></td>
</tr>
<tr id="m4je-62" >
<td colspan="2" align="left" valign="top"><table border="3" style="width: 100%;" >
<tbody>
<tr>
<td align="left" valign="top"><input class="m4jRadio" type="radio" id="m4j-62-0" name="m4j-63" value="1" >
</input>
1 No Calculation </td>
</tr>
<tr>
<td align="left" valign="top"><input class="m4jRadio" type="radio" id="m4j-62-1" name="m4j-63" value="2" >
</input>
2 if you remove this table the non calculation will move to the radios below</td>
</tr>
</tbody>
</table></td>
</tr>
<tr id="m4je-63" >
<td colspan="2" align="left" valign="top"><table border="1" style="width: 100%;" >
<tbody>
<tr>
<td align="left" valign="top"><div class="m4jSelectItem m4jSelectItemVertical">
<input class="m4jRadio" type="radio" id="m4j-63-0" name="m4j-64" value="1" >
</input>
1 </div></td>
</tr>
<tr>
<td align="left" valign="top"><div class="m4jSelectItem m4jSelectItemVertical">
<input class="m4jRadio" type="radio" id="m4j-63-1" name="m4j-64" value="2" >
</input>
2 </div></td>
</tr>
</tbody>
</table>
</div>
</div></td>
</tr>
<tr id="m4je-65" >
<td width="300" align="left" valign="top" >Total</td>
<td width="0px;" align="left" valign="top" >
<input class="m4jInputField" style="width: 100%;" id="m4j-65" name="m4j-65" type="text" size="18" maxlength="60" value= "" alt="" ></input><br>
<input type="submit" name="submit" value="send" class ="m4j_submit" >
</input>
<input id="m4jResetButton" class ="m4j_reset" type="reset" name="reset" value="reset">
</input>
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
I found the solution. I owe the board the info. I hope someone gets use out of it. :)
<script type="text/javascript">
function setRadios()
{
var inputs = document.getElementById('m4jForm').getElementsByClassName('m4jRadio');
function sumRadios(){
var total = 0,
oForm = this.form;
for(var x = 0; x < inputs.length; x++){
if (inputs[x].checked) total += parseInt(inputs[x].value);
}
// Defines the field that totals the selections
oForm.elements['m4j-65'].value = total.toFixed(0);
}
for(var y = 0; y < inputs.length; y++){
inputs[y].onclick = sumRadios;
}
}
onload = setRadios;
</script>
I am trying to count the number of elements under a parent but its giving me an incorrect count. The result should be 2, where as its returning me 4.
My HTML structure is:
<div style="overflow: hidden;" id="parentDiv" class="scroll">
<div id="3">
<table id="t3" class="Table">
<tbody>
<tr>
<td id="b3" class="bY"><table id="inner1" width="100%" cellpadding="3">
<tbody>
<tr>
<td class="code" id="code3" width="172"></td>
<td class="Num" id="Num3" width="50"></td>
<td colspan="2" class="Name" id="Name"></td>
</tr>
<tr>
<td class="code" width="172"></td>
<td> </td>
<td class="serial" width="110"></td>
<td class="serial" width="322"></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
</div>
<div id="4" >
<table id="t4" class="Table">
<tbody>
<tr>
<td id="b4" class="bY"><table id="inner1" width="100%" cellpadding="3">
<tbody>
<tr>
<td class="code" id="code4" width="172"></td>
<td class="Num" id="Num4" width="50"></td>
<td colspan="2" class="Name" id="Name"></td>
</tr>
<tr>
<td class="code" width="172"> </td>
<td> </td>
<td class="serial" width="110"></td>
<td class="serial" width="322"></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
</div>
and the code I am using to count is:
var numofDivs = $("#parentDiv div").size();
alert(numofDivs);
and if I am using the following code, the result is coming 1 (which is incorrect too).
var numofDivs = $("#parentDiv > div").size();
alert(numofDivs);
Hi you should use the function children()
$("#parentDiv").children("div").length
the function gives you an array and ten you can get the length.
and in the children function you can specify what tags to filter, but you can also leave it blank and it will give you all the children
check the API
With the give HTML code, your code to count the elements is correct, and both ways should return two.
So, the conclusion is that the HTML code doesn't actually look the way that you describe it. A structure that would give that result could for example look like this:
<div id="parentDiv">
<div>
<div></div>
<div></div>
</div>
<p>
<div>
</div>
</p>
</div>
If you want to count the first level of div elements that you encounter, you would have to do it recursively, i.e. for each child element check if it's a div element or count the number of first level div elements it contains:
function countDivs(element) {
var cnt = 0;
$(element).children().each(function(){
cnt += this.tagName === 'DIV' ? 1 : countDivs(this);
})
return cnt;
}
$(function(){
alert(countDivs($('#parentDiv').get(0)));
});
I am building a website of yellopages in which I want to upload and display images on some pages.
First, I insert the image name in to the database while uploading. I want to get the image name on the parent page.
addproduct.php
<form action="" method="post" enctype="multipart/form-data" name="uploadform" id="uploadform">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="42%" align="right">Product Title </td>
<td width="1%"> </td>
<td width="118" height="118" align="center" bordercolor="#FFFFFF" bgcolor="#FFFFFF" ><iframe src="" id="fileframe" name="fileframe" width="118" height="118" scrolling="no" frameborder="0"></iframe></td>
</tr>
<tr>
<td align="right"> </td>
<td> </td>
<td onclick="whatever();">value</td>
</tr>
<tr>
<td align="right"> </td>
<td> </td>
<td><label>
<input name="thefile" type="file" id="thefile" />
upload</label></td>
</tr>
<tr>
<td align="right">Product Description </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td align="right"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="3"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><label>
<input name="web" type="submit" id="web" value="Continue" />
</label></td>
</tr>
</table>
</form>
Javascript in this page
function whatever() {
mmspobj=document.getElementId("fileframe");
// if (mmspobj.tagName=='iframe'){
//alert("hi");
//mmsiobj=window.frames[fileframe].document.getElementId('fileframe').value;
alert(mmspobj);
//}
}
uploader.js
function init() {
fileUploadEvents();
}
function fileUploadEvents() {
var links = document.getElementsByTagName("a");
if (links) {
for (var x=0; x<links.length; ++x) {
if (links[x].className == "uploadfile")
links[x].onclick = uploadFile;
}
}
}
function uploadFile() {
var uploadForm = document.getElementById("uploadform");
if (uploadForm) {
uploadForm.target="fileframe";
uploadForm.action="upload.php";
}
uploadForm.submit();
}
How can I get the image name in addproduct.php?
You might find it easier to have the iframe call a JavaScript function in the parent, rather than have the parent window try to read the name from the iframe.