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

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

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

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

спасибо

16 62
javascript forms html php

16 ответов:

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

ваш код должен быть что-то вроде:

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

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

49

Я нашел то, что я думаю, это более простой способ. Если вы поместите 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>
53

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

  • создать и добавить iframe в документ
  • установите имя iframes в 'foo'
  • установите цель формы в 'foo'
  • отправить
  • есть формы действия рендеринга javascript с ' родитель.уведомлять.(..) ', чтобы дать обратную связь
  • дополнительно вы можете удалить iframe
19

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

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

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

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

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

iframe{
  display: none;
}
8

именно так он может работать без 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>
  ');
}
4

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

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

3

это необходимо, чтобы принять помощь 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(){...},
    });
}
3

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

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

2

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

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

Отправка Формы Без Перезагрузки Страницы И Получить Результат Представленных Данных На Той Же Странице

вот некоторые из кода, который я нашел в интернете, которые решают эту проблему

индекс файл:

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

?>

Теги:phpajaxjquery serverside

2

Я сделал что-то похожее на 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>
1

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

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

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

0

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

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

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

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

-1

вот некоторые jQuery для размещения на странице php и получения html обратно:

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