Element uninitialized in javascript/Html when it should be

Question

Bellow is my code snippet that present the problem what I'm facing with:

<!-- in a div -->
<a href="#" onclick="submit('/netnfork/site/billing/billing_plan_type', document.getElementById('dataForm'));" title="${addPlan}">
    <img src="/path/to/button" height="18" width="25" class="add_button"/>
</a>

<!-- bellow this, in another div -->
<form id="dataForm" action="/a/path" method="post">     
    <input type="hidden" name="page_number" id="pageNumber" value="//some JSP code"/>     
    <input type="hidden" name="row_id" id="rowId" />        
</form>

the submit function is declared in another file that is included in the beginning of this html file.

The problem is, that when I click on the link, I get this error: Uncaught TypeError: Cannot set property 'action' of null. Trying to alert the second parameter of submit function, I get null.

function submit(url, form) {
    alert(form);
    form.action = url;
    form.submit();  
}

I have an exact similar page in the same application that is working good. Can anyone explain me why I get this behavior?

I ran this page in Chrome and Mozilla, but the error occurs in both of them.

I tested your code in jsfiddle and it working as expected jsfiddle.net/Myhw3/1. — Anoop
– Anoop, Commented Sep 27, 2012 at 8:09
@artaxerxe I tried this it's working fine jsfiddle.net/cxVEJ/8 . — kannanrbk
– kannanrbk, Commented Sep 27, 2012 at 8:13
@Shusl I also have the same code (just a little bit different) in other page, and it works fine :( — artaxerxe
– artaxerxe, Commented Sep 27, 2012 at 8:22

epoch · Accepted Answer · 2012-09-27 08:08:31Z

1

Your problem is that this (specifically getElementById):

submit('/netnfork/site/billing/billing_plan_type', document.getElementById('dataForm'));

gets evaluated before the form actually exists in the DOM, to fix the problem you will need to change it to the following:

function submit(url, formName) {
    var form = document.getElementById(formName);
    form.action = url;
    form.submit();
}

and in your HTML:

submit('/netnfork/site/billing/billing_plan_type', 'dataForm');

Alternatively you should use event listeners to handle this sort of functionality

answered Sep 27, 2012 at 8:08

epoch

16.7k5 gold badges50 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

artaxerxe Over a year ago

Even with your suggestion, error is the same. I also put the form before of link (<a>) element, but the error persists.

epoch Over a year ago

the only other possibility is that there are multiple elements with the same id on your page then. Can you post an example for us to re-create?

artaxerxe Over a year ago

I found the solution, trying to put a simplified form of my html file, at your suggestion. That's why I accepted your answer. :). Thanks.

epoch Over a year ago

Happened to me before as well, sometimes you get the answer by just trying to shorten your own code for an example :)

artaxerxe · Accepted Answer · 2012-09-27 08:49:23Z

0

I found the problem: above the code presented I had a div like this:

<form action="#" method="post" id="submenuForm" />.

I just put this instead:

<form action="#" method="post" id="submenuForm" > </form>, and now works good.

answered Sep 27, 2012 at 8:49

artaxerxe

6,47121 gold badges73 silver badges110 bronze badges

Collectives™ on Stack Overflow

Element uninitialized in javascript/Html when it should be

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related