|
JavaScript - Locating Specific Input Tag Within A Td Tag With No Id And No Name
Ok, here is the scenario...
We have a commercial shopping cart software installed on our website and since it is proprietary, we do not have access to source code. But they do allow you to include custom javascript on the web pages that they generate. What I want to do is add some text after a specifc INPUT tag that appears on the page within a TD tag. The problem is, that they do not have any specifc ID assigned to the INPUT or TD tag, and although the INPUT tag has a name assigned to it, the name is used in other tags as well and is not unique. Below is the code that I used to solve the problem, but I want to know if there is a more efficient way to do it... Basically my code grabs every TD tag on the page, and then loops thru all of them looking for the specifc INPUT tag characteristics and then inserts the text afterwards (it needs to work in both Firefox and IE so you cannot use innerHTML). Thanks in advance for any suggestions! Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
<script type="text/javascript">
function myLoad()
{
var _match = false;
var _tdcells = document.getElementsByTagName('td');
var _len = _tdcells.length;
for (var _i=0; _i<_len; _i++) {
_child = _tdcells[_i].childNodes;
_child_len = _child.length;
for (_j=0; _j<_child_len; _j++) {
if ( (_child[_j].nodeType == 1) && (_child[_j].attributes.getNamedItem('name').value == 'zip_code') && (_child[_j].attributes.getNamedItem('onchange').value == 'zip_changed();') && (_child[_j].attributes.getNamedItem('type').value == 'text') && (_child[_j].attributes.getNamedItem('size').value == '10'))
{
_cell = _i + 1;
alert('Found a match in cell number '+_cell);
_match = true;
var old_node = _child[_j];
var new_node = document.createTextNode(' New Text!');
//Insert Before usually inserts before the element, but using targetElement.nextSibling inserts it after instead!!
_tdcells[_i].insertBefore(new_node, old_node.nextSibling);
}
}
}
if (_match !== true)
{
alert('no match found');
}
}
</script>
</head>
<body onLoad="myLoad();">
<table class="zipncountry" border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<br>
<table border="3">
<tr>
<td>4</td>
<td>5</td>
<td><input type="text" name="zip_code" value="123" size=10 maxlength=20 onChange="zip_changed();"><input type="hidden" name=zip_code value="321" size=10 maxlength=20 ></td>
</tr>
</table>
<br>
<table class="zipncountry" border="5">
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>
Similar TutorialsHi Within a classic asp webform (using vbscript) I would like part of the form (input boxes within table structure) to be specific/displayed depending on the users selection from the combo box in the row above. I think the best solution would be using Javascript can anyone suggest a solution or example code? Many thanks Sarah I have referenced the following thread for ideas on the issue I want solved, but only took it as far as I can. Any help would be great. http://codingforums.com/showthread.php?t=202459 I would like to utilize this script where I could pass the string of words to another page. Meaning, search for the text, actually a word, then take the two words following the searched text and have them passed to the next page...I have tried to "alert" the words, but have no success. I have tried to modify the code using the following, but the result just posts a "-1" in my alert popup. As you can see I modified the code from the original thread in the third block of "for" code. also, I added an "alert" tag. One more thing, I added a function call for the form button. Hope you can help out. The code is below: Code: <script type="text/javascript">
var count = 0;
var itemList = new Array();
var oldText = "";
var rawText = "";
var workText = "";
function highlight() {
// overcome problem in Firefox caused by blank fields
itemList[0] = document.getElementById("txt1").value == '' ? "FireSchmoxStryng" : document.getElementById("txt1").value;
itemList[1] = document.getElementById("txt2").value == '' ? "FireSchmoxStryng" : document.getElementById("txt2").value;
itemList[2] = document.getElementById("txt3").value == '' ? "FireSchmoxStryng" : document.getElementById("txt3").value;
if (count == 0) {
rawText = document.getElementById('subjectMatter');
workText = rawText.innerHTML;
oldText = rawText.innerHTML;
}
else {
workText = oldText;
}
workText = workText.replace(/(\<)/g," $1").replace(/(\>)/g,"$1 ");
for (i=0; i<itemList.length; i++) {
itemList[i]= itemList[i].replace(/^\s+|\s+$/g,"");
var currWord = new RegExp("([\\s\\r\\n\(]*"+itemList[i]+"[\\s,;\.:?!\'\"()-]+)",'gi');
workText = workText.replace(currWord," <span class='highLight'>$1<\/span> ");
}
for (i=0; i<itemList.length; i++) {
var currWord = new RegExp("(\<\/span\>\\s)([0-9a-z%,;:\.?!\"\'()]+\\s)",'gi');
workText = workText.replace(currWord," $1<span class='highLight'>$2<\/span> ");
}
for (i=0; i<itemList.length; i++) {
var currWord = new RegExp("(\\s[0-9a-z%,;.:?!'()]+)(\\s\<span class='highLight'>)",'gi');
workText = workText.replace(currWord," <span class='highLight'>$1<\/span>$2 ");
Text = workText.indexOf(currWord);
var url = "http://www.blank.com/results.php?searched=" + Text;
}
rawText.innerHTML = workText;
count ++;
alert(url);
}
</script>
<style type="text/css">
body {font-family: arial; font-size: 10pt; margin-top: 60px; margin-bottom: 60px; background-color: #f5f5f5;}
.highLight {font-family: arial; font-size: 10pt; color: #00008B; font-weight: bold; cursor: help;}
</style>
</head>
<body>
<form>
First word or phrase to find <input type = "text" id = "txt1" size = "50"><br>
Second word or phrase to find <input type = "text" id = "txt2" size = "50"><br>
Third word or phrase to find <input type = "text" id = "txt3" size = "50"><br><br>
<input type = "button" value = "Highlight Selected" onclick = "highlight()">
<input type = "reset" value = "Reset Form">
<!--<input type = "button" value = "Reset Results" onclick = "document.getElementById('subjectMatter').innerHTML = oldText">-->
<input type = "button" value = "Reset Results" onclick = "highlight()">
</form>
<br>
<div id='subjectMatter'>
Join Chief Economist Mark Zandi and Director of Housing Economics Celia Chen for an introduction to Housing in Crisis: When Will Metro Markets Recover?, a new study that offers a comprehensive look at the near-term prospects for a recovery in housing markets in a recessionary environment. In addition, Dr. Zandi will critique the effectiveness of policy thus far in the housing crisis and discuss additional measures the Obama administration will enact that are assumed in the Moody's Economy.com house price forecast. Key findings:- In about 10% of metro areas, price declines will exceed 30%.
Economic experiments in virtual worlds (or, more generally, virtual economies) have been proposed a number of times and also conducted to some extent. A recent addition to the conducting category is Reciprocity and status in a virtual field experiment by Andreas Nicklisch and Tobias Salz. In their study, the authors conducted a field study in World of Warcraft, seeking to investigate the role of reciprocity, and the effect of status on reciprocity, in employment relations. Reciprocity here means the observed tendency to react kindly to kind actions, even though such reactions are not enforced. Unlike previous economic experiments conducted in virtual worlds, the authors did not create an artificial setup for the experiment. Below, I summarize and briefly discuss the study and its findings. Economic experiments in virtual worlds (or, more generally, virtual economies) have been proposed a number of times and also conducted to some extent. A recent addition to the conducting category is Reciprocity and status in a virtual field experiment by Andreas Nicklisch and Tobias Salz. In their study, the authors conducted a field study in World of Warcraft, seeking to investigate the role of reciprocity, and the effect of status on reciprocity, in employment relations. Reciprocity here means the observed tendency to react kindly to kind actions, even though such reactions are not enforced. Unlike previous economic experiments conducted in virtual worlds, the authors did not create an artificial setup for the experiment. Below, I summarize and briefly discuss the study and its findings.
</div>
</body>
</html>
Another thing that has been driving me crazy is that css positioning is handled differently by different browsers. JS is not my area, but I can do a lot with CSS, and I do, but cross browser compatibility is killing me. I can use an IF IE statement and only IE runs that segment of code, but I haven't been able to figure out out how to make ONLY firefox or ONLY opera or safari enact an encapsulated segment of code. The same type of IF statement doesn't work for them. Is there a single method using JS that works for all browsers? Thre is probably a very simple answer and I am just missing it somehow. 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. Hi, i want to set an input value to the same value as the input selected from another input on the same form so when the user selects input 1 i want the hidden input2 to get the same value im guessing i use onsubmit because its hidden so there wont be a focus or blur this would be part of the input Code: onsubmit="(this.value = this.othervalue)" othervalue being the other input name="othervalue" is that the correct syntax Hi, i have an input value array for customer ids, i also need to make a copy of that array into another input element on submit to use for another process. So far here is what i have come up with regarding the js the current html is this Code:
<!-- original input -->
<input id="cb<?php echo $i;?>" name="cid[]" value="<?php echo $commissions[$i]['id'];?>" onclick="isChecked(this.checked);" type="checkbox" />
<!-- this is new html input which is outside the $i loop that i need a copy of cid[] stored on submit
<input type="hidden" name="ids[]" onsubmit="valueTovalue();" />
<!-- here is the js so far -->
<script type="text/javascript">
function valueTovalue()
{
var valin = document.adminForm.cid.value; //cid is the array cid[]
document.adminForm.ids.value = valin; //copy the array to the new input element array ids
}
</script>
so basically if they click 1 cid then ids will also show 1, if they click all cid then ids will show all as well. will that work the way i have it, am i even close here.. thanks update: what i have seems to work fine for text values or string values but not for arrays, what am i missing that it wont copy an array? Array ( [cid] => Array ( [0] => 1 ) [task] => remarksonly [remark] => hhhyyy [boxchecked] => 1 [ids] => Array ( [0] => ) ) am i getting closer lol Code:
function valueTovalue()
{
var valin = cid.concat;
document.adminForm.ids.value = valin.concat;
return(true);
this has to be close i hope Code: document.adminForm.ids.value = [].concat(document.adminForm.cid); Hey, I'm working on a large demo created with html/css. It has well over a hundred pages with a left column navigation of normal links. I am trying to make this demo product specific with a page asking what product they are using before they enter the demo. Based on the users selection I want to have some of the pages be more product specific with different content and hide some pages. To create this I could just duplicate my html files to have one for each product with its respective navigation (basically resulting in two seperate demos). That however would be a nightmare for future updates. Anyone know how to script this? Any help would be awesome! I am working on a Phonegap app that sends emails that consist of form data that is filled out within the app. I need my app to send the emails which I have sorted out. The second part of the app needs to store the email subject of all the mails that are sent in local storage and then in a separate function needs to output all the saved data and send it. I will post my full code below and comment the important bits. Code: function sendMail(imageURI, click){
var d = new Date();
var dat = d.getDate();
var mon = d.getMonth();
var year = d.getFullYear();
var hours = d.getHours();
var minutes = d.getMinutes();
var seconds = d.getSeconds();
var todayDate = dat+'-'+mon+'-'+year+' | '+hours+':'+minutes+':'+seconds;
var agent = $('#agent').val();
var depot = $('#selection').val();
var date = $('#free').val();
var newURI = imageURI.replace("file:///storage/emulated/0/DCIM/Camera/","");
/* -----> the variable that needs to be stored */ var newFileName = 'N' + result + '_' + agent + '_' + todayDate + '_' + newURI + '_' + depot + '_' + date;
/* -----> storing the variable */ var temp = localStorage.getItem('newFileName');
var somearray=temp.split(',');
somearray_length=somearray.length;
somearray[somearray_length]=newFileName;
var somestring=somearray.join(',');
localStorage.setItem('newFileName',somestring); /* <----- storing the variable */
var largeImage = document.getElementById('largeImage');
largeImage.style.display = 'block';
largeImage.src = imageURI;
cordova.plugins.email.addAlias('gmail', 'com.google.android.gm');
cordova.plugins.email.open({
app: 'gmail',
to: 'blah@gmail.com',
subject: newFileName,
body: '<ul><li style="font-weight:bold;text-decoration: underline;"><b><u>File: </b></u></li><li>'+newURI+'</li><br><li style="font-weight:bold;text-decoration: underline;"><b><u>Agent Name: </b></u></li><li>'+agent+'</li><br><li style="font-weight:bold;text-decoration: underline;"><b><u>Next Scheduled Date: </b></u></li><li>'+date+'</li><br><li style="font-weight:bold;text-decoration: underline;"><b><u>Scanned: </b></u></li><li>'+todayDate+'</li><br><li style="text-decoration: underline;font-weight:bold;"><b><u>Depot: </b></u></li><li>'+depot+'</li></ul>',
attachments: [imageURI],
isHtml: true
});
};
/* -----> The second function */ function endOfDay(data){
var d = new Date();
var dat = d.getDate();
var mon = d.getMonth();
var year = d.getFullYear();
var hours = d.getHours();
var minutes = d.getMinutes();
var seconds = d.getSeconds();
var todayDate = dat+'-'+mon+'-'+year+' | '+hours+':'+minutes+':'+seconds;
ending=localStorage.getItem('newFileName');
var salesman = $('#agent').val();
var newsFileName = 'End of Day Report for Agent: ' + salesman + '|' + todayDate;
cordova.plugins.email.addAlias('gmail', 'com.google.android.gm');
cordova.plugins.email.open({
app: 'gmail',
to: 'seth.v.staden@gmail.com',
subject: newsFileName,
body: 'end of day report: <br>' + ending,
isHtml: true
});
localStorage.setItem('newFileName','');
};
my problem is that instead of outputting all the sent subjects that have been stored like so: "subject 1, subject 2, subject 3, etc..." it is outputting it as the latest mail that was sent, i.e. "subject 3, subject 3". I have no clue why this is going wrong or how to fix it... any help would be greatly appreciated. Reply With Quote 01-15-2015, 11:13 PM #2 Old Pedant View Profile View Forum Posts Supreme Master coder! Join Date Feb 2009 Posts 28,311 Thanks 82 Thanked 4,754 Times in 4,716 Posts Instead of doing all this tortu Code: var temp = localStorage.getItem('newFileName');
var somearray=temp.split(',');
somearray_length=somearray.length;
somearray[somearray_length]=newFileName;
var somestring=somearray.join(',');
localStorage.setItem('newFileName',somestring);
Why not simply do Code: localStorage.setItem('newFileName', localStorage.getItem('newFileName') + "," + newFilename );
Though I admit I don't see why your code won't work. It just causes a bunch of unneeded overhead. ********** COMMENTARY: I think your dates will be unreadable by humans. var mon = d.getMonth(); That will get a ZERO for January, 1 for February, etc. For human readable, you should do var mon = d.getMonth() + 1; I am having a problem with my homework displaying an iframe using JavaScript. My homework states: Insert a script element that does the following: part a. Insert the following multiline comment: Display the daily schedule in an inline frame. Daily schedules are stored in the files sunday.html through saturday.htm. part b. Insert a command to write the HTML code <iframe src="weekday.htm'></iframe> to the Web page, where weekday is the text string returned by the weekDay() function. What I have so far: <script type= "text/javascript"> /* Display part a */ document.write("<iframe src='weekday.htm'></iframe">; </script> My Question: How do I display weekday.htm within my script on a specific day using the function weekDay() function. below is my weekDay() function: function weekDay(){ thisDate = new Date(); var thisWDay=thisDate.getDay(); var wdName = new Array("sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"); return wdName[thisWDay]; } Hi all can someone guide me (total JS newbie) on this presumably pretty easy task? I have a "parent" page with some text inputs in it (a form). This is what I am after: -when the user clicks a link it pops open a new window via JS - "child" (this is working). -in the "child" window there are also some text inputs (another form) (done). -when the user changes the value for 'testChild_textInput_4' in the child window, then I want it to automatically set this same value, to effectively overwrite, what is currently in 'testParent_textInput_2' in the parent window. Presumably this involves an onChange event, but it is also OK with me if the needful (the text input's value in the parent window being overwritten) happens upon the child window's form submit. If anyone can show me either trick, I would be thrilled! I set up a test page to make this all easy to talk about: http://www.yellow-turtle.com/testDumpMe_parent.html Please let me know! Thanks! -John I can't seem to find what I need but I know it exists. I trying to find a vertical scroller that will automatically have the text scroll upwards but have an arrow above and arrow below to be able to control the direction of the scrolling text, or a script with no arrows but still allow me to take control by mousing over the text to scroll up or down. Thanks Hi I'm relatively new to Javascript and I'm trying to learn more about dates my problem is as follows I have to do validation on a form for 2 dates(StartDate and EndDate) the dates cannot be more than four months apart if they are an alert must be displayed. In other words Nov 2009 till March 2010 or May 2009 till September 2009 should be invalid regardless of the day of the month Simply 2 input boxes(StartDate and EndDate) and a submit I've got the other parts of my page worked out just this has me stumped I would appreciate any help in this regard Thank You for your time Hello everyone, wondering if I could get some help. I have not done anything with html and javascript until this afternoon and funnily enough I'm struggling a tad I am creating a free website about the dangers of chocolate for dogs. Basically I need a calculator to calculate the toxic amount for the user input of their dogs weight in kgs. I figured doing one for each type of chocolate would be easier than doing something where a box was ticked for each type of chocolate so have been trying to do one for milk chocolate first. This is my feeble attempt, it looks good but doesnt work, my javascript is clearly majorly wrong somewhere! <html> <head> <script language="JavaScript"> function calc(form) { var f = parseFloat(form.kg.value); var T = 0; T = (f/0.45)*28.35; form.answer.value = T; } // done hiding from old browsers --> </script> </head> <body> <FORM> <h2>Toxic dose of milk chocolate</h2> Enter dogs weight in kg: <INPUT NAME="kg" VALUE="0" MAXLENGTH="100" SIZE=25> <p> Click to calculate toxic dose in grammes: <INPUT NAME="calc" VALUE="Calculate" TYPE=BUTTON onClick=kg(this.form)> <p> Toxic amount of milk chocolate is: <INPUT NAME="g" READONLY SIZE=25> </FORM> </body> </html> Can anybody help? Thanks in advance. Is it possible to use Javascript to uncheck all checkboxes that appear within a specific div? I'm already using names/ids for each checkbox, and these are generated dynamically, so I cant really apply a group to all the checkboxes I want to untick. I am looking for a specific JS which calculates the number of pets killed today in CA as well as the amount of taxpayer dollars spent - similar to the ones made for those who have quit smoking, how many cigarettes they have not smoked, how much money they have saved, etc. The starting point would be January 1, 2010 and each day it would take the number of days so far in the year times two known factors. I know the state kills 786 pets a day as well as the daily cost to taxpayers is $392,671. Even two different scripts would work for us. I want to drop this JS or html onto a page similar to the Doomsday clock as a shock value to those who aren't aware of how many pets have had to die so far this year or how many taxpayer dollars were spent to house, feed and adopt and/or kill those pets not adopted in our state. HELP! I know enough JS and HTML to be dangerous (as you can see from our website - http://www.tinylovingcanines.org) so as much as I search and try to build one myself, I can't get seem to make this project work. THANK YOU for any help!!! Hi there! I've been searching for threads to solve my problem but I don't have the knowledge necessary to figure it out (you know, graphic designers....) so your help will be very appreciated!!! Here's the problem : I have a div named "cat" that I want to hide with a Javascript:animatedcollapse (slideup) action. The action is linked externally on another page. This is the line/link that hides it : <a href="javascript:animatedcollapse.hide('cat')">Hide the div<br/> It works fine. But, I want this action to happen at the same time that you press another link (that other link opens a page in an iframe). This is the iframe link : <p><a href="page.html" target="iframe">Open link in iframe</a></p> Both links work fine. But i want to merge the two together. How? Thanks in advance! Hi, I'll explain my situation: I'm completely new to javascript so what i want to do is make a script that shows a specific div when the visitor is at the homepage but hide it when hes in another page of my website. i've read some people trying to explain it to someone else but it seems that i need to learn many aspects of the javascript language to edit it to my needs. I'm a med student and im really tight in my schedule and have almost no extra time to sit and read about javascript just so i can do this one specific thing. Would you please help me out? I've been trying to figure this out on my own for the past 3 days with no success. I will greatly appreciate it if someone helps me. PLEASE... Hi to All, I have two menus, related each other, in this way: <head> var sum_db = new Object() sum_db["email1"] = [{value:"I01 - Problems of one level", text:"I01 - Problems of one level"}, {value:"I02 - Problems RDM", text:"I02 - Problems RDM"}, {value:"Free Text", text:"Free Text "}]; sum_db["email2"] = [{value:"I03 - Various", text:"I03 - Various"}]; // // function setIssue(chooser) { var newElem; var where = (navigator.appName == "Microsoft Internet Explorer") ? -1 : null; var Iss_Chooser = chooser.form.elements["iss_sum"]; while (Iss_Chooser.options.length) { Iss_Chooser.remove(0); } var choice = chooser.options[chooser.selectedIndex].value; var db = sum_db[choice]; if (choice == "email1") { newElem = document.createElement("option"); newElem.text = "Choose an issue ..."; newElem.value = "Choose Issue ..."; Iss_Chooser.add(newElem, where); } for (var i = 0; i < db.length; i++) { newElem = document.createElement("option"); newElem.text = db[i].text; newElem.value = db[i].value; Iss_Chooser.add(newElem, where); if ((choice == "email1") && (db[i].text.indexOf('Free Text')==0)) { document.getElementById("label_des").style.display=""; } else { document.getElementById("label_des").style.display="none"; } } } // </script> </head> <body> <form> <select size="1" name="mess" id="mess" onchange="setIssue(this)"> <option value="email1" selected>email1</option> <option value="email2">email2</option> </select> .... .... <select id="iss_sum" name="iss_sum"> <option value="<%=objRS("Issue_Summary")%>" selected><%=objRS("Issue_Summary")%></option> </select> <label for="iss_des" id="label_des" style="display:none; vertical-align:top">Description:<textarea id="iss_des" name="iss_des"><%=objRS("Issue_Description")%></textarea> </label> My problem is: I would like that if I select ONLY email1 and ONLY the option "Free Text", appears the textarea with label Description. Up to know if one selects email1, automatically the textarea appears near for every option; it seems that the condition of the if is not respected !!! Thanks a lot in advance !!! Hi, Is there away to alternate DIV rows in a specific section. When I try to alternate the DIVs it alternates everything that is a DIV on the page. I want to just alternate a DIV table. Is this possible? Thanks alot Joe |
|||||||