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

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

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

Благодарность

Вам нужно будет отправить запрос 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страницу, которая должна будет обработать запрос и отправить электронное письмо.

Я нашел более простой способ. Если вы поместите 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>

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

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

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

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

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

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

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

iframe{
  display: none;
}

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

1.) IFRAME

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

index.php

<iframe name="content" style="">
</iframe>
<form action="iframe_content.php" method="post" target="content">
<input type="text" name="Name" value="">
<input type="submit" name="Submit" value="Submit">
</form>

iframe_content.php

<?php
if (isset($_POST['Submit'])){
$Name = $_POST['Name'];
echo $Name;
}
?>

2.) AJAX

Index.php:

   <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серверныйhtml

В этом случае необходимо обратиться за помощью 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(){...},
    });
}

Именно так он МОЖЕТ работать без 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>
  ');
}

Это должно решить вашу проблему.
В этом коде после нажатия кнопки отправки мы вызываем 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>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

...

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

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