page reloads on chrome extension message send?

Question

So I'm running a data collection project by injecting a html form into a third party website, via a chrome extension, which instructs users to describe the data they see and submit it to my server.

For some bizarre reason, however, whenever the user clicks the "submit" button to send the form contents to the background page (and from thence to the server), the underlying page reloads, and, not only that, but it reloads with the contents of the form I injected showing up in the url after reload. Which is kind of bizarre behavior.

I don't know if this is something in my code, or even if it's something in the underlying web page's code (maybe it redefines chrome.runtime.sendMessage or something as some kind of anti-extension technique?!!?). I'd really like to stop this behavior if possible... does anyone have any ideas?

The relevant parts of my code, stripped down a little:

var cururl = window.location.href var codestring= "[A HTML FORM TO INJECT]" var raformvalues = {}; function codeValues() { $.each($('#mainCoding').serializeArray(), function(i, field) { raformvalues[field.name] = field.value; }); } function sendValues() { let pageinfo = {"page": document.documentElement.outerHTML, "url": cururl, "title": document.title, "timestamp": String(Date.now())}; let tosend = $.extend({"type": "doctype"}, pageinfo, raformvalues); chrome.runtime.sendMessage(tosend); chrome.storage.local.set({'lasturl': pageinfo.url}); $("#pgcodediv").empty(); location.href = cururl; // note: I added this line to try to stop the reloading and url/changing behavior. behavior is the same with and without it. } function appendCodingInfo() { $("#headerID").append(codestring); $( ":checkbox, :radio" ).click( codeValues ); $( ":text" ).change( codeValues ); $( "#codingsubmit" ).click(sendValues); } appendCodingInfo()

when the user hits the submit button (#codingsubmit, of course), the message gets passed and the background page handles it correctly, but the page refreshes unbidden, and the contents of raformvalues show up in the URL of the refreshed page (i.e., when I call window.location.href from the console the contents of that object show up as parameters to a get request, i.e., http://url?prop=value&prop2=value2 -- no clue why.

Haibara Ai · Accepted Answer · 2016-08-15 00:03:44Z

If you click a button with type="submit" in a form, by default browser will reload the page after the form is submitted.

To prevent the page reloaded, either replace type="submit" with type="button" or call e.preventDefault() inside sendValues handler.

Appendix:

According to MDN, the default value for button is submit.

type

The type of the button. Possible values are:

submit: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.

reset: The button resets all the controls to their initial values.

button: The button has no default behavior. It can have client-side scripts associated with the element's events, which are triggered when the events occur.

menu: The button opens a popup menu defined via its designated element.

Oh god, is it really that simple? Heh, proves once again that the hard part about JavaScript isn't JavaScript but the Dom and random browser behavior. Thanks.
hmm... but wait. The button I'm injecting in the page doesn't have type = submit. So that can't be it. But let's see if calling preventDefault works...
@PaulGowder, I just went through some docs and found the default value of type is submit, please see updated post.

Collectives™ on Stack Overflow

page reloads on chrome extension message send?

1 Answer 1

Appendix:

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Appendix:

3 Comments

Related