|
JavaScript - Accessing Input Tags
Hello, I have a simple form with simple validation. I am just playing around a bit with forms and don't really have concrete knowledge.
What I have done is created a form. Asking for first name, last name, age and email. When the user clicks the submit button I want 2 functions to run, the first checking the input is correct and also making sure all fields have a value. Once everything is checked and is O.K I want to go into another function which sends all this information to an array one by one. I am having difficulty accessing each individual input tag. I could achieve what I want to do, but it will take double the lines of code because each input has a different 'name'. So, what I am trying to do is access the input tags the same as you would do an array. Here is my code: HTML: Code: <form name="regForm" id="form"> <fieldset> <legend>Real Heroes - Registration Form</legend> <p>First Name:<input type="text" size="30" maxlength="20" name="txtFirstName" /></p> <p>Last Name:<input type="text" size="30" maxlength="20" name="txtLastName" /></p> <p>Age:<input type="text" size="30" maxlength="3" name="txtAge" /></p> <p>Email Address:<input type="text" size="30" maxlength="50" name="email" /></p> <p><input type="button" value="Submit Registration" name="butChkForm" onclick="callFuncs_onclick()" /> <input type="reset" value="Reset" name="resetForm" /></p> </fieldset> </form> JavaScript: Code: //CALLING THE FORM SCRIPTS//
function callFuncs_onclick()
{
chkForm_onclick();
creatingDatabase_onclick();
}
//**************FORM VALIDATION***************//
function chkForm_onclick()
{
var theForm = document.regForm;
if (theForm.txtFirstName.value == "" || theForm.txtLastName.value == "" || theForm.txtAge.value == ""
|| theForm.email.value == "")
{
alert("Please complete all of the form.");
if (theForm.txtFirstName.value == "")
{
theForm.txtFirstName.focus();
}
if (theForm.txtLastName.value == "")
{
theForm.txtLastName.focus();
}
if (theForm.txtAge.value == "")
{
theForm.txtAge.focus();
}
if (theForm.email.value == "")
{
theForm.email.focus();
}
}
else if (isNaN(theForm.txtAge.value))
{
alert("That is not valid input for this field. Please re-enter your age.");
theForm.txtAge.focus();
}
else
{
alert("Thank you for completing the form, " + theForm.txtFirstName.value);
}
}
function creatingDatabase_onclick()
{
var form = document.regForm;
var index = form.input[0].value;
alert(index);
}
I'm not quite sure where I am going wrong. Please note that these functions really labour the point, I know I have way too many lines of code but I am still very amateur with JS. Thank you for any help/information. Kind Regards, LC. Similar TutorialsHi I have a large'ish project under development. The code below distills the problem I am having. In essence, I am trying to read in an XML file. It appears to load okay but when I try to count how many there are of a certain tag (The "Team" tag) I am told that there are zero. This is despite being told that that file loads okay (as the callback function is called). Javascript and the xml file is below. I hope that it is easy to follow. When the page is loaded, the initialize function is called. I first check my browser as I only need this to work on a Mozilla browser (I am using Mozilla Firefox 3.6.3). I then load the xml file and the callback function (fileLoaded) is called. I then try to find out how many "Team" tags I have, but get the message that there are zero. Sorry if this is a simple question but I have spent the best part of yesterday trying to get this to work. Any help would be appreciated. Thx G === javascript === 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" xml:lang="en" lang="en">
<head>
<script type="text/javascript">
// Global variable so that everything can access it
var xlmDoc;
function initialize() {
// This function gets called when the page loadds
browserCheck();
xmlDoc=document.implementation.createDocument("", "doc", null)
xmlDoc.load("small.xml"); // This file is shown at the end of this document, but it is a separate xml document
xmlDoc.onload = fileLoaded;
} // End of initialize
function fileLoaded() {
// Called when file is loaded (this does get called as expected)
alert("File loaded");
var teams = xmlDoc.getElementsByTagName("Team");
var count = teams.length;
alert("no of Teams: " + count); // This displays zero - WHY???
} // End of fileLoaded
function browserCheck() {
// START: This function just checks that I am using a Mozilla browser (I am)
var moz = (typeof document.implementation != 'undefined') && (typeof document.implementation.createDocument != 'undefined');
if(moz) { alert("Mozilla"); }
else {alert("Not Mozilla"); }
} // End of browserCheck
</script>
</head>
<body onload="initialize()">
</body>
</html>
=== xml file === Code:
<Root>
<Team>
<Type>GLF</Type>
<Name>Verulam</Name>
<Postcode>AL1 1JG</Postcode>
<Page>693</Page>
</Team>
<Team>
<Type>RFU</Type>
<Name>London Manx RFC</Name>
<Postcode>AL1 2DJ</Postcode>
<Page>704</Page>
</Team>
<Team>
<Type>RFU</Type>
<Name>University of Hertfordshire RFC</Name>
<Postcode>AL10 9AB</Postcode>
<Page>729</Page>
</Team>
</Root>
Hi, I'm struggling with all this DOM stuff so I hope someone can help. I have a form with multiple input fields and I'm trying to identify the specific input field that is in focus so that I can display a relevant status bar message. I have a message array with various entries in it and I'm calling a showStatus() function with an onfocus function from the form itself e.g. The code in the input form = Code: <input type="text" name="first" size="31" maxlength="20" class="entry" onfocus="showStatus()"/> The showStatus() function so far is = Code: function showStatus()
{
var message = ['Please provide your First Name.',
plus loads of other properley formatted status messages......]
var x=document.getElementById().focus();
window.status = message[x];
}
I'd like to access the array variable of the item that is in focus not only for the message but also for an onblur function to validate input. Any ideas? My thanks R I've been playing around with a madlibs exercise while trying to learn simple javascript. I have three input boxes and a button display an alert containing the input from the boxes. Am I right to be assigning variable names to the values from the text boxes and then referencing those variables in my alert? I'm sorry if this is a dumb question but I've been working on it for hours and can't get past this point. Inset a name: <input type="text" id="textbox1" size="10"/> </br> Insert a verb : <input type="text" id="textbox2" size="10"/> </br> Insert a place: <input type="text id="textbox3" size="10"/> <input type="button" value="CLICK WHEN FINISHED" onClick="name = document.getElementById('textbox1').value; verb = document.getElementById('textbox2').value; place = document.getElementById('textbox3').value; alert('Mad Lib :' + name + " " + verb + " " + place);" /> Hey all, I have a simple form that looks something like this: Code: <div id="responses"> <input class="checkbox" type="checkbox" name="group1" value="1" id="option1"/><label class="label" for="option1">Option one text</label> <input class="checkbox" type="checkbox" name="group1" value="0" id="option2"/><label class="label" for="option2">Option two text</label> <input class="checkbox" type="checkbox" name="group1" value="1" id="option3"/><label class="label" for="option3">Option three text</label> </div> I am trying to figure out a way to use javascript to take these and randomize the order of them. For example, if you were looking at it and clicked a randomize button it would shuffle around the options. I am fairly new to javascript and don't really know where to start with something like this. I would greatly appreciate it if someone could get me started or point me in the right direction. Thanks! Is it necessary (or advisable) to place <form> tags around input buttons? They seem to work fine either way. Code: <input type="button" value=" Home " onClick="parent.main.location='home.htm'"> 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! Hello, I have a multi-dimensional object, derived from JSON returned by the Foursquare API. The object has the following structure (as printed using a print_r type method from http://www.openjs.com/scripts/others...hp_print_r.php PHP Code: '0' 'id' => "27110xxx" 'created' => "Sun, 11 Apr 10 15:09:45 +0000" 'timezone' => "America/New_York" 'user' ... 'id' => "48xxx" 'firstname' => "Barry" 'lastname' => "xxx" 'photo' => "http://playfoursquare.s3.amazonaws.com/userpix_thumbs/4abb5bxxxxxx.jpg" 'gender' => "male" 'display' => "xxxx. @ [off the grid]" '1' ... 'id' => "2538xxxx" 'created' => "Wed, 07 Apr 10 13:24:41 +0000" 'timezone' => "Europe/London" Could anyone tell me the best way to access its elements? I have this so far which gets the required values, but I want to preserve the order ie. get the data from the first element in the object first, then move to the next - each element represents a user so I want to keep their data separate. PHP Code: /* This is a custom function which has the same function as print_r */ function dump(arr,level) { var firstName, lastname, geolat, geolong, photo; var dumped_text = ""; if(!level) level = 0; //The padding given at the beginning of the line. var level_padding = " "; for(var j = 0; j < level + 1; j++) level_padding += " "; if(typeof(arr) == 'object') { //Array/Hashes/Objects for(var item in arr) { var value = arr[item]; if(typeof(value) == 'object') { //If it is an array, dumped_text += level_padding + "'" + item + "'\n"; dumped_text += dump(value,level + 1); } else { dumped_text += level_padding + "'" + item + "' => \"" + value + "\"\n"; } if (item == 'firstname') { firstname = value; document.write("First name: " + firstname + "<br />"); document.write(item); } if (item == 'lastname') { lastname = value; document.write("Last name: " + lastname + "<br />"); document.write(item); } if (item == 'geolat') { geolat = value; document.write("Latitude: " + geolat + "<br />"); document.write(item); } if (item == 'geolong') { geolong = value; document.write("Longitude: " + geolong + "<br />"); document.write(item); } } } else { //Stings/Chars/Numbers etc. dumped_text = "===>"+arr+"<===("+typeof(arr)+")"; } return dumped_text; } var myObj = <?php echo json_encode($checkin); ?>; alert(dump(myObj)); Sorry for the bloated code, I normally work in Java and PHP so although I understand the theory, I haven't worked with objects much in JavaScript before. Any help would be much appreciated! Hey is it possible to access javascript variables in an iframe src page from the parent page, or vice versa. How do you do this? What about the DOM? thanks Hello, I am working on a project using HTML and javascript to allow the user to choose a vehicle from a drop down menu, then load a new page showing some information about this vehicle. The information is stored in an Excel file. I posted regarding this issue a while back and got an excellent response from Old Pedant (thanks again!) about using ActiveX - which has thus far worked perfectly. My initial condition was that I would only be using IE7+. However, my next idea was to be able to use it on an IPad (which I unfortunately do not own yet, making any kind of testing difficult) which I am fairly certain ActiveX won't work on. So, I was looking for any other method which would be similar. Important note: this will not use the internet at all, all of these files will be available locally. There is a lot of material on running queries to servers, but I didn't think that would really apply here. It seems pretty clear that JS has difficulty accessing files client side (which I understand why completely), but I was hoping to find something that worked for the gray zone I'm currently working in since I'm not using servers at all. I know that this is not really the intended use of HTML/JS, but I was hoping that by writing it as an HTML file, it'd be accessible to anyone with a browser. Some of my target computers have odd limitations (such as not being to download .exe files). The code I based my original off of is shown below: Code: <script type="text/javascript">
var conn = new ActiveXObject("ADODB.Connection")
conn.Open ( 'Provider=Microsoft.Jet.OLEDB.4.0;Data Source=C:\full\path\to\MyExcel.xls;Extended Properties="Excel 8.0;HDR=Yes;IMEX=1";)';
var sql = "SELECT * FROM [nameOfSheet$]";
var rs = conn.execute( sql )
while ( ! rs.eof )
{
// just an example of dumping everything from the sheet out to the browser:
for ( var f = 0; f < rs.fields.count; ++f )
{
document.write( rs.fields(f).value + "," );
}
document.write("<br>\n");
rs.moveNext();
}
rs.close();
conn.close();
</script><script type="text/javascript">
var conn = new ActiveXObject("ADODB.Connection")
conn.Open ( 'Provider=Microsoft.Jet.OLEDB.4.0;Data Source=C:\full\path\to\MyExcel.xls;Extended Properties="Excel 8.0;HDR=Yes;IMEX=1";)';
var sql = "SELECT * FROM [nameOfSheet$]";
var rs = conn.execute( sql )
while ( ! rs.eof )
{
// just an example of dumping everything from the sheet out to the browser:
for ( var f = 0; f < rs.fields.count; ++f )
{
document.write( rs.fields(f).value + "," );
}
document.write("<br>\n");
rs.moveNext();
}
rs.close();
conn.close();
</script>
Thank you, klarosa I'm trying to accessing the Parent window fom a sub window previously opened using window.open I'm using firebug to t yand debug, and it shows that this DOM entry exists.. window.opener.location.href But trying to access it gives "window opener is null" error I've tried all these, and get the various errors tagged on the end... Code: <script language="JavaScript"> //alert(opener.location); // = opener is null //alert(opener.location.href); // = opener is null //alert(parent.location); // = uncaught exeption - could not convert to javascript argument arg 0 //alert(parent.location.href); // = Permission denied to get property Location.href //alert(parent.opener.location); // = uncaught exeption - could not convert to javascript argument arg 0 //alert(parent.opener.location.href); // = Permission denied to get property Location.href //alert(parent.window.opener.location.href); // = Permission denied to get property Location.href //alert(parent.window.opener.location.href); // = Permission denied to get property Location.href //alert(window.opener.location); // = window opener is null //alert(window.opener.location.href); // = window opener is null //alert(window.parent.location); // = uncaught exeption - could not convert to javascript argument arg 0 </script> driving me crazy! Anyone have a solution? 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 I have developped a script in order to resize the height of a div on a web page in order to display it at least up to the size of the window. Here is the code: function resize(){ var frame = document.getElementById("content"); var padding_top = parseInt(window.getComputedStyle(frame,null).getPropertyValue("padding-top")); var padding_bottom = parseInt(window.getComputedStyle(frame,null).getPropertyValue("padding-bottom")); var padding = padding_top + padding_bottom; var bodyheight = document.body.scrollHeight; var windowheight = window.innerHeight; if (bodyheight < windowheight){ frame.style.height = windowheight - padding + "px"; } } It works well, but I was wondering why I am not able to get the padding-top and -bottom using these two instructions: var padding_top = frame.style.paddingTop; var padding_bottom = frame.style.paddingBottom; The script runs but Firebug shows empty strings for both values. How come? Is there a bug in Firefox? Thanks inadvance for your time and help. i have this code: PHP Code: <?php foreach ($freechat_list as $r) { $uniqueCode = substr($r,0,12); $id = substr($r,13); $blocked_record = RcBlockListTablePeer::isBlocked($id,$requestor_id); ?> <a href="#" id="profilelink" name="profilelink" onClick="return viewornot(<?php echo $id."/".$blocked_record; ?>)"><?php echo $uniqueCode; ?></a> } then i have my JS: [CODE] thank you all but i am totally confused now...here is my full code: <?php foreach ($freechat_list as $r) { $uniqueCode = substr($r,0,12); $id = substr($r,13); $blocked_record = RcBlockListTablePeer::isBlocked($id,$requestor_id); ?> <a href="#" id="profilelink" name="profilelink" onClick="return viewornot(<?php echo $id."/".$blocked_record; ?>)"><?php echo $uniqueCode; ?></a> } my JS: Code: function viewornot(id)
{
alert(id);
}
alert(id) only gives me the id but in my href i concatenated it with blocked_record: viewornot(<?php echo $id."/".$blocked_record; ?>) please help? What i have is a system where the amount of HTML lines is generated by php when the page loads. Each time has exactly the same set up except there names have an int added to them in accending order. What i need is for them to pass a variable to the javascript function telling them what number they are, and the javascript then using this to access it to read and change information. Is the line below correct for this task? Code: document.Purchase.(Tax+i).selectedIndex; I have a problem with adding new inputs to a form (if and when required), Internet Explorer is fine but in Firefox if any previous input fields are filled when the more button is clicked they get reset to blank. JS: Code: fields = 0;
function addInput() {
if (fields != 100) {
document.getElementById('input').innerHTML += "<input type='text' name='input[]' size='30' />";
fields += 1;
} else {
document.getElementById('input').innerHTML += "<br />Maximum 100 fields allowed.";
document.form.add.disabled=true;}
}
form: Code: <form action="index.php" method="post"> <div id="input"> <input type="text" name="input[]" size="30" maxlength="15" /> </div> <!-- button --> <div id="more"> <input type="button" onclick="addInput()" name="add" value="More" /> </div> <!-- // button --> <input type="submit" name="submit" value="Submit" /> </form> as usual any help is appretiated .. I am thinking this should be fairly easy but yet I am not getting far. I want to have a form with a single text imput field for a zip code. Depending on which zip code the user enters will determine which url they will be sent to. If they enter a zip code which is not in the script, they would be sent to a default url. I am also assuming this can be accomplished with javascript. Any help is greatly appreciated. So I'm pretty much new to JS, and I'm trying to write something, and I'm having a problem. It's a color picker. So I have an object that defines the default color, and then when the color is updated, the different css classes need to be updated as well. So here's what I was trying to do Code:
var colorPicker = {
mainColor: "red",
backgroundColor: this.mainColor + "bkgd",
}
So problem 1 is I keep getting "undefined" returned for "this.mainColor". If I use colorPicker.mainColor, it hasn't been created yet so it throws an error. Problem two is if I update mainColor from another function, say to make mainColor = "green", then backgroundColor doesn't automatically update. Any help is appreciated. Thanks hi i am using apache htpasswd basic authentication password file. my web site is working well. when i give url in browser a dialogue box will appear for user id and password and in case of correct userid and password, home page of my web site opens. but problem is, i have more then one users and i want to get user id, who log in and I wants to print user id on home page at run time in java script because my web site is simple html web site. it is not form base authentication so how is possible to get user id. kindly help me . thanks and regards, Muhammad Akmal Hello, I'm trying to write a script for a website that reads from a database and makes a separate table for each entry in the database. Since the number of entries can change, I want to dynamically create a div for each one, which I can later hide or display based on user selection. However, when I try to access the dynamically created elements by their ID, they return null. Is what I'm trying to do here actually possible? Code: for(var i = 0; i < tables.length; i ++)
{
var newDiv = document.createElement("div");
newDiv.setAttribute("id", tables[i].name);
newDiv.setAttribute("name", tables[i].name);
newDiv.setAttribute("class", "hidden");
newDiv.innerHTML += tables[i].name;
newDiv.innerHTML += "<table id = 'table"+tables[i].name+"' border = '1'>";
newDiv.innerHTML += "<tr>";
for(var rows = 0; rows < table.arrayOfFields.length; rows++)
{
newDiv.innerHTML+="<th>"+table.arrayOfFields[rows].title+"</th>";
numOfEntries = table.arrayOfFields[rows].arrayOfEntries.length;
}
newDiv.innerHTML+="<tr>";
for(var cols = 0; cols < numOfEntries; cols++)
{
for(var rows = 0; rows < table.arrayOfFields.length; rows++)
{
newDiv.innerHTML+="<td>"+table.arrayOfFields[rows].arrayOfEntries[cols].data+"</td>";
}
newDiv.innerHTML+="<tr>";
}
newDiv.innerHTML+="</table>";
document.body.appendChild(newDiv);
}
Hi All, Am new to Javascript but fluent in C++ and other languages, I have a query, i made a global variable to hold string information, can the value of this string be assigned to a form input field value? I mean in the 'default value sense' I am just wondering if there is any syntax to accomplish this. EG in my javascript i have the string nameVal; It is a global variable, i would like to know if it is poosible access its value for use in the line below shown with italics, or is it basically always a case of 'type the value in manually yourself' and then rely on events functions to update the field thereafter? Code: Name: <br><input type = "text" name = "nameField" size = "50" value = my string val here onChange ="this.value=storeVal(this.value, '0')"></input></br> |
|||||||