|
JavaScript - To Display Return Value Of A Function In A Table In The Same Html Form
Hi All,
I have a button in my html form that will process some functions when user clicks on the button. The problem is after processing the functions, the result is not displayed in the form where I want it to be displayed. I want to ask whether we can create table in the function and display the result in the table row/column but in the same form. Is this possible to be done? And how to do this? In this form cpiM, the input button will call function showIndex. Code: <tr> <td><input type="button" value="Enter" onclick="showIndex(document.cpiM.currFrom.options.selectedIndex, document.cpiM.currTo.options.selectedIndex, document.cpiM.base.options.selectedIndex, document.cpiM.country.options.selectedIndex)"> </td> <td><input type="button" onclick="frmResetM()" value="Reset form" /> </td> </tr> In this function, I want to display the result of calcIndex right below the button Enter in the form cpiM. Code: function showIndex(frm, to, base, country)
{
for (i=frm; i<=to; i++)
{
document.write(calcIndex(i, base, country));
document.write("<br/>");
}
}
Similar TutorialsHello all..I am new to this forum and also new to html and js. I started college at the ripe old age of 55 and I have to take this course for my required degree I have a table 5 across with thumbnails inside and a larger cell at the bottom with a picture of me. I need to write a javascript function that will make the big picture change when I click on the thumbnail...there is also a smaller cell at the bottom that would change that text to a description as well,when thumbnail clicked. Ihave no clue where to start. Any help would be much appreciated!! Thanks In advance <style> .table th {border-style: solid; border-color: red;background-color: #CCCCFF; } </style> <body> <table border="1" class="table"> <thead> <th colspan = "5">Click an Image to Enlarge </th> </thead> <tbody> <tr> <td> <img src = "Thumbnails/ada1838-thumb.JPG" alt = "ada1838-thumb" > </td> <td> <img src = "Thumbnails/adaplaque-thumb.JPG" alt = "adaplaque-thumb"> </td> <td> <img src = "Thumbnails/babbageborn-thumb.JPG" alt = "babbageborn-thumb"> </td> <td> <img src = "Thumbnails/aediagram-thumb.JPG" alt = "aediagram-thumb"> </td> <td> <img src = "Thumbnails/babbage1860-thumb.JPG" alt = "babbage1860-thumb"> </td> </tr> <tr><td colspan= "5" ><img src= "All_Images/Me@home.JPG" alt = "Me @ Home" width = "800px" height= "800px" align="center"> </td> </tr> <thead> <th colspan = "5"> </th> </thead> </table> </body> </html> Hi all - first post - I'm not too hot on javascript so I don't know if this can be done nor how to search for it in the forum because I don't know what keywords to use - but if I give an idea of what I want to do, perhaps someone can suggest an idea of how to proceed? I have two left floated divs - in the left div I want a series of drop downs (possibly check boxes as well) about a series of products. When the user makes their decision and presses submit, I want the form to submit to a javascript function that says "Right, you will need, from your responses, product C" and in the right hand floated div, a series of hidden product info divs whose visibility is changed depending on which product the function determines is the one for you. Broken down into parts I think I need to do the following: a) Standard HTML form with drop downs etc and submit b) Hidden divs c) Submission process locally to javascript function to determine which product to show/hide d) Javascript function that makes the decision e) Javascript that hides/shows products Unfortunately a server side option is not available; it has to be a client side solution and I only could think of javascript. I can probably handle all bar c) and d) - any pointers, help or suggestions would be great thanks! cheers frank New to this, worked through the w3c tutorials and am really fascinated by some of the concepts. I'm only familiar with html, css, js (basics), so am trying to keep things as simple as I can for this. For simplicity I'll use books.xml with a listing of books. Each book has a <title><author><year><price> and <image> element. The images are stored in a folder called "images" a path is listed in the xml document. Using js and an array I can loop through the xml file and have it extract each node into a table, if I mouseOver a ROW in the table, it displays that listing in a DIV above and I would like it to display the image/thumbnail for that particular listing within another div called thumbnail which is in the same location regardless of which listing you mouseOver. Quote: if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("GET","books.xml",false); xmlhttp.send(); xmlDoc=xmlhttp.responseXML; x=xmlDoc.getElementsByTagName("book"); i=0; function displayBook(i) { title=(x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue); author=(x[i].getElementsByTagName("author")[0].childNodes[0].nodeValue); year=(x[i].getElementsByTagName("year")[0].childNodes[0].nodeValue); price=(x[i].getElementsByTagName("price")[0].childNodes[0].nodeValue); genre=(x[i].getElementsByTagName("genre")[0].childNodes[0].nodeValue); txt="Author: "+author+"<br />Title: "+title+ "<br />Year: "+year+"<br />Price: "+price + "<br />Category: " +genre; document.getElementById("showBook").innerHTML=txt; } Quote: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <script type="text/javascript" src="myscript.js"></script> <link rel="stylesheet" type="text/css" href="stylin.css" /> </head> <body onload="displayBook(0)"> <div id="wrap" width="40%"> <div id="desc">Listing: </div> <div id='showBook'></div><br /> <div id="thumbnail">thumbnail <script type="text/javascript"> document.write(????????????????); </script></div> <script type="text/javascript"> document.write("<table border='1'; >"); document.write("<caption>Mouse over a cell to view description:</caption"); document.write("<tr><td class=top>Book Title</td><td class=top>Category</td><td class=top>Cost: </td></tr>"); for (var i=0;i<x.length;i++) { document.write("<tr onMouseOver='displayBook(" + i + ")'; >"); document.write("<td>"); document.write(x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue); document.write("</td><td>"); document.write(x[i].getElementsByTagName("genre")[0].childNodes[0].nodeValue); document.write("</td><td>" + "$"); document.write(x[i].getElementsByTagName("price")[0].childNodes[0].nodeValue ); document.write("</td><td>"); document.write(x[i].getElementsByTagName("image")[0].childNodes[0].nodeValue ); document.write("</td></tr>"); } document.write("</table>"); </script></div></div> </body> </html> So the way this looks is there's a grey div. At the top it says listing, and when the body loads it lists the [0] first entry from the array. To the right of this is a small div called thumbnail that is empty and I would like it to load the relevant image from the path in the <image> tag in the xml file. Below the listing is a table with 4 columns (title, genre, price, image) and an equal number of rows to the number of listings in the xml file. Under the "image" column it just shows the path to the image. So how do I tie the empty thumbnail div to the listing so it'll just add the path from the xml <image> tag into a <img src="pathnamefromxmldocument"> Thanks in advance! I'm trying to "progressively enhance" one of my surveys using javascript. Basically, I have rating scales that make use of radio buttons as each point on the scale. Each radio button occupies its own cell in a table. I wrote some functions that will highlight cells on mouseover in a color corresponding to its position on the scale (e.g. the lowest point is red, the midpoint is yellow, the highest point is green). When a radio button is clicked, the background of the button's cell and preceding cells in the same row will be colored accordingly. The functions are working well in FireFox and Chrome (I just have to add a few lines using the addEvent function to make it compatible with IE). The effect looks a lot nicer when I add a function that makes the visibility of the radio buttons hidden. However, I want to make sure that there is a fallback option in case the functions that color the cells don't work for whatever reason. I would not want the radio buttons hidden in this case. Is there a method whereby I can call the "hideRadiobuttons" function only if the other functions are successfully executed? Hi guys! I have a simple JavaScript stopwatch that displays the time using an html form with start/reset and clear buttons. Basically I'm making a speed calculator that converts seconds into MPH. All I need it to do is divide whatever the amount of seconds are by 40.91. So instead of it displaying the seconds being counted up (i.e. 2 seconds, would displayed as 20.455 MPH). Does that make sense? JavaScript is not my strong suit, and It's got me stumped. JavaScript: Code: var t=[0, 0, 0, 0, 0, 0, 0, 1];
function ss()
{
t[t[2]]=(new Date()).valueOf();
t[2]=1-t[2];
if (0==t[2])
{
clearInterval(t[4]);
t[3]+=t[1]-t[0];
t[4]=t[1]=t[0]=0;
disp();
}
else
{
t[4]=setInterval(disp, 43);
}
}
function r()
{
if (t[2]) ss();
t[4]=t[3]=t[2]=t[1]=t[0]=0;
disp();
t[7]=1;
}
function disp()
{
if (t[2]) t[1]=(new Date()).valueOf();
t[6].value=format(t[3]+t[1]-t[0]);
}
function format(ms)
{
var d=new Date(ms+t[5]).toString()
.replace(/.*([0-9][0-9]:[0-9][0-9]:[0-9][0-9]).*/, '$1');
var x=String(ms%1000);
while (x.length<3) x='0'+x;
d+='.'+x;
return d;
}
function load()
{
t[5]=new Date(1970, 1, 1, 0, 0, 0, 0).valueOf();
t[6]=document.getElementById('disp');
disp();
}
HTML form: Code: <input type='text' id='disp' maxlength=12 readonly /> <button type='button' onclick='ss()' id='butt' data-inline="true">Start/Stop</button> <button type='button' onclick='r()' id='butt2' data-inline="true">Reset</button> Any help is greatly appreciated!!! How would I use JavaScript to pull numbers (information such as Clan Members # Count) from this page (http://services.runescape.com/m=clan...me=Void+Nation), and then write them to a page on my site?
hi,i don't understand about the jquery basic example the code is below PHP Code: <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $('p').addClass(function(n){ return 'par_' + n; }); }); }); </script> <style type="text/css"> .par_0 { color:blue; } .par_1 { color:red; } </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button>Add classes to p elements</button> </body> </html> i want to understand about the how is work function(n){ in the function a and how work return function return 'par_' + n; thanks mate Please help, I have been looking at this all day and I know there must be a simple fix! How do I pass results back to textService so that I can make a call such as textResult = textService(text to pass in); I don't want to use a global variable if I can avoid it. This is the code Code: function textService(text){
req.open("GET", "http://....?text="+text, true);
req.onload = showResults;
req.send(null);
}
function showResults() {
results = req.responseXML.getElementsByTagName("Result");
}
Thank you in advance My function the_magnitude() takes in values from 4 different asp:textboxes. The textboxes "easting" and "northing" contain numbers that don't change, but the textboxes "east" and "north" contain numbers inputed by the user, and the function returns "error" as a value to be put into another textbox that we'll call "error box". So what it's suppose to do is when I update the information in either "east" or"north" it will update, on change, the number in the "error box". It kinda works. My problem is that if the number is a value that changes the style to red, #ff0000, in the function it wont update the "error box" and it just leaves a red zero that is a default number in the box. The only way I can get the number to change is if I end up with a number less than 200, which would make the text green. I'm pretty sure it's a problem with my javascript. here is my function Code: <script type="text/javascript">
function the_magnitude(easting, east, northing, north, error) {
var a = easting.value;
var b = east.value;
var c = northing.value;
var d = north.value;
var total = Math.sqrt(((a - b) * (a - b)) + ((c - d) * (c - d)));
if (total > 200) {
document.getElementById('TextBox155').style.color = "#ff0000";
document.getElementById('TextBox155').style.fontWeight = "bold";
}
else {
document.getElementById('TextBox155').style.color = "#008000";
document.getElementById('TextBox155').style.fontWeight = "bold";
error.value = roundNumber(total);
}
}
</script>
and here are the two buttons that I input numbers into for east and north Code: <html>
<body>
<asp:TextBox ID="TextBox153" runat="server" Height="0.25in" Style="font-family: Arial, Helvetica, sans-serif;
font-size: small; text-align: center" Width="0.75in" onchange="the_magnitude(document.getElementById('TextBox153'), document.getElementById('TextBox212'), document.getElementById('TextBox154'), document.getElementById('TextBox213'), document.getElementById('TextBox155'))" ></asp:TextBox>
</body>
</html>
Code: <html>
<body>
<asp:TextBox ID="TextBox153" runat="server" Height="0.25in" Style="font-family: Arial, Helvetica, sans-serif;
font-size: small; text-align: center" Width="0.75in" onchange="the_magnitude(document.getElementById('TextBox153'), document.getElementById('TextBox212'), document.getElementById('TextBox154'), document.getElementById('TextBox213'), document.getElementById('TextBox155'))" ></asp:TextBox>
</body>
</html>
and here is the textbox that I want the return of the function to go into. Code: <html>
<body>
<asp:TextBox ID="TextBox155" runat="server" Height="0.25in" Style="font-family: Arial, Helvetica, sans-serif;
font-size: small; text-align: center" Width="0.5in">0</asp:TextBox>
</body>
</html>
I'm looking for some assistance. I'm trying to write a javascript to validate a form for a class. When I try to submit the form with none of the fields filled in , it goes to the intercept page without showing any errors. In addition to this, I have an error message. Return is outside of function. I have NO clue what they mean here, or what I've done wrong. Could someone take a look and give me an opinion? Enclosed is the entire javascript and the top portion of the related form. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript"> <!-- Hides script from older browsers --> "function validate()" { if(document.form2.size.value=="Please Choose") { alert("Did you forget to select a size?"); return false; } if(document.form2.quantity.value=="Please Choose") { alert("How many did you want??"); return false; } if(document.form2.email.value=="") { alert("Please enter your Email Address.."); return false; } if(document.form2.verify.value=="") { alert("Could you enter it again please.."); return false; } if(document.form2.verify.value!=document.form2.email.value) { alert("The Email Addresses do not match"); return false; } if(document.form2.email.value.match((/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/)) { alert("Email address was not valid please RETRY"); return false; } else return true; } //--> </script> <form id="form2" name="form2" method="post" onSubmit="return validate(this)" action="2intercept.asp"> <table width="150" border="0" cellpadding="0"> <tr> <td><div align="right"> <label for="size">Size Desired:</label> </div></td> <td><div align="left"> <select name="size" id="size"> <option selected="selected">Please Choose</option> <option value="4x6">4x6</option> <option value="5x7">5x7</option> <option value="8x10">8x10</option> </select> </div></td> </tr> <tr> <td><div align="right"></div> <label for="quantity">Quantity Desired</label></td> <td><div align="left"> <select name="quantity" id="quantity"> <option>Please Choose</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5+">5+</option> </select> </div></td> ANY advice, corrections or suggestions would be GREATLY appreciated.. I'm at my wits end with this stuff. Hi, I am trying to submit a form in javascript on clicking 'Button1'.On submission,it will disable the html table 'HTMLTable1' present in it.The code which I am using is as: Code: function OnButton1_Click ( ) {
var oRows = document.getElementById('HTMLTable1').getElementsByTagName('tr');
var irows = oRows.length ;
if (confirm("Are you sure you want Submit?"))
{
for(k=1; k<=irows; k++)
{
if(document.getElementById("list"+k).selectedIndex == 0)
{
document.getElementById("list"+k).selectedIndex = 1;
document.getElementById("list"+k).options[1].style.backgroundColor = "green";
}
}
Saver();
document.getElementById("HTMLTable1").disabled = true;
}
else{
alert("Submit cancelled!");
}
}
But On submit,the html table is getting disabled just for a moment then again it becomes active and user can interact with it.Can anyone tell me where this code is misbehaving? Thanks, Anil Yesterday I started looking into clientside database handling with html5 and localstorage. I've been trying for hours to make a function like the one below, but I can't figure out how to return the name variable. Any ideas? Code: function hent_kontakt_navn(var1, var2) {
var db = MYDB;
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM db_kontakter WHERE field1=\'' + var1 + '\' AND field2=\'' + var2 + '\' LIMIT 1', [], function (tx, results) {
var len = results.rows.length, i;
for (i = 0; i < len; i++){
var fornavn = results.rows.item(i).fornavn;
var etternavn = results.rows.item(i).etternavn;
var navn = fornavn + ' ' + etternavn;
alert(navn); //This works and alerts the correct value
}
}, null);
});
return navn; //But this one returns undefined. I know variables don't pass like this between functions, but how can I make it work so that the function returns this var?
}
Ok, guys. I'm new to JavaScript, so go easy. I'll be asking bunches of "dumb" questions for a while. 1st question, and the only one for now ... Say I have the following function: Code: function SwapValues(SwapVal1,SwapVal2)
{
TempSwapVal=SwapVal1;
SwapVal1=SwapVal2;
SwapVal2=TempSwapVal;
}
I don't care about the return value of the function itself, but I do need the new values of SwapVal1 and SwapVal2. In ASP when I do this, the values get returned. How do I get this to work in JS? I am trying to figure out that if the function "xmlhttp.onreadystatechange=function()" returns true the whole function "function checkUser(str)" should return true as well....so not sure how to do it. i have banged my head since long so please advise! Here is the code below: -------------------------------------------------------- function checkUser(str) { var sp = document.getElementById("msgs"); if (str=="") { document.getElementById("msgs").innerHTML="Username cannot be empty."; return false; } if (str.length <= 6) { document.getElementById("msgs").innerHTML="Username cannot be less than 6 characters and must not start with a number or a special value"; return false; } if (window.XMLHttpRequest) { //code for IE7+, firefox, chrome, opera, safari xmlhttp=new XMLHttpRequest(); } else { //code for old IE xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { if (xmlhttp.responseText === 'FOUND') { sp.style.color = "red"; sp.innerHTML = "[ERROR]: The username \"" + str + "\" already exist. Please try a different name."; return false; } else if (xmlhttp.responseText === 'NOT FOUND') { sp.style.color = "blue"; sp.innerHTML = "Username: VALID"; return true; } } } xmlhttp.open("GET", "checkUser.php?q="+str,true); xmlhttp.send(); } Good morning Guru's and Experts, I really need your help with this one. It seems that the function this_week('end') is returning a bad date of 12/33/2014 (mm/dd/yyyy) where it should properly read: 01/02/2015 Code: function this_week(x) {
var today, todayNumber, fridayNumber, sundayNumber, monday, friday;
today = new Date();
todayNumber = today.getDay();
mondayNumber = 1 - todayNumber;
fridayNumber = 5 - todayNumber;
if (x === 'start') {
//var start_dd = today.getDate() + mondayNumber
var start_dd = today.getDate()
var start_mm = today.getMonth() + 1
var start_yyyy = today.getFullYear()
return start_mm + '/' + start_dd + '/' + start_yyyy
}
if (x === 'end') {
var end_dd = today.getDate() + fridayNumber
var end_mm = today.getMonth() + 1
var end_yyyy = today.getFullYear()
return end_mm + '/' + end_dd + '/' + end_yyyy
}
}
Reply With Quote 12-29-2014, 07:43 PM #2 Philip M View Profile View Forum Posts Supreme Master coder! Join Date Jun 2002 Location London, England Posts 18,371 Thanks 204 Thanked 2,573 Times in 2,551 Posts I understand that you are trying to get the date next Friday. Try this script:- Code: <span id = "info"></span>
<script type = "text/javascript">
var curr = new Date(); // get current date
var first = curr.getUTCDate() - curr.getUTCDay(); // First day is the day of the month - the day of the week
var last = first + 5; // last day is the first day + 5 = Friday
var lastday = new Date(curr.setDate(last));
var yy = lastday.getUTCFullYear();
var mth = lastday.getUTCMonth()+1;
if (mth<10) {mth = "0" + mth}
var dy = lastday.getUTCDate();
if (dy<10) {dy = "0" + dy}
// now manipulate the display of year,month,date as desired
var result = mth + "/" + dy + "/" + yy;
document.getElementById("info").innerHTML = "Week Ending Friday " + result;
</script>
Lottery: A tax on people who are bad at math. Hi All, This is in ASP.Net Im creating a task loggin system and this allows the user to raise tasks and update them, im using javascript for validation and if the fields are empty it then changes the fields back ground to Red which is fine but then it goes on to update the data in SQL which i dont want, any suggestions or how i can achieve no post back is the result from the function is False (for fields in error) Html Code where im calling the function Code: <asp:button runat="server" id="btnChangeCommentsAuth" CSSclass="RaiseButton" OnClientClick="CommentsCheck('MainDisplayContentChange_txtAuthCommentsArea');" PostBackUrl="~/RaiseTaskChange.aspx" Text="Auth" />
Javascript function Code: function CommentsCheck(comments)
{
var com;
var result = new boolean();
com = document.getElementById(comments);
if (document.getElementById(comments).value == '') {
com.style.backgroundColor = "#B20635";
result = 0;
}
else
{
result = 1
}
}
Thanks in Advance look forward to your reply. Having trouble figuring out how to do this...I can get the particular entry by name but I can't randomly select one from the several because it's a string and not a number.... Code: var newOre = 0;
var ore = {
"iron" : 5,
"silver" : 3,
"gold" : 2,
"platinum" : 1
}
var userOre = {
"iron" : 0,
"silver" : 0,
"gold" : 0,
"platinum" : 0
}
Code: function getAnotherOre () {
newOre = ore[Math.floor(Math.random() * ore.length)];
userOre += newOre;
}
The random() is for an array, tried to use it here and returns 0 every time because the key in the key:value pair is a "string", though if I'm reading it right, it is trying to get a random number based off the length of the table, so why doesn't it do that? Ideally I want it to increment a corresponding hash table of users Ores...so if you randomly get a iron, it adds 5 to the users "iron" entry. I had a for loop, but I only need to randomly generate 1 entry result each time called so do I need to loop through things or can I just randomly get a key:value pair back and append that to the userOre table??????? AM I APPROACHING THIS WRONG FOR WHAT I WANT TO DO? Any ideas or link to documentation? I'm searching..... I can get the individual value of a field manually: console.log("keyName"); which will output the right number, but how do I get a random("keyName") and once I figure that out I probably would append("correspondingName", value) to the other table... Basically, functionally I just want to randomly get one of several values when the function is called. I guess I could make global variables for each type of ore, then just manually increment a random one some other way... This is for a html5 game where when you collide with a "mine" it triggers the function but I want it to randomly give various types of ore instead...Maybe I'm going about it wrong... Maybe it's easier just to declare 10 different global variables (assuming 10 ore types) and randomly give a number 0-10 of each every time the function is called......? I have the following form working with on onsumbit function, but I would like to change it so that instead of having to click the purchase button to see total price, you only have to change the quanity text box input. I would welcome any help. I just can not seem to get it to work. Code: <script language="javascript" type="text/javascript">
function checkQuantity(frm) {
var succesful = false;
var numQuantity;
numQuantity = parseInt(frm.Quantity.value);
var numTotalPrice;
if (numQuantity != 0) {
numTotalPrice = numQuantity * 4;
frm.TotalPrice.value = numTotalPrice; //new String(numTotalPrice);
successful = true;
}
else {
alert("Sorry must order more than 0");
successful = false;
}
return succesful;
}
</script>
Code: <form action="" onsubmit="return checkQuantity(this)" style="width: 193px">
<table cellpadding="4" style="width:111%">
<tr>
<td class="style1">
Quanity:</td>
<td class="formInputCell">
<input name="Quantity" type="text" style="width: 55px" /></td>
</tr>
<tr>
<td class="style1">
Total Price $
</td>
<td class="formInputCell">
<input name="TotalPrice" type="text" style="width: 55px" /></td>
</tr>
<tr>
<td class="style2"></td>
<td><input id="Submit1" type="submit"
value="Buy Now" class="buttonstyle" /></td>
</tr>
</table>
</form>
|
|||||||