使用javascript时停止刷新表单提交

问题描述：

我有一个简单的表单，受此启发method for encoding svg files as data uri's。使用javascript时停止刷新表单提交

表单提交由vanilla Javascript处理，并且工作正常，但页面得到刷新提交并且我必须返回才能得到结果。我怎样才能停止页面刷新？

<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>

你真正的东西提交到服务器？如果不是，那么没有理由首先有一个表格。 – djfdev

preventDefault可能会锁定其他事件传播：imo –

答

添加类型= “按钮” ...否则会认为它是类型= “提交”，因此页面刷新

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

答

我会建议你使用“提交”而不是“点击”这种方式，您将捕获所有提交事件，不仅点击按钮，然后调用事件的preventDefault以避免页面重新加载;）

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>

使用javascript时停止刷新表单提交

相关推荐