CODEWITHSUNDEEP
javascript
ilernincplusminus
ilernincplusminus

Reputation: 3

HTTP Request effects URL

Everything works fine, it submits the data to the url, and the data gets put into the database just fine. The only problem I am having is the below code is on my index.php page, it submits the data to the submitusername.php page and everything works however after it submits the data to the submitusername page the url turns into "/index.php?username=blahblahblah" this isn't a major issue but it is something I would like to learn how to fix/what is causing it.

function submitUsername(){
    var submitData = new XMLHttpRequest();
    var username = document.getElementById('username').value;
    submitData.onreadystatechange = function() {
        if(submitData.readyState == 4 && submitData.status == 200) {
            callback(submitData.responseText);
        }
    },
    submitData.open("GET", "submitusername.php?username="+encodeURIComponent(username), true);
    submitData.send();
}

Upvotes: 0

Views: 35

Answers (1)

Quentin
Quentin

Reputation: 944206

Nothing in the code you've provided would have the effect you describe.

It sounds like you are trying to trigger the JavaScript when a form is submitted, but the form is submitting normally and loading a new page.

You need to prevent the default behaviour of the form submission.

Change your event handler function to capture the Event object and prevent the default behaviour, then make sure you are binding the event handler appropriately.

function submitUsername(evt){
    evt.preventDefault
    var submitData = new XMLHttpRequest();

and

document.getElementById('myform').addEventListener('submit', submitUsername);

Upvotes: 1

Related Questions