1. дома
  2. Вопрос и ответ
  3. Отправить форму без перезагрузки страницы

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

2010-05-19 5 views
51

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

Так любой, кто хочет может послать подсказку объявления друзьям-адресатам друзей.

Я предполагаю, что форма должна быть отправлена ​​на страницу 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 ...

Благодаря

источник

2010-05-19 Anonymous

+8

Чтобы отправить вы должны сделать HTTP-запрос, поэтому HTTP-запросы без загрузки страницы - это то, что означает Ajax. Можете также попытаться ехать в город без транспортного средства. – Quentin

+7

«без ajax или jquery» звучит как «Я хочу машину без колес» –

+3

Невозможно сделать без ajax –

ответ

41

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

источник

2010-05-19 13:56:35 jkilbride

+3

Как это будет выглядеть, если вы также включили HTML? – blueprintChris

+6

that send_email .php должен быть «send_email.php»? – Bear

+0

Как бы вы сделали это с помощью только ванильного AJAX с простым JavaScript? – Adam

-5

Вот некоторые JQuery для размещения на страницу PHP и получать HTML обратно:

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

источник

2010-05-19 13:52:08

+1

Упоминайте, почему вы отказались? Вы не можете сделать это без Ajax –

+0

@Keith Нет нисходящего от меня, но, возможно, это было потому, что вы упомянули jQuery, и он сказал, что нет jQuery. – alex

+0

@ Keith - наоборот, метод iframe, предложенный несколькими ответами, может быть использован. – justkt

-1

страница будет перезагружаются, если вы этого не сделаете хотите использовать код JavaScript

источник

2010-05-19 13:52:23 baloo

+4

... или сделайте что-то некрасивое, как '' – Kemal

2

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

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

источник

2010-05-19 13:55:22 wtaniguchi

0

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

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

Предлагаю вам ознакомиться с AJAX и проводкой.

источник

2010-05-19 13:56:06 alex

1

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

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

источник

2010-05-26 12:53:44 DanC

3

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

РНР код генерации страницы, которая вызывается выше:

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

источник

2010-12-12 02:24:35 Tyler

+3

Не используйте PHP 'print' для печати HTML-кода. Просто закройте php tag'?> 'и добавьте html код после. И избегать использования 'exit', это необязательно (фатальные ошибки, ...) – Oriol

+0

да, спасибо, что указали это. Это просто необходимый пример, я действительно не делал этого в моя система. – Tyler

+0

Это много работы над этим ответом, но есть много других. –

6

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

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

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

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

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

iframe{ 
    display: none; 
}

источник

2012-04-30 10:51:39

+3

Должно быть 'display: none;', а не 'border: 0px'. Пробовал редактирование, но мои изменения отвергаются рецензентами, которые не кажутся чтобы посмотреть на комментарий к редактированию. чтобы исправить код. – cybermonkey

+1

@cybermonkey вы правы - спасибо! –

2

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

источник

2014-09-19 19:34:39 taufique

47

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

источник

2014-10-15 10:48:01

+0

спасибо, человек работал безупречно !! – CodeLover

+2

Я использовал 'action =" about: blank "' – ThorSummoner

+0

Большое спасибо, вы только что спасли мою жизнь <3 !!! –

-1 
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(); в начале тела функции.

источник

2016-11-03 06:07:19 Dayz

1

Это должно решить вашу проблему.
В этом коде после нажатия кнопки нажмите мы вызываем jquery ajax и передаем url для отправки
Тип POST/GET
данные: информация о данных вы можете выбрать поля ввода или любые другие.
успеха и: обратный вызов, если все нормально с сервером
текста функции параметра, HTML или JSON, ответа от сервера
в Sucess вы можете написать писать предупреждения, если данные, которые вы получили в каком-то состоянии и так далее. или выполните свой код, что делать дальше. 

<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>

источник

2016-11-03 06:44:23

+0

Хотя этот фрагмент кода может решить проблему, он не объясняет, почему и как он отвечает на вопрос. Пожалуйста, [укажите объяснение своего кода] (// meta.stackexchange.com/q/114762/269535), так как это действительно помогает улучшить качество вашего сообщения. Помните, что вы отвечаете на вопрос читателей в будущем, и эти люди могут не знать причин вашего предложения кода. ** Флагеры/рецензенты: ** [Для ответов только на код, таких как этот, нисходящий, не удалять!] (// meta.stackoverflow.com/a/260413/2747593) –

0

если вы подаете на ту же страницу, где форма вы могли бы написать тег формы с вне действия, и он будет представлять, как этот

<form method='post'> <!-- you can see there is no action here-->

источник

2017-11-08 17:32:35 Mohamed

0

я сделал что-то подобное в 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>

источник

2017-11-27 20:50:10 drtechno

Смежные вопросы

 Смежные вопросы