У мене є веб-сайт з оголошеннями, і на сторінці, де відображаються оголошення, я створюю форму "Надіслати підказку другові" ...

Тож кожен, хто хоче, може надіслати підказку оголошення деяким друзям на електронну адресу.

Я припускаю, що форму потрібно подати на сторінку 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, або ви

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

Найшвидший і найпростіший спосіб - це використання iframe. Поставте рамку внизу сторінки.

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

І у вашій формі зробіть це.

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

і зробити кадр невидимим у вашому css.

iframe{
  display: none;
}

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

Ось деякий код, який я знайшов в Інтернеті, який вирішує цю проблему:

1.) РАМКА

Коли форма буде надіслана, дія буде виконана та націлена на вказаний 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
: інформацію про дані ви можете вибрати поля введення або будь-які інші.
sucess: зворотний виклик, якщо з
параметром функції функції сервера текст text, 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, і коли вона надійде, зовнішня / контейнерна сторінка не буде перезавантажена. Це рішення не використовуватиме будь-який вид аякс.

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

<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, не приводячи до iframe(потворного підходу).

Ви можете зробити це в JavaScript; використання jQuery зробить його безболісним.

Я пропоную вам перевірити AJAX і розміщення.

Подальша можливість - зробити пряме посилання на JavaScript на свою функцію:

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

...

Сторінка буде перезавантажена, якщо ви не хочете використовувати javascript

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(); на початку основного елемента функції.

Ось декілька jQuery для розміщення на php-сторінці та повернення html:

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