Externalisation de fichier javascript

Bonjour,

Voilà mon site : http://simcha.fr

J'essaie d'externaliser mes fonctions javascript lors du click sur mon formulaire de newsletter en haut à gauche, car il est impossible d'appeler 2 fois la même librairie jquery sur une même page html. (j'ai besoin de cette librairie pour une animation dynamique de défilement (easing au scroll) lors des clics sur le menu principal, et pour un formulaire de newsletter (qui lui n'est pas externalisé à la base (c'est un code que j'ai trouvé sur le net sur cette page : https://les-enovateurs.com/donnees-formulaire-html-google-sheet/?unapproved=4555&moderation-hash=6676e1881621c9cc3aa5a09db9017300#comment-4555) : et si je n'appelle qu'une fois la librairie jquery : qu'un seul des deux outils fonctionne...).

Mon problème : l'externalisation ne marche pas...
J’ai beau tenter de mettre son code javascript dans 1 ou 2 fichier .js externes, l’appeler (les appeler) dans le header et mettre dans le formulaire html : “onclick=”function()” ou “onclick=”function(e)”… rien à faire, ça ne marche pas

Vous pourrez voir sur le lien du site ci-dessus tous les échanges que j'ai eu avec le modérateur/créateur de ce code pour le googlesheet. Il me propose de faire un appel ajax de la librairie... j'y comprends pas grand chose, j'ai tenté un appel ajax mais rien à faire.

Voilà mon code html : https://pastebin.com/LEuEYLkk
Et mon code .js externe (le tien) : https://pastebin.com/dMk6idV8

Merci pour votre aide !

Merci Jencal.

En effet j'ai trouvé ça :
var $form = $('form#test-form'),

Du coup j'ai fait ça :
var $form = $('form\#test-form'),

Cependant le probleme reste entier.
Quand j'externalise ce code en faisant la modif que tu m'as dit (que je viens de citer) : https://pastebin.com/dMk6idV8
Eh bien le bouton "inscription newsletter" ne marche pas.

Voilà le code que j'ai mis pour le bouton dans le html :

<form id="test-form">
    <div>
        <input style="background-color:black; color:white;" type="text" id="mail" name="mail" value="Mon adresse mail..." onclick="javascript:this.value=''">
    </div>
    <div class="button">
        <button onclick="function()" id="submit-form" type="submit" name="envoyer">Inscription Newsletter</button>
    </div>
</form>

J'ai bien essayé de faire : onclick="function(e)" mais c'est pareil, marche pas. Faut dire qu'on dirait qu'il y a plein de function dans le javascript...

En fait, le mec qui avait donné ces codes n'avait pas mis de onclick="function()" car il invite à mettre le javascript juste après le formulaire dans le html directement, ce qui me casse mon animation de défilement javascript.

A ce propos, pour info, ce qui me casse mon autre animation easing java : c'est le doublon d'appel à la librairie jquery, qu'il faut placer juste avant le javascript du formulaire pour le faire marcher (et que je dois, hélas, aussi placer dans mon header pour faire marcher mon appel vers le javascript externalisé de mon animation easing.

Voilà l'appel en doublon que je dois faire et qui pose problème (je l'ai mis en version "appel ajax" suite aux conseils du concepteur du formulaire, en vain...) :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Désolé, c'est complexe tout ça
Modifié par simon_f (26 Aug 2019 - 16:14)

Déjà.. met la version actuel de jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


https://developers.google.com/speed/libraries/#jquery
Modifié par JENCAL (26 Aug 2019 - 16:56)

Je ne trouve pas le a[href^=#] dans mes fichiers javascript.
Tu peux me montrer ou il est ? J'ai beau faire une recherche dans mes documents...

Et je viens de tester avec ta derniere version de jquery. Résultat le formulaire marche plus. Visiblement, il a besoin de l'ancienne version de jquery.

Concernant le bouton html : il n'y a pas besoin d'appeller de fonction dans le javascript externalisé du coup ? Ca fonctionnera si je laisse le javascript dans ma page html ?
Modifié par simon_f (27 Aug 2019 - 20:55)

Revoilà le script :

/**
 * jQuery serializeObject
 * @copyright 2014, macek <paulmacek@gmail.com>
 * @link  https://github.com/macek/jquery-serialize-object
 
 * @license BSD
 * @version 2.5.0
 */
!function(e,i){if("function"==typeof define&&define.amd)define(["exports","jquery"],function(e,r){return i(e,r)});else if("undefined"!=typeof exports){var r=require("jquery");i(exports,r)}else i(e,e.jQuery||e.Zepto||e.ender||e.$)}(this,function(e,i){function r(e,r){function n(e,i,r){return e[i]=r,e}function a(e,i){for(var r,a=e.match(t.key);void 0!==(r=a.pop());)if(t.push.test(r)){var u=s(e.replace(/\[\]$/,""));i=n([],u,i)}else t.fixed.test(r)?i=n([],r,i):t.named.test(r)&&(i=n({},r,i));return i}function s(e){return void 0===h[e]&&(h[e]=0),h[e]++}function u(e){switch(i('[name="'+e.name+'"]',r).attr("type")){case"checkbox":return"on"===e.value?!0:e.value;default:return e.value}}function f(i){if(!t.validate.test(i.name))return this;var r=a(i.name,u(i));return l=e.extend(!0,l,r),this}function d(i){if(!e.isArray(i))throw new Error("formSerializer.addPairs expects an Array");for(var r=0,t=i.length;t>r;r++)this.addPair(i[r]);return this}function o(){return l}function c(){return JSON.stringify(o())}var l={},h={};this.addPair=f,this.addPairs=d,this.serialize=o,this.serializeJSON=c}var t={validate:/^[a-z_][a-z0-9_]*(?:\[(?:\d*|[a-z0-9_]+)\])*$/i,key:/[a-z0-9_]+|(?=\[\])/gi,push:/^$/,fixed:/^\d+$/,named:/^[a-z0-9_]+$/i};return r.patterns=t,r.serializeObject=function(){return new r(i,this).addPairs(this.serializeArray()).serialize()},r.serializeJSON=function(){return new r(i,this).addPairs(this.serializeArray()).serializeJSON()},"undefined"!=typeof i.fn&&(i.fn.serializeObject=r.serializeObject,i.fn.serializeJSON=r.serializeJSON),e.FormSerializer=r,r});



var $form = $('form#test-form'),
    url = 'https://script.google.com/macros/s/AKfycbyEr2sy9bXgzi90ndLl_Y1KKlq0pj7OVv9Q-qwX0uaEkbptnFU/exec';

function(e) {
  e.preventDefault();
  var jqxhr = $.ajax({
    url: url,
    method: "GET",
    dataType: "json",
    data: $form.serializeObject()
  }).success(function(){
         // do something
alert('Inscription effectu\351e avec succ\350s.\nNous vous tiendrons inform\351 de nos concerts.\nA bientot !');
      }
    );
});

Modifié par simon_f (27 Aug 2019 - 20:54)