Tenho um site de classificados e, na página em que os anúncios são exibidos, estou criando um formulário "Envie uma dica para um amigo" ...

Assim, quem quiser pode enviar uma dica do anúncio para o e-mail de alguns amigos.

Eu estou supondo que o formulário deve ser enviado a uma página php, certo?

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

Ao enviar o formulário, a página é recarregada ... Não quero isso ...

Existe alguma maneira de não recarregar e ainda enviar o e-mail? De preferência sem ajax ou jquery ...

obrigado

Você precisará enviar uma solicitação ajax para enviar o e-mail sem recarregar a página. Dê uma olhada em http://api.jquery.com/jQuery.ajax/

Seu código deve ser algo como:

$('#submit').click(function() {
    $.ajax({
        url: 'send_email.php',
        type: 'POST',
        data: {
            email: 'email@example.com',
            message: 'hello world!'
        },
        success: function(msg) {
            alert('Email Sent');
        }               
    });
});

O formulário será enviado em segundo plano para a send_email.phppágina que deverá atender à solicitação e enviará o e-mail.

Eu descobri o que considero uma maneira mais fácil. Se você colocar um Iframe na página, poderá redirecionar a saída da ação para lá e fazê-la aparecer. Você não pode fazer nada, é claro. Nesse caso, você pode definir a exibição do iframe como nenhum.

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

Você quer usar AJAX ou você

• criar e anexar um iframe ao documento
• defina o nome do iframes para 'foo'
• defina o destino do formulário para 'foo'
• enviar
• fazer com que a ação de formulários renderize javascript com 'parent.notify (...)' para fornecer feedback
• opcionalmente, você pode remover o iframe

A maneira mais rápida e fácil é usar um iframe. Coloque uma moldura na parte inferior da página.

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

E em sua forma faça isso.

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

e para tornar o quadro invisível em seu css.

iframe{
  display: none;
}

Enviar formulário sem recarregar a página e obter o resultado dos dados enviados na mesma página

Aqui estão alguns dos códigos que encontrei na Internet que resolvem esse problema:

1.) IFRAME

Quando o formulário enviado, a ação será executada e direcionar o iframe específico para recarregar.

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;

?>

Tag: phpAjaxjquerylado do servidorhtml

É necessário ter ajuda jquery-ajaxneste caso. Sem ajax, atualmente não há solução.

Primeiro, chame uma função JavaScript quando o formulário for enviado. Basta definir onsubmit="func()". Mesmo se a função for chamada, a ação padrão do envio será executada. Se for executado, não haverá como impedir que a página seja atualizada ou redirecionada. Portanto, a próxima tarefa é evitar a ação padrão. Insira a seguinte linha no início de func().

event.preventDefault()

Agora, não haverá redirecionamento ou atualização. Então, você simplesmente faz uma chamada ajax de func()e faz o que quiser quando a chamada termina.

Exemplo:

Formato:

<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(){...},
    });
}

É exatamente assim que PODE funcionar sem jQuery e AJAX e está funcionando muito bem usando um iFrame simples. I LOVE IT, funciona em Opera10, FF3 e IE6. Graças a alguns dos pôsteres acima me apontando a direção certa, essa é a única razão pela qual estou postando aqui:

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

o código php que gera a página que está sendo chamada acima:

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

Isso deve resolver seu problema.
Neste código, após clicar no botão enviar, chamamos jquery ajax e passamos a url para postar
tipo POST / GET
data: data information você pode selecionar campos de entrada ou qualquer outro.
sucesso: retorno de chamada se tudo estiver ok a partir do
texto do parâmetro da função do servidor , html ou json, resposta do servidor
com sucesso você pode escrever avisos se os dados que você obteve estiverem em algum tipo de estado e assim por diante. ou execute seu código o que fazer a seguir.

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

Você pode tentar definir o atributo target do seu formulário como um iframe oculto, para que a página que contém o formulário não seja recarregada.

Eu tentei fazer uploads de arquivos (que sabemos que não podem ser feitos via AJAX) e funcionou perfeitamente.

Você já tentou usar um iFrame? Sem ajax e a página original não carrega.

Você pode exibir o formulário de envio como uma página separada dentro do iframe e, quando for enviado, a página externa / contêiner não será recarregada. Esta solução não fará uso de nenhum tipo de ajax.

se você estiver enviando para a mesma página onde está o formulário, você pode escrever as tags do formulário sem uma ação e ele enviará, como este

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

Fiz algo semelhante ao jquery acima, mas precisava redefinir meus dados de formulário e telas de anexo gráfico. Então, aqui está o que eu criei:

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

Isso funciona bem para mim, para a sua aplicação de apenas um formulário html, podemos simplificar este código jquery assim:

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

Você precisará usar JavaScript sem resultar em uma iframe(abordagem feia).

Você pode fazer isso em JavaScript; usar jQuery o tornará indolor.

Eu sugiro que você verifique AJAX e Postagem.

Outra possibilidade é fazer um link javascript direto para a sua função:

<form action="javascript:your_function();" method="post">

...

A página será recarregada se você não quiser usar 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');
      }
   }   );
}

Tentei várias vezes uma boa solução e a resposta do @taufique ajudou-me a chegar a esta resposta.

NB : Não se esqueça de colocar event.preventDefault(); no início do corpo da função.

Aqui está um pouco de jQuery para postar em uma página php e obter html de volta:

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