0

I have an ajax form which when submitted shows error or success messages, ideally I'd like to scroll the browser to the top of the form so the user can see these messages,

  $('.form-ajax').on('submit',function(e){

    e.preventDefault();
    var form = $(this);
    var url = form.attr('action');
    var method = form.attr('method');
    var data = form.serialize();
    var callback = form.attr('callback');
    
    if(typeof callback !=='string'){
       callback = function(response){
          $("#error-box").html('<div class="alert alert-success alert-block">'+'<button type="button" 
                                class="close" data-hide-closest=".alert" data-                                                        
             dismiss="alert">×</button>'+'<strong>'+response.message+'</strong>'+'</div>');
                                              
        }
    }

    Helper.ajax (url,method,data,callback)

});

blade :

  @if(isset($sections))
    <form action="/section/{{$sections->section_id}}" class="form-ajax" method="PUT">
        <input type="hidden" value="put" name="_methods">
        @csrf()
    @else
    <form class="form-ajax" action="/section" method="POST">
    @csrf()
  @endif

        <div id="error-box">

        </div>  

        <input type="text">

        <button onclick="myFunction()" class="btn btn-dark scroll-top" style="float:right;">Save</button>

    <form>
lBestWoW
  • 31
  • 8

0 Answers0