PHP Lang
  1. PHP Lang
  3. Отправить форму без перезагрузки страницы
Intereting Posts
Проблема php с русским языком PHP PDO возвращает одну строку Symfony 2 присоединяется к неработающей доктрине и MySQL Сохранять количество кликов в базе данных, используя php Неустранимая ошибка: класс «Zend \ Loader \ AutoloaderFactory» не найден в init_autoloader.php Механизировать и BeautifulSoup для PHP? Не удается заставить Zorba работать в Windows 7 с PHP и Nginx Где «представление схемы класса» в Netbeans для PHP? как вызвать файл PHTML на странице CMS Magento Как получить доступ к члену stdClass в PHP, который начинается с @ Можно ли передать массив в качестве аргумента командной строки в PHP-скрипт? ul в форме, не отправляющей в $ _POST Проверка электронной почты через электронную почту и PHP? Неустранимая ошибка: класс «TCPDF» не найден PHP получить url со специальными символами без urlencode: их!

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

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

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

Я предполагаю, что форма должна быть отправлена ​​на страницу 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 в фоновом режиме на страницу 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 в документ
  • установить имя iframes в 'foo'
  • установите для микса формы значение 'foo'
  • Отправить
  • имеют формы, обрабатывают javascript с помощью «parent.notify (…)», чтобы дать отзыв
  • Необязательно вы можете удалить iframe

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

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

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

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

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

 iframe{ display: none; }

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

Вы можете попробовать настроить целевой атрибут вашей формы на скрытый 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
data: информация о данных вы можете выбрать поля ввода или любые другие.
sucess: callback, если все в порядке с сервера
текст параметра функции, 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>

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

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

Я предлагаю вам проверить 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 

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