简体   繁体   English

使用HTML / JQuery / PHP提交表单并返回值

[英]Submit Form and return values using HTML / JQuery / PHP

need your help for this ... My homepage have 3 divs, #Header, #Content, #Footer. 需要你的帮助...我的主页有3个div,#Header,#Content,#Footer。 All the other pages are being opened inside the #Content div. 所有其他页面都在#Content div中打开。 In one of those pages I have a form with two select lists and one submit button. 在其中一个页面中,我有一个包含两个选择列表和一个提交按钮的表单。 Just want to click the button and then return another page into the #Content div, showing the values that I select before. 只想单击按钮,然后将另一页返回到#Content div,显示我之前选择的值。 Like this: 像这样:

The origin is: 1 起源是:1
The destiny is: 1 命运是:1

But this code returns the following ... 但是这段代码返回以下内容......

Notice: Undefined variable: origin in ...
Notice: Undefined variable: destiny in ...

Note: This is working if I don't open the page inside the #Content div 注意:如果我不打开#Content div中的页面,这是有效的

my Html: 我的Html:

<form id="myform" name="myform" action="values.php" method="POST">
    <select id="origin" name="origin">
        <option value="0" selected>-- Select Origin --</option>
        <option value="1">Portugal</option></select>
    <select id="destiny" name="destiny">
        <option value="0" selected>-- Select Destiny --</option>
        <option value="1">Lisboa</option></select>
    <input id="btSubmit" name="btSubmit" type="submit" value="search!">
</form>

my Function: 我的职责:

$(document).ready(function(){
    $('#btSubmit').click(function(e) {
        e.preventDefault();
        var url = $('#myform').attr('action');
        var method = $('#myform').attr('method');
    $.ajax({
        type: method,
        url: url,
        data: $('#myform').serialize(),
        success: $('#content').load(url)
        });
    });
});

my values.php page: 我的values.php页面:

<?php
    if(isset($_POST['origin']) || isset($_POST['destiny'])) 
    {
        $origin = $_POST['origin'];
        $destiny = $_POST['destiny'];
    }
    echo 'The origin is:' . $origin . '<br>';
    echo 'The destiny is:' . $destiny;
?>

You should not call load again - you have already called it essentially with $.ajax and received the results. 你不应该再次调用load - 你已经用$.ajax调用了它并收到了结果。 So you need just display them in the content : 所以你只需要在content显示它们:

success: function (data) {
    $('#content').html(data);
}

You should use success callback function correctly. 您应该正确使用成功回调函数。 Accept response in callback method and set it in your div 接受回调方法中的响应并将其设置在div中

success: function (data) {
    $('#content').html(data);
}

Additionally, You should perform your operation with form submit event. 此外,您应该使用表单提交事件执行操作。

$('form#myform').on('submit', function (e) {

instead of 代替

$('#btSubmit').click(function(e) {

As Andrei mentioned you have to use 正如安德烈提到你必须使用

success: function (data) {
    $('#content').html(data);
}

because calling success: $('#content').load(url) triggers a new GET request. 因为调用success: $('#content').load(url)触发新的GET请求。 When GET request reaches php code $_POST is not set and your variables are not initialized so you get the message from php: 当GET请求到达php代码时, $_POST未设置且您的变量未初始化,因此您从php获取消息:

Notice: Undefined variable: origin in 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM