Firebaseの機能とホスティングでJQueryボタンをクリック/フォーム送信する

Question

Firebaseの機能とホスティング機能を使用してウェブサイトを作成しようとしています。すべてが完璧に機能しますが、何らかの理由でユーザーがフォームに記入しようとすると、Webサイトがリロードされます。フォームのボタンにonClickリスナーを配置するか、onSubmitをフォームに添付しようとしています。しかし、何も呼ばれることはありません。私は何が間違っているのか分かりません。どんな助けもありがとう。

<form id="join-us-form" class="container" onsubmit="joinUsButtonCalled()"> 
         <div class="form-row"> 
          <div class="form-group col-sm-12"> 
           <label for="joinUsFullName" class="sr-only">Full Name</label> 
           <div class="input-group mb-2 mb-sm-0" style="border: 1px solid white; border-radius: 5px"> 
            <div class="input-group-addon" style="background-color: transparent"> 
             <i class="fal fa-user" style="color: white;"></i> 
            </div> 
            <input type="text" class="form-control" id="joinUsFullName" placeholder="Your Name" 
              required style="background: transparent; color: white"> 
            <div class="invalid-feedback"> 
             Please provide us with your name. 
            </div> 
           </div> 
          </div> 
         </div> 
         <div class="form-row"> 
          <div class="form-group col-sm-12"> 
           <label for="joinUsEmailAddress" class="sr-only">Email Address</label> 
           <div class="input-group mb-2 mb-sm-0" style="border: 1px solid white; border-radius: 5px"> 
            <div class="input-group-addon" style="background-color: transparent"> 
             <i class="fal fa-envelope" style="color: white;"></i> 
            </div> 
            <input type="email" class="form-control" id="joinUsEmailAddress" 
              placeholder="Email Address" 
              required style="background: transparent; color: white"> 
            <div class="invalid-feedback"> 
             Please provide a valid email. 
            </div> 
           </div> 
          </div> 
         </div> 

         <div class="form-row"> 
          <div class="form-group col-sm-12"> 
           <label for="joinUsWorkAs" class="sr-only">Work as..</label> 
           <div class="input-group mb-2 mb-sm-0" style="border: 1px solid white; border-radius: 5px"> 
            <div class="input-group-addon" style="background-color: transparent"> 
             <i class="fal fa-tasks" style="color: white;"></i> 
            </div> 
            <input type="text" class="form-control" id="joinUsWorkAs" 
              placeholder="e.g: Designer, App Developer ..." 
              required style="background: transparent; color: white"> 
            <div class="invalid-feedback"> 
             Please provide a valid work as. 
            </div> 
           </div> 
          </div> 
         </div> 

         <button id="joinUsButton" class="btn btn-warning btn-rounded" type="submit" onClick="joinUsButtonCalled()">Get in Touch</button> 
        </form> 



<script> 
    function joinUsButtonCalled(event){ 
     $('#join-us-form').preventDefault(); 
     console.log('I am being called here in Join Us()'); 
     event.preventDefault(); 
    } 
</script> 

Answer 1

あなたはjQueryのを使用しているので、私はこのような何かをしようとするだろう：

$('#join-us-form').submit(function(ev) { 
    ev.preventDefault(); //to stop the form from submitting 
    //do your validation stuff 
    this.submit(); // If all the validations succeeded 
}); 

$('#joinUsButton').on('click', function(ev){ 
    ev.preventDefault(); //to stop the form from submitting 
    //do your validation stuff 
    $('#join-us-form').submit();// If all the validations succeeded 
}); 

スクリプトに問題は「イベント」は、実際に「未定義」原因だったことを「onSubmit」いずれかを渡しませんでした関数 "joinUsButtonCalled"への引数。

「$('#join-us-form').preventDefault();」と同じです。原因：preventDefault()は、ジェネリックJQUERYオブジェクトのメソッドではなく、ユーザークリックによって発生するイベントオブジェクトのようなEventObjectに属します。 あなたのコンソールは「未定義」エラーでいっぱいだったと思います。 は最後に、「onSumbit」と「onClickの」属性を取り除くことができます。

<form id="join-us-form" class="container"> 
... 
    <button id="joinUsButton" class="btn btn-warning btn-rounded" type="submit">Get in Touch</button> 
</form>