|
JavaScript - Tab Order Is Not Working
hi,
This is my proble, I have some controls(textbox's,dropdown's),and using javascript,tab order,when i press "Enter" key the tab order 1 is not working(The cursor is focussed in the control which is tab order is 1, not moved to tab order 2) please give a solution. NARASIMHA RAO K. Similar TutorialsHi, I need help with my javascript codes to finish my order form. The first problem I am encountering is this: I need the quantity to appear automatically in the total quantity for sub total. how is this? I have assigned TotalQuantity.value for the quantity. Thank you. You can see the image here. http://img821.imageshack.us/i/oderform.jpg/ Hello guys, please help me in building an order form, the details. The order form consist of text box product quantity, unit price, total price, sub total price, tax, discount, grand total quantity and grand total price. There are 8 products so there will be 8 product quantity, unit price, total price text boxes. When a user enter the product quantity and unit price, the total price column should be automatically calculated e.g. if product quantity is 8, unit price is 2 then the total price should come to 16. The sub total price will be automatically calculated which should be the addition of all total prices so as the product quantity. The user will enter the tax and discount amount which should be calculated as percentage. Tax will be added to sub total and discount will be subtracted from sub total and then the total price will be displayed in the grand total text box. Please help me to develop this form. Thank You Hi their, i'm trying to create an online order page i'm having probelms calculating totals from the options not sure if i've designed it correctly i have 3 select options (with 4 different products in each) a single checkbox for another single product and a final select tag for amounts (500/1000/2500/5000) i need to assign each select option a value then * it by the amount select am i best using onchange/an array or ditching select tags for something easier any help greatly appreciated Marty I am using the following code to rotate my banner 3 times. I am trying to get it to order. Ive set it up so that you can choose yes/no drop down as to whether you wnat a panel to show and I have also set it up with a drop down so you can specify 1,2,3. I want to be able to randomly change the order to say 2, 1, 3 it dosent seem to work with what I have below. Any suggestions? Code: <script type="text/javascript">
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
$(".ui-tabs-panel > a").hover(
function() {
$("#featured").tabs("rotate",0,true);
},
function() {
$("#featured").tabs("rotate",5000,true);
}
);
<div id="featured" >
---------------------------------------------------------
<%
String sCount="";
String stitle = "";
String iPanels = "";
String sShowPanels = "";
String sContent="";
%>
<ul class="ui-tabs-nav">
<%
for(int i=1;i<7;i++){
sCount="" + i;
stitle = "stitle";
stitle= stitle + i;
iPanels = "iPanels";
iPanels = iPanels + i;
sShowPanels = "sShowPanels";
sShowPanels = sShowPanels + i;
//out.print(requestItem.getFieldValue(iPanels) + "=" + sCount);
if(requestItem.getFieldValue(iPanels).equals(sCount)){
if(requestItem.getFieldValue(sShowPanels)!=null && requestItem.getFieldValue(sShowPanels).equals("Yes")){
if(requestItem.getFieldValue(stitle)!=null && requestItem.getFieldValue(stitle).length() >2){
%>
<li class="ui-tabs-nav-item" id="nav-fragment-<%=i%>"><a href="#fragment-<%=i%>">
<%=requestItem.getFieldValue(stitle)%>
</a></li>
<%
}
}
}
}
%>
</ul>
<%
for(int i=1;i<7;i++){
sCount="" + i;
stitle = "stitle";
stitle= stitle + i;
iPanels = "iPanels";
iPanels = iPanels + i;
sShowPanels = "sShowPanels";
sShowPanels = sShowPanels + i;
sContent = "sContent";
sContent= sContent + i;
if(requestItem.getFieldValue(iPanels).equals(sCount))
{
if(requestItem.getFieldValue(sShowPanels)!=null && requestItem.getFieldValue(sShowPanels).equals("Yes"))
{
if(requestItem.getFieldValue(sContent)!=null && requestItem.getFieldValue(sContent).length() >2)
{
%>
<div id="fragment-<%=i%>" class="ui-tabs-panel ui-tabs-hide" style="">
<%=requestItem.getFieldValue(sContent)%>
</div>
<%
}
}
}
}
%>
</div>
</div> <!--content-->
I have a challenge I gave to myself. I want a script that asks me to put things in order. Say I want a quiz of family, order of age. I have a table with the left cell everybody's name I want a script where I click on a name and it moves over to the right hand cell, up top, then the next clicked named is put under it and so on until all the names are moved over. So far I have this, but I know there is a lot of room for improvment. any suggestions? <HTML> <HEAD> <TITLE>Put Bible books in proper order</TITLE> </head> <body> <h1>Hello World!</h1> <TABLE BORDER=5><TR><TD> <FORM NAME="BOOKS"> <script language="javascript" type="text/javascript"> alert('This is what an alert message looks like.'); FUNCTION TESTER() { ALERT('WORKS'); VAR GOOD=0; VAR BAD=0; if (BOOKS.FONE="A") { GOOD++; } ELSE { BAD++; }; ALERT("YOU HAVE INCORRECT"); } </script> <TABLE BORDER=0><TR><TD> <TABLE BORDER=1> <TR><TD><INPUT TYPE="BUTTON" VALUE="Adam" NAME="GONE" onClick="javascript:TEMP.value=this.value";> <TR><TD><INPUT TYPE="BUTTON" VALUE="Dave" NAME="GTWO" ONCLICK="javascript:TEMP.value=this.value";> <TR><TD><INPUT TYPE="BUTTON" VALUE="Kile" NAME="GTHREE" ONCLICK="javascript:TEMP.value=this.value";> <TR><TD><INPUT TYPE="BUTTON" VALUE="John" NAME="GFOUR" ONCLICK="javascript:TEMP.value=this.value;"> <TR><TD><INPUT TYPE="BUTTON" VALUE="Geroge" NAME="GTWO" ONCLICK="javascript:TEMP.value=this.value;"> </TABLE> <TD VALIGN="CENTER" ALIGN="CENTER" WIDTH=30> <INPUT TYPE="BUTTON" VALUE=" " NAME="TEMP"> <TD> <TABLE BORDER=1> <TR><TD><INPUT TYPE="BUTTON" VALUE="?????" NAME="FONE" ONCLICK="javascript:this.value=TEMP.value;TEMP.value=' '"> <TR><TD><INPUT TYPE="BUTTON" VALUE="?????" NAME="FTWO" ONCLICK="javascript:this.value=TEMP.value;"> <TR><TD><INPUT TYPE="BUTTON" VALUE="?????" NAME="FTHREE" ONCLICK="javascript:this.value=TEMP.value;"> <TR><TD><INPUT TYPE="BUTTON" VALUE="?????" NAME="FFOUR" ONCLICK="javascript:this.value=TEMP.value;"> <TR><TD><INPUT TYPE="BUTTON" VALUE="?????" NAME="FFIVE" ONCLICK="javascript:this.value=TEMP.value;"> </TABLE> </TABLE> <INPUT TYPE="BUTTON" NAME="CHECK" onClick="JAVASCRIPT:ALERT()" VALUE="CORRECT???"> </FORM> </TABLE> </BODY> </HTML> In the following code I display two buttons in the randommember div. I then append the randommember div with contents of the rana variable. This variable stores information related to a featured member and displays it as a link. Basically buttons appear on screen which are then followed by the featured member. But I would like to switch this around and have the featured member appear followed by the buttons. How can I do this? Obviously I can't put the buttons into the rana variable because then these become a link also removing the links functionality. Does anybody have any ideas how I can solve this problem. I am new to Javascript so please be gentle. Code: r = Math.floor(Math.random() * x.length);
function randommember() {
name = (x[r].getElementsByTagName("name")[0].childNodes[0].nodeValue);
sex = (x[r].getElementsByTagName("sex")[0].childNodes[0].nodeValue);
seeking = (x[r].getElementsByTagName("seeking")[0].childNodes[0].nodeValue);
image = (x[r].getElementsByTagName("imgname")[0].childNodes[0].nodeValue);
rana = document.createElement('a');
aIdName = 'random';
ahref = '#';
aclick = 'show(' + r + ')';
rana.setAttribute('id', aIdName);
rana.setAttribute('href', ahref);
rana.setAttribute('onclick', aclick);
rana.innerHTML = "<h3>Featured Member</h3><br /><img src='images/" + image + ".gif' /><br /><br />Name: " + name + "<br />Sex: " + sex + "<br />Seeking: " + seeking;
document.getElementById("randommember").innerHTML = "<input type='button' onclick='previous()' value='<<' /><input type='button' onclick='next()' value='>>' /><br />";
document.getElementById("randommember").appendChild(rana);
}
so I made this pizza order form for my ap comp sci class with javascript and html...teacher didnt realy teach javascript so i got most of javascript from online. the problem is that i have a price for everything but wen i hit the place order button, it would just reset the form...so i made it a reset button instead. heres the code: <html> <head> <title>Pizza Planet</title> <script language="javascript"> var pizzasize; function emptyField(textObj) { if(textObj.value.length == 0) return true; for(var i=0; i<textObj.value.length;i++) { ch = textObj.value.charAt(i); if(ch != ' ' && ch != '\t') return false; } return true; } function basecost(radioObj) { pizzasize = 1; if(radioObj[0].checked) cost = 5.00; // small if(radioObj[1].checked) { cost = 7.00; // medium pizzasize = 2; } if(radioObj[2].checked) { cost = 9.00; // large pizzasize = 3; } return cost; } function toppingscost(selectObj) { tcost = 0.0; for(var i=0;i<selectObj.length;i++) if(selectObj[i].selected) tcost += 0.50*pizzasize; return tcost; } function extrascost(selectObj) { ecost = 0; if(selectObj[0].selected) ecost += 0.00; //no extras if(selectObj[1].selected) ecost += 1.00; // Coke if(selectObj[2].selected) ecost += 5.00; // Hot wing 12 if(selectObj[3].selected) ecost += 3.00; // hot wing 6 if(selectObj[4].selected) ecost += 4.00; // bread sticks 12 if(selectObj[5].selected) ecost += 2.50; //bread sticks 6 return ecost; } function deliverycost(selectObj) { if(selectObj[0].selected) Dcost = 5.00; else if(selectObj[1].selected) Dcost = 0; return Dcost; } function confirmPizza(formObj) { if(emptyField(formObj.customer) ) { alert("Please enter your name"); return false; } if(emptyField(formObj.address) ) { alert("Please enter an address"); return false; } if(emptyField(formObj.email) ) { alert("Please enter your e-mail address"); return false; } if(emptyField(formObj.phone) ) { alert("Please enter your phone number"); return false; } total = basecost(formObj.p_size); total +=toppingscost(formObj.tops); total +=extrascost(formObj.xtra); total +=deliverycost(formObj.deliv); return confirm("The cost is " + total + ", place order?"); } </script> </head> <body> <h1>Pizza Planet</h1> <h3><b>Pizza size</h3> <form name="pizzaform" onSubmit= "return confirmPizza(pizzaform)" > </b> Small (5.00)<input type="radio" name="p_size" value="sma"> Medium (7.00)<input type="radio" name="p_size" value="med"> Large (9.00)<input type="radio" name="p_size" value="lar"> <br> <h3>Toppings 1</h3> <select name="tops" size="3" multiple> <option selected>Cheese</option> <option>Pepperoni</option> <option>Sausage</option> <option>Chicken</option> <option>Bacon</option> <option>Pineapples</option> <option>Jalapenos</option> <option>Banana Peppers</option> </select> <h3>Toppings 2 (+.50)</h3> <select name="tops" size="3" multiple> <option selected>None</option> <option>Cheese</option> <option>Pepperoni</option> <option>Sausage</option> <option>Chicken</option> <option>Bacon</option> <option>Pineapples</option> <option>Jalapenos</option> <option>Banana Peppers</option> </select> <h3>Toppings 3 (+.50)</h3> <select name="tops" size="3" multiple> <option selected>None</option> <option>Cheese</option> <option>Pepperoni</option> <option>Sausage</option> <option>Chicken</option> <option>Bacon</option> <option>Pineapples</option> <option>Jalapenos</option> <option>Banana Peppers</option> </select> <br> <h3>Extras <h3> <select name="xtra" size="6" multiple> <option selected>None</option> <option>Coca-Cola (2-liter) (1.00)</option> <option>Hot Wings (12) (5.00)</option> <option>Hot Wings (6) (3.00)</option> <option>Bread Sticks (12) (4.00)</option> <option>Bread Sticks (6) (2.50)</option> </select> <br> <br> <h3>Is this delivery or carryout?</h3> <select name="del" size="2" multiple> <option>Delivery</option> <option>Carryout</option> </select> <hr /> Name <input type="text" size="20" maxlength="50" name="customer"> Address <textarea name="address" cols="40" rows="3"> </textarea> Email <input type="text" size="20" maxlength="50" name="email"> Phone <input type="text" size="20" maxlength="20" name="phone"> <hr> <input type="reset" value="Reset"> </form> <hr> Thank you for ordering at Pizza Planet. </body> </html> Hi, I have a javascript function that is formatting data before it is being passed along to an Ajax call. The same function is formatting data for two variables but it seems as though the first call to the is being preempted by the same function call for the second variable's data formatting. On top of that the function does not seem to finish execution by the time it reaches the Ajax call so none of the data seems to be passed along. Here's a condensed version at what I'm dealing with: Code: var data_group1 = FormatData('type_1');
var data_group2 = FormatData('type_2');
Ajax(data_group1, data_group2);
How can I ensure that the first call to FormatData is finished before the next call to it begins. Additional how can I prevent the Ajax function from executing until the first two lines have executed. Thanks a ton. Hi everyone, I'm trying to capture the order in which the windows I've opened using window.open are layered on top of each other. For example, if I open three windows, starting with the first on the bottom and the third on top, but I then focus on the second window, bringing it to the top, is there a way to capture the new window order (2 on top, then 3, then 1)? I know that window.top can give me the first one, but from there, without closing it, is there a way to tell what the next one underneath it is? Thanks in advance, Katherine Hey all, I have an object called Table that gets instantiated: Code: var tableReady = new Table($(this)) This Table in turn instantiates a header: Code: if(typeof header.attr('data-sorter') !== 'undefined') headers.push(new Header(header));
A method is attached to the Header object called attach() which simply passes in a string 'click': Code: var Header = function(header){
this.header = header;
this.addEventHandler(this.header, "click", attach("click"), true);
}
The addEventHandler() function is declared below: Code: function addEventHandler(oNode, evt, oFunc, bCaptures)
{
if (typeof(window.event) != "undefined")
oNode.attachEvent("on"+evt, oFunc);
else
oNode.addEventListener(evt, oFunc, bCaptures);
}
While the addEventHandler() function is called during Header instantiation, which in turn calls attach(), attach() is never executed unless there is a click event called on header object: Code: Header.prototype = {
attach: function(event){
var obj = this;
if(event == "click"){
obj.header.bind("click", function(e){
obj.children()[0].preventDefault();
return obj.calculate();
})
}
},
I call preventDefault() (I'm using the jquery library as well) to try to prevent the link from responding to a click by targeting obj.children()[0] which refgers to the nested link. Unfortunately this doesn;t work. The link is still triggered anyway. How can I force the browser not to respond to the link in the above situation, preferably using an OOP solution? Thanks for response. Code: strapplicantid=document.getElementById('applicantid').value;
$.get("spt.asp"+ '?id=' + strapplicantid + '&rnde='+ Math.round(Math.random() * 10000), function(data){
alert("Data Loaded: " + data);
});
alert("here");
why is the alert("here") happenign before the alert dataloaded. I want to be albe to load the html into the variable data and then use that variable. How is this possible to do? Hello all, I am just starting out trying to learn javascript and I am looking for a good forum to help me get through all the roadblocks I'm sure to hit. This looks like a very active place so hopefully I'll find some good help! Right now I'm going through a tutorial series at webmonkey. Here is the lesson I am currently working on: http://www.webmonkey.com/2010/02/JavaScript_Tutorial_-_Lesson_3/#Getting_Framed At the bottom of the page they give you a homework assignment which is to re-create this page using html and javascript. This page has 2 row frames. I re-created these frames and the top frame initially has a page called "navigation" loaded and the bottom page initially has a page called "explorer" loaded. If you click the monkey image at the right in the "navigation" frame, it opens a new page called "brand" in the bottom frame. This "brand" page has the same monkey image as the "navigation" page but unlike the other monkey image, this one changes when you mouseover it. If you mouseover it again, it changes to another image, and a third mouseover brings you back to the original monkey image. If you click on one of the images, it swaps the monkey image in the "navigation" frame with that image. The idea is that you have 3 images to chose from in the "brand" page that you can designate as the logo in the "navigation" page. I have no problem re-creating this effect. Here is the code I used to re-create this: I initialized these variables in the <head> of my page: Code: <script language="JavaScript"> var temp = ""; var img1 = 'http://www.wired.com/wired/webmonkey/stuff/javascript_tutorial_files/JST_homework3_files/brand_me_files/monkey.gif'; var img2 = 'http://www.wired.com/wired/webmonkey/stuff/javascript_tutorial_files/JST_homework3_files/brand_me_files/thau.gif'; var img3 = 'http://www.wired.com/wired/webmonkey/stuff/javascript_tutorial_files/JST_homework3_files/brand_me_files/sky.gif'; </script> Then I wrote this in the body of my page: Code: <a onclick="parent.navigation.document.logo.src=img1;" onmouseover=" temp=img1; img1=img2; img2=img3; img3=temp; document.the_image.src=img1;" href="#"> <img src="http://www.wired.com/wired/webmonkey/stuff/javascript_tutorial_files/JST_homework3_files/brand_me_files/monkey.gif" name="the_image"></a> Out of curiosity, I switched the order of onmoseover and onclick so that onmouseover came first like this: Code: <a onmouseover=" temp=img1; img1=img2; img2=img3; img3=temp; document.the_image.src=img1;" onclick="parent.navigation.document.logo.src=img1;" href="#"> <img src="http://www.wired.com/wired/webmonkey/stuff/javascript_tutorial_files/JST_homework3_files/brand_me_files/monkey.gif" name="the_image"></a> The page still worked in Firefox, but when I viewed the source (using firebug), onclick was still first and then onmouseover. I deleted my history and refreshed the page and still onclick was coming up first when I viewed the source. Does Firefox have an auto-correct feature that is forcing onclick to be first? Is there an order when using event handlers? Does onclick always have to come before onmouseover? Also, this code worked in Firefox and Safari, but it did not work in Chrome. Both with onclick and onmouseover first, I was able to mouseover and rotate through the images in Chrome, but whenever I clicked on an image the image was not swapped in the "navigation" page. Why? The "navigation" page also has a green button and a yellow button that change the background of the bottom frame to their respective color when clicked using the bgColor property. This effect also works in Firefox and Safari, but not in Chrome. Why? Do I have a setting in Chrome activated that is preventing this or does Chrome not recognize this code? I know this was long-winded but I'm a beginner so don't go too hard on me! Thanks in advance! Hello Guys, I have been grabbing good ideas and code from everywhere to build an online order form. I have no skill programming, but i have managed to almost finish it. However i still have two thing I cant done. Hope you can help me. 1. If any product of the "Product #2 drop-down menu" is selected, then "shipping drop-down menu" should only have "Post office option" enabled. 2. If "Shipping drop-down menu" is 7-11 or Family Mart, then "Convenience store text box" should be enabled. You can check the whole code he http://dl.dropbox.com/u/21610873/code.txt Thanks Hey there, first time poster. I am trying to create an order with the ability to dynamically self total the sum of the selected items but also be able to add a 25% labor fee having it be at least $90. So if someone buys $300 worth of items the labor charge would be $75 but it would be automatically bumped to $90. heres the existing code: PHP Code: * Calculates the payment total with quantites * @param {Object} prices */ countTotal: function(prices){ var total = 0; $H(prices).each(function(pair){ total = parseFloat(total); var price = parseFloat(pair.value.price); if ($(pair.key).checked) { if ($(pair.value.quantityField)) { price = price * parseInt($(pair.value.quantityField).getSelected().text, 10); } total += price; } }); if (total === 0) { total = "0.00"; } if ($("payment_total")) { $("payment_total").update(parseFloat(total).toFixed(2)); } }, /** * Sets the events for dynamic total calculation * @param {Object} prices */ totalCounter: function(prices){ $H(prices).each(function(pair){ $(pair.key).observe('click', function(){ JotForm.countTotal(prices); }); if ($(pair.value.quantityField)) { $(pair.value.quantityField).observe('change', function(){ $(pair.key).checked = true; JotForm.countTotal(prices); }); } }); }, I have been playing with two options but just dont seem to get the coding right. Can someone please assist. Using ie9 but same problem with all browsers. first snippets. HTML: Code: <!-- Row 3, Col 3 purchase boxes --> <td colspan="1" height="120" align="left"> <input style="margin-left: 60px" type="text" name="bed_359" size="3" maxlength="3" onchange="calculateValue(this.form)" /> R359</td></tr> <!-- Row 10, Col 2 Order Value Box--> <td colspan="1" align="left"><input style="margin-left: 60px" type="text" name="total" size="10" onfocus="this.form.elements[0].focus()" /> </td></tr> javaScript: Code: // Function to calculate order value
function calculateValue(orders) {
var orderValue = 0;
var value = 0;
var itemPrice = 0;
var itemQuantity = 0;
// Run through all the product fields
for(var i = 0; i < orders.elements.length; ++i) {
// Get the current field
formField = orders.elements[i];
// Get the fields name
formName = formField.name;
// Items price extracted from name
itemPrice = parseFloat(formName.substring(formName.lastIndexOf("_") + 1));
// Get the Quantity
itemQuantity = parseInt(formField.value);
// Update the OrderValue
if(itemQuantity >= 0) {
value = itemQuantity * itemPrice;
orderValue += value;
}
}
// Display the total
orders.total.value = orderValue;
}
Second code: Code: <!-- Row 9, Col 3 purchase boxes --> <td colspan="1" height="120" align="left"> <select style="margin-left: 60px" name="shirt" value="215" onchange="calculateValue(this.form)" /> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option></select> R215</td></tr> Java Code: // Function to calculate order value
function calculateValue(orders) {
var orderValue = 0;
var value = 0;
var itemPrice = 0;
var itemQuantity = 0;
// Run through all the product fields
for(var i = 0; i < orders.elements.length; ++i) {
// Get the current field
formField = orders.elements[i];
// Get the fields name
formValue = formField;
// Items price extracted from name
itemPrice = formField;
// Get the Quantity
itemQuantity = formField.selectedIndex;
// Update the OrderValue
if(itemQuantity > 0) {
orderValue += itemQuantity * itemPrice
}
}
// Display the total
orders.total.value = orderValue.toLocaleString();;
}
Please help its probably something simple. Hello, I have to JS scripts running on a page, one is a fading slide-show acting as a header and the other is a light-box like image gallery. When I view a picture in the "light-box" mode it sits underneath the fading slide-show and I want it to be on top of everything - much like setting the z-index in css. Although I don't think this is the way to solve this. Anyway, you can check what I'm talking about here. I have a script that needs extra variables added, but need some help on how to do it. I need a textbox to add shipping charges, and also a text box to add sales tax. Then these 2 amounts need to be added to the grand total. Any help appreciated. The link below is to the page that has the form and code: http://spectrum-enterprise.com/sm/smorder.html Hi I have a table that sorts in jquery and I have one column that I would like to always remain the same while the other columns sort around it. What I want is for the order of the column to always be Great, Bad, Failure while every other column can be sorted and I don't want to the column to sort alphabetically. What is the easiert way for me to do this?
|
|||||||