|
JavaScript - Document.form Is Undefined
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');">
Similar TutorialsI 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> 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. So I've got an order form that uses javascript to immediately calculate the price as soon as you enter the quantity that you want to order: Code: <form method="post" action="submitted.html" name="form">
<table id="order-table">
<tr>
<td>Widgets</td>
<td><input type="text" name="quantityWidgets" onchange="calculate()"></input></td>
<td> x </td>
<td>$650</td>
<td>=</td>
<td><input type="text" name="totalWidgets" disabled="disabled"></input></td>
</tr>
</table>
</form>
And here's the Javascript Code: function calculate(){
total = document.form.quantityWidgets.value * 650;
document.form.totalWidgets.value = total;
}
But that's just for 1 row and I have several rows of products. I could just use a different calculate() function for each row, but I'm trying to pass arguments into calculate() AND make it display the result in the proper place, but my syntax must be wrong. Code: ...
<td><input type="text" name="quantityWidgets" onchange="calculate(quantityWidgets, 650, totalWidgets)"></input></td>
...
function calculate(quantity, price, total){
total = document.form.quantity.value * price;
document.form.total.value = total;
}
Can anyone help me please? I'm having a heck of a time getting a code to populate several hidden fields in the following form that I'm extracting from the url. It is posting to the appropriate CGI, however the hidden variables are not submitted. Code: <script type="text/javascript">
str=document.URL;
temp = str.split('//');
temp1 = temp[1];
temp2 = temp1.split('.');
temp3 = str.split('/');
domain = ('http://' + temp3[2]);
returnthanks = (domain);
association = temp2[0];
poibegin = (str.lastIndexOf('/')+1);
poiend = (str.lastIndexOf('.'));
poi = (str.substring(poibegin));
</script><script language="JavaScript" type="text/javascript">
function doSubmit(){
document.w2lForm('00N30000004C6Rg').value=association;
document.w2lForm.('00N30000004C2u2').value=poi;
document.w2lForm.('retURL').value=returnthanks;
document.w2lForm.submit();
}
</script>
<h6 style="text-align: center">Submit your information and a professional will contact you.</h6>
<form method="post" action="https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" name="w2lForm">
<input type="hidden" name="oid" value="005040020320220B3eR" /> <label for="first_name">First Name</label> <input id="first_name" maxlength="40" name="first_name" type="text" /><br />
<label for="last_name">Last Name</label><input id="last_name" maxlength="80" name="last_name" type="text" /><br />
<label for="email">Email</label><input id="email" maxlength="80" name="email" type="text" /><br />
Best Time to Call:<select id="00N30000004NaDm" title="Best Time to Call" multiple="multiple" name="00N30000004NaDm">
<option value="(select at least one)">(select at least one)</option>
<option value="Before 9AM (EST)">Before 9AM (EST)</option>
<option value="9AM to 1PM">9AM to 1PM</option>
<option value="1PM to 6PM">1PM to 6PM</option>
<option value="After 6pm">After 6pm</option>
</select><br />
<input id="00N30000004C2u2" type="hidden" name="00N30000004C2u2" />
<input id="00N30000004C6Rg" type="hidden" name="00N30000004C6Rg" />
<input type="submit" name="submit" value="Submit Request Information" />
</form>
Hi ! i sometimes are able to alter simple javascript, but i need help with the following. MaxMind.com has a javascript or geotargetting. It displays the country where ur at. I need this output in a form, so i can store it in a database. this is the script i use: <script language="JavaScript" src="http://j.maxmind.com/app/country.js"></script> <br>Country Code: <script language="JavaScript">document.write(geoip_country _code());</script> <br>Country Name: <script language="JavaScript">document.write(geoip_country _name());</script> How can i get the country name to be displayed in an input field ? something like: <form name="xx" action="somepage.htm" method="post"> <input type="Text" size="50" name="country" value="country name"> </form> I wanted to know if document.getElementById works while accessing form elements. I tried doing this just for testing purposes This code doesnt work function validateForm() { var val = document.getElementById("id_login").getAttribute("value"); alert(val); return false; } but this does function validateForm() { alert(document.myForm.text_login.value ); return false; } Why doesnt document.getElementByid work with form objects.it works with all non form HTML objects.. What I am wanting to do is have my form open up a new part of the form when the previous sections are filled out. i.e name field shows, when it has content, the next field opens up for it to be filled out, and so on. My code is here and it works ... However, I would like my dynamic table to show on the same page as my body and not on a new blank page. I have created a DIV and try playing around with the document.getElementById('monTab').innerHTML but it's not working out for me ... What am i missing ? Regards, Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>new Script - Javascript Cours 11</TITLE>
<META content="text/html"; charset="UTF-8" http-equiv="content-type">
<SCRIPT type="text/javascript">
function createTable(){
var Etudiant = new Array(Number(prompt("How many Students will you put in ?","")));
document.write("<table border=\"1\">");
for (var i=0; i<Etudiant.length; i++) {
Etudiant[i] = window.prompt("S'il vous plait entrez le nom d'un etudiant " + (i+1) + ".","")
alert("Nice to see you "+Etudiant[i]);
document.write("<td>"+Etudiant[i]+"</td>");
j = parseInt(prompt("Combien de notes voulez vous calculez ?"));
for (h=0;h<j;h++){
notes[h] = parseInt(prompt("S'il vous plait entrez la "+(h+1)+" note de "+Etudiant[i]));
document.write("<td>"+notes[h]+"</td>");
}
document.write("<tr>");
}
document.write("</tr>");
document.write("</table>");
document.getElementById('monTab').innerHTML=Etudiant;
}
</script>
<BODY>
<H1>Combien de note voulez vous cumulez ?</H1>
<br>
<br>
<input type="button" name="btnSubmit" value="TRY IT" onclick="createTable()">
<div id="monTab" size="10"> Content should come here ...Content should come here ...Content should come here ...Content should come here ...Content should come here ...Content should come here ...Content should come here ... </div>
</BODY>
</HTML>
Hi, My webpage can work normally in IE but not in Safari(e.g. when I clicked on some buttons like 'Delete' button, the page opened in Safari stays the same while it should delete the object chosen). When I tried debugging on Safari, after clicking the 'update' button, this message error appeared: "TypeError: Result of expression 'this.form.fireEvent' [undefined] is not a function". I believe this code makes the incompatability between the 2 browser: Code: function DeleteClick()
{
var frmSWO = document.getElementById("form");
var answer = confirm("Do you really want to delete?")
if (answer != 0)
{
frmSWO.action = "/domsWeb/mtd/doms/web/operation/eDepotMNR/controller/manageWorkOrder/DeleteJobOrImage.do";
frmSWO.method = "post";
this.form.fireEvent('onsubmit');
frmSWO.submit();
}
}
Any suggest how should I amend the script for it to work on 2 browser concurrently? Thanks all! Alright so this is my problem. I'm using ajax to validate my form without refreshing the page. Everything works but the message part of my contact form. The name, email, and subject get passed but the message returns back as "undefined". I've looked through some of the older posts with the keyword being undefined and I didn't really find anything that helped. I've been trying to get this working for like days now an I'm sure its something really simple and right under my nose. So I will post my html for the form and the validation code. I want to thank all who help. Here is the HTML Code: <div id="forminfo">
<form name="contact" method="post" action="">
<dl>
<dt id="name"><label for="fName" class="">Name</label></dt>
<dd><input type="text" class="text" name="fName" id="fName" style="width:200px; height:20px;" /></dd>
<label class="error" for="fName" id="fName_error">This field is required.</label>
<dt id="eMail"><label for="email" class="">Email</label></dt>
<dd><input type="text" class="text" name="email" id="email" style="width:200px; height:20px;" /></dd>
<label class="error" for="email" id="email_error">This field is required.</label>
<dt id="subject"><label for="subject">Subject</label></dt>
<dd><input type="text" size="8" maxlength="40" name="subject" id="subj" style="width:200px; height:20px;" class="text" /></dd>
<label class="error" for="subject" id="subj_error">This field is required.</label>
<dt id="comments">Message</dt>
<dd><textarea name="memo" class="text2" id="memo"></textarea></dd>
<dd><input type="submit" class="button" id="submit" name="submit" value="" /></dd>
</dl>
</form>
</div><!--forminfo-->
Here is the JavaScript/AJAX Code: $(function() {
$('.error').hide();
$('input.text-input').css({backgroundColor:"#FFFFFF"});
$('input.text-input').focus(function(){
$(this).css({backgroundColor:"#FFFFFF"});
});
$(".button").click(function() {
// validate and process form
// first hide any error messages
$('.error').hide();
var name = $("input#fName").val();
if (name == "") {
$("label#fName_error").show();
$("input#fName").focus();
return false;
}
var email = $("input#email").val();
if (email == "") {
$("label#email_error").show();
$("input#email").focus();
return false;
}
var subject = $("input#subj").val();
if (subject == "") {
$("label#subj_error").show();
$("input#subj").focus();
return false;
}
var comments = $("input#memo").val();
if (comments == "") {
$("input#memo").focus();
return false;
}
var dataString = 'fName='+ name + '&email=' + email + '&subj=' + subject + '&memo=' + comments;
//alert (dataString);return false;
$.ajax({
type: "POST",
url: "bin/process.php",
data: dataString,
success: function() {
$('.formContainer').html("<div id='message'></div>");
$('#message').html("<h2>Contact Form Submitted!</h2>")
.append("<p>I will be in touch soon.</p>")
.hide()
.fadeIn(1500, function() {
$('#message').append("<img id='checkmark' src='images/check.png' />");
});
}
});
return false;
});
});
runOnLoad(function(){
$("input#fName").select().focus();
});
I found this line in one of the scripts on javascript.kit <code> if(document.layers|| document.getElementById|| document.all) </code> Could someone give me an idea on why this line would be used in a code? Thank you very much I'm working on a website that will basically embed a widget/frame sent by a handler into a user's current page. The user basically adds a script tag to where they would like the HTML to be. The script tag has their settings and is basically a document.write that calls all the code that we want displayed. So here's my problem. We have a map that we need to add in a specific section, and to get the map we have to call another script tag. So we end up having a script tag (map) embedded in another script tag (the code for the widget/frame) or we end up having to document.write inside a document.write. Now this works just fine and as expected in Firefox, Safari, and Chrome. However, Internet Explorer and Opera wait until the first document.write is completely finished before calling the embedded one. Of course the problem with this, is that it takes the map out of the document's flow and just appends it to the bottom left of the page. Since the rest of the page has already been called, there's no way to move the interior "map" script. Any ideas? Basically just trying to figure out how (if even possible) to render an embedded script tag in Internet Explorer and be able to place it properly. I've tried everything that I can think of, including AJAX and Google's unescape script. Any suggestions, I'd greatly appreciate it. Or even if you've encountered a similar problem, and know that it just isn't possible in IE or Opera, that would be fine too. Thanks in advance! Hello, I'm new to Javascript. I know how to make a script that when you click on a button it changes a variable. I also know that with document.write I can express this variable but I do not know how to refresh document.write! For example, if I have a var car =3 and when I click on a button car++ (or increases by 1 so it becomes 4 then 5 and so forth depending how many times you click the button) and I write document.write (car), it only shows the 3 and no matter how many times I click on the button, the 3 doesn't change. How can I get the document.write to show the updated variable? Thanks! So I want to have a button that when I click it will change this variable and that number will change live on the page. I have a html file and a separate javascript file. The html file contains: <input type="reset" id = "resetButton" /> I want a message to pop up if the reset button is pressed. So in the js file I have: document.getElementById("resetButton").onclick = doAlert; doAlert is a function that simply does: alert("Do you want to reset?"); I know my separate js file is linked correctly because if I just put in alert("hello"); in the js file then it works. But if I use the document.getElementById thing in the js file, then there is an error. The error, according to the error console, says that "resetButton" is null. Can someone help me? thanks! btw, I'm totally new to programming...and I need to do this for my homework assignment I'm sorry if this question seem very basic but I just start learning javascript. I would like to display an image but not sure why it is not working. In a nutshell, here's my code Code: <html>
<head></head>
<body>
<script type="text/javascript">
document.writeln("<img src=/"xMark.jpg /" width=25 height=25 >");</script>
</body>
</html>
Hi, I need to open a PDF file via a web page. Basically, I want to have a textbox where I type in a filename and then click submit and it will open that document. For example, I need to open a PDF document... I need to have a text box where I can input "test1" for example, click "GO" and it will add the "C:/test/" + textbox value + ".pdf" and open it in the browser. I could do it in PHP but this is going to run on a local machine with no serverside so I assume JS will be the way forward. Any ideas? Many Thanks MJFCAD What I'm trying to get are the tag ids separately after I call the callback function. I've been racking my brain for far too long on this one. Here is a shorter version of what I have. I'm using the array's length to count and break into their own lines. How do i get all 9 id="hover_[index]" separately using my array length? PHP Code: var info = Array("bla_1", "bla_2", "bla_3", "bla_4", "bla_5", "bla_6", "bla_7", "bla_8", "bla_9"); function callback(results, status) { if (status == myStatus) { for (var i = 0; i < results.length; i++) { send(results[i]); } } } function send(info) { document.getElementById('results').innerHTML += "<div id='hover_"+info.length+"'>Something</div>"; hover_target = document.getElementById('hover_'+info.length);// how do i get all 9 hover_[index] separately? someEvent.addDomListener(hover_target, 'mouseover', function() { // do something }); } Thank you so much in advance, Frank |
|||||||