Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Fill form inside <iframe> with values (OPERA) 2

Status
Not open for further replies.
Olavxxx

Olavxxx

Programmer
Sep 21, 2004
1,134
NO
Hi, I need to fill form fields with values (Opera).

I want it to work like this:
The users on my website are already registerred, so I know theire name and email adress.

I want my users to be able to vote on a form (offsite).
The form is kaptcha protected, so regarding abuse/spam on my form, it's not vital, as they will have to manually type in the kaptcha image-text and press the submit.

I will have the offsite-form inside an iframe.
You might ask: whats the point..

Well, we have this game.. monopoly, and all cities have to vote for theire city to be entered in the game.. so I want to increase how easy it will be to vote for my city!

So, I will have the users username parsed in hidden input fields..

In the source I paste here, it will be text-fields, but when the JS works as I want, I will make it more dynamic (php / mysql and parse input hidden).

Anyhow: here is my HTML code

Code: 
<html>
<head>
<title>IFRAME test </title>
</head>
<body>
<form name="PForm">
First Name <input type="text" value="Firstname" name="FirstName" size=30>
Last Name <input type="text" value="Lastname" name="LastName" size=30>
</form>
<div id="FullName">Type in your name and click on the button below to see the example of doing an ajax style partial page update using an iframe.</div>

<script language=javascript>
var IFrameDoc;
window.opener = window;

function LoadIFrame()
{
var myDiv = document.getElementById('FullName');
	myDiv.innerText = "";
	IFrameDoc = window.open("[URL unfurl="true"]http://www.xxxx.xx/vote.aspx",[/URL] "SubPage" /* target */, "");
	IFrameDoc.opener = window;

}

function SubWindowLoaded(SubForm)
{

var pform = document.PForm;
var fname = pform.FirstName.value;
var lname = pform.LastName.value;
alert(fname);

	/* fill form values with data */
SubForm.FirstName.value = fname;
SubForm.LastName.value = lname;
SubForm.ctl00$CPHRight$uclVoteHtml$txtYourEmail.value = fname;

}


</script>
<button onClick="LoadIFrame();">Load Page</button>
<button onClick="SubWindowLoaded('aspnetForm');">Fill Form</button>
<hr>
<iframe name="SubPage" width="830px" height="600px"> </iframe>

</body>
</html>

I have removed the reference to the other site, but if I take view-source, the inputs are like:
Code: 
<input name="ctl00$CPHRight$uclVoteHtml$txtYourName" type="text" id="ctl00_CPHRight_uclVoteHtml_txtYourName" style="width:250px;" />

So, I need to reference that input, inside the IFRAME and fill that field here with the data from the field outside of the IFRAME.

I have to do it in Opera too, as I have to disable flash to get to the HTML input and this is very easy to do in Opera.

Hope someone can help me :)

PSUEDOCODE for what I need:
Code: 
SubPage.getelementbyid(ctl00_CPHRight_uclVoteHtml_txtYourName).value = pform.LastName.value;

Where subpage is the iframe...

Olav Alexander Mjelde
Admin & Webmaster
 
Sort by date Sort by votes
>[pseudocode][tt]SubPage.getelementbyid(ctl00_CPHRight_uclVoteHtml_txtYourName).value = pform.LastName.value;[/tt][/pseudocode]
Fullpath referencing, modulo security concern, try this.
[tt]document.frames["SubPage"].contentWindow.getelementbyid("ctl00_CPHRight_uclVoteHtml_txtYourName").value = document.PForm.LastName.value;[/tt]
 
Upvote 0 Downvote
Le crappie (as put by peter, family guy).

I have been fiddling with this for "ages".. Googling, trying in both IE 7 and Opera and I simply cant do it :S

I uploaded here:

Commented some of what I tried.. Tried accessing it in different ways, but it all gave errors.

Hope you have some more pointers, as my city is about to loose its lead :S so I need to mobilize the members from my city, before the other cities have more votes than we have.

Reading from the outer inputs works fine, so does the loading of the form. But I'm having problems accessing the inner inputs (inputs in the form which resides in the iframe).

