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

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

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

Я предполагаю, что форма должна быть отправлена на страницу 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...

Спасибо

Ответы

Ответ 1

Вам нужно будет отправить запрос ajax, чтобы отправить электронное письмо без перезагрузки страницы. Взгляните на http://api.jquery.com/jQuery.ajax/

Ваш код должен быть примерно таким:

$('#submit').click(function() {
    $.ajax({
        url: 'send_email.php',
        type: 'POST',
        data: {
            email: '[email protected]',
            message: 'hello world!'
        },
        success: function(msg) {
            alert('Email Sent');
        }               
    });
});

Форма будет send_email.php в фоновом режиме на страницу send_email.php которая должна обработать запрос и отправить электронное письмо.

Ответ 2

Я нашел то, что, по-моему, проще. Если вы разместите Iframe на странице, вы можете перенаправить выход из него и показать его. Конечно, вы ничего не можете сделать. В этом случае вы можете установить отображение iframe равным none.

<iframe name="votar" style="display:none;"></iframe>
<form action="tip.php" method="post" target="votar">
    <input type="submit" value="Skicka Tips">
    <input type="hidden" name="ad_id" value="2">            
</form>

Ответ 3

Вы либо используете AJAX, либо вы

создать и добавить iframe в документ
установите имя iframes в 'foo'
установите для объектов target значение 'foo'
представить
имеют формы action render javascript с 'parent.notify(...)', чтобы дать обратную связь
Необязательно вы можете удалить iframe

Ответ 4

Самый быстрый и простой способ - использовать iframe. Поместите рамку внизу страницы.

<iframe name="frame"></iframe>

И в вашей форме сделайте это.

<form target="frame">
</form>

и сделать кадр невидимым в вашем css.

iframe{
  display: none;
}

Ответ 5

это именно то, как он МОЖЕТ работать без jQuery и AJAX, и он работает очень хорошо, используя простой iFrame. Я ЛЮБЛЮ ЭТО, работает в Opera10, FF3 и IE6. Благодаря некоторым из вышеперечисленных плакатов, указывающих на меня в правильном направлении, это единственная причина, по которой я размещаю здесь:

<select name="aAddToPage[65654]" 
onchange="
    if (bCanAddMore) {
        addToPage(65654,this);
    }
    else {
        alert('Could not add another, wait until previous is added.'); 
        this.options[0].selected = true;
    };
" />
<option value="">Add to page..</option>
[more options with values here]</select>

<script type="text/javascript">
function addToPage(iProduct, oSelect){
    iPage = oSelect.options[oSelect.selectedIndex].value;
    if (iPage != "") {
        bCanAddMore = false;
        window.hiddenFrame.document.formFrame.iProduct.value = iProduct;
        window.hiddenFrame.document.formFrame.iAddToPage.value = iPage;
        window.hiddenFrame.document.formFrame.submit();
    }
}
var bCanAddMore = true;</script> 

<iframe name="hiddenFrame" style="display:none;" src="frame.php?p=addProductToPage" onload="bCanAddMore = true;"></iframe>

код php, создающий страницу, которая вызывается выше:

if( $_GET['p'] == 'addProductToPage' ){  // hidden form processing
  if(!empty($_POST['iAddToPage'])) {
    //.. do something with it.. 
  }
  print('
    <html>
        <body>
            <form name="formFrame" id="formFrameId" style="display:none;" method="POST" action="frame.php?p=addProductToPage" >
                <input type="hidden" name="iProduct" value="" />
                <input type="hidden" name="iAddToPage" value="" />
            </form>
        </body>
    </html>
  ');
}

Ответ 6

Это должно решить вашу проблему.
В этом коде после нажатия кнопки нажмите мы вызываем jquery ajax, и мы передаем url для отправки типа POST/GET
data: информация о данных вы можете выбрать поля ввода или любой другой.
sucess: обратный вызов, если все в порядке с сервера
текст параметра функции, html или json, ответ от сервера
вы можете написать предупреждения о записи, если данные, полученные вами, находятся в каком-то состоянии и т.д. или выполните свой код, что делать дальше.

<form id='tip'>
Tip somebody: <input name="tip_email" id="tip_email" type="text" size="30" onfocus="tip_div(1);" onblur="tip_div(2);"/>
 <input type="submit" id="submit" value="Skicka Tips"/>
 <input type="hidden" id="ad_id" name="ad_id" />
 </form>
<script>
$( "#tip" ).submit(function( e ) {
    e.preventDefault();
    $.ajax({
        url: tip.php,
        type:'POST',
        data:
        {
            tip_email: $('#tip_email').val(),
            ad_id: $('#ad_id').val()
        },
        success: function(msg)
        {

            alert('Email Sent');
        }               
    });
});
</script>

Ответ 7

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

Я попробовал его с загрузкой файлов (которые, как мы знаем, не могут быть выполнены с помощью AJAX), и он отлично работал.

Ответ 8

В этом случае необходимо принять помощь jquery-ajax. Без ajax в настоящее время нет решения.

Сначала вызовите функцию JavaScript при отправке формы. Просто установите onsubmit="func()". Даже если функция вызывается, будет выполняться действие по умолчанию для представления. Если он будет выполнен, не будет возможности остановить обновление страницы или перенаправление. Итак, следующая задача - предотвратить действие по умолчанию. Вставьте следующую строку в начале func().

event.preventDefault()

Теперь не будет перенаправления или обновления. Таким образом, вы просто делаете вызов ajax из func() и выполняете все, что хотите, когда заканчивается вызов.

Пример:

форма:

<form id="form-id" onsubmit="func()">
    <input id="input-id" type="text">
</form>

JavaScript:

function func(){
    event.preventDefault();
    var newValue = $('#input-field-id').val();
    $.ajax({
        type: 'POST',
        url: '...',
        data: {...},
        datatype: 'JSON',
        success: function(data){...},
        error: function(){...},
    });
}

Ответ 9

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

Вот часть кода, который я нашел в интернете, чтобы решить эту проблему

Индексный файл:

   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/core.js">
    </script>
    <script type="text/javascript">
    function clickButton(){
    var name=document.getElementById('name').value;
    var descr=document.getElementById('descr').value;
    $.ajax({
            type:"post",
            url:"server_action.php",
            data: 
            {  
               'name' :name,
               'descr' :descr
            },
            cache:false,
            success: function (html) 
            {
               alert('Data Send');
               $('#msg').html(html);
            }
            });
            return false;
     }
    </script>
    <form >
    <input type="" name="name" id="name">
    <input type="" name="descr" id="descr">
    <input type="submit" name="" value="submit" onclick="return clickButton();">
    </form>
    <p id="msg"></p>

server_action.php

<?php 
$name = $_POST['name'];
$descr = $_POST['descr'];


echo $name;
echo $descr;

?>

Теги: php ajax jquery serverside

Ответ 10

Вы пытались использовать iFrame? Нет ajax, и исходная страница не загружается.

Вы можете отобразить форму отправки как отдельную страницу внутри iframe, и когда она будет отправлена, внешняя/контейнерная страница не будет перезагружена. Это решение не будет использовать какой-либо ajax.

Ответ 11

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

    <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>

Ответ 12

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

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

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

Ответ 13

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

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

Ответ 14

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

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

...

Ответ 15

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

Ответ 16

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(); в начало тела функции.

Ответ 17

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

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