У меня есть сайт объявлений, и на странице, где показываются объявления, я создаю форму «Отправить отзыв другу» ...
Так что любой желающий может отправить отзыв о рекламе на адрес электронной почты друзей.
Я предполагаю, что форма должна быть отправлена на страницу 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 ...
Благодарность
<iframe>
иtarget
атрибут сделает это.Ответы:
Вам нужно будет отправить запрос 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
страницу, которая должна будет обработать запрос и отправить электронное письмо.источник
return false;
перед последними закрывающими скобкамиЯ нашел более простой способ. Если вы поместите 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>
источник
action="about:blank"
$_POST["ad_id"]
Вы либо используете AJAX, либо
источник
<form id="myGiswebForm" method="post" action="https://******/saveForm.asp" target="myiframe">
и<iframe style="display:none;" src="" name="myiframe"></iframe>
Самый быстрый и простой способ - использовать iframe. Поместите рамку внизу вашей страницы.
<iframe name="frame"></iframe>
И в своей форме сделайте это.
<form target="frame"> </form>
и сделать фрейм невидимым в вашем css.
iframe{ display: none; }
источник
display:none;
и нетborder:0px
. Пытался отредактировать, но мои правки отклонены рецензентами, которые, похоже, не удосуживаются просматривать комментарий редактирования. Измените свой ответ, чтобы исправить код.Отправка формы без перезагрузки страницы и получение результатов отправленных данных на той же странице
Вот код, который я нашел в Интернете, который решает эту проблему: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> '); }
источник
print
для печати HTML-кода. Просто закройте тег php?>
и добавьте после него код html. И избегатьexit
его использования в этом нет необходимости (фатальные ошибки, ...)Это должно решить вашу проблему.
В этом коде после нажатия кнопки отправки мы вызываем 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.
источник
<iframe name="ew" />
и<form target="ew" />
Вам нужно будет использовать 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; });
источник