JavaScript - Document.getelementsbyname(id) Gives Error 'undefined'
I am trying to add a green tick or red cross to my form so that the user will know if they have filled out the form correctly before submitting it and getting told that they need to fill out this or correct that.
I have added NAME to each form field and have been using this to read the content but for some reason I am unable to read what is in the field I get the error, 'undefined'. this is what code I have started on... Code: function checkValidFormInput(id, noCheck) { if (noCheck == '') { var idValue = document.getElementsByName(id); if (id == 'customerName') { alert(id); alert(idValue.value); if (idValue != '') { document.getElementsByName(id + 'Img').innerHTML = '<img alt=/"/" src=/"/">'; } } if (id == 'customerEmail') { if (idValue != '') { document.getElementsByName(id + 'Img').innerHTML = '<img alt=/"/" src=/"/">'; } } } } my code is still in the early stages and is missing the other parts to place a red cross, as the moment i am working on placing the green tick. Can anyone spot what I have wrong in my code that is causing it not to read the form field. my form field is coded as so.. Code: <li class="value"> <input type="text" autocomplete="off" name="customerName" value="<?=$fullname;?>" style="width: 200px;" onChange="checkValidFormInput(this.name, '');"> <div style="float: left;" id="customerNameImg"></div><br style="clear:both"> </li> Similar TutorialsI am trying to pass two inputs one hidden one text to php using document.getelementsbyname(). The hidden input is in a php array, the text input is a user typed input. When ever I pass it to php it always pulls the first item in the array. So even if I click "View" on the 3rd item in my array it will still show the two inputs from my first item in the array. Here are my html input fields followed by java function followed by submit. How do i get it to send the proper information and not the first item in the array. Code: <input name="imageNumber" type="hidden" value="<? echo $imageNumber; ?>.png"> <input type="text" name="imprint" value="" size="40"> <script> function passImprint() { imageNumber = (document.getElementsByName("imageNumber")[0].value); imprint = (document.getElementsByName("imprint")[0].value); urlString = "imprint.php?imprint=" +imprint + "&imageNumber=" +imageNumber; window.open(urlString,"width=640,height=295"); } </script> <input type="button" value="View Imprint" onClick="passImprint();"> I have to update the rowid(assigned to checkbox) whenever the textbox value is updated and this needs updating value of document.getElementsByName('rf_select[]') when checkbox value matches the textbox id. There can be mutliple number of rows each with a uniqueID (checkbox value) that matches with the textboxID onload. Code :- <td align="center"><input type='checkbox' name='rf_select[]' id='rf_select' value="rowId" CHECKED border="none"/> <td align="left"><input type='text' name='policy_no' id="rowId" size='25' value="test" onBlur=handleRowId('policy_no'); /></td> <script language="javascript"> function handleRowId(){ var arr = new Array(); var rowarr = new Array(); arr = document.getElementsByName('policy_no'); rowarr = document.getElementsByName('rf_select[]'); for(var i = 0; i < arr.length; i++) { var obj = arr.item(i); //alert(obj.id + " = " + obj.value); for(var j=0; j< rowarr.length; j++){ if(rowarr[j].value == obj.id){ document.getElementsByName('rf_select')[j].value = rowarr[j].value+"#@#"+obj.value; } } } } </script> I am having problem assigning values here - document.getElementsByName('rf_select')[j].value = rowarr[j].value+"#@#"+obj.value; Any help is appreciated. Getting a document.form is undefined when calling this select onchange event Code: function submitShipMethodChange(form,field){ if(document.form['shipform'].elements['shipping_method']){ var fldIndex = form.elements[field].selectedIndex; var selectedMethod = form.elements[field].options[fldIndex].value; document.forms['shipform'].elements['shipping_method'].value = selectedMethod; document.forms['shipform'].submit(); } } <select name="shipping_method" onChange="submitShipMethodChange(this.shipform,'shipping_method');"> Hi coders, I have an .asp page on which you can change the background picture of a cell by simply selecting the desired color from a dropdown field. When running the page in Firefox its Error console tells me the following: Error: document.getElementById.bgtd is undefined Source File: [localhost...] Line: 29 Here is the code: <select name=ADDITIONALINFO1 ID="Select1" onchange="changebg(document.forms[0].ADDITIONALINFO1[document.forms[0].ADDITIONALINFO1.selectedIndex].value)"> <option value="White"> White <option value="Black"> Black <option value="Blue"> Blue </select> And here is the changebg script: function changebg(color){ if (color=="Black") document.getElementById("bgtd").background = "img/bg-tshirt5.jpg"; else if (color=="Blue") document.getElementById("bgtd").background = "img/bg-tshirt_bl.jpg"; else document.getElementById("bgtd").background = "img/bg-tshirt2.jpg"; document.forms[0].bgimg.value = document.getElementById("bgtd").background; } Here is the table where the image is displayed as bachground: <td width="353" background="img/bg-tshirt2.jpg" height="269" id="bgtd"> <p align="center"><font size="1"> <br> <img src="<%=imgSrc%>"></font></td> Internet Explorer does not complain and does the job without any errors. I Could not find out how to make it work also with Firefox. Any comments are appreciated. After some severe experimentation I got to googling for an answer and stumbled upon these forums. So my big question is, is it possible to use getElementsByName() with a variable as the parameter? And if not what is another way I can get at each element based on a variable list of names. Code: var curObjSet = document.getElementsByName(String(idStack[y])).item(0) I'm trying desperately to make my code organic and not to have to hard code field names but without this working its leaving me with out options. Thank you for any time and help provided. - Eric Hi, I'm trying to use the getElementsByName method in a div tag and it's retrning an error. Can anyone suggest how to access it from a javascript function So i 've reviewed my work and can't see what i've done wrong. here is the html <code><html> <head> <title>Javascript Practic</title> <script type="text/javascript" src="Practice.js"> </script> </head> <body> write something here <div id="here"> blue here</div> </body> </html></code> and here is the javascript: <code> window.onload = tryInnerHTML; function tryAlert(){ alert("just trying it out"); } function tryInnerHTML(){ var p = document.createElement('p'); here = document.getElementById("here"); here.style.color = "blue"; p.innerHTML("<b>This is Dynamic</b>"); here.appendChild(p); } </code> firebug is saying the error is p.createElement('p'); but for the life of me I can't guess why any help would be very appreciative. I am trying to build a status string for all the checkboxes on a form. If the checkbox is checked add 127 to the string else add 0 to the string. All works fine until i have just 1 checkbox on the form. I then get an undefined error from alert(checkBoxes.length); Any ideas ? Code: HTML <form name="myform" method="POST" action="" onsubmit="return checkTheBox();"> <ul> <li> <input type="checkbox" name="col_box[]" /> </li> <li> <input type="checkbox" name="col_box[]" /> </li> </ul> <input type="submit" value="Submit Form" /> </form> JAVASCRIPT <script type = "text/javascript"> function checkTheBox() { var checkbox_status =""; var checkBoxes = document.myform.elements['col_box[]']; alert(checkBoxes.length); for (i = 0; i < checkBoxes.length; i++){ if(document.myform["col_box[]"][i].checked){ checkbox_status = checkbox_status + "127,"; } else { checkbox_status = checkbox_status + "0,"; } } alert (checkbox_status); } </script> Hi, I'm not sure did I post this to the right area, but here's my problem... Let's make this simple, I am totally newbie in coding. I installed a lightbox patch to FCKeditor, and I tried to modify it a bit so I could add a title into it. I kind of managed but... Here's the html code which I added to the html file: Code: <div> <br /> <input id="txtTitleLightBox" style="width: 100%" type="text" /> </div> And these are the modified codes which I added to the js file: Code: var rel = oLink.rel; if (rel) { var type; if (rel.indexOf("[") > 0) type = rel.substring(0,rel.indexOf("[")); else type = rel; var oE = GetE('rad'+type); if (oE) { GetE('txtTitleLightBox').value= title; GetE('txtGroupLightBox').value= rel.substring(rel.indexOf("[")+1, rel.indexOf("]")); GetE('chkLightBox').checked = true; GetE('rad'+type).checked = true; } } Code: if (GetE('chkLightBox').checked && oLink) { var rel = "lightbox" var rad = document.getElementsByName('radLightBoxType') for (var i=0; i < rad.length; i++) { if (rad[i].checked) { rel = rad[i].value; break; } } oLink.title = title var title = GetE('txtTitleLightBox').value = title; oLink.rel = rel var group = GetE('txtGroupLightBox').value if (group) { oLink.rel += "[" + group + "]" } } And what I added as new code were Code: oLink.title = title var title = GetE('txtTitleLightBox').value = title; and Code: GetE('txtTitleLightBox').value= title; The result is (eg) this kind of html text: Code: <a title="undefined" rel="lightbox" href="image/path"><img width="200" height="113" alt="" src="image/path" /></a> So the title is undefined even if I fill something to the txtTitleJavaScript box... If you want to investigate the full files, they are he http://jump.fm/IYOXH .. thanks :s i am getting an error according to firebug of 'id_con is undefined'.i have made sure all entries are correct and i cannot see how to fix this error. i would be grateful if someone could show me how to correct this error. the error is occuring on this line: Code: itemlist+= items[i].id_con.substr(3)+","; Code: <script src="js/jquery.js"></script> <script src="js/flexigrid.js"></script> <link rel="stylesheet" href="css/flexigrid/flexigrid.css" type="text/css" /> <script type="text/javascript"> $(function() { $("#flex1").flexigrid( { url: 'staff.php', dataType: 'json', colModel : [ {display: 'ID', name : 'id_con', width : 40, sortable : true, align: 'left'}, {display: 'Name', name : 'name_con', width : 150, edit: true, sortable : true, align: 'left'}, {display: 'Email', name : 'email_con', width : 150, sortable : true, align: 'left'}, {display: 'Phone', name : 'phone_con', width : 250, sortable : true, align: 'left'}, {display: 'Mobile', name : 'mobile_con', width : 150, sortable : true, align: 'left'}, {display: 'Fax', name : 'fax_con', width : 150, sortable : true, align: 'left'}, {display: 'Notes', name : 'notes_con', width : 250, sortable : true, align: 'left'} ], buttons : [ {name: 'Add', bclass: 'edit', onpress : test}, {separator: true}, {name: 'Edit', bclass: 'edit', onpress : test}, {separator: true}, {name: 'Delete', bclass: 'delete', onpress : test}, {separator: true} ], searchitems : [ {display: 'Name', name : 'name_con', isdefault: true}, {display: 'Email', name : 'email_con'} ], sortname: "id_con", sortorder: "asc", usepager: true, title: "Staff", useRp: true, rp: 10, showTableToggleBtn: false, resizable: false, autowidth: true, autoheight: true, singleSelect: true } ); }); function test(com,grid) { if($('.trSelected',grid).length>0){ if(confirm('Delete ' + $('.trSelected',grid).length + ' items?')){ var items = $('.trSelected',grid); var itemlist =''; for(i=0;i<items.length;i++){ itemlist+= items[i].id_con.substr(3)+","; } $.ajax({ type: "POST", dataType: "json", url: "delete1.php", data: "items="+itemlist, success: function(data){ alert("Query: "+data.query+" - Total affected rows: "+data.total); $("#flex1").flexReload(); } }); } else if (com=='Add') { alert('Add New Item'); } else if (com=='Edit') { alert('Edit Item'); } } $('b.top').click ( function () { $(this).parent().toggleClass('fh'); } ); } </script> Without elaboration plz see my code: Code: <body> <script> var b="s"; </script> <button target="_blank" onclick="window.open('http://......php?b="javascript:document.write(b);"&id=2&q=<?php print $_GET['q']; ?>','1','');return false;">xyz</button> </body> i don understand why this javascript:document.write(b); doesnt work in url... i know its simple yet it make my hair out of my head. plz count it.. Hi Coders, I have a javascript function which lets a user to choose one of the 7 option buttons on a "mainsub.asp" page and the page will then be forwarded to one of the 7 process pages depending on what has been chosen. The problem is that firefox is angry with the first line ("if" statement) and tells the following in its error console: Error: document.forms[0].C1 is not a function Source File: [localhost...] Line: 117 Here is the code: function fSubmit(){ if (document.forms[0].C1(0).checked) document.forms[0].action="process.asp"; else if (document.forms[0].C1(1).checked) document.forms[0].action="process1.asp"; else if (document.forms[0].C1(2).checked) document.forms[0].action="process2.asp"; else if (document.forms[0].C1(3).checked) document.forms[0].action="process3.asp"; else if (document.forms[0].C1(4).checked) document.forms[0].action="process4.asp"; else if (document.forms[0].C1(5).checked) document.forms[0].action="process5.asp"; else if (document.forms[0].C1(6).checked) document.forms[0].action="process6.asp"; else document.forms[0].action="process.asp"; return; } Internet explorer does not complain about anything and does its job great. But I could not figure out how to change the code to be also compliant with Firefox? Thanks for all the comments. We use Microsoft Dynamics CRM, which allows you to use JavaScript on your forms (as it's a web-based solution). I created my very first, very simple script, which just checks to see if a Field is popluated, and if it is, a pop-up window appears. However, I keep getting this error: "Error:'Form_OnLoad' is undefined" This is my Code Code: // ------------- // // Microsoft Dynamics CRM 2011 JavaScript // Name: Account Pop-up // Modified: 29 October 2014 // ------------- // function Form_OnLoad() { GetValueFromCRMField(); } function GetValueFromCRMField() { //Get the Value of Alert and Set to a Variable var getSubject = Xrm.Page.getAttribute("bitc_Alert").getValue(); // If the Subject Field is Populated if (getSubject == true) //Pop-up Window in CRM alert(getSubject); } Can anyone see what I've done wrong. I must have scanned this a dozen times, and I'm going cross-eyed. Thanks in advance for any insight or help. Brian Hi All, In one of my php page I have a form where I am displaying a table. The First row is having the drop down and the second row is a text field. Now the problem is that based on the drop down value choosed I have to set some field in text field. For this I am calling a javascript function but when I am trying to set the value in the text field which is still not into picture when this function is called it is showing the error that the field is not defined. Can Anyone tell how I can get access to a field which is yet not defined. I even tried to make a hidden field before drop down and tried to set some value for that still I am facing the same problem. Can anyone help me out ... Hi, first post here. I was working on code for opening a link in a new window when clicked. I read somewhere that it's a good idea to remove all of the javascript elements from the HTML. So I pieced it together and it works. But I get the following error in IE8: Code: Message: 'document.getElementById(...)' is null or not an object Here's the relevant HTML: Code: <a href="http://www.samplesite.com" id="sampleid">Sample Text</a> And here's the relevant javascript that I put in a seperate .js file: Code: function samplefct() { window.open(this.href);return false; } window.onload = function() {document.getElementById("sampleid").onclick = samplefct; } The code does work as planned. But I'd still like to get rid of the error. Can anybody think of a different way of stating the javascript that would perform the same thing and lose the error? Any help would be greatly appreciated. Thanks! IB Hello, can you tell me why this code gives me undefined error? You can see the code in action he open this link http://www.w3schools.com/cn/html/try...=tryhtml_basic and paste this code on the left side of the webpage, then press 'edit and click me' heres the full code: Code: <html><head><title>eink</title></head> <body onload="aaa()"> <script type="text/javascript"> function aaa() { var word2 = document.getElementById('word'), letters = word2.innerHTML.split(''), spanified; for (var k = 0, j = letters.length; k < j; k++) { spanified += '<span class="style101">' + letters[k] + '</span>'; } word2.innerHTML = spanified; } </script> <style type="text/css"> .style101 { background-color: #FF0000; } </style> <h1 id="word">HOUSE</h1> </body> </html> Here is a picture, of how it looks: I have a webpage that gives a quote (simple math). I recently revamped my entire website and when I went to place the page into the new site it will not work. It seems to not be doing anything at all. the page is at www.rwinvite.com/quote.html it uses quote.js which is in the same directory with the page. the html and js code is long, not complicated, but there are a lot of variables. This was working before I had the website redone, but I have no idea. I did run firebug and it tells me... frm is undefined calc()quote.js (line 6) onclick()quote.html (line 1) [Break on this error] var n1 = frm.envelope.options[frm....x].value; if (isNaN(n1)) { n1 = 0; } (line 6) But in line 3 & 4 I have function calc(){ var frm = document.form1; doesn't that define the form? I have a bug that is only seeming to effect IE 8:. It seems to have a problem with this line: theSelectBox.selectedIndex = -1; This is where my full page is: http://www.mauirealestate.net/advancedsearch-rets.php Also has a weird display issue in IE8, but not in "compatibility view", which the bug may fix. Works and looks beautiful is Safari and Firefox. Any suggestions are helpful. Hello, I am trying to add a simple script to my CSS menu for a little bit more eye candy. However, when I add the script - it causes issues in my online store (ex; the javascript-powered one page checkout stops working). Here is the exact error from the error console: Quote: Error: jQuery.validator is undefined Source File: https://www.gem-tech.com/store/pc/onepagecheckout.asp Line: 288 And here is the exact script: Quote: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script type="text/javascript" src="jquery.hoverIntent.minified.js"></script> <script type="text/javascript"> $(document).ready(function() { function megaHoverOver(){ $(this).find(".sub").stop().fadeTo('fast', 1).show(); //Calculate width of all ul's (function($) { jQuery.fn.calcSubWidth = function() { rowWidth = 0; //Calculate row $(this).find("ul").each(function() { rowWidth += $(this).width(); }); }; })(jQuery); if ( $(this).find(".row").length > 0 ) { //If row exists... var biggestRow = 0; //Calculate each row $(this).find(".row").each(function() { $(this).calcSubWidth(); //Find biggest row if(rowWidth > biggestRow) { biggestRow = rowWidth; } }); //Set width $(this).find(".sub").css({'width' :biggestRow}); $(this).find(".row:last").css({'margin':'0'}); } else { //If row does not exist... $(this).calcSubWidth(); //Set Width $(this).find(".sub").css({'width' : rowWidth}); } } function megaHoverOut(){ $(this).find(".sub").stop().fadeTo('fast', 0, function() { $(this).hide(); }); } var config = { sensitivity: 2, // number = sensitivity threshold (must be 1 or higher) interval: 100, // number = milliseconds for onMouseOver polling interval over: megaHoverOver, // function = onMouseOver callback (REQUIRED) timeout: 500, // number = milliseconds delay before onMouseOut out: megaHoverOut // function = onMouseOut callback (REQUIRED) }; $("ul#topnav li .sub").css({'opacity':'0'}); $("ul#topnav li").hoverIntent(config); }); </script> I believe there is some sort of conflict? Not sure though. Any input on this? Thanks, Hey this is my java script it works fine in FF , but in IE it shows type mismatch error .It shows my innerhtml page and also runs my script but i want to remove the type mismatch error would really appreciate your help.Thank you . Here is my javascript function function submitForm(){ // create request var xmlhttp = null; var serverhttp=null; if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); serverhttp=new XMLHttpRequest(); if ( typeof xmlhttp.overrideMimeType != 'undefined') { xmlhttp.overrideMimeType('text/xml'); serverhttp.overrideMimeType('text/xml'); } } else if (window.ActiveXObject) { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); serverhttp = new ActiveXObject("Microsoft.XMLHTTP"); } else { alert('Perhaps your browser does not support xmlhttprequests?'); return; } // submit in JSON notation var email = document.customer.elements[0].value; var companyName = document.customer.elements[1].value var input = '{email:"'+email+'",company_name:"'+companyName+'"}'; var url = "URL"; var cgi = "URL/script.cgi"; xmlhttp.open('POST',url,true); //serverhttp.open('POST',url,true); // show feedback xmlhttp.onreadystatechange = function (aEvt) { var newDiv = document.createElement("div"); newDiv.innerHTML = "<b>Thank You!</b>"; //type mismatch occures over here document.body.replaceChild(newDiv,document.customer); serverhttp.open('POST',cgi,true); serverhttp.send(companyName); } xmlhttp.send(input); } |