|
JavaScript - Trying To Add A Counter To Calculation Page And Then Make Button Disappear
Hello,
I am currently learning JS and want to use the following to add a counter alongside the "Items Remaining" to countdown from 5 then once the max number has been reached my button to disappear and it say "finished". Can anyone help me please? Code:
<!doctype html>
<html>
<head>
<title>Adding Numbers Together</title>
</head>
<body>
<form id = "frmOne">
<table border="1" >
<tr> <th> Items Remaining </th> <td><Input Type="Text" Name="val" > </td>
</tr>
<tr>
<th> Number One:</th>
<th> Number Two:</th>
</tr>
<tr>
<td> <Input Type="Text" Name="txtFirstNumber" Size="5" value=""> </td>
<td> <Input Type="Text" Name="txtSecondNumber" Size="5" value=""> </td>
</tr>
<tr>
<td colspan="2"> Totals: <textarea Name="totals" style="width: 400px; height: 300px;"></textarea></td>
</tr>
<tr>
<td colspan="2"> <Input Type="Button" Name="b1" Value="Add Numbers" onClick = calculate()> </td>
</tr>
</table>
</form>
<script>
var Totals = [ ];
function calculate() {
var form = document.getElementById("frmOne");
var A = form.txtFirstNumber.value;
var B = form.txtSecondNumber.value;
Totals.push( A + " + " + B + " = " + (1*A+1*B) );
form.totals.value = Totals.join("\n");
form.txtFirstNumber.value = form.txtSecondNumber.value = "";
}
</script>
</body>
</html>
Similar TutorialsHello Having problems with the following...a client needs me to replicate this contact page: http://www.ravenrow.org/contact/ In particular he wants the subscribe/unsubscribe to appear only when one enters text into the text field (as it does here). I have recently changed from using tables to div tags but this was the first website where I started to experiment with divs. Unfortunately therefore it is a mixture of tables and divs. But here is my page: http://www.rowingpresents.com/contact.html Can someone tell me what I need in my code to have to subscribe/unsubscribe appear and disappear as it does at ravenrow.org. Many thanks S Here are the coding.. Code: <jsp:useBean id="chequeStopBean" scope="session" class="my.com.infopro.ibank.ui.bean.ChequeStopBean"/>
<jsp:useBean id="labelBean" scope="session" class="my.com.infopro.ibank.ui.bean.LabelBean"/>
<jsp:useBean id="lang" scope="session" class="my.com.infopro.ibank.ui.bean.LanguageBean" />
<%@ page language="java" import = "java.util.*" errorPage="" %>
<%@ page import="my.com.infopro.ibank.dto.ChequeDTO"%>
<%
request.getSession(true);
String contextPath = request.getContextPath();
chequeStopBean.queryAccList();
//RequestDispatcher dispatcher = null;
%>
<html>
<head>
<title><%=labelBean.getLabel("STOP_CHEQUE")%></title>
<meta HTTP-EQUIV="Pragma" content="no-cache">
<meta HTTP-EQUIV="Expires" content="-1">
<jsp:include page="/ScriptHeader.jsp"/>
<script language="javascript">
function validateAndSubmit() {
var msg1 = "<%=labelBean.getLabel("MSG_REQUIRED_FIELD")%>";
var msg2 = "<%=labelBean.getLabel("MSG_CANNOT_CONTAIN_CHARACTER")%>";
var msg3 = "<%=labelBean.getLabel("MSG_IN_THE_FIELD")%>";
var msg4 = "<%=labelBean.getLabel("MSG_PLEASE_ENTER")%>";
var msg5 = "<%=labelBean.getLabel("WITH")%>";
var msg6 = "<%=labelBean.getLabel("TO")%>";
var msg7 = "<%=labelBean.getLabel("MSG_CHARACTER")%>";
var msg8 = "<%=labelBean.getLabel("MSG_PLEASE_ENTER_VALID_NUMBER")%>";
var msg9 = "<%=labelBean.getLabel("MSG_REQUIRED_FIELD")%>";
var msg10 = "<%=labelBean.getLabel("MSG_WITH_EXACTLY")%>";
var msg11 = "<%=labelBean.getLabel("MSG_WITH_VALID_DATE")%>";
var msg12 = "<%=labelBean.getLabel("MSG_EXAMPLE_DATE")%>";
var msgNum11 = "<%=labelBean.getLabel("MSG_WITH_A_MINIMUM_VALUE_OF")%>";
var msgNum12 = "<%=labelBean.getLabel("MSG_WITH_A_MAX_VALUE_OF")%>";
var msgNum13 = "<%=labelBean.getLabel("MSG_PLEASE_ENTER_ROUND_INETEGER")%>";
var msgNum14 = "<%=labelBean.getLabel("MSG_PLEASE_ENTER_AT_MOST")%>";
var msgNum15 = "<%=labelBean.getLabel("MSG_DECIMAL_PLACES")%>";
var msgEnter = "<%=labelBean.getLabel("MSG_PLEASE_ENTER_VALID")%>";
var errorMsg = "<%=labelBean.getLabel("MSG_LOWECASE_ALPHABET_ALLOWED")%>"
var radioButtons = document.getElementsByName("radio");
for (var x = 0; x < radioButtons.length; x ++) {
if (radioButtons[x].checked) {
if(radioButtons[x].value=="1")
{
if (! validateTextEntry(form.chqNum, "<%=labelBean.getLabel("CHQNUM")%>" + " ", true,11,11, msg1, msg2, msg3,
msg4, msg5, msg6, msg7, msg10) )
return false;
if (! validateAlphabet(form.chqNum, "" + " ",1, msg2,"" ))
return false;
}
else if(radioButtons[x].value=="2")
{
if (! validateTextEntry(form.chqNumFrom, "<%=labelBean.getLabel("CHQNUMFROM")%>" + " ", true,11,11, msg1, msg2, msg3,
msg4, msg5, msg6, msg7, msg10) )
return false;
if (! validateTextEntry(form.chqNumTo, "<%=labelBean.getLabel("CHQNUMTO")%>" + " ", true,11,11, msg1, msg2, msg3,
msg4, msg5, msg6, msg7, msg10) )
return false;
if (! validateAlphabet(form.chqNumFrom, "" + " ",1, msg2,"" ))
return false;
if (! validateAlphabet(form.chqNumTo, "" + " ",1, msg2,"" ))
return false;
if(form.chqNumFrom.value == form.chqNumTo.value){
alert("<%=labelBean.getLabel("MSG_CANNOT_SAME")%>");
return false;
}
}
}
}
return true;
}
function show(id)
{
if (document.getElementById(id).style.display == 'none')
{
document.getElementById(id).style.display = 'block';
}
}
//-->
<!--
function hide(id)
{
document.getElementById(id).style.display = 'none';
}
</script>
</head>
<body onload="show('single')">
<form name="form" method="POST" action="<%=contextPath%>/ChequeStopServlet?tranx=confirm" dir="<%=lang.getDir()%>" >
<table width="500" align="center">
<tr>
<td align="left" colspan="3"> </td>
</tr>
<tr>
<td align="left" colspan="3" class="mainHeader"><%=labelBean.getLabel("STOP_CHEQUE")%></td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td colspan="3" class="subHeader"><%=labelBean.getLabel("CHQ_DETAIL") %></td>
</tr>
<tr>
<td colspan="3"><div align="center">
<p class="statusError">
<%if(request.getParameter("error") != null) out.println(labelBean.getLabel(request.getParameter("error"))); else out.println("");%>
</p>
</div></td>
</tr>
</table><br />
<table width="500" align="center">
<tr>
<td class="lbl"><span class="requiredFieldIndicator">* </span><%=labelBean.getLabel("ACC_NUMBER")%></td>
<td width="10" class="lbl">:</td>
<td width="305" align="left">
<select size="1" name="accNum">
<%
for (Iterator iter = chequeStopBean.getAccList().iterator(); iter.hasNext();) {
ChequeDTO chqDto = (ChequeDTO)iter.next();
%>
<option value="<%=chqDto.getAccNum()%>"><%=chqDto.getAccNum()%></option>
<% } %>
</select>
</td>
</tr>
<tr>
<td align="right">
<input type="radio" class="radioStyle" name="radio" value="1" onfocus="show('single');hide('multiple');hide('multiple1');return true;" checked="checked" >
<%=labelBean.getLabel("STOP_SINGLE")%>
</td>
<td> </td>
<td>
<input type="radio" class="radioStyle" name="radio" value="2" onfocus="hide('single');show('multiple');show('multiple1');return true;">
<%=labelBean.getLabel("STOP_MULTIPLE")%>
</td>
</tr>
<tr id="single">
<td class="lbl"><span class="requiredFieldIndicator">* </span><%=labelBean.getLabel("CHEQUE_NUMBER")%></td>
<td class="lbl"width="10">:</td>
<td colspan="2" align="left">
<input name="chqNum" type="text" size="15">
</td></tr>
<tr id="multiple" style="display: 'none'">
<td class="lbl"><span class="requiredFieldIndicator">* </span><%=labelBean.getLabel("FROM_CHEQUE_NUMBER")%></td>
<td class="lbl"width="10">:</td>
<td colspan="2" align="left">
<input name="chqNumFrom" type="text" size="15">
</td></tr>
<tr id="multiple1" style="display: 'none'">
<td class="lbl"><span class="requiredFieldIndicator">* </span><%=labelBean.getLabel("TO_CHEQUE_NUMBER")%></td>
<td class="lbl"width="10">:</td>
<td colspan="2" align="left">
<input name="chqNumTo" type="text" size="15">
</td></tr>
<tr>
<td class="lbl"><span class="requiredFieldIndicator">* </span><%=labelBean.getLabel("REASON")%></td>
<td class="lbl" width="10" >:</td>
<td colspan="2">
<select name="reason">
<option value="Lost"><%=labelBean.getLabel("LOST")%></option>
<option value="Stolen"><%=labelBean.getLabel("STOLEN")%></option>
<option value="Payment Cancellation"><%=labelBean.getLabel("PAYMENT_CANCELLATION")%></option>
<option value="Others"><%=labelBean.getLabel("OTHERS")%></option>
</select>
</td>
</tr>
<br/>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td colspan="3" align="center">
<input class="button" type="submit" value="Next" onClick="return validateAndSubmit();" >
</td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td colspan="3" align="left" class="footer"><%=labelBean.getLabel("NOTE")%>
</td>
</tr>
<tr><td colspan="3" class="footer">
<ul>
<li><%=labelBean.getLabel("THE_ASTERISK")%></li>
</ul>
</td>
</tr>
</table>
<jsp:include page="/Footer.jsp" />
</form>
</body>
</html>
This is error for the first page.. This is picture that which i wan.. Thanks! I need to make a counter that counts up (preferably in real time but not crucial). Ideally, it would count up by 9 dollars per second and go to the hundred millions. Thanks in advance! One that I have seen is at www.costofwar.com This is in real time, but that feature is not crucial. hii... i had made an template and place all my code inside it it is running fine but the button is not getting near to the image can u help me with that or tell me how to do it ....and i had used software to convert template from powerpoint with a software called ppt2 flash standard and it has it logo of that website on the buttom of my template how to remove it !! Code: <html>
<head>
<title>U Compare</title>
<script><!--
var Clicks = 0 ;
function AddClick(){
Clicks = Clicks + 1;
document.getElementById('CountedClicks').innerHTML = Clicks + ' votes';
}
// --></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script language="javascript" src="swf.js"></script>
<title> compare</title>
<!-- saved from url=(0014)about:internet -->
</head>
<body bgcolor="#999999">
<span id="CountedClicks">0 vote</span><br>
<button style="background-color:white" onclick="AddClick()">vote</button>
</body>
<script language="javascript">
<!--
function getSlideIndex() {
var strUrl = document.location.href;
if (strUrl.indexOf('?') == -1 || strUrl.indexOf('=') == -1) {
return 0;
}
return strUrl.substring(strUrl.indexOf('=') + 1, strUrl.length);
}
//-->
</script>
<body>
<center>
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr>
<td width="100%" height="100%" align="center" valign="center">
<script language="javascript">
writeSwf("compare.swf?slideIndex=" + getSlideIndex(), "100%", "100%");
</script>
</td>
</tr>
<tr>
<td style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; color: silver;" align="right">
<span class="style1">Powered by Wondershare
<a style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; color: silver" href="http://www.wondershare.com/pro/ppt2flash-standard.html">PPT2Flash Standard</a></span></td>
</tr>
</table>
</center>
<!-- begin htmlcommentbox.com -->
<div id="HCB_comment_box"><a href="http://www.htmlcommentbox.com">your opinion box</a> is loading comments...</div>
<link rel="stylesheet" type="text/css" href="http://www.htmlcommentbox.com/static/skins/simple/skin.css" />
<script type="text/javascript" language="javascript" id="hcb"> /*<!--*/ if(!window.hcb_user){hcb_user={};} (function(){s=document.createElement("script");s.setAttribute("type","text/javascript");s.setAttribute("src", "http://www.htmlcommentbox.com/jread?page="+escape((window.hcb_user && hcb_user.PAGE)||(""+window.location)).replace("+","%2B")+"&opts=406&num=10");if (typeof s!="undefined") document.getElementsByTagName("head")[0].appendChild(s);})(); /*-->*/ </script>
<!-- end htmlcommentbox.com -->
</body>
</html>
H, I'm trying to create an sms form. but I want the users to be able to monitor the characters and sms number as they type...taking 160 characters to be 1 page. pls I'll need help with coding this form to display characters left in 'ch_count' box and number of pages in the 'pages' box while typing in the 'message' textarea....hope it's clear enough...thanks Code: <p> <textarea name="message" cols="" rows="" id="message"></textarea> </p> <p> <input name="ch_count" type="text" id="ch_count" size="8" /> characters left <input name="pages" type="text" id="pages" size="8" /> pages </p> Hello, I actually use a counter on a webpage (It works) To do it, I use an inline javascript but I would like to unify the entire page and call that counter directly in the external Javascript that manages the whole site. Here's the actual code... Code: HTML
<body onLoad=gen_hits()>
...
<span id='hits'></span><SCRIPT language="JavaScript" SRC="http://www.mycompany.com/cgi-bin/counterdir/gcount.pl?NUMBER=../../otherdir/counter"></SCRIPT>
...
</body>
EXTERNAL JAVASCRIPT (ini.js)
var hits="HITS ";
function gen_hits() {
document.getElementById("hits").innerHTML=hits;
}
and here a "view" of my request... Code: HTML
<body onLoad=gen_hits()>
...
<span id='hits'></span>
...
</body>
EXTERNAL JAVASCRIPT
var hits="HITS " + <SCRIPT language="JavaScript" SRC="http://www.mycompany.com/cgi-bin/counterdir/gcount.pl?NUMBER=../../otherdir/counter"> </SCRIPT> ;
function gen_hits() {
document.getElementById("hits").innerHTML=hits;
}
Any idea how to modify it ? Thank you very much Gino hi, on my website http://zend.warrencreative.com/gemini-group/index.html I am using thickbox, if you click on Subscribe to newsletter at the top it opens up a box, I need to change type="button" to type="image" but this doesn't work?! is there any other way? Code: <a class="newsletter thickbox" href="#TB_inline?height=325&width=365&inlineId=myOnPageContent&modal=true">Subscribe to eNewsletter</a> <div id="myOnPageContent" class="hidden"><p>Please enter your Name:</p><p><input type="text" name="name" class="textbox"></p><p>Please enter your Email:</p><p><form action="#"><input type="text" name="email" class="textbox"></p><p> </p><p><input type="button" value="Send" class="thickbox" title="add a caption to title attribute / or leave blank" alt="#TB_inline?height=325&width=365&inlineId=myOnPageContent1"> <input onclick="tb_remove()" type="image" alt="cancel button" src="images/cancelbutton.jpg"></form></p></div> <div id="myOnPageContent1" class="hidden"><p>Thank you for subscribing</p><input onclick="tb_remove()" type="image" alt="cancel button" src="images/cancelbutton.jpg"></div> thanks in advance I'm trying to create a button where I can click on it and it changes the colour of text. When I click the same button again, it will change the text to another colour. It would be helpful if someone could show me how to do it please.
Made a topic earlier about "auto klick" for swf button but i got response ,its not posible todo that.. so i have another question!! Is it posible to make the swf button invisible but still clickable and then have a background so it looks like its another button? or is there any other way to edit design for the button! OBS! i only have the swf not the flv file! Code: <html class="no-js" lang="en" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="http://www.google.com/jsapi?key=ABQIAAAAAJ5I0tmbz-jcO3Ja4fwvEBTb9u7IFi28hLXI-qXjI6UBBcarTBQ49g-wp7Wxnow1_w9F-7_GcOOnyg"></script>
<script>
google.load("jquery", "1.7.0");
google.load("swfobject", "2.2");
</script>
</head>
<body>
<div id="container">
<div id="main" role="main">
<div id="data" class="channel">
<div id="openbutton">
<div id="flashcontent1";></div>
<!-- DR1 Start --><script>
params = {};
params.text = 'DR1';
params.action = "channel";
params.value = "40";
swfobject.embedSWF('content/linkbutton.swf', 'flashcontent1', '145', '30', '9.0.115', 'content/expressinstall.swf', params, {allowFullscreen:'true', wmode: 'transparent' ,bgcolor: '#FFFFFF', menu: 'false'}, {id: 'flashcontent1'});
<!-- DR1 Ends --></script>
</div></div></div> </div></body></html>
I have a button given like this: <a href="test.php"><input class="test" type="test"></a> I have a CSS that defined the button as an image, and on hover the button changes. However, on hover, I'd like there to come a drop down that for example link to test 1, test 2, test 3. Is this possible? Thank you! how do i make a html button stay down when pressed, until another button within a specified group of buttons is pressed, at which point it is released and the other button stays pressed?
Basically, I want to make it so there is a button, and when you click it, it plays a random song from a list of songs that would be in the code. I am not completely sure if this is possible or not. I know how to make the button, that is simple. Sorry if this is actually easy, I am just learning how to script. Here's the code. what am I missing to make this work? Thank you in advanced! @if (Model.Layer.Id > 0){ <div style="float: left; padding-left: 14px;"> @using (Html.BeginForm("Delete", "Layer", new { layerId = Model.Layer.Id, subAccountId = Model.SubAccount.Id })){ <input type="image" src="/Portal/Content/images/admin-delete-off-btn.png" onmouseover="this.src='/Portal/Content/images/admin-delete-on-btn.png'" onmouseout="this.src='/Portal/Content/images/admin-delete-off-btn.png'" title="Delete button" value="Delete" alt="Delete" /> } </div> } <div class="clear"></div> <div id="dialogDeleteBox" title="Delete Confirm" style="display: none"> <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 40px 0;"></span> <div id="confirmDeleteLayer"> <div id="confirmDeleteLayerMessage"> <p> Are you sure you want to delete this group? </p> </div> </div> </div> Hi! Trying to get a delete confirm dialog box to open when you click on the button. Here's what I have in the body... @if (Model.Layer.Id > 0){ <div style="float: left; padding-left: 14px;"> @using (Html.BeginForm("Delete", "Layer", new { layerId = Model.Layer.Id, subAccountId = Model.SubAccount.Id })){ <input type="image" src="/Portal/Content/images/admin-delete-off-btn.png" onmouseover="this.src='/Portal/Content/images/admin-delete-on-btn.png'" onmouseout="this.src='/Portal/Content/images/admin-delete-off-btn.png'" title="Delete button" value="Delete" alt="Delete" /> } </div> } I can't seem to figure out the script to make this work. Can anyone help? What I had was <script type="text/javascript"> function confirmDeleteSelected(id) { jQuery("#dialog-confirmDelete").dialog({ closeOnEscape: false, resizable: false, width: 250, modal: false, zIndex: 5000, buttons: { "Yes": function () { doDeleteSelected(id); jQuery(this).dialog("close"); jQuery(this).dialog("destroy"); }, "No": function () { jQuery(this).dialog("close"); jQuery(this).dialog("destroy"); } } //end Buttons }); } </script> Thanks Phil I have some code that will check a users screen resolution and open a new window with a particular version of my website in, I have several sites for different page sizes. But when this code runs in Safari the pop-up is blocked so I would like the image on my page to be a button that runs the code to open the 'correct' window (based on the screen res) and as a button is launching the new window Safari should be okay about it. Unless I am doing something wrong? http://www.meta.projectmio.com/pop.html But how do I modify the code to do this, I'm hopeless? Thanks. Code: Quote: Code: Quote: Code: Quote: can somebody please tell me what need done. Everything is working fine except for the button created in javascript that is in the second window which is to open the third window. Thanks. Ok so im new to javascript and I have a button in an interface for an app. It's like drag and drop and i want this button to link you to a certain website searching for what the user types in the searchField1 box. The button is button16. Such as you type dogs into the text box and you click the google button among other search engines and it will redirect you to a google search doing a search for dogs. But how do I make this button search google and search for whats in searchField1. I would really appreciate the help. Im looking everywhere to learn this but just cant find it. If you could tell me how or send me a link to a tutorial that would be great. Thanks! Here is the code: I don't know where and what to add to do that. Please help. I want to implement a javascript function where a submit button will be submitted from the parent page each time I close a child page. Please let me know what I did wrong in my code and please elaborate your answer so that I could understand it better. Thank you so much for your help. I have the following jscript code but it is now working. Code: window.onunload = submitParent;
function submitParent()
{
var doc = window.opener.document,
theForm = doc.getElementById("finalForm");
theField = doc.getElementById("finalSelected");
theForm.submit();
theField.trigger('click');
}
My form from the parent page is as follow. I want my jscript to just click on the submit button once. Code: <form id = "finalForm "name= "finalForm" method="POST" action=""> <input type="Submit" id = "finalSelected" name="finalSelected"/> On this website... http://livedemo00.template-help.com/...21/index.html# When you click on the Navigation Bar the website pages load inside that page? How exactly would i go around doing this? Thankyou here is the html code that i have PHP Code: <td valign="middle" valign="middle"> <input type="radio" name="gender" id="genderM" value="Male" /> Male <input type="radio" name="gender" id="genderFM" value="Female" /> Female </td> and here is the js funtion PHP Code: var $j = jQuery.noConflict(); function isValidEmail(str) { return (str.indexOf(".") > 2) && (str.indexOf("@") > 0); } function validateForm(){ var firstName; var lastName; var email; var mobile; var comment; var error; firstName = $j('#firstName').val(); lastName = $j('#lastName').val(); email = $j('#email').val(); mobile = $j('#mobile').val(); comment = $j('#comment').val(); if(firstName=='' || firstName.length < 3){ error = 'Please Enter Your First Name'; $j('#errormsg').html('<p class="errors">'+ error +'</p>'); return false; } if(lastName=='' || lastName.length < 3){ error = 'Please Enter Your Second Name'; $j('#errormsg').html('<p class="errors">'+ error +'</p>'); return false; } //mob //$jmob_pattern = '^\d{10}$j'; if(mobile.length != 10 || isNaN(mobile)){ error = 'Please Enter Your Mobile Number'; $j('#errormsg').html('<p class="errors">'+ error +'</p>'); return false; } if(email=='' || !isValidEmail(email)){ error = 'Please Enter Your Email Address'; $j('#errormsg').html('<p class="errors">'+ error +'</p>'); return false; } if(comment.length < 5){ error = 'Please Enter A Comment'; $j('#errormsg').html('<p class="errors">'+ error +'</p>'); return false; } return true; } Does anybody know how i check to see if the radio button is select and also can anybody tell me how i can check for an email in the correct format the function isValidEmail in the above alows emails to pass through if they are in this format aaa@aaa. i only want them to go through if they are aaa@aaa.com Thanks for your help if you give it |
|||||||