Отправить форму без перезагрузки страницы

Question

У меня есть сайт объявлений, и на странице, где показываются объявления, я создаю форму "Отправить совет другу" ...

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

Я предполагаю, что форма должна быть отправлена ​​на страницу php, верно?

<form name='tip' method='post' action='tip.php'>
Tip somebody: <input name="tip_email" type="text" size="30" onfocus="tip_div(1);" onblur="tip_div(2);"/>
 <input type="submit" value="Skicka Tips"/>
 <input type="hidden" name="ad_id" />
 </form>

При отправке формы страница перезагружается ... Я не хочу этого ...

Есть ли способ заставить его не перезагружаться и все равно отправлять почту? Желательно без ajax или jquery ...

Спасибо

Answer 1

Я сделал что-то похожее на jquery выше, но мне нужно было сбросить данные формы и графические вложения.Итак, вот что я придумал:

    <script>
   $(document).ready(function(){

   $("#text_only_radio_button_id").click(function(){
       $("#single_pic_div").hide();
       $("#multi_pic_div").hide();
   });

   $("#pic_radio_button_id").click(function(){
      $("#single_pic_div").show();
      $("#multi_pic_div").hide();
    });

   $("#gallery_radio_button_id").click(function(){
       $("#single_pic_div").hide();
       $("#multi_pic_div").show();
                 });
    $("#my_Submit_button_ID").click(function() {
          $("#single_pic_div").hide();
          $("#multi_pic_div").hide();
          var url = "script_the_form_gets_posted_to.php"; 

       $.ajax({
       type: "POST",
       url: url,
       data: $("#html_form_id").serialize(), 
       success: function(){  
       document.getElementById("html_form_id").reset();
           var canvas=document.getElementById("canvas");
    var canvasA=document.getElementById("canvasA");
    var canvasB=document.getElementById("canvasB");
    var canvasC=document.getElementById("canvasC");
    var canvasD=document.getElementById("canvasD");

              var ctx=canvas.getContext("2d");
              var ctxA=canvasA.getContext("2d");
              var ctxB=canvasB.getContext("2d");
              var ctxC=canvasC.getContext("2d");
              var ctxD=canvasD.getContext("2d");
               ctx.clearRect(0, 0,480,480);
               ctxA.clearRect(0, 0,480,480);
               ctxB.clearRect(0, 0,480,480);        
               ctxC.clearRect(0, 0,480,480);
               ctxD.clearRect(0, 0,480,480);
               } });
           return false;
                });    });
           </script>

Это хорошо работает для меня, для вашего применения только HTML-формы мы можем упростить этот код jquery следующим образом:

       <script>
        $(document).ready(function(){

    $("#my_Submit_button_ID").click(function() {
        var url =  "script_the_form_gets_posted_to.php";
       $.ajax({
       type: "POST",
       url: url,
       data: $("#html_form_id").serialize(), 
       success: function(){  
       document.getElementById("html_form_id").reset();
            } });
           return false;
                });    });
           </script>

Answer 2

если вы отправляете на ту же страницу, где находится форма, вы можете написать теги формы без действия, и оно будет отправлено, как это

<form method='post'> <!-- you can see there is no action here-->

Answer 3

function Foo(){  
   event.preventDefault(); 
 $.ajax(   {  
      url:"<?php echo base_url();?>Controllername/ctlr_function",
      type:"POST",
      data:'email='+$("#email").val(),
      success:function(msg)      {  
         alert('You are subscribed');
      }
   }   );
}

Я много раз пытался найти хорошее решение, и ответ @taufique помог мне прийти к этому ответу.

NB : не забудьте поставить event.preventDefault(); в начале тела функции.

Answer 4

Страница будет перезагружена, если вы не хотите использовать javascript

Answer 5

Вам нужно будет использовать JavaScript без результата iframe (безобразный подход).

Вы можете сделать это в JavaScript; использование jQuery сделает его безболезненным.

Я предлагаю вам проверить AJAX и Posting.

Answer 6

Еще одна возможность - сделать прямую ссылку на JavaScript в вашей функции:

<form action="javascript:your_function();" method="post">

...

Answer 7

Вот несколько jQuery для публикации на странице php и возврата html:

$('form').submit(function() {
    $.post('tip.php', function(html) {
       // do what you need in your success callback
    }
    return false;
});