3

I have a Javascript function for creating new form elements on a web page. The function is called by an onclick event.

I can't figure out how to run the function without the onclick event. I need to do this as I have Python code generating content to prepopulate the form elements, but still wish to be able add and remove the form elements dynamically with the Javascript.

Javascript function:

    pcount = 0;
    createinputprice =function (){
        field_area = document.getElementById('pricetable');
        var tr = document.createElement("tr");
        var cella = document.createElement("td");
        var cellb = document.createElement("td");
        var input = document.createElement("input");
        var input2 = document.createElement("input");
        input.id = 'descprice'+pcount;
        input2.id = 'actprice'+pcount;
        input.name = 'descprice'+pcount;
        input2.name = 'actprice'+pcount;
        input.type = "text";
        input2.type = "text";
        cella.appendChild(input);
        cellb.appendChild(input2);
        tr.appendChild(cella);
        tr.appendChild(cellb);
        field_area.appendChild(tr);
        //create the removal link
        var removalLink = document.createElement('a');
        removalLink.onclick = function(){
            this.parentNode.parentNode.removeChild(this.parentNode)
        }
        var removalText = document.createTextNode('Remove Field');
        removalLink.appendChild(removalText);
        tr.appendChild(removalLink);
        pcount++
    }

HTML:

<table id="pricetable">
</table>
<a href='#' onclick="createinputprice()">Add Price</a>
<script type="text/javascript">
    createinputprice();
</script>

The onclick event works fine in JSFiddle but calling the function directly doesn't work at all.

Improve this question
7
  • 1
    Wait untill the document is loaded Commented Sep 26, 2013 at 13:37
  • 2
    Seems to work fine here jsfiddle.net/j08691/zxaxJ/1 Commented Sep 26, 2013 at 13:38
  • 2
    Try it on window.onload or document.ready if you are using jquery Commented Sep 26, 2013 at 13:38
  • 1
    Fair point @j08691, didn't pick up on that... saw the onclick and made stupid assumption. I have removed my comment Commented Sep 26, 2013 at 13:39
  • 1
    @GurpreetSingh What has jquery to do with this question ? Its vanilla JS Commented Sep 26, 2013 at 13:39

3 Answers 3

Reset to default
7

you can put it into tag using 'onload' event:

<body onload='yourfunction()'>

or just use jQuery:

$(document).ready(function() {
    yourFunc();
});
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

I suppose you could use <body onload="yourfunction()"> you also should look into http://www.w3schools.com/js/js_htmldom_events.asp.

As you can see there are quite a few events available in javascript one should allways pick the right tool(event) for doing the work.

Improve this answer

Comments

1

If you want to call jquery function on Page load: you can use $(document).ready(function(){});

For example:

Jquery- 

<script type="text/javascript">
    $(document).ready(function(){
       createinputprice();
    });
 </script>

and you can also fire the click event in Jquery:

HTML-

<a id="myLink" href='#' onclick="createinputprice();">Add Price</a>

Jquery- 

 <script type="text/javascript">
     $(document).ready(function(){
          $('#myLink').click();
     });
 </script>
Improve this answer

3 Comments

It is entirely unnecessary to load jQuery for something this basic.
Yes, It's not a perfect answer for this work. but, i post this because user want to run function directly, not onClick event.
The code works fine as it is, see my comment above and the link to jsFiddle.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.