Arrêter l'actualisation sur le formulaire envoyer lors de l'utilisation de javascript

J'ai une forme simple inspirée par ce method for encoding svg files as data uri's.Arrêter l'actualisation sur le formulaire envoyer lors de l'utilisation de javascript

Le formulaire de soumission est géré par vanilla Javascript et fonctionne très bien, sauf que la page est actualisée sur le soumettre et je dois retour pour obtenir le résultat. Comment puis-je arrêter l'actualisation de la page?

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

Source

2017-10-20 sansSpoon

Soumettez-vous fait quelque chose à un serveur? Si non, alors il n'y a aucune raison d'avoir un formulaire en premier lieu. – djfdev

preventDefault peut bloquer la propagation d'un autre événement: imo –

Ajouter type = "button" ... sinon il considérer comme type = "submit" et donc la page rafraîchir

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

Source

2017-10-20 06:26:03

Je vous suggère pour utiliser "soumettre" au lieu de "cliquer" de cette façon, vous allez attraper tous les événements de soumission, non seulement le clic sur le bouton, puis appelez preventDefault sur l'événement pour éviter le rechargement de page;)

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>

Source

2017-10-20 06:40:17

Arrêter l'actualisation sur le formulaire envoyer lors de l'utilisation de javascript

Répondre

Questions connexes