提交表单而不重新加载页面

Question

我有一个分类网站，在展示广告的页面上，我正在创建一个“向朋友发送提示”表单...

因此，任何想要的人都可以将广告提示发送给一些朋友的电子邮件地址。

我猜表单必须提交到 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...

Answer 1

我发现了一种我认为更简单的方法。 如果您在页面中放置一个 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>

Answer 2

您需要提交一个 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 页面，该页面需要处理请求并发送电子邮件。

Answer 3

你要么使用 AJAX，要么你

• 创建 iframe 并将其附加到文档中
• 将 iframe 名称设置为“foo”
• 将表单目标设置为“foo”
• 提交
• 让表单操作使用“parent.notify(...)”渲染 javascript 以提供反馈
• 您可以选择移除 iframe

Answer 4

最快最简单的方法是使用 iframe。 在页面底部放置一个框架。

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

在你的表单中这样做。

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

并使框架在您的 css 中不可见。

iframe{
  display: none;
}

Answer 5

在不重新加载页面的情况下提交表单并在同一页面上获取提交数据的结果。

这是我在互联网上找到的一些解决此问题的代码：

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
$Submit = isset($_POST['Submit']) ? $_POST['Submit'] : false;
$Name = isset($_POST['Name']) ? $_POST['Name'] : '';
if($Submit){
 echo $Name;
}
?>

2.) AJAX

索引.php：

<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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.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>

server_action.php

<?php 
$name = isset($_POST['name']) ? $_POST['name'] : '';
$descr = isset($_POST['descr']) ? $_POST['descr'] : '';


echo $name;
echo $descr;

?>

标签： phpajaxjqueryserversidehtml

Answer 6

在这种情况下，必须得到jquery-ajax 的帮助。没有ajax，目前没有解决办法。

首先，在提交表单时调用一个 JavaScript 函数。只需设置onsubmit="func()"。即使调用该函数，也会执行提交的默认操作。如果它被执行，将无法阻止页面刷新或重定向。因此，下一个任务是防止默认操作。在func() 的开头插入以下行。

event.preventDefault()

现在，不会有重定向或刷新。因此，您只需从 func() 进行 ajax 调用，然后在调用结束时执行您想做的任何事情。

示例：

表格：

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

Answer 7

这正是它可以在没有 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>
  ');
}

Answer 8

这应该可以解决您的问题。
在此代码中，单击提交按钮后，我们调用 jquery ajax 并将 url 传递给 post
键入 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>

Answer 9

您可以尝试将表单的目标属性设置为隐藏的 iframe，这样包含该表单的页面就不会被重新加载。

我尝试过文件上传（我们知道这不能通过 AJAX 完成），效果很好。

Answer 10

您是否尝试过使用 iFrame？没有ajax，原始页面不会加载。

您可以将提交表单显示为 iframe 内的单独页面，并且在提交时，外部/容器页面不会重新加载。此解决方案不会使用任何类型的 ajax。

Answer 11

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 的回答帮助我得出了这个答案。

注意：不要忘记将event.preventDefault();放在函数体的开头。

Answer 12

我做了类似于上面的 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>

Answer 13

如果您不想使用 javascript，页面将被重新加载

Answer 14

您将需要使用 JavaScript 而不会导致 iframe（丑陋的方法）。

你可以用 JavaScript 来做；使用 jQuery 会让一切变得轻松。

我建议您查看 AJAX 和 Posting。

Answer 15

如果您要提交到表单所在的同一页面，您可以编写表单标签而无需执行任何操作，它会像这样提交

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

Answer 16

另一种可能性是直接 javascript 链接到您的函数：

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

...

Answer 17

我不懂 JavaScript，我刚开始学习 PHP，所以所有这些回复对我有帮助的是：

1. 创建 inedx.php 并插入：

<iframe name="email" style=""></iframe>
<form action="email.php" method="post" target="email">
<input type="email" name="email" >
<input type="submit" name="Submit" value="Submit">
</form>

1. 创建 email.php 并插入此代码以检查您是否正在获取数据（您应该在 iframe 中的 index.php 上看到它）：

    <?php
    if (isset($_POST['Submit'])){
    $email = $_POST['email'];
    echo $email;
    }
    ?>

1. 如果一切正常，将 email.php 上的代码更改为：

    <?php
    if (isset($_POST['Submit'])){
    $to = $_POST['email'];
    $subject = "Test email";
    $message = "Test message";
    $headers = "From: test@test.com \r\n";
    $headers .= "Reply-To: test@test.com \r\n";
    $headers .= "MIME-Version: 1.0\r\n";
    $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
    
    mail($to, $subject, $message, $headers);
    }
    ?>

希望这对像我这样的其他新手有帮助:)

Answer 18

这是一些用于发布到 php 页面并返回 html 的 jQuery：

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