Ждите сообщения при отправке формы

Я хочу сделать что-то очень простое. У меня есть одна кнопка на моей странице ..Ждите сообщения при отправке формы

<body> 
<img src="images/myloadingimage.png" style="display: none;" id="loading_image"> 
    <form id="myform" type="post" action="test.php" > 
     Name : <input type="name" id="name" value="" /><br /> 
     LName : <input type="lname" id="lname" value="" /><br /> 
     <input type="submit" id="submit" name="Submit" /> 
    </form> 
</body>

Теперь то, что я хочу, когда пользователь нажимает эту кнопку отправки .. Это показывает, что «загрузки» GIF анимацию до отправки формы не завершится. Я хочу в Javascript. Как это реализовать.

источник

2015-02-23 Medoju Narendar

Вы хотите отправить форму с помощью AJAX? – dfsq

просто отправляю переменные post в test.php, если возможно и javascript, и ajax –

Используйте Jquery BlockUI plugin с помощью jquery Ajax call.

для показа загрузки сообщения вам нужно написать

$.blockUI();

для сокрытия загрузки сообщения, которое нужно написать

$.unblockUI();

Есть также много настроек, доступных для этого плагина. Check the demos here

This link will help you to integrate Jquery BlockUI plugin with Jquery Ajax call

Надеется, что это помогает.

источник

2015-02-23 09:59:00

Вам необходимо обработать событие onsubmit вручную, выполнив запрос POST AJAX. Перед запросом вы показываете загружаемое изображение, и после его завершения вам нужно снова скрыть его.

Проверьте код с комментариями на важных местах:

$('#myform').on('submit', function(e) { 

    // Prevent default browser form submission with page reload 
    e.preventDefault(); 

    // Show loading indicator 
    var $loading = $('#loading_image').show(); 

    // Make POST request with form parameters 
    $.post(this.action, $(this).serialize()).done(function(response) { 

     // Hide loading image once request is complete 
     $loading.hide(); 

     // Do something with responce 
     console.log(response); 
    }); 
})

источник

2015-02-23 10:01:23 dfsq

просто над записью по умолчанию действие формы и отобразить значок загрузки и удалить после успешного завершения вашего запроса Ajax.

образец:

$("form").submit(function (e) { 
      e.preventDefault(); // stops the default action 
      $("#loader").show(); // shows the loading screen 
      $.ajax({ 
       url: test.php, 
       type: "POST" 
       success: function (returnhtml) { 
        $("#loader").hide(); // hides loading sccreen in success call back 
       } 
      }); 
     });

источник

2015-02-23 10:01:47 StateLess

$ .ajax делает запрос GET по умолчанию, вы хотите 'type: POST'. – dfsq

Да, когда мы нажимаем на отправку переменных отправки, отправляемых на test.php. –

@MedojuNarendar да, он отправит запрос на test.php – StateLess

Вы можете добиться этого с помощью JQuery.

сделать запрос на JQuery Ajax POST

//Do the image load here 
//now make the ajax call 
$.post("test.php",$('#myform').serialize(),function(data){ 
    //if success 
    //remove gif image 
    //continue with whatever you want 
},"json");//incase you need a json reply

источник

2015-02-23 10:04:17

Мне нравится парковать DIV от экрана, как так поджат изображение:

<div id="LoadingDiv" style="left: -200px;"> 
    <div> 
     <img src="images/loading.gif" title="Loading" /> 
     <div class="LoadingTitle">Loading...</div> 
    </div> 
</div>

затем использовать немного JQuery:

var div = $("#LoadingDiv"); 
function LoadingDiv() { 
    div.animate({ 
     left: parseInt(div.css('left'), 10) == 0 ? 
      -div.outerWidth() * 2 : 
      0 
    }); 
}

(это более простая версия)

источник

2015-02-23 10:06:22

Если вы не хотите использовать ajax, вы можете сделать это. Перед отображением значка загрузки вам также необходимо будет добавить код для любой проверки javascript, если это необходимо.

$("#submit").on("click", function(e){ 
    $("#loading_image").show(); 
    $("#myform").submit(); 
    e.preventDefault(); 
});

источник

2015-02-23 10:28:55 abhiklpm

Ждите сообщения при отправке формы

ответ

Смежные вопросы