Отправить форму без перезагрузки страницы
У меня есть сайт объявлений, и на странице, где показываются объявления, я создаю форму "Отправить совет другу"...
Таким образом, любой желающий может отправить подсказку по объявлению на адрес электронной почты некоторых друзей.
Я предполагаю, что форма должна быть отправлена на страницу 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 answers
Вам нужно будет отправить запрос 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, которая должна будет обработать запрос и отправить электронное письмо.
Я нашел, как мне кажется, более простой способ. Если вы разместите Iframe на странице, вы можете перенаправить выход действия туда и заставить его отображаться. Вы, конечно, ничего не можете сделать. В этом случае вы можете установить для отображения iframe значение нет.
<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 в документ
- задайте для имени iframes значение 'foo'
- установите для цели формы значение "foo"
- отправить
- попросите действие формы отобразить javascript с помощью "parent.notify(...)", чтобы дать обратную связь
- при желании вы можете удалить iframe
Самый быстрый и простой способ - использовать iframe. Поставьте рамку внизу своей страницы.
<iframe name="frame"></iframe>
И в своей форме сделайте это.
<form target="frame">
</form>
И сделать кадр невидимым в вашем css.
iframe{
display: none;
}
Именно так он МОЖЕТ работать без jQuery и AJAX, и он очень хорошо работает с использованием простого iFrame. МНЕ ЭТО НРАВИТСЯ, работает в операх10, 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>
');
}
Вы можете попробовать установить целевой атрибут вашей формы в скрытый iframe, чтобы страница, содержащая форму, не загружалась повторно.
Я попробовал это с загрузкой файлов (что, как мы знаем, невозможно сделать с помощью AJAX), и это сработало прекрасно.
В этом случае необходимо воспользоваться помощью 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(){...},
});
}
Вы пробовали использовать iFrame? Нет ajax, и исходная страница не загрузится.
Вы можете отобразить форму отправки в виде отдельной страницы внутри iframe, и когда она будет отправлена, внешняя страница/контейнер не будет перезагружаться. Это решение не будет использовать какой-либо ajax.
Это должно решить вашу проблему.
В этом коде после нажатия кнопки "Отправить" мы вызываем jquery ajax и передаем URL-адрес для публикации
введите POST/GET
данные: информация о данных вы можете выбрать поля ввода или любые другие.
успех: обратный вызов, если все в порядке с сервера
текст параметра функции, 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>
Отправка Формы Без Перезагрузки Страницы И Получение Результата Отправленных Данных На Той Же Странице
Вот некоторые из кодов, которые я нашел в Интернете, которые решают эту проблему
Индексный файл:
<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;
?>
Я сделал что-то похожее на описанный выше 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 и опубликовать.
Если вы отправляете на ту же страницу, где находится форма, вы можете написать теги формы без действия, и она будет отправлена, как это
<form method='post'> <!-- you can see there is no action here-->
Страница будет перезагружена, если вы не хотите использовать 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;
});