Stop refresh on form submit when using javascript

Question

I have a simple form inspired by this method for encoding svg files as data uri's.

The form submit is handled by vanilla Javascript and works fine, except that the page get's refreshed on the submit and I have to back to get the result. How can I stop the page refresh?

<body>
<form id="svgUriEncode">
    <textarea rows="4" cols="50" id="svgIn"></textarea>
    <button id="encode">encode</button>
    <textarea rows="4" cols="50" id="svgOut"></textarea>
</form>
<script type="text/javascript">

    var form = document.getElementById("svgUriEncode");

    function encodeOptimizedSVGDataUri(form) {
        var uriPayload = encodeURIComponent(form.svgIn.value) // encode URL-unsafe characters
        .replace(/%0A/g, '') // remove newlines
        .replace(/%20/g, ' ') // put spaces back in
        .replace(/%3D/g, '=') // ditto equals signs
        .replace(/%3A/g, ':') // ditto colons
        .replace(/%2F/g, '/') // ditto slashes
        .replace(/%22/g, "'"); // replace quotes with apostrophes (may break certain SVGs)

        form.svgOut.value = 'data:image/svg+xml,' + uriPayload;
    }


    form.encode.addEventListener("click", function () {
      encodeOptimizedSVGDataUri(form);
    });

</script>

Are you actually submitting something to a server? If not, then there's no reason to have a form in the first place. — djfdev
– djfdev, Commented Oct 20, 2017 at 6:41

Rohit Kumar · Accepted Answer · 2017-10-20 06:26:03Z

2

Add type ="button"... otherwise it will consider it as type="submit" and hence the page refresh

 <button  type ='button' id="encode">encode</button>

answered Oct 20, 2017 at 6:26

Rohit Kumar

1,8102 gold badges14 silver badges27 bronze badges

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

Comments

Roberto Bisello · Accepted Answer · 2017-10-20 06:40:17Z

I'll suggest you to use on "submit" instead of on "click" this way you'll catch all submit event, not only the click on the button, then call preventDefault on the event to avoid page reload ;)

var form = document.getElementById("svgUriEncode");

    function encodeOptimizedSVGDataUri(form) {
        var uriPayload = encodeURIComponent(form.svgIn.value) // encode URL-unsafe characters
        .replace(/%0A/g, '') // remove newlines
        .replace(/%20/g, ' ') // put spaces back in
        .replace(/%3D/g, '=') // ditto equals signs
        .replace(/%3A/g, ':') // ditto colons
        .replace(/%2F/g, '/') // ditto slashes
        .replace(/%22/g, "'"); // replace quotes with apostrophes (may break certain SVGs)

        form.svgOut.value = 'data:image/svg+xml,' + uriPayload;
    }


    form.addEventListener("submit", function (evt) {
      evt.preventDefault();
      encodeOptimizedSVGDataUri(form);
    });

<form id="svgUriEncode">
    <textarea rows="4" cols="50" id="svgIn"></textarea>
    <button type="submit" id="encode">encode</button>
    <textarea rows="4" cols="50" id="svgOut"></textarea>
</form>

Collectives™ on Stack Overflow

Stop refresh on form submit when using javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related