Getting data from iframe with JavaScript - javascript

I have a simple page with iframe. In this frame there are a three input fields, which user fill in. How to get this data in every input field with js?
Here is js:
<script type="text/javascript"> var ticket = window.frames[0].document.getElementById('ticket').ticket; alert(ticket); </script>
And i have inside frame:
<input type='text' name='ticket' id='ticket'...
Nothing happens when I fill all 3 inputfield and press ok. How to save this data, which filled in this input fields to .txt file, than I can grab this txt by php and fill into database.

I'm not convinced that iframes are accessible via the window.frames property. You could try something like this:
var frame = document.getElementsByTagName("iframe")[0]
, form = frame.contentDocument.forms[0];
alert("OK: ticket=" + form.ticket.value);
Storing the form values in the database is another issue entirely. It might be easiest to avoid JavaScript entirely and simply make the form within the iframe perform a POST to your own PHP handler which can save the contents as needed.

I spent a lot of time trying to figure out how to exchange data from between text boxes in two Iframes. (I am the author of both iframes). After a lot of wasted time and looking for solutions on the internet the solution was, of course, incredible easy. Everyone on the internet is doing MUCH more complicated things. For those of you who want to do something simple!
I have a main page with two Iframes (ID = ifr1 and ifr2). Each frame had a text box (ID = tb1 (in ifr1)). In javascript you can get the contents of tb1 in iframe ifr2 by simply using
parent.ifr1.tb1.value or parent.ifr1.document.getElementByID(‘tb1’).value.
To change the value, obviously"
parent.ifr1.tb1.value=”whatever” or parent.ifr1.document.getElementByID(‘tb1’).value=”whatever”
You can also access a variable from ifr1 from ifr2 by using
parent.ifr1.var_in_ifr1 where var_in_ifr1 is defined in the script of ifr1
var var_in_ifr1=”whatever”

Related

Javascript, Ajax and form submission/response

