|
JavaScript - Tabbed Forms
Hey I was hoping someone could help me.
I have written a form in HTML. But it is very long - I would like to make it a Tabbed form so that at the top there is tabs for each section to make it more managable and less intimidating. I figured it was probably Javascript - but I don't know JS so I was wondering what I would have to do for that form to be made? Is there a predefined function or something or does anyone know how to code a form like that? Regards, Angelous Similar TutorialsHi guys, I want to make a website and instead of having individual pages for each page, I would like it all to be on one page. I want to use jQuery to switch between the different tabs but I also need it to be able to stay on that certain tab when the page is reloaded. I also need to be able to link to the certain tabs which I think would be accomplished by using ID tags. If anyone can help, that would be great.
Hi This is what I would like to do: 1. Create a tabbed interface 2. All tabs but one must be able to be closed by clicking a link 3. User must be able to add additional tabs I want this to be done in Javascript but I have no clue how to program in javascipt and tutorials I have seen do not go in to great detail since they just show you basics that a Kindergarten kid could use. Please help Thanks Hi, I have this search module at the top and bottom of my web page Here is the mark-up for the same HEADER SEARCH MODULE Code: <div id="searches"> <ul id="topTabSet"> <li class="current" id="web-top"><a href="javascript:;">Web</a></li> <li id="blog-top"><a href="javascript:;">Blog</a></li> <li id="image-top"><a href="javascript:;">Images</a></li> <li id="video-top"><a href="javascript:;">Video</a></li> <li id="product-top"><a href="javascript:;">Products</a></li> </ul> <form name="topSearchForm" id="topSearchForm" method="GET"> <fieldset> <label for="web-search">Enter search terms</label> <input style="display: none;" name="invocationType" value="" type="hidden" /> <input name="query" id="webSearch-top" type="text" /> <input id="submit" name="tSearchSubmit" class="submit" value="" alt="Search" type="submit" /> </fieldset> </form> </div> FOOTER SEARCH MODULE Code: <div id="searchesFt"> <ul id="bottomTabSet"> <li class="current" id="web-bottom"><a href="javascript:;">Web</a></li> <li id="blog-bottom"><a href="javascript:;">Blog</a></li> <li id="image-bottom"><a href="javascript:;">Images</a></li> <li id="video-bottom"><a href="javascript:;">Video</a></li> <li id="product-bottom"><a href="javascript:;">Products</a></li> </ul> <form id="bottomSearchForm" name="bottomSearchForm" method="GET"> <fieldset> <label for="web-search">Enter search terms</label> <input style="display: none;" name="invocationType" value="" type="hidden" /> <input name="query" id="webSearch-bottom" type="text" /> <input id="submit" name="bSearchSubmit" class="submit" value="" alt="Search" type="submit" /> </fieldset> </form> </div> I had written written a JS which is all junk. I could manage to get tab stay selected when i click on it. I am not even in a position to post it here Here is what I am looking for: 1) all the tabs open the search in a new window/tab on submit/click except for the "Blog" tab which opens the search within the same page 2) The search should be directed to different URLs based on the tab selection. i.e. web = http://www.testexample.com/web/?q="Entered search term"&invocationType="testinv" blog = /search/?q="Entered search term"&invocationType="testinv" images = http://www.testimages.com/image/?q="Entered search term"&invocationType="testinv" video = http://www.testvideos.com/video/?q="Entered search term"&invocationType="testinv" products = http://www.testproducts.com/product/?q="Entered search term"&invocationType="testinv" 3) an the above is for the header search and footer search modules. Could someone please please help me with some code to achieve this. I know I am asking for too much. But I am helpless. please help me. Thanks Hi All, I am trying to create a website and am having problems editing a piece of code. A working example can be seen Here The only problem is that the "pages" are open when a user arrives on the site and I want them to be " closed" until a user clicks them, much like the "Search, Profile & Draw" tabs. I have included all the coding used to this, the only thing I haven't included are the images. Anyone got any idea how this is possible? Regards Jake I am using the below code to create a blogging site but the pagination in one tab apprears in the other tab. How do I individually create a pagination for each tab? <?php // Begin session, initiate database connection, etc. require_once('./includes/base.php'); // If logging out, delete session variables if($_GET['logout'] == 1){ @$_SESSION = array(); @session_unregister($_SESSION['userID']); @session_unregister($_SESSION['userName']); @session_unregister($_SESSION['userUser']); @session_unregister($_SESSION['userPass']); @session_destroy(); } // Display header require("./templates/$template/header.php"); ?> <div id="blurb" align="right"> <script language="javascript"> function isClear() { document.myForm[0].value=''; return true; } </script> <!-- new search --> <?php ob_start(); if(!empty($_SESSION['userID']) and !empty($_POST['user'])){ echo '<form action="search.php" method="post" name="myForm"> <input type="text" value="search here" id="search" size="20" name="search" onFocus="return isClear();"/> <input type="submit" name="serachuser" value="search"/></form>'; } ?> </div> <br> <div id="blurb" align="justify"> <em>Hello world</em> <?php echo "$sitename"; ?> is blah blah blah.... </div> <br> <div id="container-5"> <ul> <li><a href="#fragment-13"><span>Blogs</span></a></li> <li><a href="#fragment-14"><span>Links</span></a></li> <li><a href="#fragment-15"><span>Images</span></a></li> </ul> <div id="fragment-13"> <?php $sql = mysql_query("SELECT users.userUser, posts.postID, posts.postPost, posts.postTime, posts.postComments, userAvatar FROM users, posts WHERE users.userID = posts.postUserID ORDER BY posts.postTime DESC "); while($row = mysql_fetch_array($sql)){ $abcd= $row['userName']; $abcd = str_replace (" ", "-", $abcd); $time = reltime($row['postTime']); echo ' <div class="virtualpage"> <table width="100%" > <td width="10%" ><a href="'.$site_url.'/'.$row['userUser'].'"><img src="'.$site_url.'/avatars/'.$row['userAvatar'].'" width="48px" height="48px" /><td width="90% "bgcolor="#F8F8F8" border=1" cellspacing="1" cellpadding="1" ><b>'.$row['postPost'].'</b><br>Posted by: '.$row['userUser'].', <a href="'.$site_url.'/blogs/'.$row['userUser'].'/'.$row['postID'].'">Comments</a> '.$row['postComments'].' , Time elapsed: '.$time.'</a></td> </table><br> </div>';} ?> <? echo '<div id="gallerypaginate" class="paginationstyle"> <a href="#" rel="previous">Prev</a> <span class="flatview"></span> <a href="#" rel="next">Next</a> </div>' ; ?> </div> <div id="fragment-14"> <?php $sql = mysql_query("SELECT users.userUser, links.linksID, links.linksLink, links.linksPost, links.linksTime, links.linksComments,userAvatar FROM users, links WHERE users.userID = links.linksUserID ORDER BY links.linksTime DESC"); while($row = mysql_fetch_array($sql)){ $abcd= $row['userName']; $abcd = str_replace (" ", "-", $abcd); $time1 = reltime($row['linksTime']); echo ' <div class="virtualpage"> <table width="100%" > <td width="10%" ><a href="'.$site_url.'/'.$row['userUser'].'"><img src="'.$site_url.'/avatars/'.$row['userAvatar'].'" width="48px" height="48px" /><td width="90% "bgcolor="#F8F8F8" border=1" cellspacing="1" cellpadding="1" ><b>'.$row['linksPost'].'</b><br>Posted by: '.$row['userUser'].', <a href="'.$site_url.'/blogs/'.$row['userUser'].'/'.$row['linksID'].'">Comments</a> '.$row['linksComments'].' , Time elapsed: '.$time1.'</a></td> </table><br> </div>';} ?> <? echo '<div id="gallerypaginate" class="paginationstyle"> <a href="#" rel="previous">Prev</a> <span class="flatview"></span> <a href="#" rel="next">Next</a> </div>' ; ?> </div> <div id="fragment-15"> <?php // test grabimages('SELECT users.userUser, images.imagesID, images.imagesFile, images.imagesPost, images.imagesTime, images.imagesComments FROM users, images WHERE users.userID = images.imagesUserID ORDER BY images.imagesTime DESC LIMIT 20'); ?> </div> </div> <?php // Display footer require("./templates/$template/footer.php"); ?> <table align="center"><tr><td align="center"> <script type="text/javascript" defer="defer"> var gallery=new virtualpaginate("virtualpage",10) gallery.buildpagination("gallerypaginate") </script> </td></tr></table> Thank you ....... I am trying to place a different google map in each tabbed of a spry tabbed panel. There is a known issue with google map V3 where the map will function properly on the default tab, but when the hidden tabs are unhidden, the map on those previously hidden tabs has centred in the very top left of the container div and only fills a small part of the container. ( www.kimholt.co.uk/locations demonstrates this, the London tab is fine, but the South West tab doesn't work properly). I have spent hours on this bug so far, and tried many fixes. The only one that has got me anywhere so far is adding [CODE] google.maps.event.addListener(map, "idle", function() {google.maps.event.trigger(map, 'resize'); }); after var map = new google.maps.Map(document.getElementById(canvas), myOptions); [CODE] This doesn't resize the map automatically, but will resize it if the map is dragged slightly by the user. It also still has the marker centred in the top left of the screen rather than the centre of the canvas. The following solutions have also been suggested: Re-centrering the map around the marker [CODE] google.maps.event.trigger({map}, 'resize'); {map}.setCenter({marker}.getPosition()); [CODE] Zooming in and out again to trigger the resize: [CODE] map.setZoom( map.getZoom() ); [CODE] Or using this to do the same thing: [CODE] this.map.setZoom( this.map.getZoom() - 1); this.map.setZoom( this.map.getZoom() + 1); [CODE] Suggested for use if there are multiple markers: [CODE] map.setZoom(map.getZoom()); map.fitBounds(bounds); [CODE] I haven't been able to get any of these to work, but I'm not sure if I am using them in the right place in the javascript, and I'm also not sure if there are any parts of this code that need amending to make them work in my particular code. How can I get the map to automatically resize when the tab is selected? How can I get the map to automatically recentre around the marker when the map is opened? Being fairly new to this I really need someone to look at my actual code and help me work out exactly what to put where, in other words assume I know nothing and will be extremely grateful for any help! Hey everyone! This is my first post, so let me go ahead and say hey to everyone at the forums. I myself don't know a whole lot about programming/coding, but I do run my business completely off the internet so I'm not clueless. I have a firm grip on HTML, and I can edit CSS files usually whenever I need to. All my sites use Wordpress now anyway, so there's rarely any need to check or edit the code. Anyways, to my dilemma. I basically have an old website of my own (http://www.knowtheirbackground.blogspot.com). It's a pretty old site I hosted on Blogger, and if anyone is familiar with Blogger it's pretty simple. I downloaded that theme from a site and since all Blogger themes are XML I never really looked at the code. Basically, I want to have a menu like you see on the right of the site I linked you to. A tabbed javascript menu (from what I looked at of the code recently I thought the menu was pretty much made using javascript and css). I've tried Googling and Bing-ing and yahoo-ing tutorials to make a tabbed menu and haven't been successful yet. I want one that operates just like the one on Know Their Background, only things I would change is the text and maybe the colors. I've looked and tried for days and have been unsuccessful. Any help I would GREATLY appreciate. P.S. I also tried using jQuery or something along those lines and nothing. Tried some wordpress plug ins too but they only work in widgets when they do work.. I want my menu in a sticky post on the front page. I'm using the autofill forms plugin for firefox which can be found he https://addons.mozilla.org/en-US/firefox/addon/4775 I use it to automatically fill various web forms, duh. But I would like certain values to be chosend randomly from a list I create. I contacted the developer and he said the add on probably does not need a new feature because there is a 'dynamic tags' function to fill certain forms with dynamic values (e.g. the current time or date). He has given over the project to another developer and told me I probably would find a solution in a good javascript programming forum. So here I am! Can anyone help me with this? Basically, I just need a javascript code which chooses on item from an array randomly, I guess? I'm not a programmer myself, so any help would be greatly (!) appreciated. Thanks a lot in advance for any further guidance! Note: Here are sample dynamic tags from the plugin: <datetime> new Date().toLocaleString() <useragent> navigator.userAgent <langcode> navigator.language <resolution> screen.width+'x'+screen.height <clipboard> this.getClipboardText() Hi there! I hope I posted this question in the right place. I've been working on a Spry Master/Detail region using Dreamweaver CS4 for months now and I just can't get it to work right. I know very little about coding Javascript; I'm altering a template from a tutorial book. Here's my problem: I want at least 2 master/detail regions on a single page, each nested in a spry tabbed panel, and each filtered by a non-destructive filter. I'm having all kinds of trouble getting this accomplished.I did some troubleshooting and have pinpointed exactly where things go wrong. First, I thought that the problem might be that both of my tables were on the same page as the master/detail regions, so I put them on their own pages. No problems there. Then I built one master/detail region, with selectable filter menu, in a spry tabbed panel. No problem. Then I started all over again, and built each master/detail region stepwise following the instructions in the book. The 2 master/detail regions, 1 in each tab, are no problem. Applying the non-destructive filter is where things get tricky for me. When I apply the non-destructive filters, all of the data from the first table disappears! The table in the 2nd tab still works perfectly. My 2 spry datasets are named rs_CasteAbilities and rs_ProfAbilities. Here's the code for just creating the 2 spry data sets: [CODE] var rs_CasteAbilities = new Spry.Data.HTMLDataSet("gacasteabilitiesforactivetable.php", "GA_CasteAbilities"); var rs_ProfAbility = new Spry.Data.HTMLDataSet("gaprofessionabilitiesforactivetable.php", "GA_ProfAbilities"); [CODE] No problems there. When I apply the nondestructive filter to the first spry dataset the first dataset filters just as it is supposed to and the second one does nothing, just as its supposed to. It looks like this: [CODE] var rs_CasteAbilities = new Spry.Data.HTMLDataSet("gacasteabilitiesforactivetable.php", "GA_CasteAbilities"); rs_CasteAbilities.gallery = '1'; function chooseSet(dataSet, row, rowNumber) { if (row == rs_CasteAbilities.gallery) { return row; } return null; } rs_CasteAbilities.filter(chooseSet); var rs_ProfAbility = new Spry.Data.HTMLDataSet("gaprofessionabilitiesforactivetable.php", "GA_ProfAbilities"); [CODE] The problem is that when I apply the same filter to the 2nd spry dataset, the 2nd dataset filters, but the first dataset totally disappears when I view the page (firefox and safari)! I can post screenshots if needed. Here's the code I'm using: [CODE] var rs_CasteAbilities = new Spry.Data.HTMLDataSet("gacasteabilitiesforactivetable.php", "GA_CasteAbilities"); rs_CasteAbilities.gallery = '1'; function chooseSet(dataSet, row, rowNumber) { if (row == rs_CasteAbilities.gallery) { return row; } return null; } rs_CasteAbilities.filter(chooseSet); var rs_ProfAbility = new Spry.Data.HTMLDataSet("gaprofessionabilitiesforactivetable.php", "GA_ProfAbilities"); rs_ProfAbility.gallery = '1'; function chooseSet(dataSet, row, rowNumber) { if (row == rs_ProfAbility.gallery) { return row; } return null; } rs_ProfAbility.filter(chooseSet); [CODE] This problem has been stumping me for weeks and I'm getting to the point where I need to get this done. I hope that in my inexperience, I was able to communicate this problem articulately. Please somebody help! Thanks so much to anyone who takes the time to help me out. The page itself, with nothing showing up in the first tab, can be viewed he www.iotheatre.com/GoldenAgeAbilities.php -Chris Blockus Hello, I have a tricky one here. What I have is a form where the user would enter in their food recipe. There is nothing clever in that until I need them to enter in the ingredients and the quantity into 2 seperate fields. The issue is that I don't know how many different ingredients there would be for the recipe so from within the form before the record is saved I need them to be able to fill out the 2 fields as many times as they need to (pressing a button each time) and I would have thought for the data to be held in a javascript array that i could then write away into the mysql table? I probably haven't made much sense. Can anyone help? Hi , I want to make few forms but 1 submit button. I want to do 1 page , 5 forms , 1 submit button so when i click on the submit button it will send the 5 forms as 1 form. how I can so that? thanks , Mor. Okay well here is my code. i want to mkae it so the functions add together to get a total price, i need some help Code: <html>
<head>
</head>
<script type="text/javascript">
function addit(){
if(document.getElementById("add").value=="0")
{
document.getElementById("amount").value="$0.00"
}
if(document.getElementById("add").value=="1")
{
document.getElementById("amount").value="$5.00"
}
if(document.getElementById("add").value=="2")
{
document.getElementById("amount").value="$10.00"
}
if(document.getElementById("add").value=="3")
{
document.getElementById("amount").value="$15.00"
}
}
function addit2(){
if(document.getElementById("add2").value=="4")
{
document.getElementById("amount").value="$30.00"
}
if(document.getElementById("add2").value=="5")
{
document.getElementById("amount").value="$40.00"
}
}
</script>
<body>
<table class="comparison pricing-email" border="0" cellspacing="1" cellpadding="0" width="30%">
<tbody>
<tr class="row1">
<td class="col1">Choose # of EMAIL accounts:
<select style="width: 60px; font-size: 17px;" name="add" id="add" onChange="addit()">
<option value="0"> </option>
<option value="1">1</option>
<option value="2">3</option>
<option value="3">6</option>
</select>
</td>
</tr>
<tr class="row2">
<td class="col2">Choose # of EMAIL accounts:
<select style="width: 60px; font-size: 17px;" name="add" id="add2" onChange="addit2()">
<option value="0"> </option>
<option value="4">44</option>
<option value="5">43</option>
<option value="3">342</option>
</select>
</td>
</tr>
<tr class="row1">
<td class="col1">Total Price: <input type="text" id="amount" value="" style="border:none; font-size:13pt;"></td>
</tr><tr>
<td>
<input type="submit" name="submit" value="Sign-Up">
</td>
</tr>
</tbody>
</table>
</form>
</body>
Forgive me if this isn't in the right spot. I'm new at php and java so bear with me. I have small form I found and modified. This works as I wanted it to. Code: <HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function solveALK(form) {
var alkalinity = eval(form.alkalinity.value);
var alkneeds = eval(form.alkneeds.value);
var change = (alkneeds) - (alkalinity);
var add1 = (change) / (10) * (0.075) * (1.5) * (16);
var add2 = (add1) / (16);
form.alkchange.value = change;
form.addoz.value = add1;
form.addlbs.value = add2;
}
// End -->
</script>
</HEAD>
<!-- STEP TWO: Copy this code into the BODY of your HTML document -->
<BODY>
<center>
<table>
<tr><td>
</td>
</tr>
</table>
<form method=post name=alkform>
<table border=4>
<tr>
<td align=center>
Alkalinity
</td>
<td align=center>
<input type=text name=alkalinity size=3>
</td>
<td align=center>
Needs to be:
</td>
<td align=center>
<input type=text name=alkneeds size=3>
</td>
</tr>
<tr>
<td align=center>
Change required:
</td>
<td colspan=3 align=center>
<input type=text name=alkchange size=3>
</td>
</tr>
<tr>
<td align=center>
Add this amount
</td>
<td colspan=3 align=center>
<input type=text name=addoz size=3>oz
</td>
</tr>
<tr>
<td align=center>
Add this amount
</td>
<td colspan=3 align=center>
<input type=text name=addlbs size=3>lbs
</td>
</tr>
<tr>
<td colspan=4 align=center>
<input type=button name=alk value="Calculate" onClick="javascript:solveALK(this.form)">
</td>
</tr>
</table>
</form>
</center>
However when I put this into my php file, When I add my 2 figures to the input boxes. and click the calculate button, I get a NaN. I'm thinking it might be because I have 2 forms on my php page. One area of the page will update the database while this one would just calculate some figures. Here's the php page that doesn't seem to work. Code: <html>
<head>
<link rel="stylesheet" type="text/css" href="../style1.css" />
<title>Pool Log Report</title>
<SCRIPT LANGUAGE="JavaScript">
<!-- Chemical calulations -->
<!-- Begin
function solveALK(form) {
var alkalinity = eval(form.alkalinity.value);
var alkneeds = eval(form.alkneeds.value);
var change = (alkneeds) - (alkalinity);
var add1 = (change) / (10) * (0.075) * (1.5) * (16);
var add2 = (add1) / (16);
form.alkchange.value = change;
form.addoz.value = add1;
form.addlbs.value = add2;
}
// End -->
</script>
</head>
<body class="body">
<center>
<table class="main1">
<?php
include("update_header.php");
?>
<form action="updated.php" method="post" name="FormName">
<tr>
<td class="main2"><input id="Dayid" name="Dayid" type="text" size="1" value="<?php echo $Dayid ?>" maxlength="2" readonly></td>
<td class="main3"> </td>
<td class="main3"><input id="patron_loading_max" name="patron_loading_max" type="text" size="1" value="<?php echo $patron_loading_max ?>" maxlength="2"></td>
<td class="main3"><input id="patron_loading_24hr" name="patron_loading_24hr" type="text" size="1" value="<?php echo $patron_loading_24hr ?>" maxlength="2"></td>
<td class="main3"><input id="water_clearity__clear" name="water_clearity__clear" type="checkbox" <?php if ($water_clearity__clear == "X") { echo "checked";} ?> value="X"></td>
<td class="main3"><input id="water_clearity__turbid" name="water_clearity__turbid" type="checkbox" <?php if ($water_clearity__turbid == "X") { echo "checked";} ?> value="X"></td>
<td class="main3"><input id="water_temp" name="water_temp" type="text" size="1" value="<?php echo $water_temp ?>" maxlength="3"></td>
<td class="main3"><input id="psi" name="psi" type="text" size="1" value="<?php echo $psi ?>" maxlength="3"></td>
<td class="main3"><input id="gpm" name="gpm" type="text" size="1" value="<?php echo $gpm ?>" maxlength="3"></td>
<td class="main3"><input id="drain_back" name="drain_back" type="text" size="1" value="<?php echo $drain_back ?>" maxlength="5"></td>
<td class="main3"><input id="chlorine_am1" name="chlorine_am1" type="text" size="1" value="<?php echo $chlorine_am1 ?>" maxlength="5"></td>
<td class="main3"><input id="chlorine_am2" name="chlorine_am2" type="text" size="1" value="<?php echo $chlorine_am2 ?>" maxlength="5"></td>
<td class="main3"><input id="ph_am1" name="ph_am1" type="text" size="1" value="<?php echo $ph_am1 ?>" maxlength="5"></td>
<td class="main3"><input id="ph_am2" name="ph_am2" type="text" size="1" value="<?php echo $ph_am2 ?>" maxlength="5"></td>
<td class="main3"><input id="chlorine_pm1" name="chlorine_pm1" type="text" size="1" value="<?php echo $chlorine_pm1 ?>" maxlength="5"></td>
<td class="main3"><input id="chlorine_pm2" name="chlorine_pm2" type="text" size="1" value="<?php echo $chlorine_pm2 ?>" maxlength="5"></td>
<td class="main3"><input id="ph_pm1" name="ph_pm1" type="text" size="1" value="<?php echo $ph_pm1 ?>" maxlength="5"></td>
<td class="main3"><input id="ph_pm2" name="ph_pm2" type="text" size="1" value="<?php echo $ph_pm2 ?>" maxlength="5"></td>
<td class="main3"><input id="combined_chl" name="combined_chl" type="text" size="1" value="<?php echo $combined_chl ?>" maxlength="4"></td>
<td class="main3"><input id="alkalinity" name="alkalinity" type="text" size="1" value="<?php echo $alkalinity ?>" maxlength="3"></td>
<td class="main3"><input id="chemicals_add" name="chemicals_add" type="text" size="1" value="<?php echo $chemicals_add ?>" maxlength="55"></td>
<td class="main3"><input id="chemicals_qty" name="chemicals_qty" type="text" size="1" value="<?php echo $chemicals_qty ?>" maxlength="55"></td>
<td class="main3"><input id="super_oxidation" name="super_oxidation" type="text" size="1" value="<?php echo $super_oxidation ?>" maxlength="3"></td>
<td class="main4" class="main3"> </td>
</tr>
<tr>
<td class="main4" colspan="24"> </td>
</tr>
<form method=post name=alkform>
<tr>
<td class="main2" colspan="3"> </td>
<td class="main2" colspan="5"><b>Whirlpool Calculations</b></td>
<td class="main2" colspan="5"> </td>
<td class="main2" colspan="5"><b>Chlorine Shocking</b></td>
<td class="main2" colspan="2"><b>FAS-DPD</b></td>
<td class="main2" colspan="3"><b>Chlorine No-Shock</b></td>
<td class="main2"> </td>
</tr>
<tr>
<td class="main4" rowspan="3" colspan="3"> </td>
<td class="main2" colspan="2">Alkalinity</td>
<td class="main2"><input type=text name=alkalinity size=3></td>
<td class="main2" colspan="2"> </td>
<td class="main2" colspan="2">Calcium</td>
<td class="main2"><input id="Calcium" name="Calcium" type="text" size="1" value="<?php echo $Calcium ?>" maxlength="3"></td>
<td class="main2" colspan="2"> </td>
<td class="main2" colspan="3">Drops</td>
<td class="main2"><input id="R0871_drops" name="R0871_drops" type="text" size="1" value="<?php echo $R0871_drops ?>" maxlength="3"></td>
<td class="main2" colspan="2">Breakpoint</td>
<td class="main2"><?php echo $Breakpoint ?></td>
<td class="main2" colspan="2">Needs to be:</td>
<td class="main2"><input id="Chl_Needs" name="Chl_Needs" type="text" size="1" value="<?php echo $Chl_Needs ?>" maxlength="3"></td>
<td class="main4" rowspan="3"> </td>
</tr>
<tr>
<td class="main2" colspan="2">Needs to be:</td>
<td class="main2"><input type=text name=alkneeds size=3></td>
<td class="main2">Change:</td>
<td class="main2"><input type=text name=alkchange size=3></td>
<td class="main2" colspan="2">Needs to be:</td>
<td class="main2"><input id="Cal_Needs" name="Cal_Needs" type="text" size="1" value="<?php echo $Cal_Needs ?>" maxlength="3"></td>
<td class="main2"">Change:</td>
<td class="main2"><?php echo $Cal_Change ?></td>
<td class="main2" colspan="3">Free Chl</td>
<td class="main2"><?php echo $Free_Chl ?></td>
<td class="main2">ppm</td>
<td class="main2" colspan="2">Amt to shock</td>
<td class="main2" colspan="2">Change Required</td>
<td class="main2"><input id="Chl_Change" name="Chl_Change" type="text" size="1" value="<?php echo $Chl_Change ?>" maxlength="3" readonly></td>
</tr>
<tr>
<td class="main2" colspan="3">Add Sodium BiCarb</td>
<td class="main2"><input type=text name=addoz size=3></td>
<td class="main2">Oz</td>
<td class="main2" colspan="3">Add Calcium</td>
<td class="main2"><?php echo $Cal_Add_oz ?></td>
<td class="main2">Oz</td>
<td class="main2" colspan="3">Drops</td>
<td class="main2"><input id="R0003_drops" name="R0003_drops" type="text" size="1" value="<?php echo $R0003_drops ?>" maxlength="3"></td>
<td class="main2"> </td>
<td class="main2"><?php echo $AmtShk_oz ?></td>
<td class="main2">oz</td>
<td class="main2" colspan="2">Add this in oz</td>
<td class="main2"><input id="Chl_Add" name="Chl_Add" type="text" size="1" value="<?php echo $Chl_Add ?>" maxlength="3"></td>
</tr>
<tr>
<td class="main4" colspan="6"> </td>
<td class="main2"><input type=text name=addlbs size=3></td>
<td class="main2">Lbs</td>
<td class="main2" colspan="3"> </td>
<td class="main2"><?php echo $Cal_Add_lbs ?></td>
<td class="main2">Lbs</td>
<td class="main2" colspan="3">Combined Chl</td>
<td class="main2"><?php echo $Comb_Chl ?></td>
<td class="main2">ppm</td>
<td class="main2"><?php echo" ".number_format($AmtShk_gal,2); ?></td>
<td class="main2">Gal</td>
<td class="main4" colspan="6"> </td>
</tr>
<tr>
<td colspan="24" align="center" class="main2">Make your changes and click the update button below.</td>
</tr>
<tr>
<td colspan="24" align="center" class="main2"><input type=button name=alk value="Calculate" onClick="javascript:solveALK(this.form)"></form> <input type="button" value="Update" onclick="this.form.action='updated.php'; this.form.submit();"><input type="hidden" name="id" value="id"> <INPUT TYPE="button" VALUE="Back" onClick="history.go(-1);return true;"></td>
</tr>
</table>
</form>
</center>
If I am correct that I need to separate the forms. How do I do so? Or am I going about this wrong? the following javascript code is for a page that has to different login sections (username and password) hospital admin i want them to login in their part using normal IDs(numbers) and password, and normal users to login in the other login boxes (using email address and password) , each login boxes have their own submit button. the problem is i can't check each of them alone. what i want to do is that if (for user) email and password entered and pressed his login button, to be headed to another page, while if hospital admin entered his id and password in his section and pressed login button, to be headed for a different page. help please ! Code: window.onload = initForms;
function initForms() {
for (var i=0; i< document.forms.length; i++) {
document.forms[i].onsubmit = function() {return checkFields();}
}
}
function checkFields(){
if(document.getElementById("userLogin").onclick)
{
if(isEmail(document.getElementById("userUsername").value)==false)
{
alert("Please enter a valid e_mail address.");
document.getElementById("userUsername").focus();
return false;
}
if(document.getElementById("userUsername").value=="")
{
alert("Please enter your e_mail address.");
document.getElementById("userUsername").focus();
return false;
}
if(document.getElementById("userPassword").value=="")
{
alert("Please enter your password.");
document.getElementById("userPassword").focus();
return false;
}
}
if(document.getElementById("hospLogin").onclick)
{
if(document.getElementById("hospUsername").value=="")
{
alert("Please enter your ID.");
document.getElementById("hospUsername").focus();
return false;
}
if(document.getElementById("hospPassword").value=="")
{
alert("Please enter your password.");
document.getElementById("hospPassword").focus();
return false;
}
}
}
function isEmail(mail) {
var char1 = mail.split("@");
var y = mail.indexOf("@", 0);
var e = mail.indexOf(".", 0);
var w = mail.lastIndexOf(".", mail.length - 1);
var sp = mail.indexOf(" ", 0);
var pl = mail.indexOf("@.", 0);
for (i = 0; i < mail.length; i++) {
if (mail.charAt(i) == "/" || mail.charAt(i) == ":" || mail.charAt(i) == ";" || sp > 0 || pl > 0 ||
mail.charAt(i) == '"' || char1.length > 2 || y == -1 || y == 0 || e == 0 || w == mail.length - 1 || e == -1) {
return false;
}
}
}
and there goes the HTML codes: Code: <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="script.css" /> <script type="text/javascript" src="script.js"></script> <title>Blood high res END</title> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <div id="apDiv4" style="background:url(images/Blood-high-res-END_04.jpg) no-repeat"></div> <div id="apDiv1" style="background:url(images/Blood-high-res-END_01.jpg)"> <p>Hospital</p> <form name="hospForm" id="hospForm"> <input type="text" name="hospUsername" id="hospUsername" class="reqd" /><br /> <input name="hospPassword" type="password" id="hospPassword" class="reqd" /><br /><br /> <input name="submit" type="submit" id="hospLogin" value="Hospital log in" /></form></div> <div id="apDiv2" style="background:url(images/Blood-high-res-END_02.jpg)"></div> <div id="apDiv3" style="background:url(images/right.jpg)"> <a id="register" href="../User Registration Page/page.html" target="_self">Register Now</a> <a id="links" href="../Links/page.html" target="_self">Links</a> <p>Visitor</p> <form name="userForm" id="userForm"> <input type="text" name="userUsername" id="userUsername" class="reqd" /><br /> <input name="userPassword" type="password" id="userPassword" class="reqd" /><br /><br /> <input name="submit" type="submit" id="userLogin" value="User log in" /><br /></form> <a id="register2" href="../User Registration Page/page.html" target="_self">Register now</a><br /> <a id="forgot" href="../User Forgot Password/page.html" target="_self">Forgot Password</a></div> <div id="apDiv5" style="background:url(images/Blood-high-res-END_05.jpg) no-repeat"></div> <div id="apDiv6" style="background:url(images/Blood-high-res-END_06.jpg) no-repeat"> <p>Hello and welcome to Red Drop. By visiting our page,<br />you ensure to each and every one of the team crew <br />behind the stage, and to every lebanese person that<br />you are mentally prepared to donate a few drops of your<br />blood to the benefit of an anonymous stranger.<br /><br />With every drop you donate, you might be giving<br />a father, a mother or a child another day to live among<br />his family and his beloved persons.<br /><br />Register today and add donation blood to your frequently<br />social and humanitarian activities.</p> </div> <div id="apDiv7" style="background:url(images/Blood-high-res-END_07.jpg) no-repeat"></div> <div id="apDiv8" style="background:url(images/Blood-high-res-END_08.png) no-repeat"></div> <div id="apDiv9" style="background:url(images/Blood-high-res-END_09.jpg) no-repeat"></div> </body> </html> I havent added the server side scripts yet, i am planning to validate forms as much as possible using javascript first, and this is not for a real hospital, it's a graduation project, so to explain the point, on the page i have 2 seperated forms wich each having its own submit button, one to be used by hospital admins, and other to be used by users. For admins i just want to make sure their fields are not empty. For users i want to make sure their fields are not empty and their email field is valid. but when trying it, it's kinda only checks for the user fields. P.S: I apologize about not using codes, i didn't knew about this option. When I click Vacant after 5 and it goes to occupied. How would I make it come back to vacant when clicked again? Code: <html>
<head>
<script type="text/javascript">
function fillForm()
{
if (counter > 10){
}
}
</script>
<script type="text/javascript">
function StartCounting(){
setInterval("DoCounting()", 1000)
}
var Counter = 0;
function DoCounting(){
var obj = document.getElementById('countingtext');
obj.innerHTML = '' + Counter;
Counter++;
if( Counter > 5)
{
var obj1 = document.getElementById("closed").value = "Open";
var space1 = document.getElementById("space1")
space1.onclick = linkClick;
}
}
function linkClick(){
space1 = document.getElementById("space1").value = "Occupied";
}
</script>
</head>
<body onload= "StartCounting()">
Open at 5: <span id="countingtext"></span>
</body>
</html>
<div style="margin-right:3mm; " >
<form action="#" method="post" id="theForm" >
<input size="10" id="closed" value="Closed" style="text-align:center;" />
<script type="text/javascript">
</script>
<input type='button' id="space1" name='s"+
i+"' value='Vacant' onclick='readSpace(s"+
i+")' style='width:15mm;' /></td>
</form>
</div>
I am trying to take the add the numbers input into form boxes 1 and 2 and then output them onto the screen following the form boxes. I have tried many different functions and none of them will work. Can anyone point me in the right direction? Here's my code so far: Code: <!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Math and Compare</title>
<link rel="stylesheet" type="text/css" href="assignment1.css" />
<div align="center">
<script type="text/javascript">
var title = "<strong>Assignment 1 </br> Aughtman, Zackary</strong>"
document.write(title.fontsize(5));
</script>
<script type="text/javascript">
function result_One(firstNum, secondNum, result1)
{
firstNum = document.getElementById("box1").value;
secondNum = document.getElementById("box2").value;
result_One = this.firstNum + this.secondNum;
return calc.result_One;
}
</script>
</head>
<body>
</br>
</br>
<div id="div1" align="center">
<strong>Addition</strong>
</div>
<table align = "center">
<tr>
<td>
<form id="box1">
<input type="text" value="" id="box1" class="box1" /> +
<input type="text" value="" id="box2" class="box2" /> = 000000000
</br>
<div align="center">
<input type="button" value="Add" id="add" onclick="result_One;" />
</td>
</tr>
</table>
</body>
</html>
I'm having a total brain fart as to why this is happening. I just transferred my company's website from aplus.net servers to a linux based server on GoDaddy. My company's "shop" page has a drop down menu which should automatically re-direct you to a different page (on a different website where our shopping cart is hosted) when the option is selected. For some reason, after the switch to a different host, the option tags are no longer re-directing to the proper pages. Instead, they just tack on the value URL onto the existing URL and i just go in circles. javascript: <script language="JavaScript" type="/text/javascript"> function nav() { var w = document.myform.mylist.selectedindex.html; var url_add = document.myform.mylist.options[w].value; window.location.href = url_add; } </script> HTML for options form: <FORM NAME="myform"> <SELECT NAME="mylist" onChange="nav()"> <OPTION VALUE="http://bedvoyage.com/shop">Select Your Product <OPTION VALUE="http://bedvoyage.myshopify.com/products/twin-sheet-set">Sheet Set - Twin - $139.00 <OPTION VALUE="http://bedvoyage.myshopify.com/products/double-sheet-set">Sheet Set - Double - $159.00 <OPTION VALUE="http://bedvoyage.myshopify.com/products/queen-sheet-set">Sheet Set - Queen - $179.00 <OPTION VALUE="http://bedvoyage.myshopify.com/products/king-sheet-set">Sheet Set - King - $199.00 <OPTION VALUE="http://bedvoyage.myshopify.com/products/twin-pillow-case">Pillow Case - Twin - $20.00 <OPTION VALUE="http://bedvoyage.myshopify.com/products/double-pillow-case">Pillow Case Set - Double - $40.00 <OPTION VALUE="http://bedvoyage.myshopify.com/products/queen-pillow-case">Pillow Case Set - Queen - $42.00 <OPTION VALUE="http://bedvoyage.myshopify.com/products/king-pillow-case">Pillow Case Set - King - $45.00 <option value="http://bedvoyage.myshopify.com/products/zippered-travel-pillow-case">Zippered Travel Pillow Case - $19.00 <!-- <OPTION VALUE="http://bedvoyage.myshopify.com/produ...uot;>Travel Blanket - $39.00 --> </SELECT> </FORM> Is there an option on godaddy that i'm just missing out on that i'm too ignorant to notice? Thanks in advance. I'm trying to add an input element to all forms using appendChild. The script first searches for input elements with the name of "myinput". If it finds an input element with that name, it assigns the value "myvalue". If it can't find an input element with that name, it tries to create a new one for all forms. Code:
if (document.getElementsByName('myinput')) {
var testcode = document.getElementsByName('myinput');
for (var i=0; i < testcode.length; i++){
testcode[i].value = "myvalue";}
}
else {
var z = document.createElement("input");
z.type = "hidden";
z.name = "myinput";
z.value = "myvalue";
z.id = "mycode";
var d = document.getElementsByTagName('form');
for (var i=0; i < d.length; i++){
d.appendChild(z);}
}
What's wrong with my code? Thanks! Hello, I'm looking for an example on adding items from a popup window to my current form. So I have a form where a user will request some data and one of the options is to request certain files. So, I would like to add a button which allows the user to open a separate window to choose some files to associate with the form/request. I would then like to see those items show up in my current form . I hope this makes sense :-) Thanks, tom |
|||||||