如何提交表格并在完成后转到另一页?

时间:2013-02-03 05:23:05

标签: php javascript jquery html ajax

我有这个表格

    您的电子邮件

接收方电子邮件

主题

邮件

如何提交此数据并转到其他页面(使用标记的任何语言)?请帮忙。

4 个答案:

答案 0 :(得分:5)

如果我的问题是对的,你的回答是:

您的提交按钮必须如下:

<form method="POST" action="file.php">
    <!-- Whatever data you want to submit -->
    <input type="submit" value="Submit">
</form>

你的PHP file.php必须是:

<?php
   if(isset($_POST['submit']))
   {
    //Do all the submission part or storing in DB work and all here
    header('Location: whateverpath.php');
   }
?>

如果这是您想要的,请告诉我

答案 1 :(得分:1)

如果您只使用PHP来完成任务,请使用以下代码重定向到另一个页面。

header('Refresh: 5; URL= navigated.php'); 

这里,5是重定向的刷新计时器&amp; URL定义了您要去的地方。不要忘记一件事,永远不要在这个标题函数之前写一个echo语句。

如果您想通过javascript或jquery执行此操作,请在结尾处添加以下行。

window.location.href=navigated.php;

这里,navigated.php是您想要重定向的页面。

祝你好运!

答案 2 :(得分:1)

从页面A到页面B(PHP)然后到页面C的另一种方法是从A到B提交ajax帖子,验证,然后直接进入页面C.这样做的好处是你可以做到服务器端验证(发生在第B页),并在第A页上警告您的用户,而不必离开或重新加载它。否则你必须从A到B然后再回到A。

<script>
$(function() {
        $('form').submit(function() {
                //Initial validation
                if($('#input1').val()=="")
                {
                    alert("field is blank!");
                    return false
                }
                //After validating form, send to page B
                $.post('PageB.php', {
                        'field1': $('#input1').val(),
                        'field2': $('#input2').val()
                        //etc
                    }, function (data) {
                        //Validate the response from Page B
                        if (data!="success")
                        {
                            alert("Error:"+data);
                        }
                        else
                        {
                            //Go to Page C if Page B was successful
                            window.location.href = "nextpage.html";
                        }
                    });
        return false;
    });
</script>

答案 3 :(得分:0)

使用JQuery和AJAX以及JSP servlet或PHP等服务器端脚本的类型非常容易。在我的情况下,我利用JSP作为服务器端脚本,并且JQuery的AJAX支持提交到服务器端脚本。

服务器端组件的代码在这里..

page2.jsp

    <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Insert title here</title>
    </head>
    <body>

    <h1 style="color:red">Contents from Page 2</h1>
    <%=request.getParameter("parmeter")%>
    </body>
    </html>

客户端脚本的代码就在这里..

pag1.html

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Insert title here</title>
    </head>
    <body>
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
       <script>       
          function submitRequest(){

             var v= document.getElementById("test1").value;
             alert(v);
              $.ajax({url:"page2.jsp?parmeter="+v,
                    error: function (xhr, ajaxOptions, thrownError) {

                        alert("fail");
                        alert(xhr.status);
                        alert(thrownError);
                   },
                    success:function(result){
                          alert("sucesses");
                          $("#mydiv").html(result);
                    }
                  });
          }

        </script>

    </body>


    <form>
        <!-- Whatever data you want to submit -->
        <input type="text" id="test1"><br>
        <input type="button" value="Submit" onclick="submitRequest()">
    </form>

    <div id="mydiv">
    Contents of Page 2 jsp will be displayed here
    </div>
    </html>

单击提交时,文本框中输入的内容将提交给函数submitRequest(),此函数对另一页进行AJAX调用,将请求提交给page2.jsp。 page2.jsp只显示接收到的参数,因此我们可以选择在当前页面上显示page2的结果,方法是在成功的AJAX回调函数内编码,如上所示。

它将用通过AJAX请求请求的页面替换当前页面的内容。显示我们很难将细节提交到其他页面