JavaScript - Use An Input To Change An Iframe Src

I'm trying to change a row of input fields to have the value(s) of a table row.
When I click a button called Next, I want to pull in the value(s) that are already on the display. If I click Next again, I want to pull in the next row's values or if I click the button called Previous I want to get the prior lines values. Can someone please help or push me in the right direction? Thanks.
Code:

<script type="text/javascript">
function copyLine()
{
document.getElementById("pitem").value=document.getElementById("p1item").value;
document.getElementById("ploc").value=document.getElementById("p1loc").value;
document.getElementById("plot").value=document.getElementById("p1lot").value;
document.getElementById("pqty").value=document.getElementById("p1qty").value;
}
</script>

<table>
<tr>
<td><input type="text" name="item" id="pitem" size="15" value=""></td>
<td><input type="text" name="loc" id="ploc" size="7" value=""></td>
<td><input type="text" name="lot" id="plot" size="7" value=""></td>
<td><input type="text" name="qty" id="pqty" size="10" value=""></td>
</tr>
<tr>
<td><input type="button" value="Next" onclick="copyLine()">
&nbsp;&nbsp;
<input type="button" value="Previous" /></td>
</tr>

<tr>
<td id="p1item">Item 1</td>
<td id="p1loc">Location 1</td>
<td id="p1lot">Lot 1</td>
<td id="p1qty">100</td>
</tr>
<tr>
<td id="p2item">Item 2</td>
<td id="p2loc">Location 2</td>
<td id="p2lot">Lot 2</td>
<td id="p2qty">200</td>
</tr>
<tr>
<td id="p3item">Item 3</td>
<td id="p3loc">Location 3</td>
<td id="p3lot">Lot 3</td>
<td id="p3qty">300</td>
</tr>
</table>

I am looking for an input text that links to a iframe. . ?

To begin, we need some simple HTML elements:

A basic form;
An Input text that will contain the URLs we want to use;
An iFrame that will display the page we select from the input text.

Thanks in advance

Stickers

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

hi all,

I really need help with this topic. I have to use onMouseOver to change the content of an iframe. I'm trying to use an array but I'm confused and I'm not really sure if what I'm doing is correct and it doesnt work. I will appreciate your help and understanding.

Thanks a lot!

here is part of my code..


var frame=new Array(6);
frame[0]="page1.html";
frame[1]="page2.html";
frame[2]="page3.html";
frame[3]="page4.html";
frame[4]="page5.html";
frame[5]="page6.html";
var j=0;

function nextFrame()

{
if (j < 5)
{
j++;
document.getElementById(frame).contentDocument=frame[j];

}
return;
}

<span onMouseOver="nextFrame()" > <img name="upperImage" src="something.jpg" width=350 height=250 /></span>

<iframe id="frame1" name="frame1" src="" width=350 height=250 frameborder="0"> </iframe>


Please let me know if at least I'm in the right track.

Thanks

Try to figure out how to change the css display property of a table, from hidden, to block outside of an iframe.

//This data is outside of the iframe
Code:

<style>
#table {display: hidden; z-index: 100;}
</style>

<table id='table' ><td> ......data</td></table>

//This link is inside of an iframe
Code:

<script>
function change(){
document.getElementById("table").style.display='block';
}
</script>

<a href='javascript:void(0)' onclick='change()'>Change</a>

I wrote a function, to change a input value to show a key, which PHP later recognizes and makes addition changes too. However I can't seem to get this simple function to work, can you see anything wrong with it?

Code:

				function quote(id) {
					var shout = document.getElementById('shout');
					var currentShout = '; '.shout.value;
					var prefix = '@'.id;
					shout.value = prefix.currentShout;
				}

I call it by
Code:

<a href="#" onclick="javascript: quote('2');">Comment</a>

the input that changes is written as
Code:

						<input id="shout" name="shout" type="text" onKeyPress="return submitenter(this,event);">

