|
JavaScript - Programmatically Submit A Form Inside An Iframe
I have a form inside an iFrame which I want to submit with javascript as the iFrame loads.
For example: Code: <iframe src="......." name="myiframe" id="myiframe"> <form method="post" id="myform" name="myform" action="http:// www.yahoo.com" rel="nofollow" target="_self"> </form> </iframe> No matter how I try to submit the form I cannot get it. I have tried: document.getElementsByName("myform") document.myiframe.myform all other combinations I try gives the same, i cannot access the form. (The page inside the iFrame is from the same domain as the parent page, I am not trying to do any cross domain scripting) Can you please assist me getting this working ? Thanks! Similar TutorialsHi all, I have an iframe on my page and I added the following code to detect the iframe file height to avoid scrolling which is working fine. Code: <script type="text/javascript">
function setIframeHeight(iframeName) {
//var iframeWin = window.frames[iframeName];
var iframeEl = document.getElementById? document.getElementById(iframeName): document.all? document.all[iframeName]: null;
if (iframeEl) {
iframeEl.style.height = "auto"; // helps resize (for some) if new doc shorter than previous
//var docHt = getDocHeight(iframeWin.document);
// need to add to height to be sure it will all show
var h = alertSize();
var new_h = (h-148);
iframeEl.style.height = new_h + "px";
//alertSize();
}
}
function alertSize() {
var myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myHeight = document.body.clientHeight;
}
//window.alert( 'Height = ' + myHeight );
return myHeight;
}
</script>
<body onload="setIframeHeight('ifrm');">
<iframe name="ifrm" id="ifrm" src="http://thirdpartywebsite.com/search.htm" width="948" frameborder="no" scrolling="no" style="margin-top:45px; margin-left:10px; align="center">
</iframe>
There is a form in the iframe and it is coming from a third party web site which I have no access. My problem is when a client submits the search form in the iframe search results page is higher than the search main page and half of search results page is not shown. Is there a way to sense that the page in the iframe is changed and resize the iframe height accordingly? Thanks Ceyhun Hi I have this page below which I run locally that is created dynamically: I need a piece of javascript to focus on the captcha as shown in the image inside the green box. At this minute I have this which doesn't work all that great for some reason but it gets it to the general area... Code: if (( document.URL.indexOf("cast_skills") != -1 ) || ( document.URL.indexOf("security_prompt") != -1 ) || ( document.URL.indexOf("joinraid") != -1 )){
if ( document.forms.length > 0 ) {
document.forms[0].elements[1].focus();
}
}
As I said this does the job to some extent however it does not leave the focus in a perfect position so that the captcha is readable and the text box visible to type in, as illustrated in the red box in the above image. Help with this would be great. Many thanks, David. I use the following code to create a hidden iFrame on a page, dynamically Code: var i = document.createElement('iframe');
i.style.display = 'none';
i.onload = function() { i.parentNode.removeChild(i);};
i.src = 'http://www.mysite.com';
document.body.appendChild(i);
i.id='frame1';
Now, document.getElementById('frame1').contentDocument.getElementById('text01').value Should have given me the value in 'text01', but it doesn't. It doesn't work even inside the iFrame's onload event. ('text01' is a textbox which is on the page inside the iFrame - its name and id are both 'text01') Is there any other method to get the text in a textbox within an iFrame? Please help me to correct the code. Thanks in advance. I save an Access query as an HTML file (query.html) I then load an HTML page (TopStyle.html). This loads the query.html. I want query.html to autoscroll to the end of the page, and then either scroll to the top or just start again. [code] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script type="text/javascript" language="JavaScript" ></script> <title>How to Scroll the Page With JavaScript</title> <meta name="description" content="How to scroll the page automatically using JavaScript." /> <meta name="keywords" content="javascript, page, scroll" /> <script type="text/javascript"> function pageScroll() { window.scrollBy(0,50); scrolldelay = setTimeout('pageScroll()',10000); // scrolls every 1000 milliseconds } </script> </head> <iframe src="file:///D:/PrivateDocs/WorkflowPage/Query1.html" name="frame1" scrolling="auto" frameborder="no" style="float:left" height = "100%" width = "100%"></iframe> <body> <body onLoad="pageScroll()"> </body> </html> [icode] Problem 1 is I can't get the height 100% to work. I get a box about 150px high. Problem two is the main HTML page does a small scroll but how do I get the Query in the Iframe to scroll? All help appreciated. Harle Hello all, i need a help that i have a submit form a iframe. Normally the code process is : Code: <a href="submit_news7c98.html?iframe=true&width=420&height=560" name="submit_news" class='ie6fix' id='submit_news' rel="prettyPhoto">Submit Query</a> Now iframe load and form process to form_process.php and then when i click submit the form process to form_process2.php now i will able to close the iframe after submit. I have tried simple javascript solution like body onload function timer function but they only work with if the open the submit_news7c98.html page direct it is not working when i am opening it as iframe from my site. so anybody can help me on this ? Hi, folks! Having a big issue he i got a code that works fine in Chrome, FF, but seems unreadable by IE. Got a main HTML code that have a DIV tag, declared like this Code: <div id='leframe' style='visibility:hidden'></div> Then, I call, through a Flash file, an external function that says: Code: function loadNextPg(nextPg) {
var varDiv = "<iframe src='pg"+nextPg+".htm'></iframe>";
document.getElementById("leframe").innerHTML = varDiv;
}
}
It would load the HTML named (pg'+nextPg+'.htm), where nextPg is a String value ("01", "02", etc). It works WONDERFULLY in Chrome, FF, etc, but not in IE. Does anyone know if I'm doing anything wrong? Best regards and thanks in advance. Alright so I've been teaching myself php/javascript/html/joomla for the past couple weeks, learning as i go along. So bear with me if i seem like a total moron =p. I'm trying to run a script from a js file to add javascript to the website inside the iframe. I also would like the script to only be activated onclick(this is all in an article). To clarify my website has an iframe and this iframe contains a webpage from http://website987.com/. I want to run thescript.js on the website inside that iframe, to add javascript to that website, however i also only want to run this js file on the click of a link/button. I hope i'm being clear if I'm not please tell me and ill try to reiterate. I've been trying to get this to work for a while now and I feel like this is really simple and I'm asking a stupid question. However this is what I've got so far, currently this just redirects the iframe to the URL with my code on it(instead of actually running it).How could i edit this/what coding could I use to make it so thescript.js actually runs instead of it being just redirected? Reply With Quote Code: <?php $filename = 'thescript.js'; $path = '/media/system/js/'; // add the path parameter if the path is different than : 'media/system/js/' JHTML::script($filename, $path, true); // MooTools will load if it is not already loaded ?> Code: <HTML>
<HEAD>
<script language="javascript">
function loadOne()
{
parent.FRAME1.location.javascript: function('/media/system/js/thescript.js')
}
</script>
</HEAD>
<BODY>
<iframe name="FRAME1" src="http://website987.com/" width="740" height="500" frameborder="0" scrolling="yes"></iframe>
<a href="javascript:loadOne()">Click Here/a>
</BODY>
</HTML>
Am i even on the right track? I've been testing out a billion different codes and I think it would be ridiculous to post them all so I was hoping someone could help me fix this code or at least point me in the right direction. I'm usually able to figure everything out on my own but I'm failing atm and I just need help on this one thing, I would be ever so thankful for any assistance provided, ! (BTW I'm also currently using the Joomla CMS and a joomla plugin called CodeMirror that runs your code directly from the article, not sure if this is relevent or not) I have the following code that use ExtJS (http://www.sencha.com/products/extjs/) to create CSS programmatically. Code: <html>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">
<script type="text/javascript" src="http://extjs-public.googlecode.com/svn/tags/extjs-3.3.1/release/ext-all.js">
<script type="text/javascript">
document.write("<div id=\"myClass0\"></div>");
Ext.onReady(function() {
alert("EXTJS READY!");
var styles = '';
for(var n = 0; n <= 100; n++){
styles += '#myClass' + n + '{' +
'background-image: url(http://www.google.de/images/firefox/spraycan_customize.png);' +
'}';
}
$("#myidd").text(styles);
Ext.util.CSS.createStyleSheet(styles, 'myId');
});
</script>
</html>
However, I don't get it why there is nothing being shown in my web browser. by right, there should be some picture being displayed on my web browser. Appreciate any help offer. Hi, I'm stumped at the moment trying to make something a little like seen on Google Maps where you can search the location in text box and the map corresponding to the location will be dispalyed. Can any one send me the Javascript for the following in which my image is paced in an iframe and the upon entering the loaction in a textbox it image must move to that position witin the iframe. Any help will be appreciated. Regards, Sreejith Hi! I am trying to use a very simpe wysiwyg-editor. It works fine, except i don't know how to proces the data from the iframe. I simply cant make use of the text written. Code: <html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function Init() {
document.getElementById("rte").contentWindow.document.designMode = "On";
}
function doBold() {
document.getElementById("rte").contentWindow.document.execCommand('bold', false, null);
}
function doItalic() {
document.getElementById("rte").contentWindow.document.execCommand('italic', false, null);
}
function doURL() {
var mylink = prompt("Enter a URL:", "http://");
if ((mylink != null) && (mylink != "")) {
document.getElementById('rte').contentWindow.document.execCommand("CreateLink",false,mylink);
}
}
function doImage() {
myimg = prompt('Enter Image URL:', 'http://');
document.getElementById('rte').contentWindow.document.execCommand('InsertImage', false, myimg);
}
</script>
</head>
<body onLoad="Init();">
<input type="submit" name="btnBold" value="bold" on id="btnBold" onClick="doBold();">
<input type="submit" name="btnItalic" id="btnItalic" value="italic" onClick="doItalic();">
<input type="submit" name="btnURL" id="btnURL" value="URL" onClick="doURL();">
<input type="submit" name="btnImg" id="btnImg" value="Image" onClick="doImage();">
<br>
<form action="process.php" method="post">
<iframe name="rte" id="rte"><textarea name="areal"></textarea>
</iframe>
<br>
<input type="submit" value="Submit"></form>
</body>
</html>
Most editors seem use this iframe-thing, without telling how to send the information by a form. This is probable very easy, I've tried with normal html and am unable to get my head around it. I would like to in some way replicate how a web browser works. I have a form entry field with a submit button at the top of the page. Under that I have an iframe. I copy the url http://www.bbc.co.uk into the entry field, click submit and the iframe updates with the website. Have looked around and haven't found anything similar. Code so far.... <form target="myURL"> <input type="text" name="goTo"> <input type="submit" name="submit" value="submit"> </form> <iframe src="" name="myURL" border="0" frameborder="0" width="768" height="354"></iframe> Thanks in advanced. Death = $Mill How to I create the following code... Code: #moving {
position:absolute;
float:right;
top:100px;
left:50px;
}
#movingword {
position:absolute;
float:right;
top:0px;
left:0px;
}
... and this code ... Code: <div id="movingword"> <font color="yellow"><font size="3"><b>This is the place</b></font><br>Welcome!</font> </div> ... programmatically using Javascript? (I will need a X number of "movingwords" and "moving", where X is a number and examples are "movingwords0", "movingwords1", "movingwords2" ... movingwordsX) Here the full code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<title></title>
<style type="text/css">
body {
background-color:#000;
}
#scenery {
position:relative;
}
#moving {
position:absolute;
float:right;
top:100px;
left:50px;
}
#movingword {
position:absolute;
float:right;
top:0px;
left:0px;
}
</style>
<script type="text/javascript">
var t=125;
var l=20;
$(document).ready(function() {
document.getElementById("movingword").style.top = t + "px";
document.getElementById("movingword").style.left = l + "px";
});
</script>
</head>
<body>
<font color=white><h1> Hello World </h1></font>
<div id="scenery">
<img src="http://www.deshow.net/d/file/travel/2009-10/new-zealand-scenery-738-20.jpg" alt="">
<div id="moving">
<img src="http://cdn1.iconfinder.com/data/icons/gloss-basic-icons-by-momentum/32/bullet-yellow.png" alt="">
</div>
<div id="movingword">
<font color="yellow"><font size="3"><b>This is the place</b></font><br>Welcome!</font>
</div>
</div>
</body>
</html>
Hi all, I'm designing something to addon to an existing product. I'm struggling with some javascript problems. I want to submit a hidden field when you click on an image button, rather than it being an actual submit button. It's going to submit the value "1" to a PHP page, but I don't want it to actually have to GO to the PHP page, just submit it within the webpage. Is this possible? Thanks I've literally tried everything. Read 26 tutorials, interchanged code, etc. My validation functions all work. My AJAX functions work (tested manually using servlet URL's). The second servlet validates the reCaptcha form that's generated on my webpage. After the form is validated, even if everything's correct, nothing happens upon clicking submit. I even have an alert pop up if with the captcha result, just for middle-layer debugging purposes. I want to do all of my validation clientside; none serverside. However, going to be tough if I can't get my god damn form to submit. I've been puzzled by this for close to 36 hours straight. I can't see, and I'm going to get some rest and hope that there is some useful insight on my problem when I return. html form: Code: <form id="f1" name="form1" onsubmit="validate_form(this); return false;" action="register" method="post">
<table cellspacing="5" style="border: 2px solid black;">
<tr>
<td valign="top">
<table cellspacing="5">
<tr>
<td>*First name</td>
<td align="right"><span id="valid_one"></span></td>
<td><input type="text" style="width: 320px;" id="fn" name="fn" onBlur="validate_one();"></td>
</tr>
<tr>
<td align="left">*Last name</td>
<td align="right"><span id="valid_two"></span></td>
<td><input type="text" style="width: 320px;" id="ln" name="ln" onBlur="validate_two();"></td>
</tr>
<tr>
<td align="left">*Email address</td>
<td align="right"><span id="result"></span></td>
<td><input type="text" style="width: 320px;" id="mailfield" name="email" onBlur="startRequest();"></td>
</tr>
<tr>
<td align="left">*Phone number</td>
<td align="right"><span id="valid_three"></span></td>
<td><input type="text" style="width: 320px;" id="pn" name="pn" onBlur="validate_three();"></td>
</tr>
<tr>
<td align="left">*City/Town</td>
<td align="right"><span id="valid_four"></span></td>
<td><input type="text" style="width: 320px;" id="c" name="c" onBlur="validate_four();"></td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<select name="s">
<option value="AL">Alabama
<option value="AK">Alaska
<option value="AZ">Arizona
<option value="AR">Arkansas
<option value="CA">California
<option value="CO">Colorado
<option value="CT">Connecticut
<option value="DE">Delaware
<option value="FL">Florida
<option value="GA">Georgia
<option value="HI">Hawaii
<option value="ID">Idaho
<option value="IL">Illinois
<option value="IN">Indiana
<option value="IA">Iowa
<option value="KS">Kansas
<option value="KY">Kentucky
<option value="LA">Louisiana
<option value="ME">Maine
<option value="MD">Maryland
<option value="MA">Massachusetts
<option value="MI">Michigan
<option value="MN">Minnesota
<option value="MS">Mississippi
<option value="MO">Missouri
<option value="MT">Montana
<option value="NE">Nebraska
<option value="NV">Nevada
<option value="NH">New Hampshire
<option value="NJ">New Jersey
<option value="NM">New Mexico
<option value="NY">New York
<option value="MC">North Carolina
<option value="ND">North Dakota
<option value="OH">Ohio
<option value="OK">Oklahoma
<option value="OR">Oregon
<option value="PA">Pennsylvania
<option value="RI">Rhode Island
<option value="SC">South Carolina
<option value="SD">South Dakota
<option value="TN">Tennessee
<option value="TX">Texas
<option value="UT">Utah
<option value="VT">Vermont
<option value="VA">Virginia
<option value="WA">Washington
<option value="WV">West Virginia
<option value="WI">Wisconsin
<option value="WY">Wyoming
</select>
</td>
</tr>
<tr>
<td>
<br>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td><span id="error"></span></td>
</tr>
<tr>
<td valign="top">*Anti-Spam Verification</td>
<td></td>
<td id="reCaptcha"></td>
</tr>
</table>
</td>
<td valign="top">
<table cellspacing="5">
<tr>
<td align="left">*Affiliation</td>
<td align="right"><span id="valid_five"></span></td>
<td><input type="text" style="width: 320px;" id="affl" name="affl" onBlur="validate_five();"></td>
</tr>
<tr>
<td align="left">*Research Area:</td>
<td align="right"><span id="valid_six"></span></td>
<td><input type="text" style="width: 320px;" id="ra" name="ra" onBlur="validate_six();"></td>
</tr>
<tr>
<td valign="top" align="left">*Research Overview</td>
<td align="right"><span id="valid_seven"></span></td>
<td><textarea cols="38" rows="6" id="ro" name="ro" onKeyDown="limitText(this.form.ro,this.form.countdown,500)" onKeyUp="limitText(this.form.ro,this.form.countdown,500)" onBlur="validate_seven();"></textarea></td>
</tr>
<tr>
<td></td>
<td></td>
<td><font size="1">You have <input readonly type="text" name="countdown" size="1" value="500"> characters remaining.</font></td>
</tr>
<tr>
<td align="left">*Talk Availability</td>
<td></td>
<td>
<input type="radio" name="ta" value="In person">In person
<input type="radio" name="ta" value="Online">Online
<input type="radio" name="ta" value="Both" checked>Both
</td>
</tr>
<tr>
<td align="left" valign="top">Links</td>
<td></td>
<td>
<table id="linkTable" border="0">
<td><input type="text" style="width: 320px;" name="link"></td>
<td><div id="result"></div></td>
</table>
</td>
<td align="left" valign="top"><input type="button" value="Add Link" onclick="addLink('linkTable')"></td>
</tr>
<tr>
<td></td>
<td><span style="color: red;"></span></td>
</tr>
</table>
</td>
</tr>
</table>
<br />
<input type="submit" id="submit" name="submit" value="Submit Form">
</form>
Javascript file: Code: /*
* script.js - ajax and table functions
*/
var xmlHttp; // global instance of XMLHttpRequest
var xmlHttp2; // second for captcha functions
var validAjax = new Boolean();
var validCaptcha = new Boolean();
var valid_one = new Boolean();
var valid_two = new Boolean();
var valid_three = new Boolean();
var valid_four = new Boolean();
var valid_five = new Boolean();
var valid_six = new Boolean();
var valid_seven = new Boolean();
function init() {
showRecaptcha('reCaptcha');
// Separate booleans for AJAX funcs
validAjax = false;
validCaptcha = false;
// Booleanse for fields that don't require servlet validation
valid_one = false;
valid_two = false;
valid_three = false;
valid_four = false;
valid_five = false;
valid_six = false;
valid_seven = false;
}
function showRecaptcha(element) {
Recaptcha.create("6Le1a8ESAAAAAGtxX0miZ2bMg0Wymltnth7IG-Mj", element, {theme: "red", callback: Recaptcha.focus_response_field});
}
function validate_form() {
if (valid_one && valid_two && valid_three && valid_four && validEmail) {
startCaptchaRequest();
if (validCaptcha) {
return true;
}
}
else {
alert("Submission contains errors. Please fill out all required fields before submitting.");
return false;
}
}
function validate_one() {
if (document.getElementById("fn").value == 0) {
valid_one = false;
document.getElementById("valid_one").innerHTML = "No";
}
else {
valid_one = true;
document.getElementById("valid_one").innerHTML = "";
}
}
function validate_two() {
if (document.getElementById("ln").value == 0) {
valid_two = false;
document.getElementById("valid_two").innerHTML = "No";
}
else {
valid_two = true;
document.getElementById("valid_two").innerHTML = "";
}
}
function validate_three() {
if (document.getElementById("pn").value == 0) {
valid_three = false;
document.getElementById("valid_three").innerHTML = "No";
}
else {
valid_three = true;
document.getElementById("valid_three").innerHTML = "";
}
}
function validate_four() {
if (document.getElementById("c").value == 0) {
valid_four = false;
document.getElementById("valid_four").innerHTML = "No";
}
else {
valid_four = true;
document.getElementById("valid_four").innerHTML = "";
}
}
function validate_five() {
if (document.getElementById("affl").value == 0) {
valid_five = false;
document.getElementById("valid_five").innerHTML = "No";
}
else {
valid_five = true;
document.getElementById("valid_five").innerHTML = "";
}
}
//
//function validate_six() {
// if (document.getElementById("ra").value == 0) {
// valid_six = false;
// document.getElementById("valid_six").innerHTML = "No";
// }
// else {
// valid_six = true;
// document.getElementById("valid_six").innerHTML = "";
// }
//}
//
//function validate_seven() {
// if (document.getElementById("ro").value == 0) {
// valid_seven = false;
// document.getElementById("valid_seven").innerHTML = "No";
// }
// else {
// valid_seven = true;
// document.getElementById("valid_seven").innerHTML = "";
// }
//}
function addLink(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
element1.name = "link" + rowCount;
element1.style.width = "320px";
cell.appendChild(element1);
}
function limitText(limitField, limitCount, limitNum) {
if (limitField.value.length > limitNum) {
limitField.value = limitField.value.substring(0, limitNum);
}
else {
limitCount.value = limitNum - limitField.value.length;
}
}
function createXmlHttpRequest() {
if(window.ActiveXObject) {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest) {
xmlHttp=new XMLHttpRequest();
}
}
function startRequest() {
createXmlHttpRequest();
var param1 = document.getElementById('mailfield').value;
if (param1 == "") {
validEmail = false;
document.getElementById("result").innerHTML = "Blank";
}
else {
xmlHttp.open("GET", "http://localhost:1979/PolarSpeakers/servlet/mailCheck.do?e=" + param1, true)
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.send(null);
}
}
function handleStateChange() {
if(xmlHttp.readyState==4) {
if(xmlHttp.status==200) {
var message =
xmlHttp.responseXML
.getElementsByTagName("valid")[0]
.childNodes[0].nodeValue;
if (message == "Unregistered") {
validEmail = true;
document.getElementById("result").style.color = "green";
}
else {
validEmail = false;
document.getElementById("result").style.color = "red";
}
document.getElementById("result").innerHTML = message;
}
else {
alert("Error checking e-mail address - " + xmlHttp.status +
" : " + xmlHttp.statusText);
}
}
}
function createCaptchaRequest() {
if(window.ActiveXObject) {
xmlHttp2=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest) {
xmlHttp2=new XMLHttpRequest();
}
}
function startCaptchaRequest() {
alert('made it to captcha requeswt');
createCaptchaRequest();
var param1 = Recaptcha.get_challenge();
var param2 = Recaptcha.get_response();
xmlHttp2.open("POST", "http://localhost:1979/PolarSpeakers/servlet/captchaCheck.do?c=" + param1 + "&r=" + param2, true)
xmlHttp2.onreadystatechange = handleStateChangeCaptcha;
xmlHttp2.send(null);
}
function handleStateChangeCaptcha() {
if(xmlHttp2.readyState==4) {
if(xmlHttp2.status==200) {
var message =
xmlHttp2.responseXML
.getElementsByTagName("result")[0]
.childNodes[0].nodeValue;
if (message == "Valid") {
alert("captcha valid");
validCaptcha = true;
}
else {
document.getElementById("error").innerHTML = message;
validCaptcha = false;
}
}
else {
alert("Error checking captcha validity - " + xmlHttp2.status +
" : " + xmlHttp2.statusText);
}
}
}
I'm a long time lurker on here just barely created an account to ask this question. I work at a call center, and we use different webapps to fill out tickets. One I've used for a long time allows dynamically updating forms with javascript. I have a whole bunch of bookmarked javascript injections like: Code: javascript:if((top.detail.findObj('X31').value="Inquiry")!="");
That code will fill out most everything in that ticket, leaving me to fill in the details. I have one of those for all of the most common tickets, and can create and finish a ticket in less than 30 seconds when it takes others 3-4 minutes. I recently switched to a different system and I'm having trouble with my code. I'm a noob at javascript for sure, but I'm not new to programming. Anyway any pointers would be nice. The system we use doesn't allow me to see the source... I'm not sure how to explain it. It loads everything in a frame. In chrome I can right click then inspect element and get the ID but it the above javascript doesn't work. Examples: Old app source ex: Code: <label for="X31">Category:</label> was all i needed new app(before the body code is just code for the login form, etc): Code: <body onLoad="startit()" onUnload="stopit()">
</body>
<div align="center" valign="center" id="LoadMessageID" style="position: relative; top:40%; color:#0069A5; font-size:100% ;">
<img src="/arsys/shared/images/Progress_NonModal-circle.gif" alt="wait image"/>
Loading...
</div>
</html>
formloader: Code: <form name="form1" action="/arsys/forms/bmcitsm/HPD:Incident+Management+Console/Default+User+View+(Support)/?cacheid=a22a36a8" method="post"> example of inspect element in chrome (something i want to change with javascript injection): Code: <input id="arid301602600" type="text" class="text " style="top:0; left:0; width:225; height:21;" readonly=""> Hi guys, I need to redirect a page to another url when it detects that the page is opened inside an iframe. I need help with this <script > if(location.href != top.location.href){ window.location = 'http://myurl.com' } </script> - check my attachment index.zip Thx. ok, so I have a code where it takes documents and uploads them as soon as selected. I want to know how I can put in my genRandomString() in so that not only will the doc upload, but this random string will submit to database, but I need this string to be the same for all documents that are uploaded on a single page load.....when page refreshes, new string, else it stays the same. I am going to link this number as an id in the database so that it can be identified. does this make any sense at all?????? Code: <?php
function genRandomString($length = 20) {
$characters = '0123456789';
$string ='';
for ($p = 0; $p < $length; $p++) {
$string .= $characters[mt_rand(0, strlen($characters))];
}
return $string;
}
?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Multiple File Upload With Progress Bar - Web Developer Plus Demos</title>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/swfupload/swfupload.js"></script>
<script type="text/javascript" src="js/jquery.swfupload.js"></script>
<script type="text/javascript">
$(function(){
$('#swfupload-control').swfupload({
upload_url: "upload-file.php",
file_post_name: 'uploadfile',
file_size_limit : "9999999999999999999999999999999999",
file_types : "*",
file_types_description : "Image files",
file_upload_limit : 1000,
flash_url : "js/swfupload/swfupload.swf",
button_image_url : 'js/swfupload/wdp_buttons_upload_114x29.png',
button_width : 114,
button_height : 29,
button_placeholder : $('#button')[0],
debug: false
})
.bind('fileQueued', function(event, file){
var listitem='<li id="'+file.id+'" >'+
'File: <em>'+file.name+'</em> ('+Math.round(file.size/1024)+' KB) <span class="progressvalue" ></span>'+
'<div class="progressbar" ><div class="progress" ></div></div>'+
'<p class="status" >Pending</p>'+
'<span class="cancel" > </span>'+
'</li>';
$('#log').append(listitem);
$('li#'+file.id+' .cancel').bind('click', function(){ //Remove from queue on cancel click
var swfu = $.swfupload.getInstance('#swfupload-control');
swfu.cancelUpload(file.id);
$('li#'+file.id).slideUp('fast');
});
// start the upload since it's queued
$(this).swfupload('startUpload');
})
.bind('fileQueueError', function(event, file, errorCode, message){
alert('Size of the file '+file.name+' is greater than limit');
})
.bind('fileDialogComplete', function(event, numFilesSelected, numFilesQueued){
$('#queuestatus').text('Files Selected: '+numFilesSelected+' / Queued Files: '+numFilesQueued);
})
.bind('uploadStart', function(event, file){
$('#log li#'+file.id).find('p.status').text('Uploading...');
$('#log li#'+file.id).find('span.progressvalue').text('0%');
$('#log li#'+file.id).find('span.cancel').hide();
})
.bind('uploadProgress', function(event, file, bytesLoaded){
//Show Progress
var percentage=Math.round((bytesLoaded/file.size)*100);
$('#log li#'+file.id).find('div.progress').css('width', percentage+'%');
$('#log li#'+file.id).find('span.progressvalue').text(percentage+'%');
})
.bind('uploadSuccess', function(event, file, serverData){
var item=$('#log li#'+file.id);
item.find('div.progress').css('width', '100%');
item.find('span.progressvalue').text('100%');
var pathtofile='<a href="uploads/'+file.name+'" rel="nofollow" target="_blank" >view »</a>';
item.addClass('success').find('p.status').html('Done!!! | '+pathtofile);
})
.bind('uploadComplete', function(event, file){
// upload has completed, try the next one in the queue
$(this).swfupload('startUpload');
})
});
</script>
<style type="text/css" >
#swfupload-control p{ margin:10px 5px; font-size:0.9em; }
#log{ margin:0; padding:0; width:500px;}
#log li{ list-style-position:inside; margin:2px; border:1px solid #ccc; padding:10px; font-size:12px;
font-family:Arial, Helvetica, sans-serif; color:#333; background:#fff; position:relative;}
#log li .progressbar{ border:1px solid #333; height:5px; background:#fff; }
#log li .progress{ background:#999; width:0%; height:5px; }
#log li p{ margin:0; line-height:18px; }
#log li.success{ border:1px solid #339933; background:#ccf9b9; }
#log li span.cancel{ position:absolute; top:5px; right:5px; width:20px; height:20px;
background:url('js/swfupload/cancel.png') no-repeat; cursor:pointer; }
</style>
</head>
<body>
<div id="swfupload-control">
<p>Upload upto 5 image files(jpg, png, gif), each having maximum size of 1MB(Use Ctrl/Shift to select multiple files)</p>
<input type="button" id="button" />
<p id="queuestatus" ></p>
<ol id="log"></ol>
</div>
</body>
</html>
Hello everyone! I'm new to javascript (started just yesterday) and I've run to some problems... Code: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="hr" lang="hr">
<head>
<title> Tomislav Paj - studentska web stranica </title>
<link rel="stylesheet" type="text/css" href="moj1.css" />
<script type="text/javascript">
function zbroji(){
var MA1 = document.getElementById("MA1");
var LA1 = document.getElementById("LA1");
var EM1 = document.getElementById("EM1");
var PR1 = document.getElementById("PR1");
var MA2 = document.getElementById("MA2");
var LA2 = document.getElementById("LA2");
var EM2 = document.getElementById("EM2");
var PR2 = document.getElementById("PR2");
zbroj = ( 8*MA1.value + 8*LA1.value + 8*EM1.value + 8*MA2.value + 8*LA2.value + 8*EM2.value ) + 0.5 * ( 6*PR1.value + 6*PR1.value );
UKUPNO.value = zbroj;
}
</script>
</head>
.................
<div class="dd" >
<h2> DiplCalc </h2>
<form>
<pre>
PRVI SEMESTAR
Mat. Analiza 1 <input type="number" class="upis" id="MA1" maxLength=1 size=1 />
Lin. Algebra 1 <input type="number" class="upis" id="LA1" maxLength=1 size=1 />
Elem. Mat 1 <input type="number" class="upis" id="EM1" maxLength=1 size=1 />
Programiranje 1 <input type="number" class="upis" id="PR1" maxLength=1 size=1 />
<br/>
DRUGI SEMESTAR
Mat. Analiza 2 <input type="number" class="upis" id="MA2" maxLength=1 size=1 />
Lin. Algebra 2 <input type="number" class="upis" id="LA2" maxLength=1 size=1 />
Elem. Mat 2 <input type="number" class="upis" id="EM2" maxLength=1 size=1 />
Programiranje 2 <input type="number" class="upis" id="PR2" maxLength=1 size=1 />
<br/>
<input type="button" id="suma" value="UKUPNO" onclick="zbroji()" /> <input type="text" class="ispis" id="UKUPNO" size=5/>
</pre>
</form>
</div>
this should be some kind of tool that helps calculate grad points... nevermind... it was working fine, until I've put it inside <div> block... please hepl!! thank you *edit this is working just fine on Safari and Crome, but fails on Firefox and IE... Hi all I have a form with one or more DIV elements inside it. When I try to count form elements I get result=0? How is this possible? See the example: Code:
<html>
<head>
<script language="javascript">
function Count()
{
alert(document.frm1.elements.length);
for(i=0; i<document.frm1.elements.length; i++)
{
alert(document.frm1.elements[i].name);
}
}
</script>
</head>
<body>
<form id="frm1" name="frm1">
<div id="div1" name="div1">.</div>
</form>
<input type="button" onclick="Count();" />
</body>
</html>
If I put other element (textbox) inside the form, the count result is correct. Is DIV not an element?! How can I count one or more DIV and inner DIV's? Thanks for your help. Z. Hi all, I am building a custom validator. I don't want any suggestions on using a jQuery framework, i just want to ask a few question on how best to continue. Code: <script type="text/javascript">
//Validator Strings And Expressions.
var Letters = /^[A-Za-z]+$/;
var Numbers = /^[0-9]+$/;
var Alphanumeric = /^[A-Za-z0-9]+$/;
var Email = /^[a-z0-9][a-z0-9~_\-]*(\.[a-z][a-z0-9~_\-]*)*@(([a-z0-9][a-z0-9_\-]*\.)+[a-z]{2,4}|[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3})$/i;
var Telephone = "0123456789- +()";
document.onkeyup = function(event){
//IE doesn't pass in the event object
var event = event || window.event;
//IE uses srcElement as the target
var target = event.target || event.srcElement;
var strId = target.id
switch(target.id){
case "M_FIRSTNAME":
validEmpty(strId,"* Please enter your 'First Name'.");
validChars(strId,Letters,"* Your 'First Name' contains invalid characters.");
break;
case "M_LASTNAME":
validEmpty(strId,"* Please enter your 'Last Name'.");
validChars(strId,Letters,"* Your 'Last Name' contains invalid characters.");
break;
case "M_EMAIL":
validEmpty(strId,"* Please enter your 'E-mail Address'.");
validChars(strId,Email,"* Your 'E-mail Address' should be in the format you@email.com.");
break;
case "M_EMAIL_CONF":
validEmpty(strId,"* Please confirm your 'E-mail Address'.");
validMatch(strId,"M_EMAIL","Your 'E-mail Address' does not match.")
break;
case "M_USERNAME":
validEmpty(strId,"* Please enter your 'Username'.");
validChars(strId,Alphanumeric,"* Your 'Username' contains invalid characters.");
validRange(strId,6,12,"* Your 'Username' should be between 6-12 characters.");
OnCheckAvailability(strId);
break;
case "M_PASSWORD":
validEmpty(strId,"* Please enter your 'Password'.");
validChars(strId,Alphanumeric,"* Your 'Password' contains invalid characters.");
validRange(strId,6,12,"* Your 'Password' should be between 6-12 characters.");
break;
case "M_PASSWORD_CONF":
validEmpty(strId,"* Please confirm your 'Password'.");
validMatch(strId,"M_PASSWORD","Your 'Password does not match.'")
break;
}
//document.write(return true);
};
document.onclick = function(event){
//IE doesn't pass in the event object
var event = event || window.event;
//IE uses srcElement as the target
var target = event.target || event.srcElement;
var strId = target.id
switch(target.id){
case "M_TERMS":
validCheck(strId,"* Please accept our Terms and Conditions.");
break;
}
};
</script>
This is the "on page" validation. This, as you can see calls functions held in an included file onkeyup. This all works well, also the username check ajax call works great. However I have 2 questions that I need to sort before this will work correctly. 1. Using M_USERNAME form as an example. If I start typing in there it will begin validating, which is great, However, if i typed in "matt_thomas" based on the validations, Empty:Pass, ValidChars:Fail, Range:Pass, Check:Pass. So I know that it isn't empty, it's the correct length and it's not already in the DB. But it fails because of the "_". This should mean that I receive the error i have setup for that failure. But I don't. Because I don't stop on a Fail, I receive the success message of the last function. So my question is; How Can I stop running any more functions when one fails? 2. Looking at the above code, How can I make sure that a submit will only work when ALL fields validate correctly? Is this possible? I'm sure it is, but Can't see the woods for the trees right now Thanks for any advice you can give. Even if you can just suggest something to look for. Also sorry in advance but I don't understand alot of "tech" jargon lol, so please keep it simple. |
|||||||