如何将表单从加载的表单提交到主页


how to submit a form from loaded form into main page?

contact.php

... html form ...
$('#submit').click(function(){
$.post("mail.php", $("#contact").serialize(), function(response) {
$('#success').html(response);
});
return false;
});  

mail.php 是一个单独的文件(用于发送邮件),一切都在这种安排中工作。

但是我需要将联系人.php加载到索引中.php

$('#divR').load('chapters/contact.php');

所以相应的 js 行变成

 $.post("chapters/mail.php", $("#contact").serialize(), function(response) {...  

在这种情况下提交表单response收到来自mail.php,但数组POST为空,即表单不会向mail.php发送任何数据!?

我在 2 个新页面中编写了您的代码以查看它的实际作用,并注意到了一些事情。一些小事情,例如调用提交处理程序而不是单击,因为人们也可以按 Enter 提交表单,但最重要的是数据本身:表单不需要序列化,浏览器已经为您执行此操作。在此脚本中,我将数据存储在新对象中,并将其传递给$.post方法。

<form method="post" action="" id="contact">
    <div>
        <input id="email" type="text">
    </div>
    <div>
        <input id="submit" type="submit">
    </div>
</form>

脚本:

$("#contact" ).on("submit", function () {
    var data = {
        email: $("#email").val()
    };
    $.post("test.php", data, function (response) {
        $('#success').html(response);
    });
    return false;
});

test.php我只是做一个print_r($_POST),这也是回应。它将输出如下内容:

Array
(
    [email] => test
)

希望这有帮助。

我做了一个简单的测试,试图模仿你的目标:testLoad.php = index.php在您的情况下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
$(function(){
    $('#testLoad').load('Test/testForm.php');   
});
</script>
</head>
<body>
<div id="testLoad"></div>
<div id="success"></div>
</body>
</html>

testForm.php 和 testTarget.php 分别是联系人.php 和 mail.php 位于文件夹 Test 中,其代码如下:测试表单.php:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<form id="contact" method="post" action="">
  <p>
    <label for="textfield">Name:</label>
    <input type="text" name="textfield" id="textfield">
  </p>
  <p>
    <label for="textfield2">Address:</label>
    <input type="text" name="textfield2" id="textfield2">
</p>
  <p>
    <label for="textfield3">Mail:</label>
    <input type="text" name="textfield3" id="textfield3">
</p>
  <p>
    <label for="textfield4">Subject:</label>
    <input type="text" name="textfield4" id="textfield4">
    <br>
  </p>
  <p>
    <label for="textarea">Message:</label>
    <textarea name="textarea" id="textarea"></textarea>
  </p>
  <p>
    <input type="button" name="submit" id="submit" value="Submit" onClick="sendForm();">
  </p>
</form>
<script>
$('#submit').bind('click', function(){
        //console.log($("#contact").serialize());
        $.post("Test/testTarget.php", $("#contact").serialize(), function(response) {
            $('#success').html(response);
        });
        return false;
    });
</script>
</body>
</html>

和测试目标.php :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<?php print_r($_POST);?>
</body>
</html>

在成功div中测试时,我收到打印出来的开机自检。希望这有帮助。