Hello, I am trying to change the value of #name and #category inputs based on the value of select. A friend gave me the code below, but I can't get it to work. Thanks so much for your help

Code:

     
<script type="text/javascript">  
$('#Gift_Type').change(function(){
if ($(this).val() == 'Monthly'){
$('#name').val('Partnership')
$('#category').val('Partnership')
} else {
$('#name').val('Donation')
$('#category').val('Donations')
}
})
</script>

Code:

<SELECT NAME="sub_frequency" ID="Gift_Type" onchange="OnSelectionChanged (this)">
<OPTION VALUE="1m">Monthly</OPTION>
<OPTION VALUE="">One Time</OPTION>
</SELECT>

Code:

<input type="text" id="name" name="name" value="Partnership" />
<input type="text" id="category" name="category" value="Partnership" />

I have a problem thats above my head, im new to javascript.

I want to be able to control the first three characters of an input string on a login form.
If a user types GP15555 or JP15555 I want it to change to GPL5555 or JPL5555 respectively
changing the "1" to an "L" on the prefix

is this at all possible? any point in the right direction would be great.

heres my code

Code:

 </script>

 <script language="JavaScript" type="text/javascript">
//<![CDATA[
function Login(form) {
var password = form.password.value;
var pin = form.pin.value; 
var product = form.product.value;
if (password) {
var htsite = product + "/" + password + "/" + pin + "/index.html";
window.location = htsite;
}
else {
alert("Please enter your password and pin.");
   }
}
//  End -->
//]]>

</script>

/thanks gp

How do I change a text input's background when the user hits "Enter" or Key #13.

The text-input field currently light's up to blue when hovered over, then it turns green when it is focused on, and now I want it to turn pink when you submit it.

