XHR call using plain JavaScript

Question

I am having issue with XHR call made to GitHub domain from localhost.

Upon clicking on the button Click to get User Profile with Ajax+JS, a JS function getUser() gets called. Code works as expected, i.e., gets a particular GitHub user details(full name and avatar) and displays on the page.

## Code for "Click to get User Profile with Ajax+JS" button
<input type="button" value="Click to get User Profile with Ajax+JS" onclick="getUser()" id="jsBtn" />

BUT, when I call the same JS function on form submission using submit button (or return), it does not return the expected result i.e., user details.

## Code for "Submit" button
<form id="myForm" onsubmit="getUser()">
    #...
    <input type="submit"/>
</form>

Upon inspecting under Network, I see the difference in the way Request URL is formed in Request Headers Section:

## With GitHub username input as kirtithorat
## First Case With "Click to get User Profile with Ajax+JS" button
Request URL:https://api.github.com/users/kirtithorat

## Second Case With "submit" button
Request URL:http://localhost:3000/html_file_name?username=kirtithorat

Why the difference in behavior? The same JS function works for onclick but not for onsubmit.

NOTE:

I am looking for a Pure JS Solution. I know how to do it in jQuery.
I don't actually want the form to be submitted, only the onSubmit event should be triggered.

Here is my JSFiddle

jfriend00 · Accepted Answer · 2014-11-25 00:10:41Z

3

Your second URL looks like the form submission, NOT the result of calling getUser() (the getUser() ajax call probably came right before the form submission).

If you don't want the form to actually submit (which it appears is how you want it) and only want your onSubmit handler to be called, then you need to make sure the default behavior of submitting the form is prevented.

You can block form submission by just adding a

return false;

to the end of your getUser() onsubmit handler function.

Or, you can block the form submission by passing the event into the getUser() function and using e.preventDefault().

The other reason to block the form submission is that the page will reload with the results of the form submission and your javascript will not still be active to receive the results of the getUser() ajax call. So, you must use one and only one of the Ajax call or the form submission (it looks like you just want the ajax call so you can prevent the form submission).

edited Nov 25, 2014 at 0:10

answered Nov 24, 2014 at 23:47

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

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

7 Comments

dgo Over a year ago

I would prefer event.preventDefault() to return false; for coding clarity. Preventing the default submission is what you want to have happen, and though return false likely will accomplish this, it is a side effect rather than a directly intended effect.

Kirti Thorat Over a year ago

@jfriend00 Thanks for the response. I used return false in my code but no luck. Its the same Request URL:http://localhost:3000/html_file_name?username=kirtithorat

jfriend00 Over a year ago

@user1167442 - if this isn't working for you then you are not correctly blocking the submission of the form. Your getUser() function isn't even capable of creating that URL (different domain, different URL) and that second URL exactly matches a form submission done via a GET. So, the issue is how to correctly block the form submission. The getUser() code in your jsFiddle does NOT have return false in either of the places the function returns.

Kirti Thorat Over a year ago

@jfriend00 But then how does with onclick button event forms the perfect URL(different domain, different URL). I am still stumped on how to block form submission as you said.

jfriend00 Over a year ago

@KirtiThorat - see jsfiddle.net/jfriend00/v6c6vv2r/2 for blocking the form submission. Note changes to both the onsubmit() in the HTML and to the getUser() function.

|

Collectives™ on Stack Overflow

XHR call using plain JavaScript

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related