Why the page runs into NullPointerException after calling JavaScript function?

Question

I need to enable user to click on a link to show a lightbox which has a form, submit the form and redirect user to a new page.

To implement that, I define two javascript functions, lightboxform function to show the lightbox and subform function to submit the form. The problem is that the second javascript function (subform) sends the request to back-end but rather than redirecting to index page append its parameters to the origin address.

Lets say I am on following address:

www.example.com/show?id=2

I click on the link to show the lightbox, after submitting the form located in lightbox, the address of the page get changed to the following address:

www.example.com/show?p=3444&q=4555 << id parameter is replaced by p,q which are the parameters that I am trying to submit to backend

Long story short: I need to enable users to click on a link, a lightbox be shown, user submit the form in the lightbox to back-end and be redirected to the index page.

Code

//function to show lightbox
function lightboxform(){
    document.getElementById("lightbox").style.display = "Block";
    document.getElementById("cover").style.display = "Block";
    if(window.XMLHttpRequest)
    {
        xmlhttp = new XMLHttpRequest();
    }
    else
    {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
        {
            document.getElementById("lightbox").innerHTML=xmlhttp.responseText;
        } 
    }
    xmlhttp.open("get","../../lightbox/myform",false);
    xmlhttp.send();
    return false;
}

//function to submit the lightbox form to backend and redirect user to new address
function subform(){
    p = $('#p').val();
    q = $('#q').val();
    document.getElementById("lightbox").style.display = "Block";
    document.getElementById("cover").style.display = "Block";
    if(window.XMLHttpRequest)
    {
        xmlhttp = new XMLHttpRequest();
    }
    else
    {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
        {      
            document.getElementById("lightbox").style.display = "none";
            document.getElementById("cover").style.display = "none";
            window.location = ("http://localhost:8080/index.action");
        } 
    }
    xmlhttp.open("get","../../lightbox/processForm?p="+p+"&q="+q,false);
    xmlhttp.send();
}

lightbox's form

 <form id="form393" onsubmit="return subform()">
        <input id="p" name="p" type="text"/>
        <input id="q" name="q" type="text"/>
        <input type="submit" value="submit" />
 </form>

Also, your urls don't match, at all. Where does show come from? I see processForm and myform, but no myproducts, etc. — Daedalus, Mar 03 '14 at 04:30
question is updated, I am editing the html file to upload it. — AlexCartio1, Mar 03 '14 at 04:36
Please don't upload the html file; only post the minimal needed. If future users are having the same problem, dead links do no good. — Daedalus, Mar 03 '14 at 04:40
to negative voters : if you just vote down a question the mistake will be made over and over because the person who posted the question does not know what was wrong with his/her previous questions. — AlexCartio1, Mar 03 '14 at 04:51
So, lets see if I'm understanding you correctly; you want to append more parameters to the current url, instead of replacing them? — Daedalus, Mar 03 '14 at 05:14
I just need to submit p and q parameters using the form and redirect user to http://localhost:8080/index.action address. — AlexCartio1, Mar 03 '14 at 05:19
I see the problem; you're using POST for your second ajax request, but you supply no parameters with send. When using POST, you must supply the query string to the .send() method, instead of appending to the url, which is GET. — Daedalus, Mar 03 '14 at 05:22

score 0 · Answer 1 · edited May 23 '17 at 12:10

0

Well, without viewing how your processing page works, the following is a shot in the dark based on the information available;

The problem with your ajax request is how you finally execute. In the following two lines:

xmlhttp.open("POST","../../lightbox/processForm?p="+p+"&q="+q,false);
xmlhttp.send();

You make a POST request, but don't give the request any data. For a POST request, the data is sent through headers, instead of through the url. So, you must append the query string to the .send() method:

xmlhttp.open("POST","../../lightbox/processForm",false);
xmlhttp.send("p="+p+"&q="+q);

Assuming your processing page uses the post array, this should work.

Edit:

In regards to your update, simply window.location isn't precisely right, though it isn't wrong either. According to the article linked below, while the Location object of the window object is read-only, it can be assigned a string as a sort of alias to href. Given this is what you're currently doing, and such is not working for you, I'd suggest replace instead. Example:

window.location.replace("http://www.example.com/"); //closest to http redirect
window.location.href = "http://www.example.com/"; //simulate user clicking link

I'd suggest you check out this answer for more information, as well as the MDN article regarding it.

DEMO

edited May 23 '17 at 12:10

Community

1
1

answered Mar 03 '14 at 05:29

Daedalus

7,586
5
36
61

1

I've edited the code but the problem still persists. – AlexCartio1 Mar 03 '14 at 06:04
1

@AlexCartio1 Updated. But please do not modify your question making this answer then obsolete, so that what it addresses is no longer visible. Please add to it, but don't delete the original question. – Daedalus Mar 03 '14 at 07:40
@Daedalus what I got from the question is that, there are two javascript functions, one is to show lightbox and the other is used to get the form submitted to back-end and redirect user to index page. I suppose thats why the second function does not redirect to the specified address. – J888 Mar 03 '14 at 07:41
@J888 I'm guessing you're the one that downvoted; can you please clarify your comment? – Daedalus Mar 03 '14 at 07:43
@Daedalus no I am the one that upvoted thats why the negative vote is gone :D which part of it you did not get ? please tell me to explain further. – J888 Mar 03 '14 at 07:44
@J888 Then I apologize for that assumption, thanks for the upvote. As to the clarification, why would the existence of a lightbox cause the second function to fail? Though of course the above is taken with the idea the lightbox doesn't use an iframe of the form, not that I could even know such details with the provided html and code. So, if there is an iframe, the OP should specify that there is for clarity. – Daedalus Mar 03 '14 at 07:47
1

@Daedalus no worries, I just assumed thats because of the lightbox that it does not redirect. As question shows, seems iframe has not been used. I tried to rephrase the question not sure if it is visible to you. – J888 Mar 03 '14 at 07:54
1

it is weird that the second function is appending its parameters to the origin window address. – J888 Mar 03 '14 at 07:57
@AlexCartio1 To clarify, is this code hosted on your personal computer, or a website? – Daedalus Mar 03 '14 at 08:00
@Daedalus on my personal computer. it running on localhost. – AlexCartio1 Mar 03 '14 at 22:41

Why the page runs into NullPointerException after calling JavaScript function?

1 Answers1