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

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

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

Answer 2

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

Answer 3

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

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

Answer 4

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

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

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

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

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

iframe{
  display: none;
}

Answer 5

Это должно решить вашу проблему.
В этом коде после нажатия кнопки отправки мы вызываем jquery ajax и передаем URL в сообщение
типа POST / GET
данные: данные данных вы можете выбрать поля ввода или любые другие.
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>

Answer 6

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

Answer 7

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

Answer 8

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

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

Answer 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 серверная часть

Answer 10

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

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