表单结果在同一页

表单结果在同一页

本文介绍了表单结果在同一页的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我访问了以下链接

现在我有2个示例文件test2.php的内容

 <!DOCTYPE html> 
< html>
< head>
< title>表格< /标题>
< / head>
< body>
<?php include_once(test.php); ?>
< / body>
< / html>

test.php的内容



<$ p $ ($ set($ _ POST ['submit'])){
$ arr = array();
foreach($ _POST as $ key => $ value){
$ arr [$ key] = $ value;
}
print_r($ arr);
}
?>
<!DOCTYPE html>
< html>
< head>
< title>表格< /标题>
< script src =http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js>
< / script>
< link rel =stylesheethref =css / main.css/>
< / head>
< body>
< div id =contentid =login_form>
< form method =postid =f1name =f1action =test.php>
< table>
< tr>
< td>名称:< / td>< td>< input type =textname =name/>< / td>
< / tr>
< tr>
< td>注册号码:< / td>< td>< input type =textname =regno/>< / td>
< / tr>
< tr>
< td>出生日期:< / td>< td>< input type =textname =dob/>< / td>
< / tr>
< tr>
< td>< input type =submitid =b1name =submitvalue =Submitstyle =font-size:16px;/>< / td>
< / tr>
< / table>
< / form>
< / div>
< script>
$('#f1')。submit(function(){
$ .ajax({
data:$(this).serialize(),
type:$(这个).attr('post'),
url:$(this).attr('test.php'),
success:function(response){
$('#content ').html(response);
}
});
return false;
});
< / script>
< / body>
< / html>

test2.php显示表格。我想显示输入的值表单和表单我点击提交后,但我只看到表单。
是因为$ _POST为空还是因为我在页面结构中犯了错误?



编辑:我希望表单提交的结果是submit加载到test2.php页面。

解决方案
进行两项更改


  1. 删除操作属性值,即将 action =test.php更改为 action =
  2. 更改返回false; 更改为返回true;或者您可以删除它,不需要它。 in js, $('#f1')。submit(function()

(说明何时使用return true / false,目前您需要一个提交操作,该操作是从jquery函数中调用的,如果您从javascript / jquery返回false,则意味着当前请求即提交不会发生
如果是true,则会发生提交。如果我们验证某些内容并且用户没有添加正确的输出,则我们使用false,因此我们不希望ubmit页面,直到他纠正了数据。
也行动不需要在这种情况下,因为你通过jquery提交,所以你可以从表单中删除action =属性)

你也已经在test.php中包含 html 标签,包括它在test2.php中会产生问题。



建议直接调用test.php,你不需要test2.php。



以下是test.php的完整代码,

 <?php 
if(isset($ _ POST ['submit'])){
$ arr = array();
foreach($ _POST as $ key => $ value){
$ arr [$ key] = $ value;
}
print_r($ arr);
}
?>
<!DOCTYPE html>
< html>
< head>
< title>表格< /标题>
< script src =http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js>
< / script>
< link rel =stylesheethref =css / main.css/>
< / head>
< body>
< div id =contentid =login_form>
< form method =postid =f1name =f1action =>
< table>
< tr>
< td>名称:< / td>< td>< input type =textname =name/>< / td>
< / tr>
< tr>
< td>注册号码:< / td>< td>< input type =textname =regno/>< / td>
< / tr>
< tr>
< td>出生日期:< / td>< td>< input type =textname =dob/>< / td>
< / tr>
< tr>
< td>< input type =submitid =b1name =submitvalue =Submitstyle =font-size:16px;/>< / td>
< / tr>
< / table>
< / form>
< / div>
< script>
$('#f1')。submit(function(){
$ .ajax({
data:$(this).serialize(),
type:$(这个).attr('post'),
url:$(this).attr('test.php'),
success:function(response){
$('#content ').html(response);
}
});
return true;
});
< / script>
< / body>
< / html>


I have visited the following Link

Now i have 2 Sample files Contents of test2.php

<!DOCTYPE html>
<html>
    <head>
        <title> Form </title>
    </head>
    <body>
        <?php include_once("test.php"); ?>
    </body>
</html>

Content of test.php

<?php
    if (isset($_POST['submit'])) {
        $arr=array();
        foreach ($_POST as $key => $value) {
            $arr[$key]=$value;
        }
        print_r($arr);
    }
?>
<!DOCTYPE html>
<html>
    <head>
        <title> Form </title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
        </script>
        <link rel="stylesheet" href="css/main.css" />
    </head>
    <body>
        <div id="content" id="login_form">
            <form method="post" id="f1" name="f1"  action="test.php">
                <table>
                    <tr>
                        <td>Name :</td><td><input type="text" name="name"/></td>
                    </tr>
                    <tr>
                        <td>Register Number :</td><td><input type="text" name="regno"/></td>
                    </tr>
                    <tr>
                        <td>Date of Birth :</td><td><input type="text" name="dob"/></td>
                    </tr>
                    <tr>
                        <td><input type="submit" id="b1" name="submit" value="Submit" style="font-size:16px;"/></td>
                    </tr>
                </table>
            </form>
        </div>
        <script>
            $('#f1').submit(function() {
                $.ajax({
                data: $(this).serialize(),
                type: $(this).attr('post'),
                url: $(this).attr('test.php'),
                success: function(response) {
                $('#content').html(response);
        }
    });
    return false;
});
        </script>
    </body>
</html>

test2.php displays the form.I want to display the values entered in the form and the form after I click submit but I keep seeing the form only.is it because $_POST is empty or because I have made mistakes in the structure of the page itself?

Edit : I want the result of the form submit loaded in test2.php page.

解决方案

Make two changes

  1. remove action attribute value, i.e. change action="test.php" to action="" or you can remove it, its not needed.
  2. change return false; to return true; in js, $('#f1').submit(function()

(explanation of when to use return true/false, currently you requested an submit action, which was called from a jquery function, if from a javascript/jquery you are returning false it means that the current request i.e. submit will not occur.in case of true, the submit will occur. we use false if cases when we are validating something and the user has not added correct output so we don't want to submit the page until he corrects the data.also action is not required in this case as you are submitting via jquery so you can remove the action="" attribute from the form)

also you already have html tags in test.php, including it inside test2.php will create issues.

suggestion call test.php directly, you don't need test2.php.

Here's the full code for test.php,

<?php
    if (isset($_POST['submit'])) {
        $arr=array();
        foreach ($_POST as $key => $value) {
            $arr[$key]=$value;
        }
        print_r($arr);
    }
?>
<!DOCTYPE html>
<html>
    <head>
        <title> Form </title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
        </script>
        <link rel="stylesheet" href="css/main.css" />
    </head>
    <body>
        <div id="content" id="login_form">
            <form method="post" id="f1" name="f1" action="">
                <table>
                    <tr>
                        <td>Name :</td><td><input type="text" name="name"/></td>
                    </tr>
                    <tr>
                        <td>Register Number :</td><td><input type="text" name="regno"/></td>
                    </tr>
                    <tr>
                        <td>Date of Birth :</td><td><input type="text" name="dob"/></td>
                    </tr>
                    <tr>
                        <td><input type="submit" id="b1" name="submit" value="Submit" style="font-size:16px;"/></td>
                    </tr>
                </table>
            </form>
        </div>
        <script>
            $('#f1').submit(function() {
                $.ajax({
                data: $(this).serialize(),
                type: $(this).attr('post'),
                url: $(this).attr('test.php'),
                success: function(response) {
                $('#content').html(response);
                }
            });
            return true;
            });
        </script>
    </body>
</html>

这篇关于表单结果在同一页的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-22 23:23