I'm hoping there is a simple solution to this, or else its possible AJAX time!
I WAS using ClickBank. I had a simple button on my page. That sent the form data to a script, I processed the data, and then added a redirect at end of script to jump to the "pay" link. Nice n' easy
But now I'm switching to "Click2Sell" ... and they have a direct href to their site.
Now I COULD use javascript to read the form data, place it into their "cp_" prefix, and create a super long (about 400 chars) query string and send that to their server, then re-read the data at the IPN stage ...
?country=UK&area=essex&desc=This is the data entered by the user 'whatever'
(but that leads to a little fact that certain parts might need to be escaped(?) such as the spaces and the " ' " or whatever other symbol they enter)
So I devised this method:
<javascript>
function send_data(){
document.user.submit();
return true;
}
</javascript>
<div name="noshowdiv"><object name="noshow"></object></div>
<form method="post" target="noshow" name="user">
<input type="text" name="country">
<input type="text" name="area">
<textarea name="desc"></textarea>
</form>
<img src="xxx" onclick="return send_data();">
In a nutshell, when the button is clicked, it jumps to the function, and submits the form data to my script, and then returns to the hyperlink to submit the second form via the hyperlink.
Two problems: Firstly, the data returned by my script is opening in a new tab rather than the <div>, (I suspect 'cos the submit option loses track of the sending window) and also, I need to get a response from my script which I can then append to the href link.
For example, if the form records the user's data on line 5 on my server, the script will return "id=5" I would then make the hyperlink "click2sell.asp?cp_id=5"
As I've said, I suspect this is a job for Ajax and a HttpRequest ... which is a whole new area to me. Any advice?
For the first problem, it opens a new tab because you have target="no-show" on your form.
For the second problem, if you want to use Ajax, I recommend you use jQuery, it will simplify a lot of the code.
But the best option is probably that you completely remove the direct link to click2sell, and just add a submit button to your form. Post the form to your site, which will store whatever info it needs, assigns an ID, and builds the click2sell URL with the ID in one of the parameters, and redirect to it.
Now how you would do that depends on what server-side language you use.
(I think) I have managed to find a work around, which was using the first option to reconstruct the href link. I couldn't iterate through the form as there are values that don't need to be forwarded. First I get the value, load it into a variable, then use an encode function I discovered online, and then reassign to the form ...
var cp_cc=document.getElementById('cc').value;
var cp_cs=document.getElementById('cs').value; // plus 10 other values
var str='&cp_cc='+encodeURIComponent(cc)+'&cp_cs='+encodeURIComponent(cs)+ // etc
var send_str=document.getElementById('c2s_bn_lnk_36288').href;
document.getElementById('c2s_bn_lnk_36288').href=send_str+str;
The "no-show" was a slip up in my typing! Alas, the answer given above wouldn't work as the Click2sell button also includes two calls to external JS files - and they give you no idea what they do, but is something to do with initializing the button, (it passes the "36288" to the script to do ???). And whilst using "Location: ..\n\n" on my server would redirect to their site, it wouldn't action whatever those external files do. (OK, so I didn't give the full facts, but I didn't want to increase the post size with data I felt didn't relate to problem)
** Now got to amend the listening scripts such that rather than set the ID number up front then jump to C2S, it now waits for C2S to send the data back to me and then sets up the database!!

How to use JavaScript & DOM on one html page to externally link to another html page

So basically I have two html pages in the same folder. One of them is the homepage, while the other is a page that basically is a form. Once the person fills out the form and clicks the submit button, I would like to make it so that it automatically changes the homepages information with the information written out on the form using DOM.
What I have tried:
Using an external & same JavaScript file for each HTML document, Firefox console said that the id is null
Using global variables, did not work.
If I haven't worded this well enough or if you don't understand, please comment and tell me!
Here's an example of what I tried to do, didn't work because the div with id type is in a different HTML document.
function submitform(){
var textbox = document.getElementsByName('name').item(0);
value= textbox.value;
window.alert(value);
document.getElementById('type').innerHTML = value;
}
Passing variables to one page from another requires some form of query with paramters, ie. newpage.php?newdata='This came from the old page'. You'll need to implement one of several options: as already mentioned, you could store the submitted data in cookies and then retrieve them on the subsequent page load, you could send the data back to the homepage using an actual submit query (see above) or you could use an AJAX routine to send the data to the home page without any type of submit action.
Form page:
function submitform(){
var textbox = document.getElementsByName('name')[0];
value = textbox.value;
localStorage["name"] = value; //save it in localStorage
} //for later use
Homepage:
function showStuff(){
var value = localStorage["name"]; //get the information back
document.getElementById('type').innerHTML = value; //put it in
}
localStorage is supported on all major browsers. If you need to support < IE9, try jStorage.
Try a DEMO: http://jsfiddle.net/DerekL/r4fXw/ or http://pastebin.com/SurbLhWZ
Why none of your attempts works
Using an external & same JavaScript file for each HTML document, Firefox console said that the id is null
Variables are not shared cross different webpages.
Using global variables, did not work.
Same as #1.

Using Javascript to add a page break in some cases

I'm working on a printable form in HTML that is designed to pull data from a database application and display it as a wepage configured for printing. I have a number of tables set up to pull in various data from the database and display them in a printable format. The number of printable pages must always be even, as the page must support double sided printing.
I'm having an issue where, when there is a lot of data to display in a field, the tables spill over onto the following page, thus creating 3 pages. My solution to this is to insert a page break at the bottom of the form to maintain the even number of pages. I'm thinking to use Javascript to calculate the size of the tables and add in the break where necessary.
The code I've got at the moment is
<script type="text/javascript">
var compleHeight= document.getElementById("complete").scrollHeight;
var incomHeight=document.getElementById("incomplete").scrollHeight;
var totalHeight= compleHeight+incomHeight;
if(totalHeight>300)
{
var newdiv = document.createElement('div');
newdiv.setAttribute('style', 'page-break-after:always');
}
</script>
I know the calculation and the if are working OK, but the page break isn't being generated. Any ideas?
You didn't append newly created element anywhere.
document.body.appendChild(newdiv);

Popup preview of textarea input

I want to create a preview function for posts that allows people to view the output of what they enter into a textarea how it would appear once submitted. The forum uses bbcode and does not allow html in posts and the id of the textarea box is "message"
Can anyone help me create a popup that would preview this post in a popup window without passing any of its data to a database and back?
I should really have supplied more info, I realise... Basically we have a post form in the form of
<textarea id=\"message\" name=\"message\" style=\"width:515; height:160; font-family: Verdana; font-size: 8pt; color: #000000\" onKeyDown=\"countit()\"></textarea>
with a submit button
<input type=\"image\" src=\"newlayout/images/reply.png\" height=\"35\" width=\"109\" border=\"0\" alt=\"Submit\">
When it's clicked, the form gets sent to another page, from where it's inserted into the database. I would like there to be a preview button like the one on livejournal, where a new popup gets created and shows what the post would look like. I looked at the source code on livejournal and it supplied jQuery, so I tried the code given here: http://haacked.com/archive/2009/12/15/live-preview-jquery-plugin.aspx
However, this did not work, as nothing showed up and also I wasn't fond of the live preview idea.
I also tried a javascript code from here: http://www.codingforums.com/showthread.php?t=174810, but once again, it didn't come up with anything...
I hope that's good info, if I should include anything else, please let me know :)
This question is getting close to "write my code for me", but if you're just trying to get help with the best approach, here are a few:
The cleanest would be have a button that (via javascript) changes the action and target of the form and triggers a submit()... this would send all the data via post to a template page which can pick up the $_POST data and place it into a template that mimics the live template.
Alternately, you could have JavaScript/Jquery grab all the field values, and build the HTML template in javascript and then pass this into div on the page that has been styles to look (a) like a pop-up and (b) has css that mimics the live page.
There are lots of ways to do this, but those would both work. If you try something and get into a tight spot, let us know and we'll give you a hand.
You would want to bind a keyup event to the textarea. Every time a user releases a key it would fire the function. Then your function grabs the value of the textarea and parses it for the BBCode, which I'm not familiar with. It then would take that output and place it as the contents of any element.
HTML:
<textarea id="myText"></textarea>
<div id="preview"></div>
JavaScript (jQuery):
$(document).ready(function() {
var $textarea = $('#myText'),
$preview = $('#preview');
$textarea.on('keyup', function() {
var $this = $(this),
output = $this.val();
// Do something with the value of the code to parse out the BBCode stuff.
$preview.html(output);
});
});
Why don't you try a WYSIWYG editor like TinyCME, or CKEditor?

jQuery dynamic form creation in IE8 not working with large amounts of data

At work, we have a report that is generated with IP's in it. There is a link you can click on in that report that will open a new window and call a script which brings up a google map with pin points to where each IP originates from. Depending on the report, it can return a lot of IP's (around 150 at times). So, in order for this to work out, we are having to POST data to that script since using a GET, the max size of the URL is exceeded at times.
So what I'm doing is when that link it clicked to open the map, I call a Javascript function that I wrote which takes the IP's, creates a form tag with a target attribute which points to the new window that will be opened, appends it to the current page, then appends hidden input's of the IP's to that form. Then I open the new window with the specified name and submit the form. The code looks like this:
function submitToWindow(url, nameValuePairs) {
var form = document.createElement('form');
form.setAttribute('action', url);
form.setAttribute('target', 'newWindow');
form.setAttribute('method', 'POST');
for (i=0; i < nameValuePairs.length; i++) {
var nameValue = nameValuePairs[i].split('=');
var input = $('<input name="' + nameValue[0] + '" type="hidden" value="' + nameValue[1] + '"/>');
form.appendChild(input[0]);
}
document.body.appendChild(form);
window.open('http://fakeurl.com', 'newWindow');
form.submit();
}
I'm creating the hidden input elements with jQuery for cross browser compatibility since IE8 seems to not like it when you call blah.setAttribute('name', 'value'); It turns that "name" attribute into "submitName". Which causes issues when the form is submitted.
This works great in FF and even IE8 when there aren't a large number of hidden input's that have to be created. However, when we get around 150 hidden input items, nothing seems to happen in IE8. I don't get any script errors or anything, it's just as if the click on the map link was ignored. I'm guessing there's some breakdown in there.
Does anyone have any suggestions on how to do this better?
I figured out the issue with this.
This wasn't an issue with jQuery at all.. It seemed to be an IE8 limitation on string literals. The nameValuePairs was actually a query string that looked like so...
'Key=Value&Something=Nothing'
This was generated by a script that output some HTML. When that string became fairly large, IE8 just simply wouldn't call my submitToWindow function above. There were no errors from IE8, it just didn't call that function.
The way I worked around this was to have the script generate hidden form elements so that my javascript code wouldn't have to parse that long string.

Categories

Resources