(This can be seen at http://ocmd.co.nr/ap)
------------------
Also, if anyone knows how I can redirect the user depending on there input, that'd be great. Regularly, it just runs a Google Search, but if I could get it so that when someone typed in, "chat room 1" for example, it'd open up a link or a new window w/ that.

I'm trying to use an onclick function in a radio button to change the value of a hidden input in another form. What I want to happen is, when the user changes the value of the radio button (0 or 1), the value of the input named 'repeat' is set to 0 or 1 accordingly. The goal being that when I submit the form with input name='repeat' it will send the number indicated by the radio button.

(Due to the structure of my page the radio button and the hidden input need to be two separate forms, but I don't think that should be a problem.)

The code below isn't working -- the alert("changerepeat called") never even appears. It seems like the problem is that the onclick isn't even activating at all. Any ideas?

Code:

<script type="text/javascript">
function changerepeat(theval) {
	alert("changerepeat called");
	document.forms[0].elements[0].value = theval;
}
function tellme() {
	alert("repeat = "+document.forms[0].elements[0].value);
}
</script>
<form>
<input type='hidden' name='repeat' value=''>
<input type='button' value='tellme' onclick='tellme()'>
</form>
<form>
<input type='radio' name='changerepeat' onclick='changerepeat(\'0\')'> 0
<input type='radio' name='changerepeat' onclick='changerepeat(\'1\')'> 1
</form>

Thanks very much for reading!

I have a script where I need to change input values automatically, and I just can't find the right code for it. Here's a little of my code below, can anyone help me, please?
Code:

document.getElementById("Id").innerHTML="Text here";

Im very new to java scripting so any help would be truly appreciated. I have a single web page that loads several iframes. One of the iframe pages has to be logged in first. I have that taken care of but once the page is loaded I need to change the source to a link with in the page. My guess is I need something to execute the code like a onload or something. This is what Ive been trying to get to work but like I said a newb!

The iframe in question is named "cad"
the initial source once loaded is 'https://urlname.com/mainmenu.asp'
the source I need to change to is 'https://urlname.com/UnitStatusF.asp?agency_id=28'

[CODE]
function ChangesSrc()
{
var iframeid = document.getElementById(cad);
var unitstatus = 'https://urlname.com/UnitStatusF.asp?agency_id=28'
if (iframeid.src = 'https://urlname.com/mainmenu.asp')
iframeid.src = unitstaus;
return false;
}
[[CODE]

I just cannot get the html to load for each linked button to the Iframe. If I remove the "onclick" command for the backround images, the links load to the Iframe. If I leave the "onclick" command in there only the background changes.

So, I would assume there is a conflicting issue with loading the "a href" and the "onclick" commands together. Maybe I need to know how to do multiple "onclick" commands...suggestions?

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!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>

	<title>Welcome to Whitetail Fantasies</title>
	<link href="layout.css" rel="stylesheet" type="text/css" />
<style type="text/css">

		body {
			font-family:Tahoma, Geneva, sans-serif;
			background-color: #000;
			}
			
		#background {
			position:absolute;
			float:left;
			width:1024px;
			height:768px;
			background-image:url(wf_layout/wf_bkgnd-1.jpg);
			z-index:0;
}
		
	</style>
	<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
    </script>
</head>



<body onload="MM_preloadImages('wf_layout/buttons/home_inv.png','wf_layout/buttons/aboutus_inv.png','wf_layout/buttons/trophies_inv.png','wf_layout/buttons/trailcams_inv.png','wf_layout/buttons/calendar_inv.png','wf_layout/buttons/contact_inv.png')">

<div id="background"></div>

<div id="outer">
	
<div id="header"></div>
    	
		<div id="wrapper">
    
  			<div id="left_side"><br /><br /><br /><br /><br /><br /><br />
            	<table width="140" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><a href="wf_home.html" target="_IFrame" onclick="document.getElementById('background').style.backgroundImage='url(wf_layout/wf_bkgnd-1.jpg)'; return false;" onmouseover="MM_swapImage('btn_home','','url(wf_layout/buttons/home_inv.png)',1)" onmouseout="MM_swapImgRestore()"><img src="wf_layout/buttons/home.png" alt="Home button" name="btn_home" width="140" height="42" border="0" id="btn_home" /></a></td>
  </tr>
  <tr>
    <td><a href="wf_aboutus.html" target="_IFrame" onclick="document.getElementById('background').style.backgroundImage='url(wf_layout/wf_bkgnd-2.jpg)'; return false;" onmouseover="MM_swapImage('btn_aboutut','','wf_layout/buttons/aboutus_inv.png',1)" onmouseout="MM_swapImgRestore()"><img src="wf_layout/buttons/aboutus.png" alt="About Us Button" name="btn_aboutut" width="140" height="42" border="0" id="btn_aboutut" /></a></td>
  </tr>
  <tr>
    <td><a href="wf_trophies.html" target="_IFrame" onclick="document.getElementById('background').style.backgroundImage='url(wf_layout/wf_bkgnd-3.jpg)'; return false;" onmouseover="MM_swapImage('btn_trophies','','wf_layout/buttons/trophies_inv.png',1)" onmouseout="MM_swapImgRestore()"><img src="wf_layout/buttons/trophies.png" alt="Trophies button" name="btn_trophies" width="140" height="42" border="0" id="btn_trophies" /></a></td>
  </tr>
  <tr>
    <td><a href="wf_trailcams.html" target="_IFrame" onclick="document.getElementById('background').style.backgroundImage='url(wf_layout/wf_bkgnd-4.jpg)'; return false;" onmouseover="MM_swapImage('btn_trailcams','','wf_layout/buttons/trailcams_inv.png',1)" onmouseout="MM_swapImgRestore()"><img src="wf_layout/buttons/trailcams.png" alt="Trial Cams Button" name="btn_trailcams" width="140" height="42" border="0" id="btn_trailcams" /></a></td>
  </tr>
  <tr>
    <td><a href="wf_prices.html" target="_IFrame" onclick="document.getElementById('background').style.backgroundImage='url(wf_layout/wf_bkgnd-5.jpg)'; return false;" onmouseover="MM_swapImage('btn_prices','','wf_layout/buttons/calendar_inv.png',1)" onmouseout="MM_swapImgRestore()"><img src="wf_layout/buttons/calendar.png" alt="Prices button" name="btn_prices" width="140" height="42" border="0" id="btn_prices"  /></a></td>
  </tr>
  <tr>
    <td height="41" align="center" valign="middle"><a href="wf_contact.html" target="_IFrame" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('btn_contact','','wf_layout/buttons/contact_inv.png',1)" onclick="document.getElementById('background').style.backgroundImage='url(wf_layout/wf_bkgnd-6.jpg)'; return false;"><img src="wf_layout/buttons/contact.png" alt="contact button" name="btn_contact" width="137" height="41" border="0" id="btn_contact" /></a></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td align="center"><img src="mdclogo.png" alt="mdc_logo" width="120" height="106" border="0" usemap="#Map" /></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
            </div>
            
        	<div id="content_area">
            <br /><br /><br />
        	  <iframe name="_IFrame" style="width:800px; height:500px;" src="wf_home.html" frameborder="0" allowtransparency="true"></iframe>
        	</div>
        	iu
        
		</div>
        
</div>
<div id="footer"></div>



<map name="Map" id="Map">
  <area shape="poly" coords="0,100" href="#" />
  <area shape="poly" coords="58,1,119,97,1,99" href="http://mdc.mo.gov/hunt/" target="_blank" />
</map>
</body>


</html>

The project I am working on involves a flash piece that communicates with a iframe. Currently the flash piece just calls on javascript functions. I want the buttons in the flash piece to be able to change the src of the iframe.

PHP Code:
<script type="text/javascript">

document.getElementById('video').setAttribute('src',address2);

function closeVideo() {
   document.getElementById('video').style.height='0px'; return false;
   document.getElementById('video').setAttribute('src', address2);
   }
function openVideo() {
        document.getElementById('video').style.height='391px'; return false;
        document.getElementById('video').setAttribute('src', address);
}  
</script> 


So the way the code works now is when the page loads it sets the iframe with the id of 'video' to the variable address2 which it pulls from an XML file. In the flash piece when a button is hit, it calls openVideo() which "opens" the iframe and I want it to change the contents to address. This does not work though. It opens the frame but will not change the src.

I've tried a bunch of different things now such as make the flash target the iframe using navigateToURL(request1, 'video'); but in Firefox and IE is opens it stills as if I had _blank in there. It does strangely work in Safari.

Any ideas how to get this to work? I'm new to javascript so it could be something basic I'm overlooking

I have been working on this code for a few days now and it works. Or at least it appears to be working. I would like to have the tot 1, tot 2, tot 3 return with currency formatting. Is there a way to add something to my code to accomplish this? Thank you in advance for any suggestions.

Regards


Code:

<html>
<head>
<script type="text/javascript" src="autoCurrency.js"></script>
<script type="text/javascript">
function doCalc() {
  var v1 = document.getElementById('value1').value;
  
  var v2 = document.getElementById('value2').value;
 
  var v3 = document.getElementById('value3').value;
  
  document.getElementById('total1').value = ((v1*5)+(v2*1)) * (1-v3/100);
  
  document.getElementById('total2').value = ((v1*10)+(v2*1)) * (1-v3/100);
  
  document.getElementById('total3').value = ((v1*15)+(v2*1)) * (1-v3/100);
  
}
</script>
<style type="text/css">
button { width: 80px; }
input { margin: 10px 0; }
input[type='text'] { width: 50px; }
</style>
</head>
<body>
<div>
<input id="value1" type="text" value="0" /> <br />
</div>
<div>
<input id="value2" type="text" value="0" /> <br />
</div>
<div>
<input id="value3" type="text" value="0" /> <br />
</div>


Tot 1:<input id="total1" type="text" /><br />

Tot 2: <input id="total2" type="text" /><br />

Tot 3: <input id="total3" type="text" /><br />

<button class="long" onclick="doCalc();">Calculate</button>
</body> 
</html>