|
JavaScript - Post To An Iframe
Hi:
How can I extend this so that it posts the data from these 2 fields to an iframe, and what code do I need in the iframe to capture the data and present it in 2 fields? On the sending page, I have <script type="text/javascript"> function passValue() { var ddl = document.getElementById("ddlName"); var index = ddl.selectedIndex; document.getElementById("txtValue").value = ddl.value; document.getElementById("txtName").value = ddl.options[index].text; } </script> <iframe ID="first_iframe" src="http://xxx.net/iPage.html" width="600" height="400"> </iframe> sample code appreciated. Thanks Similar TutorialsHi, I am looking for some code that will do the following Form to post any URL to an iFrame and load said URL. I been told Javascript can do this, but I am also after the form bit as well if possible. Is there a way to resize an iframe dynamically so that you never get the scroll bar and essentially hide that there is an iframe? Better integration really. Basically I want to iframe a forum into my site so that the design down the sides and top which my friend does using iweb are not messed with. We have a central area which can be longer or shorter depending on the forum. Hi all, I hope you can help I have some code which: 1) Opens a URL (e.g. google.com) in a hidden iframe, then 2) Redirects the visitor to a different URL (e.g. yahoo.com) after it has loaded... This works exactly as I need. What I'd like to do is the following: 1) Open a URL (e.g. google.com) in a hidden iframe, then 2) Redirect the visitor to a different URL (e.g. yahoo.com) in a full-screen iframe 3) The address bar of the full-screen iframe should be my domain (obviously!) Here's what I have so far... Hidden iframe -> New URL Code: Code: <html>
<body>
<script type="text/javascript">
var page_body = document.getElementsByTagName('body');
var myframe = document.createElement('iframe');
var id = Math.random();
myframe.setAttribute('id', 'myFrame'+id);
myframe.src = 'http://google.com'; //First open Google in hidden iframe
myframe.setAttribute('frameborder', '0')
myframe.setAttribute('width', '0');
myframe.setAttribute('height', '0');
if (myframe.attachEvent)
{
myframe.attachEvent('onload', function()
{
top.location = 'http://yahoo.com'; //Once loaded redirect to Yahoo -- but the address bar shows yahoo.com -- I want the address bar to display mydomain.com/page.html
});
}
else if (myframe.addEventListener)
{
myframe.addEventListener('load', function()
{
top.location = ('http://yahoo.com');
}, false);
}
page_body[0].appendChild(myframe);
</script>
</body>
</html>
I have an example of some code which displays the full screen iframe, but my problem is... ...I can't figure out how to redirect to this after the hidden iframe has loaded Here's an example of how I want the redirect to display -- after the initial hidden iframe has loaded: Code: <html>
<head>
<script type="text/javascript">
function sendParams() {
document.body.style.overflow = "hidden";
}
</script>
</head>
<body>
<!--Open Yahoo.com in a full screen iframe, and disable extra scrollbar -->
<iframe height="100%" width="100%" frameBorder="no" onload="sendParams()" src="http://yahoo.com"></iframe>
</body>
</html>
I've been beating my head against the wall today trying to figure this out, and I'm fresh out of ideas. If you can help, you'll have some serious gratitude and good karma thrown your way! Best wishes, and thanks in advance, Paul Hi there everybody, I've got this problem which I can't solve myself... I've got a website which has 3 colums and is hosted on domain1.com. in the right column I've got an Iframe which loads content from domain2.com . this content are some textboxes and a datepicker tool. if I press the 'search'-button in this Iframe I would like to refresh the mainpage (from domain1.com) so that another Iframe appears in the middle column. in this column i would like to load a new form from domain2.com which contains the values that I've put in in the form from the right Iframe. Unfortunally I can't get this to work... Will somebody please help me? I have used iframes for my site and found various javascripts so when a person clicks on say the audio page he http://www.krillmeed.com/index.html it takes them to the audio page but will load it into the index.html page. The problem is, especially with search engines, to point to that page, this is what the URL looks like to send someone to that page: http://www.krillmeed.com/?frame=0&sr...m%2Faudio.html which is not very clean at all, this is the javascript that i found that at least works: Child iframe script: Code: <script type="text/javascript">
(function(){
var qstr = '?frame=0&src=' + encodeURIComponent(location.href),
lre = new RegExp('^' + location.protocol + '//' + location.hostname + '(()|(/)|(/index.html)|(/index.php))(()|(\\' + qstr + '))$');
if (!lre.test(parent.location.href)){
top.location.href = '/' + qstr;
}
})();
</script>
Parent iframe Script: Code: <script type="text/javascript">
(function(){
function getQval(n) {
if(typeof n !== 'string'){
return null;
}
var r = new RegExp('[?&;]' + n + '=([^&;#]*)'), m = location.search;
return (m = r.exec(m))? unescape(m[1]) : null;
}
var f = getQval('frame'), s = getQval('src');
if(f && frames[f] && s && s.indexOf(location.protocol + '//' + location.hostname + '/') === 0){
frames[f].location.href = s;
}
})();
</script>
Is there a "cleaner" way of doing this? This was an old code, i have yet to find a more modern one. Thank you in advance. Hi, Not sure if I worded that question right. I have a web page which will display another web page in an iframe. But the content inside the iframe may change while the user interacts with it so I need to be able to resize the iframe height from code on the page inside the iframe. Any tips on how I can do that? I am using php and javascript. Thanks. Hello to all and thanks in advance for my help. I know this has been posted in different places on the web but I have found no solid solution. Here is my problem: I have an iframe the loads up a page on a remote server (out of my hands) and when I send certain information to it, the page redirects my entire site to their 404 page. I need to prevent this from happening so I engaged in much research and found this... temporary fix: Code: <script>
// No redirection!
var prevent_bust = 0
window.onbeforeunload = function() { prevent_bust++ }
setInterval(function() {
if (prevent_bust > 0) {
prevent_bust -= 2
window.top.location = 'http://www.mysite.com/my404.html'
}
}, 1)
</script>
What this code does, is that every time the unload of a page happens, it will redirect me to my404.html and this does solve the problem of the iframe trying to redirect my entire site but anytime a user tried to go to a new website by typing it in the address bar, they are redirected to my404.html. Is there another solution for me so that the page within the iframe cannot redirect the parent page? I have an iframe that is a specific height and width. I want to detect whenever the the iframe is no longer exactly the height i set it to. If a user has CSS turned off for example the iframe will be in default height and width. I want to detect that. This is how you'd normally do it but this only returns the original size (try with 'no style' in Firefox): Code: function getSize()
{
alert('height is now '+document.getElementById("Iframemain").height)
alert('height is now '+document.getElementById("Iframemain").width)
}
Is it possible? Hello.... I've 2 iframes. And i want to change the css class of second iframe anchor tag from the first. Code: <div id="top-navigation" title="top-navi">
<ul><li id="homePageLink" class="first">
<a id="homePageTab" class="navigation-font" href="</a>
</li>
</ul>
</div>
In the above code how can i change the class="navigation-font" from the first iframe? Please help.... Hi I have a page with 3 iFrames, showing different content. iFrame1: Here is a navigation php page. Click on a menu item and it loads a php page in iFrame2 iFrame2: Here is a list of items from a database. iFrame3: I load 3 different php pages here. (A) is the main showing page. (B) and (C) is a record manipulation page, that does some editing in the database and then redirects to (A). When the (A) php page loads, it should reload iFrame2 I have tried to put something like: <body onLoad=parent.location.reload()> and put it on the (A) php page. This will reload the entire page, which works. However, it results in a loop of reloads, as the (A) iFrame file will load with the entire page reload... So, I was looking for the right code to put, like onLoad=iFrame2.location.reload() However, I can't seem to find the correct code, so I hope any of you can help me... Hello all. I'm working on a project for school and for the life of me I cannot get this to display properly. I'm trying to write a page where a user inputs their billing/shipping info and can click on a box to have it copied over to the opposite form. I've gotten code from several different places, including my text book, but when I call the external .js file, nothing happens. Code: <script type="text/javascript" src="display.js"> </script> I have a separate .js file that I am also using, with similar code that functions perfectly, except when I just add this code to the file, then none of it loads. The only reason that I have this in a .js file is that my XHTML needs to validate in strict. Code: function FillBilling(f)
{
if(f.billingtoo.checked == true)
{
f.billingCame.value = f.shippingName.value;
f.billingAddress.value = f.shippingAddress.value;
f.billingCity.value = f.shippingCity.value;
f.billingState.value = f.shippingState.value;
f.billingZip = f.shippingZip.value;
/* If more fields are used, just expand the parameters
above to include the additional fields. */
}
}
document.write("<form action='FormProcessor.html' name='display' method='get' enctype='application/x-www-form-urlencoded' onsubmit='return confirmSubmit()'>>");
document.write("Shipping Information");
document.write("Name:");
document.write("<input type='text' name='shippingName' size='50'>");
document.write("<br>");
document.write("Address:");
document.write("<input type='text' name='shippingAddress' size='50'>");
document.write("<br>");
document.write("City:");
document.write("<input type='text' name='shippingCity' size='25'>");
document.write("<br>");
document.write("State:");
document.write("<input type='text' name='shippingState' size='2' maxlength='2'>");
document.write("Zip Code:");
document.write("<input type='text' name='shippingZip' size='10'>");
document.write("<input type='checkbox' name='billingtoo'"); onclick='FillBilling(this.form)'>
document.write("<br>");
document.write("<br>");
document.write("<em>Copy to billing fields.</em>");
document.write("<br>");
document.write("Billing Information");
document.write("<br>");
document.write("Name:");
document.write("<input type='text' name='billingName' size='50'>");
document.write("<br>");
document.write("Address:");
document.write("<input type='text' name='billingAddress' size='50'>");
document.write("<br>");
document.write("City:");
document.write("<input type='text' name='billingCity' size='25'>");
document.write("<br>");
document.write("State:");
document.write("<input type='text' name='billingState' size='2' maxlength='2'>"):
document.write("Zip Code:");
document.write("<input type='text' name='billingZip' size='10'>");
document.write("<input type='submit'>");
document.write("<input type='reset'>");
document.write("</form>");
please help me. Hi, I'm fairly new to coding, so this is all new to me. Basically, I want to implement the "Last post at......" (whuch is found in a container above a new thread/category) feature on my forums. Unfortunately, I don't really know how to. Please could you help me out by pasting the code here. Also, I know very little about Javascript and I'm very much in the learning process. So please just paste the full code rather than giving me cryptic clues :P because I'm really at my wits end now. Thanks James For the record, im a noob at javascript & if there was a lvl below noob id use it to Anyways, my code blow is supposed to automate on a website i use a quantity & submit with just one click using javascript. The help i got wasn't successful as it dosnt act as a URL or interact with the webpage & i need it to be used as a URL. My Goal is to make a simple php page which i already have & a list of links. Now the links will be made up of javascript as soon as i get a working example i can edit. When i click the links, on the webpage it automatically sets quantity & hits the Sell submit button for me, however it dosnt work & im desperate to get it fixed. On the webpage is a slider that sets the quantity, i can manually set quantity as we have to use a slider we click & drag left or right then we click Sell & it sells the type of drugs which is part of the game we wanted. I grabbed the POST info using Live Headers firefox plugin. I hope someone can fix this for me. Live Headers info: Code: POST /fiends.php drugtype=lsd&sqty=5201 Javascript Code: Code: 1."href="javascript:
2.var doc = document;
3.var aForm = doc.createElement("form");
4.doc.getElementsByTagName("body")[0].appendChild(aForm);
5.aForm.setAttribute("action", "http://www.greedinc.com/fiends.php?drugtype=lsd&sqty=5201");
6.aForm.setAttribute("method", "POST");
7.
8.var aInput = doc.createElement("input");
9.aForm.appendChild(aInput);
10.aInput.setAttribute("type", "hidden");
11.aInput.setAttribute("name", "drugtype");
12.aInput.value = "lsd";
13.
14.aInput2 = doc.createElement("input");
15.aForm.appendChild(aInput2);
16.aInput2.setAttribute("type", "hidden");
17.aInput2.setAttribute("name", "sqty");
18.aInput2.value = '5201';
19.aForm.submit();">
As a reminder, The javascript i need will act as a URL on my own hosted php page. I will then open the PHP page as a sidebar in my browser which will be firefox. Then when im on the website in question on the specific page, in staid of click & dragging the slider thats part of the POST/Submit that changes the Quantity of what i want sell & then click Sell. I want the javascript acting as a URL to do that for me from the sidebar page. Really hope someone can fix this for me because I've been at it for nearly 3 weeks now & its starting to wear me down to a point where I'm eating Jelly Babies I have a real estate JS slideshow that I would like to modify but have no experience with Javascript. Here is the test link to the slideshow in action: http://coastalrealestateconsultants.com/slideshow.html I want to re-position the three line link caption below the slideshow (price and address) so that it is in a semi-transparent box up in the image slideshow, say centered near the bottom of the image. Can anyone help me? Thank you in advance. I have created a quick little pricing engine to price some of the products that we sell. I was able to use a nice template online and it worked for most of what we offer. However, I needed to add a few filters and while doing so, needed to tweak the JS even further than I was originally comfortable with doing. Long story short, here is the main pricing page - www.pricemyleads.com - and this is the page in question as of now - www.pricemyleads.com/taxaged.html The js file for this page is - http://www.pricemyleads.com/js/taxag...alculations.js Any help is greatly appreciated. You'll see the issue when you start clicking on the check boxes. Thanks, brmacdon I need to put more data in the function but i cant do it. $.post('file.php', {data1 : the_data1, data2 : the_data2...and so on...}, func...); the jquery crashes when i do that This is my first post... and a quick question that is mostly likely easy for most of you!! I am pulling in some data from an MySQL database and generating a graph using RGraph and some HTML. The date pulled in is shown as 2011-01-01 for example. I would like to simply format the date and turn into Jan, 01, 11 or similar. Any recommendations on using Date Object to format that in to the date text? Hi, I'm hoping someone can help. I have this code which allows a user to check multiple checkboxes by clicking just one check box. However, when I post the form, I only get the value of one check box. Suppose, I don't check the 'select all' check box and want to check only 1 and 3 checkbox, I still get the value for only one check box. Any help will be much appreciated! Cheers! Code: <SCRIPT LANGUAGE="JavaScript">
<!--
<!-- Begin
function Check(chk)
{
if(document.myform.Check_ctr.checked==true){
for (i = 0; i < chk.length; i++)
chk[i].checked = true ;
}else{
for (i = 0; i < chk.length; i++)
chk[i].checked = false ;
}
}
// End -->
</script>
Here is the code for body part .
<form name="myform" action="checkboxes.asp" method="post">
<b>Scripts for Web design and programming</b><br>
<input type="checkbox" name="check_list" value="1">ASP<br>
<input type="checkbox" name="check_list" value="2">PHP<br>
<input type="checkbox" name="check_list" value="3">JavaScript<br>
<input type="checkbox" name="check_list" value="4">HTML<br>
<input type="checkbox" name="check_list" value="5">MySQL<br>
<input type="checkbox" name="Check_ctr" value="yes"
onClick="Check(document.myform.check_list)"><b>Check Control</b>
</form>
Allright, so i got index html, and on the head of the document i got jquery already, and what i got is a form, and what i want it to do is that once the input is sumbmited, to post it on a list. BUt something is missing here or maybe im doing it wrong, i need some guidance plz. here is my table: Code: <form name="postbar_add_post" id="postbar_add_post" method="post">
<fieldset>
<legend>Write text here ...</legend>
<input type="text" name="addcontentbox" id="addcontentbox" />
<input type="button" name="addpost" value="Submit" class="submit" />
</fieldset>
</form>
and heres is the function that i have on the head, where what i try is to make it post on the list: Code: <script type="text/javascript">
$(document).ready(function(){
$("form#postbar_add_post").submit(function() {
var message_wall = $('#addcontentbox').attr('value');
$.ajax({
type: "POST",
data:"addcontentbox="+ addcontentbox,
success: function(){
$("ul#wall").prepend("<li>"+addcontentbox+"</li>");
$("ul#wall li:first").fadeIn();
}
});
return false;
});
});
</script>
But is just not working :S .... any ideas/guidance? xD . Btw, on the body, theres only that table above, and a " <ul id="wall"></ul> " , wich is where im trying the content to be posted on. Any ideas where the flaw is ? =\ I know it's expected behavior for disabled form elements not to post, because they cannot be successful. Fine. But even after I set disabled to false through a javascript function, the form elements will not get posted. Why is that? Does anyone know a workaround? Pseudo code he Code: <input type=text name=blah disabled=disabled />
function blah {
all_blah = document.getElementsByName("blah");
for (i=0; i<all_blah.length; i++)
all_blah[i].disabled = false;
}
The intended form elements change their looks in browser, meaning they're enabled, I got javascript to acknowlegde they're enabled, but they still won't post. Thanks for any insights. |
|||||||