|
JavaScript - Accessing <span> With Multiple Forms Via Javascript
Hi all,
I have multiple forms on one page with the same element name and one of them is the <span>. Below is my sample code for a simple html file for testing purposes. I have no problem accessing the <input> element, but i had problems with the <span> element. Anyone knows why? In this scenario, i won't be able to use the document.getElementById() as both <span> have the same name. Code:
<html>
<head>
Test
<SCRIPT LANGUAGE="JavaScript">
// JavaScript statements go here
function test(tmpForm) {
window.alert(tmpFrm.elements["weight"].value);
window.alert(tmpForm.elements["error"].innerHTML);
}
</SCRIPT>
</head>
<body>
<form id="form_137" name="form_137">
<input id="weight" name="weight" value="" />
<span id="error" name="error">abc</span>
<INPUT TYPE="button" id="btnSubmit" NAME="btnSubmit" VALUE="Submit" onClick="test(this.form);">
</form>
<form id="form_137_down" name="form_137_down">
<input id="weight" name="weight" value="" />
<span id="error" name="error">zzz</span>
<INPUT TYPE="button" id="btnSubmit" NAME="btnSubmit" VALUE="Submit" onClick="test(this.form);">
</form>
</body>
</html>
Similar TutorialsI made a php page with multiple forms with javascript code in it. The javascript makes an input field for the date. The problem is that the script interfers between other scripts in the other forms and i get wrong orderdate. Code: <form action='dataadd.php' name='$id'>";
$datestime=time();
echo "<input type=hidden name=dateid value='$id'>";
echo "<input type=hidden name=datestime value='$datestime'>";?>
<script type="text/javascript">
DateInput('orderdate', true, 'yyyy-mm-dd')</script>....
hy all, I am creating an accordion menu that when i press the " UNIT " tab, it opens up a list of " Chapters " tab, and when i press on any one of those chapters, a list of lessons opens up. Till now, i have managed to create all the appropriate lists, but in default, lessons and chapters are opened automatically, and the lessons elements when pressed do not scroll back up to the chapters parents. My html5 file: Code: <script type="text/javascript" src="jqueryjs.js"></script>
<script type="text/javascript" src="jqueryuiaccor.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#accordion').accordion();
});
</script>
<div id="container">
<div id="content">
<div id="sidebar">
<ul id="accordion">
<li>
<a href="#recent" class="heading">Unit 1</a>
<ul id="accordion">
<li> <a href="#recent" class="heading">Chapter 1 </a> </li>
<ul id="accordion2">
<li> Lesson 1 </li>
</ul>
</ul>
</li>
<li>
<a href="#recent" class="heading">Unit 2</a>
<ul id="accordion">
<li> <a href="#recent" class="heading">Chapter 1 </a> </li>
<ul id="accordion">
<li> <a href="#recent" class="heading" role="tab" aria-expanded="true">Chapter 2 </a>
<ul id="accordion">
<li> <a href="#recent" class="heading">Lesson 1 </a></li>
</ul>
</li>
</ul>
</ul>
</li>
</ul>
</div>
</div>
</div>
My acorjs.js file: Code: $(document).ready(function() {
$('ul#accordion a.heading').click(function() {
$(this).css('outline','none');
if($(this).parent().hasClass('current')) {
$(this).siblings('ul').slideUp('slow',function() {
$(this).parent().removeClass('current');
$.scrollTo('#accordion',1000);
});
} else {
$('ul#accordion li.current ul').slideUp('slow',function() {
$(this).parent().removeClass('current');
});
$(this).siblings('ul').slideToggle('slow',function() {
$(this).parent().toggleClass('current');
});
$.scrollTo('#accordion',1000);
}
return false;
});
});
Please HELP! i m trying to extract data from an xml file and display data on Google maps but when i try to run my code In IE - Access denied error is display (while accessing the xml file) Mozilla - code is working fine but displays following error - Error: xmlDoc.getElementsByTagName("lat")[1] is undefined Source File: file:///I:/BE%20Project%20Data/coding/Myexample/exam2.html Line: 48 HTML file- <html> <head> <title>Google Maps JavaScript API v3 Example: Fusion Tables Layer</title> <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0px; padding: 0px } #map_canvas { height: 500px;width: 800px } </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> function initialize() { 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","agridata.xml",false); xmlhttp.send(); xmlDoc=xmlhttp.responseXML; var latlng = new google.maps.LatLng(48.75028,-94.91667); var mapOpts = { zoom: 5, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP, }; var map = new google.maps.Map(document.getElementById("map_canvas"),mapOpts); var l1=xmlDoc.getElementsByTagName("lat")[1].childNodes[0].nodeValue; var l2=xmlDoc.getElementsByTagName("lng")[1].childNodes[0].nodeValue; var pt = new google.maps.LatLng(parseFloat(l1), parseFloat(l2)); var marker = new google.maps.Marker({ position: pt, map: map, title: 'Just a simple marker'}); } </script> </head> <body onload="initialize();"> <h1>output</h1> <div id="map_canvas"></div> </body> </html> XML file - <?xml version="1.0"?> <markers> <marker> <lat>52.09667</lat> <lng>-173.50056</lng> <state>Alaska</state> <county>Aleutian</county> </marker> <marker> <lat>48.75028</lat> <lng>-94.91667</lng> <state>Minnesota</state> <county>Lake of woods</county> </marker> <marker> <lat>52.09667</lat> <lng>-173.50056</lng> <state>Washington</state> <county>Stevans</county> </marker> </markers> do let me know the reason behind the undefined error and ACCESS DENIED error ... i have tried modification in the security setting of the browser but error is not solved yet ... thks Hello everyone, I am fairly familiar with the concept of Objects and their properties and methods, but javascript being object based as opposed to object oriented has me stumped on how to access an object's properties from an onclick event handler created for another object created within the original object. In the example below, I have a constructor function called anyObj. to which I pass an object reference to an element. anyObj has 3 properties and one function increaseWidth() increaseWidth() creates a new button with an onclick event handler and this is where I have a problem. The onclick function needs to increase the value of anyObj's this.width property. I originally had a line this.width += 10; in the onclick but quickly realised why this wasn't working because the this in the onclick function refers to the new button object and not the this.width property of anyObj. The workaround I have used, and it works, is to make a copy of all the this.xxxxx properties. eg. width = this.width; and use the width variable in the onclick as you can see below. This "workaround" works fine but doesn't feel ideal to me. So, what I am asking advice on is, is there a better way to access the anyObj()'s properties from within the onclick function than the way I have done it? Obviously I would prefer to not have to make copies of all the anyObj() properties like I have to make them accessible to the onclick function. Code: function anyObj(divObj){
this.elem = divObj;
this.width = 50;
this.height = 50;
this.increaseWidth=function(){
width = this.width;
height = this.height;
//create a button for this object to be appended to an element later on
var newButton = document.createElement('button');
newButton.onclick=function(){
width += 10;
//...
//...
}
//...
//...
}
}
OK, There's a script on my site that's included like <script src='somePHPfile.php?params... etc It generates an image with some text in it and a few links. When I click 'view source' it just comes up with the <script> tags and nothing else. In Firefox, if I right click on the actual image and go to this frame > view source, I can see everything it's doing. Is there some way I can access this code with Javascript/jquery? I've tried html/dom parsers, etc. with no luck. I have an html file I've built with embedded Javascript (using ActiveX) that successfully reads a file on my local hard drive when I run the html file through my web browser (IE) locally. However, when I copy the html page up to a webserver and access it through the internet, it doesn't appear to be reading the local file. I'm assuming this can't be done because of security reasons? Am I correct in that? Is there any way using Javascript/ActiveX that you can get a webpage on the internet to access a file on the visitor's local drive? (other than cookies)
Hi all - I'm having difficulty with the processing of 3 forms on my web page. We'll call my 3 forms A, B, and C. By default my page shows form A. The other 2 forms I have hidden via display:none My issue is when I have form B or C showing. Once I hit submit, say within form B for example, I'd like this form to remain for future entries/submital of data. However, instead what happens is form A appears. How do I get form B to remain, allowing for a user to submit multiple entries of data without going back to form A? Here's my code for form 'B' <div id="branches_info" style=" <?php echo $display_branches; ?> "> form method="post" action="annual_report_main.php" onsubmit="return validateBranches(this);"> <fieldset> <p><strong>Branch Location</strong></p><br /> <label for="branch_address" class="long">Street Address:</label> <input maxlength="50" type="text" name="branch_address" id="branch_address" value="<?php echo htmlentities($_POST['branch_address']);?>" /><br /> <div class="cleaner"></div> <label for="branch_city" class="long">City:</label> <input maxlength="20" type="text" name="branch_city" id="branch_city" value="<?php echo htmlentities($_POST['branch_city']);?>" /><br /> <div class="cleaner"></div> <label for="branch_state" class="long">State:</label> <input maxlength="2" type="text" name="branch_state" id="branch_state" value="<?php echo htmlentities($_POST['branch_state']);?>" /><br /> <div class="cleaner"></div> <label for="branch_zip" class="long">Zip Code:</label> <input maxlength="10" type="text" name="branch_zip" id="branch_zip" value="<?php echo htmlentities($_POST['branch_zip']);?>" /><br /> <div class="cleaner"></div> <div class="content_onecolumn"> <input type="submit" name="Branches" value="Submit to Database" class="inputSubmit" /> </div> <div class="content_onecolumn"> <input type="button" name="Finished" value="Finished" class="inputSubmit" onclick="window.open('https://www.dca.ca.gov/webapps/bppe/thankyou.php');return false" /> </div> </fieldset> </form> </div> I'm integrating a JavaScript typing tutorial to my website. But I'm not able to store the value to the database. In the below code you can see the speed is updated in a html span. The id of the tag is speed(<span id="speed"></span>). This code will automatically update when user start typing. I want to update this to a database when user press submit button. But i cant able to. Is there any way to input the speed to database ? Please go through the below code and suggest me what i can do....? Code:
<script type="text/javascript">
//<![CDATA[
var garray = new Array();
var garrayIndex = -1;
var gtext = "";
var gindex = 0;
var goldPressed = 0; //previous pressed key code
var goldTarget = 0; //previous target key code
var gtarget = 0;
var gpressed = 0;
var ggood = 0;
var gtotal = 0;
var gtime = 0;
var gkeytime = 0;
function setup() {
setEvents();
//change this array to suit your needs but note that indices
//must ascend by 1 from 0: garray[0]="foo"; garray[1]="bar";...
garray[0] = "a s d f s d f f s d as sd ad fs ds sad af sa fa dafa sda dad das afa sfd add sasd df sf saf dds fd ads safd fsd fas sas dafs as fad";
//more similar lines can easily be added above, dont forget to get the index right!
garrayIndex = -1;
next();
}
function setPatternInit() {
//#b note: once we did this using innerHTML but this caused
//a leakage of handles in ie
var pat = document.getElementById("pattern");
for(; {
if (pat.hasChildNodes()) {
pat.removeChild(pat.lastChild);
}
else break;
}
var cname = "done";
for (j=0; j<gtext.length; j++) {
var ch = gtext.charAt(j);
if (j>gindex) cname = "future";
else if (j==gindex) cname = "todo";
var kid = document.createElement("span");
kid.className = cname;
var txt = document.createTextNode(ch);
kid.appendChild(txt); //#b innertext doesnt work on firefox
pat.appendChild(kid);
}
}
function setPattern() {
var pat = document.getElementById("pattern");
var kids = pat.childNodes;
var cname = "done";
for (j=0; j<gtext.length; j++) {
if (j>gindex) cname = "future";
else if (j==gindex) cname = "todo";
var kid = kids[j];
kid.className = cname;
}
}
function mapToBoard(code) {
if ((code>=97)&&(code<=108)) return (code-32);
if ((code>=110)&&(code<=122)) return (code-32);
if ((code>=65)&&(code<=90)) return code;
if ((code>=48)&&(code<=57)) return code;
if ((code==32)) return code;
if ((code==44)||(code==46)||(code==47)||(code==59)) return code;
return 0; //not on our board picture
}
function setBoard() {
var letter;
var elt;
var c;
var s;
if (goldTarget!=0) {
c = mapToBoard(goldTarget);
if (c!=0) {
letter = "code"+c;
elt = document.getElementById(letter);
s = "silent";
elt.className = s;
}
}
if (goldPressed!=0) {
c = mapToBoard(goldPressed);
if (c!=0) {
letter = "code"+c;
elt = document.getElementById(letter);
s = "silent";
elt.className = s;
}
}
if (gtarget!=0) {
c = mapToBoard(gtarget);
if (c!=0) {
letter = "code"+c;
elt = document.getElementById(letter);
s = "target";
elt.className = s;
}
}
if (gpressed!=0) {
c = mapToBoard(gpressed);
if (c!=0) {
letter = "code"+c;
elt = document.getElementById(letter);
s = "pressed";
elt.className = s;
}
}
}
function nextPattern() {
goldTarget = gtarget;
goldPressed = gpressed;
if (++garrayIndex == garray.length) garrayIndex = 0;
gtext = garray[0]; gindex = 0;
gpressed = 0;
setPrompt();
}
function prevPattern() {
goldTarget = gtarget;
goldPressed = gpressed;
if (--garrayIndex < 0) garrayIndex = garray.length - 1;
gtext = garray[garrayIndex]; gindex = 0;
gpressed = 0;
setPrompt();
}
function next() {
nextPattern();
setPatternInit();
setBoard();
}
function prev() {
prevPattern();
setPatternInit();
setBoard();
}
function skip(e) {
next();
return false;
}
function back(e) {
prev();
return false;
}
function setEcho(c, isOK) {
var s;
if (c<' ') c=' ';
var s = "["+c+"]";
if (!isOK) s += " ..OOPS!"
var elt = document.getElementById("echo");
var txt = document.createTextNode(s); //#b
if (elt.hasChildNodes()) {
elt.replaceChild(txt, elt.lastChild);
}
else elt.appendChild(txt);
}
function setPrompt() {
var ch = gtext.charAt(gindex);
gtarget = ch.charCodeAt(0);
}
function adjustStatistics(ch) {
return; //could count errors by character
}
function updateSpeed(ok) {
var t = (new Date()).getTime();
var dt = (t-gtime);
gtime = t;
if (dt > 5000) return; //ignore sleepy user
gkeytime += dt;
var s = (0.5+ggood*60*200/gkeytime).toFixed(0) + "";
var elt = document.getElementById("speed");
var txt = document.createTextNode(s); //#b
if (elt.hasChildNodes()) {
elt.replaceChild(txt, elt.lastChild);
}
else elt.appendChild(txt);
}
function updateScore(ok) {
if (ok) ggood++;
gtotal++;
updateSpeed(ok)
var s = ggood.toFixed(0) + "";
var elt = document.getElementById("count");
var txt = document.createTextNode(s); //#b
if (elt.hasChildNodes()) {
elt.replaceChild(txt, elt.lastChild);
}
else elt.appendChild(txt);
s = (gtotal-ggood).toFixed(0) + "";
elt = document.getElementById("accuracy");
txt = document.createTextNode(s); //#b
if (elt.hasChildNodes()) {
elt.replaceChild(txt, elt.lastChild);
}
else elt.appendChild(txt);
var s = (gkeytime/1000).toFixed(2) + " s";
var elt = document.getElementById("time");
var txt = document.createTextNode(s); //#b
if (elt.hasChildNodes()) {
elt.replaceChild(txt, elt.lastChild);
}
else elt.appendChild(txt);
}
function reset(e) {
window.location.reload();
}
function debug() { //#b to use, set body onLoad="debug()" instead of "setup()" in html
//document.onkeydown=debugKey; //#b
document.onkeypress=debugKey;
}
function debugKey(evt) { //#b
var e = (window.event) ? window.event : evt; //#b
var k = (e.which)? e.which : e.keyCode;
var f = filterKeyCode(k);
var s = "k="+k+",f="+f;
alert(s);
return false;
}
function setEvents() { //#b
document.onkeydown=down; //#b
document.onkeypress=press;
(document.getElementById('skip')).onmousedown=skip;
(document.getElementById('back')).onmousedown=back;
(document.getElementById('reset')).onmousedown=reset;
}
function cleanup() {
//pointless, really
document.onkeydown=null; //#b
document.onkeypress=null;
(document.getElementById('skip')).onmousedown=null;
(document.getElementById('back')).onmousedown=null;
(document.getElementById('reset')).onmousedown=null;
}
function filterKeyCode(code) { //from key down (0 to ignore)
//note: user must have num lock set if they want to use keypad numbers
if ((code>=65)&&(code<=90)) return code; //alpha
if ((code>=48)&&(code<=57)) return code; //numberic
if (code==32) return code; //blank
if ((code>=96)&&(code<=105)) return code; //number pad digits
if ((code==13)||(code==16)) return code; //enter, shift
if ((code>=106)&&(code<=111)) return code; //number pad operators
if ((code>=186)&&(code<=192)) return code; //punctuation
if ((code>=219)&&(code<=222)) return code; //punctuation
return 0;
}
function filterCode(code) { //from key press as ascii char code (0 to ignore)
if ((code==13)||(code==16)) return code; //enter and shift are allowed
if (code<32) return 0;
if (code>=127) return 0;
return code;
}
function capsLockFilter(e, pressed) { //#b many problems making this cross browser!
//#b e.modifiers known only on early mozilla (which does not know standard e.shiftkey)?
var shifted = e.shiftKey || (e.modifiers && (e.modifiers & Event.SHIFT_MASK)); //#b
var locked = (((pressed > 64) && (pressed < 91) && (!shifted))
|| ((pressed > 96) && (pressed < 123) && (shifted)));
if (locked) alert("caps lock!");
}
function down(evt) { //#b
var e = (window.event) ? window.event : evt; //#b
var rawcode = (e.which)? e.which : e.keyCode;
pressed = filterKeyCode(rawcode);
if (pressed > 0) return true;
if (typeof(e.cancelBubble)!="undefined") e.cancelBubble = true;
if (typeof(e.stopPropagation)!="undefined") e.stopPropagation();
return false; //#b nuisance keys - backspace etc on ie (no effect for capslock!!)
}
function press(evt) { //#b
//#b should work in ie, firefox, safari(hopefully), opera(hopefully)
var e = (window.event) ? window.event : evt; //#b
var pressed = 0;
var wc = -1;
var kc = -1;
var cc = -1;
if (typeof(e.keyCode)!="undefined") kc = e.keyCode; //ie
if (typeof(e.charCode)!="undefined") cc = e.charCode; //firefox
if (typeof(e.which)!="undefined") wc = e.which; //old mozilla
if ((kc>=0)&&(cc>=0)) { //firefox
pressed = cc;
}
else if (kc>=0) pressed = kc; //ie
else if (wc>=0) pressed = wc; //old mozilla
//alert("pressed="+pressed+",kc="+kc+",cc="+cc+",wc="+wc);
pressed = filterCode(pressed);
if (pressed==0) {
if (kc==13) return skip(); //#b firefox
else return false;
}
if (pressed==13) return skip(); //#b ie
capsLockFilter(e, pressed); //hmm
var c = String.fromCharCode(pressed); //ie from ascii code
var ch = gtext.charAt(gindex);
var ok = (c==ch);
goldPressed = gpressed;
gpressed = pressed;
goldTarget = gtarget;
if (ok) {
gindex++;
if (gindex==gtext.length) {
if (gtotal-ggood <= 5 && 0.5+ggood*60*200/gkeytime >= 20) {
alert('Good work! You had fewer than 5 errors and typed faster than 20 WPM! Now try the next exercise!');
setPatternInit();
}
else if (gtotal-ggood > 5 && 0.5+ggood*60*200/gkeytime >= 20){
alert('Good speed! You were over 20 WPM but have more than five errors! Slow down a bit for accuracy.')
setPatternInit();
}
else if (gtotal-ggood <= 5 && 0.5+ggood*60*200/gkeytime < 20){
alert('Good accuracy! You had fewer than 5 errors, now try for 20 WPM.')
setPatternInit();
}
else
alert ('Focus on accuracy first, then go for speed!');
setPatternInit();
}
else setPattern();
gpressed = 0;
setPrompt();
setEcho(c, true);
updateScore(true);
}
else {
setEcho(c, false);
updateScore(false);
setPattern()
}
setBoard();
return false;
}
//</XMLCDATA>
</script>
This is my HTML Code : Code:
<body onload="setup()" onunload="cleanup()">
<div id="container1">
<div id="container3">
<div id="body">
<div id="pattern" class="big">
</div>
<div id="prompt" class="prompt">
</div>
<div id="board" class="board">
<div id="row0" class="row0">
<span id="code49">1</span> <span id="code50">2</span> <span id="code51">3</span> <span id="code52">4</span> <span id="code53" style="margin-left:-5px;">5</span> <span id="code54">6</span> <span id="code55">7</span> <span id="code56">8</span> <span id="code57">9</span> <span id="code48">0</span>
</div>
<div id="row1" class="row1">
<span id="code81">Q</span> <span id="code87">W</span> <span id="code69">E</span> <span id="code82" style="font-weight:bold">R</span> <span id="code84">T</span> <span id="code89">Y</span> <span id="code85" style="margin-left: -2px;">U</span> <span id="code73">I</span> <span id="code79">O</span> <span id="code80">P</span>
</div>
<div id="row2" class="row2">
<span id="code65">A</span> <span id="code83">S</span> <span id="code68">D</span> <span id="code70" style="font-weight:bold;">F</span> <span id="code71" style="margin: 0 0 0 -5px;">G</span> <span id="code72">H</span> <span id="code74" style="font-weight:bold;">J</span> <span id="code75">K</span> <span id="code76">L</span> <span id="code59">;</span>
</div>
<div id="row3" class="row3">
<span id="code90">Z</span> <span id="code88">X</span> <span id="code67">C</span> <span id="code86"
style="font-weight:bold">V</span> <span id="code66">B</span> <span id="code78">N</span> <span id="code77" style="font-weight:bold">M</span> <span id="code44">,</span> <span id="code46">.</span>
</div>
<div id="row4" class="row4">
<span id="code32">[SPACE]</span>
</div>
<div id="scores">
<div class="count">Characters:
<span id="count"></span>
</div>
<div class="accuracy">Errors:
<span id="accuracy"></span>
</div>
<div class="speed">WPM:
<span id="speed"></span>
</div>
<div class="time">Time:
<span id="time"></span>
</div>
</div>
<div align="center">
<button id="reset" class="button123" name="reset" align="center">Restart Exercise</button>
</div>
</div>
<div id="echo" class="echo" style="display:none;">
[]
</div>
<div style="display:none;">
<button id="skip" class="button123" name="skip">skip</button> to next line ("enter" key is shortcut)
</div>
<div style="display:none;">
<button id="back" class="button123" name="back">back</button> to previous line
</div>
</div>
</div>
Hello, I have looked through a tutorial that does text gradient without the use of images. I found this tutorial: http://www.thomasfrank.se/text_color_gradients.html However, only the first "SPAN CLASS" gets gradiented and the other spans don't. In the bottom of the page it says: Quote: If you call the gradientText.set() without any arguments it will go looking for all span tags with class names starting with gradient_ and apply gradients to them But I do not know what it means, I have tried learning a bit of Javascript and I think it could mean something like "if something is something, then". But I'm not sure. Please help, thanks. I'm trying to create a forum for a business. The forum will change depending on what checkbox a person checks in the beginning. I have the checkboxes toggle a certain span. When you check one box it hides one span and displays the other. This works, but I want to position the displayed span at the top so a person doesn't have to look for the other forum. Right now there is just a big white space in the place of the hidden span, so it looks like there is nothing else on the page. I want to move the bottom span to the top when toggled. Here is my code so far. <form name="form1" method="post" action=""> Pork <INPUT TYPE=checkbox NAME="chbx" onClick="selecionatudo(true,1); toggleT('divt1','h'); toggleT('divt2','s')"> Beef <INPUT TYPE=checkbox NAME="chbx" onClick="selecionatudo(true,2); toggleT('divt1','s'); toggleT('divt2','h')"><br> </FORM> <form> <p><div id="divt1" style="visibility:visible; position:relative; top:0; left:0; overflow: visible;"> Shoulder: <br /> Ground beef:<input type="checkbox" name="Grinding" id="Ground beef" /><br /> Patties: Fresh<input type="checkbox" name="pattiesfr" id="Pattiesfr" /> or Seasoned<input type="checkbox" name="pattiesS" id="PattiesS" /><br /> Minute Steaks: <input type="checkbox" name="minsteaks" id="minsteaks" /><br /> Specific Cuts wanted:<br /> <textarea name="Order Sheet" cols="60" rows="30" id="Order Sheet"></textarea> </div> </form><br /> <div id="divt2" style="visibility:visible; position:absolute; top "> Type 2 Input: <input name="t2" type="text" value=""> </div> <BR> </p> <script type=text/javascript> var isIE=document.all?true:false; var isDOM=document.getElementById?true:false; var isNS4=document.layers?true:false; /* _w : which ID (1) or (2) */ /* _h : (h)ide or (s)how */ function toggleT(_w,_h) { if (isDOM) { if (_h=='s') document.getElementById(_w).style.visibility='visible'; if (_h=='h') document.getElementById(_w).style.visibility='hidden'; } else if (isIE) { if (_h=='s') eval("document.all."+_w+".style.visibility='visible';"); if (_h=='h') eval("document.all."+_w+".style.visibility='hidden';"); } else if(isNS4) { if (_h=='s') eval("document.layers['"+_w+"'].visibility='show';"); if (_h=='h') eval("document.layers['"+_w+"'].visibility='hide';"); } } </script> Hey all, my first post here. I'm primarily a designer but need to get more into the code aspect of things (and will be getting jQuery asap), but at the moment i'm very behind on time on a project and could use some quick help. Basically, I'm making a dynamically loading text box input area for RMA returns for our products. But thats kind of irrelevant, here's my question: I have an external style sheet with only this in it (more will be added later for future sections, thats why im making it it's own "css-forms.css" file: Code: .formpad { padding:3px 3px 3px 3px; }
In my main .html, some of my javascript for my dynamic table contains lines like these: Code: var esnImeiInput = "<INPUT type=\"text\" name=\"esn_imei[]\" size=\"20\">";
var invoiceInput = "<INPUT type=\"text\" name=\"invoice[]\" size=\"8\">";
var datePurchaseInput = "<INPUT type=\"text\" name=\"date_purchase[]\" size=\"8\">";
var noteInput = "<INPUT type=\"text\" name=\"notes[]\" size=\"18\">";
var trOpenTag = "<tr>";
var trCloseTag = "</tr>";
var tbOpenTag = "<table>";
var formRows = modelInput + reasonInput + esnImeiInput + invoiceInput + datePurchaseInput + noteInput + "<br />";
for(x=0;x<10;x++)
{
formRows += modelInput + reasonInput + esnImeiInput + invoiceInput + datePurchaseInput + noteInput + "<br />";
}
Where inside those vars (INPUT's) would i REFER to the 'class' of .formpad? Basically I just want to add cellpadding to the table that is being dynamically loaded. If anyone has time to help via IM that'd be cool too, this is pretty easy stuff for true coders. (the test page for all of this is currently at: http://planetcellinc.com/rma-rev726.html Any help appreciated, thanks! -Hrl2k I have been looking around on the webs but have not found anything. I can find how to add multiple fields, but what if they reside on different forms on the same page? For example, here is my code with two forms: Code: <FORM name="form1"> <b>Size</b><input type="text" size="12" value="" name="size">* <b>Qty</b><input type="text" size="4" value="" name="qty" onkeyup="convert_to_feet(this.form);calculate_lbs(this.form)"> <b>-</b> <input type=text size="10" value="" name="a1" onkeyup="convert_to_feet(this.form);calculate_lbs(this.form)"><b>mm</b> <input type="text" size="15" value="" name="xtra">* <input type="hidden" size="4" value="304.8" name="b1"> <input type="hidden" value="0" name="ans1" size="10"> <input type="text" size="5" value="0" name="w1" onkeyup="convert_to_feet(this.form);calculate_lbs(this.form)"><b>Lbs/Foot</b> <input type="text" size="7" value="0" name="tw1" readonly="readonly"><b>Total Lbs<b> </FORM> <FORM name="form2"> <b>Size</b><input type="text" size="12" value="" name="size">* <b>Qty</b><input type="text" size="4" value="" name="qty" onkeyup="convert_to_feet(this.form);calculate_lbs(this.form)"> <b>-</b> <input type=text size="10" value="" name="a1" onkeyup="convert_to_feet(this.form);calculate_lbs(this.form)"><b>mm</b> <input type="text" size="15" value="" name="xtra">* <input type="hidden" size="4" value="304.8" name="b1"> <input type="hidden" value="0" name="ans1" size="10"> <input type="text" size="5" value="0" name="w1" onkeyup="convert_to_feet(this.form);calculate_lbs(this.form)"><b>Lbs/Foot</b> <input type="text" size="7" value="0" name="tw1"><b>Total Lbs<b> </FORM> In this example, I want to sum the two fields named "tw1" (the last field on each form) into a text box. Is this possible? Hello all, I am trying to update a site that has a cookie feature enabled so that a certificate can be retrieved later on. I am using a form to collect and put the cookie, but I have to use two buttons to get the information stored and then direct the user on through to the rest of the site. My question is: Can I combine these functions into the same button? I have scoured the web for solutions, but I can't seem to find anyone doing this exact thing. I know that websites do this type of thing all of the time. Here is the code that I am using. I am an html / css person. I am just getting into js. It is ugly, but I'm coping Code: <body>
<div id="header">
</div>
<div id="main"><br>
<h2><SCRIPT LANGUAGE="JavaScript">
cookie_name = "dataCookie";
var YouEntered;
function putCookie() {
if(document.cookie != document.cookie)
{index = document.cookie.indexOf(cookie_name);}
else
{ index = -1;}
if (index == -1)
{
YouEntered=document.cf.cfd.value;
document.cookie=cookie_name+"="+YouEntered+"; expires=Saturday, 31-Dec-2011 23:59:59 GMT";
}
}
</SCRIPT>
<FORM NAME="cf">
Enter Your Full Name as you would like it to appear on the completion certificate: <br> <INPUT TYPE="text" NAME="cfd" size="20">
<INPUT TYPE="button" Value="Enter"
onClick="putCookie()">
</FORM>
<h6>Select Continue to review the information</h6>
<FORM METHOD="LINK" ACTION="cookie_2.htm">
<INPUT TYPE="submit" VALUE="Continue with Training">
</FORM></h2>
</div>
<div id="footer">
</div>
</body>
Normally I would just use document.getElementById to get anything I need but here is my problem: I have a zip code control that I load using AJAX. it has city, state, country, county and zip code. This gets loaded within a business application and at one point you can have both a bill to and ship to address forms on the screen at the same time, loading my zip control with the same fields, same ids and same name. This forced me to now pass in the form name that contains the control. I need to get to divs and spans within this form. Primarily as you type in a city or zip code, I am doing a hot search with a popup div that shows you results you can quickly choose from. The only time this becomes an issue is the situation I mentioned before when the zip code control is on the screen twice. I am not certain how to access the innerHTML of a span or div by way of the form name. Is this possible and if so what is the proper syntax? Here is a very basic example at its simplest form of my problem. Code: <form name="frm_billto" id="frm_billto"> <span id="myspan">Hello</span> </form> <form name="frm_shipto" id="frm_shipto"> <span id="myspan">World</span> </form> In the above example because the control was loaded twice, I now have 2 spans with the same ID. I want the innerHTML of the each span based on the form they are in. We wanted one control that we could use throughout the system that we could update in one place and the entire application be updated. Unfortunately we did not anticipate having it load more than once on the page. Thank you for any help Hello, I'm trying to make a simple webpage with two input text boxes that when submitted when empty, I'll get an error pop-up telling me which ones are empty, both, first name, or last name. When there's only one if, the script works. But when there's multiple else ifs, nothing happens if I press submit. Can someone help me? Code: <html>
<head>
<script type="text/javascript">
function validateForm()
{
var x=document.forms["myForm"]["firstname"].value;
var y=document.forms["myForm"]["lastname"].value;
if (x==null || x=="" && y==null || y=="")
{
alert("Please put in your first and last name.");
return false;
}
else if (x==null || x=="")
{
alert("Please put in your first name.");
return false;
}
else if (y==null || y=="")
{
alert("Please put in your last name.");
return false:
}
}
</script>
</head>
<body>
<form name="myForm">
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
<input type="submit" value="Submit" onclick="validateForm()">
</form>
</body>
</html>
fyi, I have limited experience with web programming (even less with javascript). I am trying to search a database of molecules and display several columns for each returned molecule in a table in a new page (view_all.cgi). Within this table I have a button for each molecule from the database which I would like to be able to click it and view all of it's information in a new page (view_one.cgi) However, I also have a column in my table in view_all.cgi filled with check boxes so that only some of the returned molecules can be checked and then downloaded using a script (get_checked.cgi). QUESTION: How can I handle the table data so that one button sends one row of the table to view_one.cgi, while another button sends multiple columns of the table to get_checked.cgi without using nested forms? Thanks, Tom EDIT: A better question. I have the first part of my question working (sending one row of a table to view_one.cgi). So, using javascript, how can I get the status (checked/unchecked) of all the check boxes on a page and send the information to get_checked.cgi? I'm creating a paypal webpage and am having some issues with input values updating based on which item the user has selected. The boxes I need to update are the amount, item number and item name. I have the following code but it only updates the first form. If I make a change to the second set of options it updates the first form instead of the second. Any help would be much appreciated. Code:
function details(val)
{
var info = val.split("|");
document.getElementById('num').value = info[0];
document.getElementById('price').value = info[1];
document.getElementById('package_name').value = info[2];
}
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart">
<select name="dy" Onchange="details(this.value);">
<option value="1|3|Package 1">Package 1</option>
<option value="2|6|Package 2">Package 2</option>
<option value="3|9|Package 3">Package 3</option>
</select>
<input type="text" id="num" name="item_number" value="1">
<input type="text" id="price" name="amount" value="3">
<input type="text" id="package_name" name="item_name" value="Package 1">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"><img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"><input type="hidden" name="add" value="1">
</form>
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart">
<select name="pt" Onchange="details(this.value);">
<option value="4|6|Package 4">Package 4</option>
<option value="5|9|Package 5">Package 5</option>
<option value="6|12|Package 6">Package 6</option>
</select>
<input type="text" id="num" name="item_number" value="4">
<input type="text" id="price" name="amount" value="6">
<input type="text" id="package_name" name="item_name" value="Package 4">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"><img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"><input type="hidden" name="add" value="1">
</form>
Hi everyone, First of all sorry for my english (it is not my native tongue so I don't master it really well) I'm starting a form and I would like to add : <span class="true"></span> where it's written HERE in the following if the function checkField finds that the checking is ok : <div><input type="text" value="" placeholder="Nom" name="nom" class="text" onkeyup="checkField()">HERE<div> I'm a beginner in javascript and in spite of my search I still don't know what to use in my checkField after my test to print <span class="true"></span> where I want it. I would really appreciate any help you guys can give me. Thanks a lot. I posted a thread a few days ago concerning a bit of javascript code to make checking one checkbox clear another one. I got some great, prompt help. However, I just got back to working on that web page, and realized that the functions only work on the first form on my web page. I have many forms and they are actively named using php. Here's are the functions (these works for just the first form on the page): Code: <script type="text/javascript">
function undo_Changes() {
if (document.getElementById("Complete").checked==true) {
document.getElementById("Needs_Change").checked=false;
}
}
function undo_Complete() {
if (document.getElementById("Needs_Change").checked==true) {
document.getElementById("Complete").checked=false;
}
}
</script>
I call them from the checkboxes involved: Code: <input name="Complete" id="Complete" value="Yes" <?php echo($Complete=="Yes") ? "checked" : ""; ?> size="4" type="checkbox" onChange="this.style.color='#FF0000'" onClick="undo_Changes()"> <input name="Needs_Change" id="Needs_Change" value="Yes" <?php echo($Needs_Change=="Yes") ? "checked" : ""; ?> size="4" type="checkbox" onClick="undo_Complete()"> Here's how my forms are named: Code: <?php $DocName = "Schedule".$count; ?>
<form name="<?php echo $DocName; ?>" action="ScheduleCode.php" method="post" id="<?php echo $DocName; ?>">
I've tried the following and it doesn't work at all: Code: <script type="text/javascript">
function undo_Changes(myForm) {
if (myForm.getElementById("Complete").checked==true) {
myForm.getElementById("Needs_Change").checked=false;
}
}
function undo_Complete(myForm) {
if (myForm.getElementById("Needs_Change").checked==true) {
myForm.getElementById("Complete").checked=false;
}
}
</script>
<input name="Complete" id="Complete" value="Yes" <?php echo($Complete=="Yes") ? "checked" : ""; ?> size="4" type="checkbox" onChange="this.style.color='#FF0000'" onClick="undo_Changes(this.form)">
<input name="Needs_Change" id="Needs_Change" value="Yes" <?php echo($Needs_Change=="Yes") ? "checked" : ""; ?> size="4" type="checkbox" onClick="undo_Complete(this.form)">
Thanks for any help. Lisa |
|||||||