Search code examples
javascriptjqueryhtmlbookmarklet

Simple task with javascript - Bookmarklet

Here's a simple form that contains a text field, a dropdown field, and a Submit button, like this: I created a js file named script.js :

<form action=" ">
  Name: <input type="text" name="name">
  Category <select name="category">
    <option value="volvo">First</option>
    <option value="saab">Second</option>
    <option value="fiat">Third</option>
  </select>
  <br>
  <input type="submit">
</form>

On my index.html I have this:

<html>
<body>
<script type="text/javascript" src="script.js"></script>

 <p><a href="javascript:(function(){my_script=document.createElement('SCRIPT');my_script.type='text/javascript';my_script.src='script.js?x=';"> Bookmarklet</a></p>
</body>
</html>

Based on this article how-to-make-a-bookmarklet-for-your-web-application I can do that because 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`"

But don't how to make appear my form appears like in that example? Please help, what should I do to make it able so in this Bookmarklet to call script.js so the form below to be showed like a sidebar or a popup? Please help!

EDIT:

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/1NTlfje4H-K3KyvBvUDqIA0z7pz_VQpijJV5NcbwX1Rs/edit?usp=sharing

when I do this nothing is done nly on submit button click concent inside iframe is replaced by main index.html . No error and no console log? I don't get it? I'm new on this. My code:

(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/1NTlfje4H-K3KyvBvUDqIA0z7pz_VQpijJV5NcbwX1Rs/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");
                    }
                }
            });
   });


})()

Here's the result: enter image description here

Solution

  • 1) document.getElementsByTagName('head')[0].appendChild(my_script);})() was missing from 

    <p><a href="javascript:(function(){my_script=document.createElement('SCRIPT');my_script.type='text/javascript';my_script.src='script.js?x=';"> Bookmarklet</a></p>

    change it to 

     <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>

    It place your on fly created js file inside head tag. You can place oit anywhere

    2) Form should be created by js, you just can't place HTML in js file. demo code example(script.js):

    (function(){
var f = '<form action=" ">Name: <input type="text" name="name">Category <select name="category"><option value="volvo">First</option><option value="saab">Second</option><option value="fiat">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();

})()

    You can put css dynamically or open html file in iframe directly, many possibilites. Question are welcome.