1

Here I create a form with iframe.

I want to save those data name and category using an ajax request. Here's a google spreadsheet where I want to save those data https://docs.google.com/spreadsheets/d/1WXzTVsIAKsGvXgm4ivRzTPN2P8kupJDcnH5sHdc0Vhw/edit?usp=sharing

I'm using bookmarklet so this is a script of it. when I do this nothing is done. No error and no console log? I don't get it? Please help me I'm new on this. My code looks like this , this file is called script.js :

(function(){
var f = '<form action="" method="post"> Name: <input type="text" id="name" name="name">Category <select name="category" id="category"><option value="first">First</option><option value="second">Second</option><option value="third">Third</option></select><br><input type="submit"></form>';
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(f);
iframe.contentWindow.document.close();

$("#submit").click(function(){
        var name = $('#name').val();
        var category = $('#category').val();
        console.log("po ajax" , name , category);
            $.ajax({
                url: "https://docs.google.com/spreadsheets/d/1WXzTVsIAKsGvXgm4ivRzTPN2P8kupJDcnH5sHdc0Vhw/edit?usp=sharing",
                data: { "name": name,"category": category},
                type: "POST",
                dataType: "xml",
                statusCode: {
                    0: function () {
                        // window.location.replace("ThankYou.html");
                        console.log("error");
                    },
                    200: function () {
                        // window.location.replace("ThankYou.html");
                        console.log("ok");
                    }
                }
            });
   });


})()

EDIT:

here is my index.html page where I defined my bookmarklet:

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <title></title>
</head>
<body>
<p><a href="javascript:(function(){my_script=document.createElement('SCRIPT');my_script.type='text/javascript';my_script.src='script.js';document.getElementsByTagName('head')[0].appendChild(my_script);})();"> Bookmarklet</a></p>

</body>
</html>
  • seems that you have 3 different answers that you'll need to check all :D – Velimir Tchatchevsky May 03 '16 at 11:13
  • Goodness, but I'm lost here. Why is this an iframe in the first place? I get that its a contrived example, but I don't understand a use case that would require the iframe or perform better with an iframe. – zipzit May 03 '16 at 11:16
  • Based on this article http://betterexplained.com/articles/how-to-make-a-bookmarklet-for-your-web-application/ I created a bookmarklet and there's **InstaCalc Bookmarklet** example. There it says this "Open/overlay a new page. Open a new page or draw a window on the current one, like a sidebar`" So for that I used iframe? Is this a bad choice? @zipzit –  May 03 '16 at 11:18
  • I think I would have made a stand alone `
    ` and then styled it appropriately. That way your JavaScript and the form would be in the same document. I guess that means I support the @sangramparmar solution.
     – zipzit May 03 '16 at 11:26
  • Thank you for your answer @zipzit but I'm new on this, and I don't get it? Can you explain it a little bit more cause doing it with iframe was the only solution I found? –  May 03 '16 at 11:33
  • Try this first without the iframe. in the `` portion of your html code, add: `
    Name:

    Category

    ` Get rid of the five iframe lines of code.     – zipzit May 03 '16 at 11:35
  • But here I call it as a js file, I cant call it like a html file: `

    Bookmarklet

    `     –  May 03 '16 at 11:40
  • Uh-oh. That google sheet is now locked away from public visibility. Without that permission nobody can attempt to solve this one. Was that intended? – zipzit May 03 '16 at 17:24
  • @zipzit I make it private because it was public. Now it is public again –  May 03 '16 at 18:08

4 Answers4

3

You cannot bind event to element that is in iframe from parent page.

As you are adding your form in iframe, the javascript function for binding click event to submit button should be also in iframe.

And because you are using jquery, the Jquery reference should be also exists in iframe.

sangram parmar
  • 8,462
  • 2
  • 23
  • 47
  • thank you for your answer. I made an edit to my question, I did add the page where code with that script is called. I'm new on this, I don't know how iframe works. How can I add ajax on iframe? –  May 03 '16 at 11:14
  • An inline frame is used to embed another document within the current HTML document. So the document/html-page in iframe works separately as individual page. – sangram parmar May 03 '16 at 11:19
1

You are not making an ajax call, because your form is submitted the default way and therefore reloads the page before your js function. You need to prevent the form submission by changing $("#submit").click(function(){ to $("#submit").click(function(e){ e.preventDefault(); ...//continue with current code

Velimir Tchatchevsky
  • 2,812
  • 1
  • 16
  • 21
1

$("#submit") wants an id to bind to so I suggest you rewrite <input type="submit"> to <input id="submit" type="submit">

P-A
  • 1,161
  • 12
  • 16
0

Hmm. There are a whole lot of issues here.

  • the javascript code is separate from the iframe content. (This is the Sangram Parmar answer.)
  • I'd recommend getting rid of the iframe in test, and just add the <form> code block as raw html.
  • The jquery #submit identifier doesn't fit the situation. Personally, I'd add a <form id="form_id" ... term and then call it via $(#form_id)..click(function(e){... Oh, wait. This is the concern raised by P-A.
  • Good catch by Velimir Tchatchevsky on the prevent default behavior (but I do see action="" in the original code. I do think the prevent default behavior is a good practice.
  • Next we will start getting Cross-Origin Request (CORS) errors depending on which browser the user is using.
  • You can fix that by using jsonp instead of xml as the data type, but when you do that the error you will see is: Refused to execute script from 'https://docs.google.com/spreadsheets/d/1NTlfje4H-K3KyvBvUDqIA0z7pz_VQpijJV5…ery22304475027782793899_1462276071176&name=&category=first&_=1462276071177' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled. Sigh. Not sure what that is, yet...
  • Aha... I think this link will prove helpful. Look at the response by 'dev' and the links he has provided.
Community
  • 1
  • 1
zipzit
  • 3,778
  • 4
  • 35
  • 63