PHP可以从action中工作,但不能从HTML表单的onSubmit中工作。

3

我有一个HTML表单,从用户那里获取一些文本数据。我想将其插入到我的数据库中,并保持在同一个表单上,以便可以在数据库中创建另一行。如果我使用action ='includes/addUser.php'从表单调用它,则PHP功能正常,但这会使浏览器停留在addUser.php页面上,该页面没有显示任何内容。我曾经想过使用ajax来不改变显示,但是似乎没有调用PHP。如果我在ajax调用中更改php文件的名称,则会看到错误。

<div id="addUserFormDivID">
    <!-- <form id='addUserFormID' method='post' action='includes/addUser.php'> -->
    <form id='addUserFormID' method='post' onSubmit='javascript:addUser()'>
        Add User<br /><br />
        <table>
            <tr>
                <td align="right">Full name:</td>
                <td align="left"><input type="text" name="fullName" /></td>
            </tr>
            <tr>
                <td align="right">Nickname:</td>
                <td align="left"><input type="text" name="nickName" /></td>
            </tr>
            <tr>
                <td align="right">Email:</td>
                <td align="left"><input type="text" name="email" /></td>
            </tr>
            <tr>
                <td align="right">Phone:</td>
                <td align="left"><input type="text" name="phone" /></td>
            </tr>
            <tr>
                <td align="right">Postal Address:</td>
                <td align="left"><input type="text" name="address" /></td>
            </tr>
            <tr>
                <td align="right">Postcode:</td>
                <td align="left"><input type="text" name="postcode" /></td>
            </tr>
        </table>            
        <input type="submit" name="submitAddUser" value="Add User" style="float:right">  
    </form>
</div>

<script type="text/javascript">

    function addUser() 
    {
        console.log("javascript addUser()");

        $.ajax
        ({
            type: "POST",
            url: "includes/addUser.php",
            //data: '1',
            success: function()
            {
                alert("User added");
            }
        }); // Ajax Call            alert("hello");
    }

addUser.php:

<?php

include_once 'db_connect.php';
include_once 'functions.php';
//sec_session_start();

debug_to_console("addUser.php");

$fullName = $_POST[fullName];
$nickName = $_POST[nickName];
$email = $_POST[email];
$phone = $_POST[phone];
$address = $_POST[address];
$postcode = $_POST[postcode];

$stmt = mysqli_prepare($mysqli, "INSERT INTO Person (FullName, NickName, Email, Phone, PostalAddress, Postcode) VALUES (?, ?, ?, ?, ?, ?)");

if ($stmt === false) 
{
    trigger_error('Statement failed! ' . htmlspecialchars(mysqli_error($mysqli)), E_USER_ERROR);
}

$bind = mysqli_stmt_bind_param($stmt, "ssssss", $fullName, $nickName, $email, $phone, $address, $postcode );

if ($bind === false) 
{
    trigger_error('Bind param failed!', E_USER_ERROR);
}

$exec = mysqli_stmt_execute($stmt);

if ($exec === false) 
{
    trigger_error('Statement execute failed! ' . htmlspecialchars(mysqli_stmt_error($stmt)), E_USER_ERROR); 
}

//printf ("New Record has id %d.\n", mysqli_insert_id($mysqli));

mysqli_stmt_close($stmt);

echo "done addUser";

如果将action = 'includes / addUser.php'行未注释(并注释掉onSubmit),则可以按照我想要的方式工作,直到显示一个空白页面。

相反,如果将onSubmit行激活,则会调用javascript addUser函数("javascript addUser()"输出到控制台,并显示警报,其中包含"User added"),但似乎没有运行addUser.php文件中的任何内容。如果在addUser.php开头包含一次不存在的文件,则不会看到错误。


通常使用 onSubmit='return addUser()' - Pratik Joshi
我非常乐意听取任何关于如何更好地完成这个任务的建议,因为我对php还比较陌生。 - wheeliebin
请使用onClick='javascript:addUser()而不是onSubmit='javascript:addUser(),并将此onClick代码放在您的提交按钮中。谢谢。 - Alive to die - Anant
所有三个答案都提供了特定问题的解决方案,关键缺失的组成部分是数据:$(“#addUserFormID”).serialize()。 - wheeliebin
2个回答

1
在 URL 后使用:

  url: "includes/addUser.php",
  data : $("#addUserFormID").serialize(),  
  type: "POST",
  .......

1

您需要在请求中包含您的 form 数据。另外请注意,通常最佳做法是在 JavaScript 中挂接您的事件。考虑到这一点,请尝试以下操作:

<form id="addUserFormID" method="post" action="include/addUser.php">
    <!-- rest of your inputs -->
</form>

$(function() {
    $('#addUserFormID').submit(function(e) {
        e.preventDefault(); // stop the normal form submission
        $.ajax({
            type: this.method,
            url: this.action,
            data: $(this).serialize(),
            success: function()  {
                alert("User added");
            }
        });
    });
});

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接