Ps. the form is a dummy, but it has the inputs from the real form, also the form opening tag from the real form.

Olav Alexander Mjelde
Admin & Webmaster
 
Upvote 0 Downvote
You gotta remember that Javascript is case sensitive, and the sample page you listed has some errors related to that.

Lee
 
Upvote 0 Downvote
Correction
Case-sensitivity, I can only say thing of my post. Sorry! don't know why I typed that sleepily - must be too focus on putting quotes on the id!
[tt]document.frames["SubPage"].contentWindow.get[red]E[/red]lement[red]B[/red]y[red]I[/red]d("ctl00_CPHRight_uclVoteHtml_txtYourName").value = document.PForm.LastName.value;[/tt]
 
Upvote 0 Downvote
Wohoo, I got it working..
* I tried your new correction, but it still would not work.

IE gave me wierd errors, so I started looking at the errors in FireFox.. And I got different errors, googled the errors, etc. And I found some suggestions, tips, etc. Tried, failed, tried, failed..

Finally, now it works!

Code: 
document.getElementById('SubPage').contentWindow.document.getElementById('ctl00_CPHRight_uclVoteHtml_txtYourName').value = fname;

I tried fixing your sollution too, by appending the .document after the .contentWindow, but it still gives errors.

One of the things I read, is:
ever use document.frames, it isn't supported, always use window.frames.
Click to expand...

I dont know if this is true(?), but anyways.. Thank you for suggestions, I will give you stars as you helped my motivation and elimination of bugs.

Guess I owe google a star too, but that might be hard to accomplish.

Complete code now:
Code: 
<html>
<head>
<title>IFRAME test</title>
</head>
<body>
<form name="PForm">
First Name <input type="text" value="Firstname" name="FirstName" size=30>
Last Name <input type="text" value="Lastname" name="LastName" size=30>
</form>
<div id="FullName">Type in your name and click on the button below to see the example of doing an ajax style partial page update using an iframe.</div>

<script language=javascript>
var IFrameDoc;
window.opener = window;

function LoadIFrame()
{
var myDiv = document.getElementById('FullName');
    myDiv.innerText = "";
   
    IFrameDoc = window.open("form.html", "SubPage" /* target */, "");
    IFrameDoc.opener = window;

}

function SubWindowLoaded(SubForm)
{

var pform = document.PForm;
var fname = pform.FirstName.value;
var lname = pform.LastName.value;

/* fill form values with data */
document.getElementById('SubPage').contentWindow.document.getElementById('ctl00_CPHRight_uclVoteHtml_txtYourName').value = fname;
}


</script>

<button onClick="LoadIFrame();">Load Page</button>
<button onClick="SubWindowLoaded('aspnetForm');">Fill Form</button>
<hr>
<iframe name="SubPage" id="SubPage" width="830px" height="600px"></iframe>
</body>
</html>

Thank you a billion!

Olav Alexander Mjelde
Admin & Webmaster
 
Upvote 0 Downvote
Yes, absolutely. I mixed up the referencing. The rules are: [1] If I use iframe's name (if it's defined) and reference it by document.frames[framename], I do not need contentWindow; [2] If I use the iframe's id (if it's defined) and reference it by document.getElementById(frameid), then I need to supplement it with contentWindow to access to the controls in it. That's what you've found. Thanks for the feedback.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

JScannell
  • Locked
  • Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
2K
ggriffit
ggriffit
edgarv
  • Locked
  • Question
Field with numbers and characters get nan
Replies
1
Views
359
ggriffit
ggriffit
Dara2020
  • Locked
  • Question
Jquery Conflict between Mega-Menu and MailChimp form
Replies
0
Views
221
Dara2020
Dara2020
rogerte
  • Locked
  • Question
Javascript updating form control not working
Replies
3
Views
398
rogerte
rogerte
JPSeo
  • Locked
  • Question
Another cjhild_process.exec issue with complex shell command
Replies
0
Views
219
JPSeo
JPSeo

Part and Inventory Search

Sponsor

Back
Top