HTML 表单不会执行正确的操作，干扰

Posted 2023-02-24

【中文标题】HTML 表单不会执行正确的操作，干扰

【英文标题】：HTML form won't carry out correct actions, interference

【发布时间】：2016-11-15 16:08:41

【问题描述】：

我编写了以下网站，它使用一个非常简单的表单并将该数据发送到 mysql 数据库。我的问题是 javascript/ajax 表单 id="contactForm" 脚本似乎干扰了表单 action="insert.php"

这是我的基本 html：

 <form action="insert.php" method="post" id="contactForm" role="form"  data-toggle="validator" class="shake">
        <div class="row">
            <div class="form-group down col-sm-6">
                <label for="name" class="h4">Voor en achternaam.</label>
                <input name="naam" type="text" class="form-control" id="name" placeholder="Voornaam Achternaam" required data-error="Vergeet deze niet!">
                <div class="help-block with-errors"></div>
            </div>
     </div>
 <button value="Submit" style="background-color: #75963c;" type="submit" id="form-submit" class="btn btn-success btn-lg pull-right ">Submit</button>
        <div id="msgSubmit" class="h3 text-center hidden"></div>
        <div class="clearfix"></div>
    </form>

这是我的insert.php，用于将数据放入mysql数据库：

<?php
$con = mysql_connect("mydatabaseip","mydbuser","mydbpassword");
if (!$con)
  
  die('Could not connect: ' . mysql_error());
  

mysql_select_db("mydbname", $con);

$sql="INSERT INTO nametable (naam) VALUES('$_POST[naam]')";

if (!mysql_query($sql,$con))
  
  die('Error: ' . mysql_error());
  


echo "1 record added";

mysql_close($con)
?>

这是我用于发送电子邮件的 ajax/javascript：

$("#contactForm").validator().on("submit", function (event) 
    if (event.isDefaultPrevented()) 
        // handle the invalid form...
        formError();
        submitMSG(false, "Did you fill out everything correctly?");
     else 
        // everything looks good!
        event.preventDefault();
        submitForm();
    
);
function submitForm()
    // Initiate Variables With Form Content
    var name = $("#name").val();

    $.ajax(
        type: "POST",
        url: "php/form-process.php",
        data: "name=" + name,
        success : function(text)
            if (text == "success")
                formSuccess();
             else 
                formError();
                submitMSG(false,text);
            );

function formSuccess()
    $("#contactForm")[0].reset();
    submitMSG(true, "Message received!")
 
function formError()
    $("#contactForm").removeClass().addClass('shake animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function()
        $(this).removeClass();
    );

function submitMSG(valid, msg)
    if(valid)
        var msgClasses = "h3 text-center tada animated text-success";
     else 
        var msgClasses = "h3 text-center text-danger";
    
    $("#msgSubmit").removeClass().addClass(msgClasses).text(msg);

这是我的 form-process.php：

<?php

$errorMSG = "";

// NAME
if (empty($_POST["name"])) 
    $errorMSG = "Name is required ";
 else 
    $name = $_POST["name"];




$EmailTo = "[e-mail]";
$Subject = "form info.";

// prepare email body text
$Body = "";
$Body .= "Name: ";
$Body .= $name;
$Body .= "\n";


// send email
$success = mail($EmailTo, $Subject, $Body, "From:".$name);

// redirect to success page
if ($success && $errorMSG == "")
   echo "success";
else
    if($errorMSG == "")
        echo "Something went wrong :(";
     else 
        echo $errorMSG;
    


?>

不知何故，这两个文件似乎相互干扰。可能是因为它们都对同一个元素执行操作——表单元素。我一直在努力让它运行，但不知道该怎么做。如果我让 id="contactForm" 在那里它会执行但 action="insert.php" 不会。

感谢所有帮助。

【参考方案1】：

发生这种情况是因为您尝试对两个单独的提交使用相同的表单。如果你问我，这有点奇怪……为什么不直接回发所有数据，然后直接从 insert.php 回发脚本调用 form-process.php 中的任何内容？这样一来，您将只有一个帖子发到服务器，而不是两个。

无论如何，如果你想坚持下去，它会“干扰”你的提交处理程序中的这一行：

event.preventDefault();

这可以防止提交按钮的“默认”行为，即根据<form> 标签中的设置使用完整的回发提交表单。

如果您仍然希望这两个操作都正常工作，则需要等待 ajax 调用成功完成，然后才能安全地进行主回发。为此，您可以添加另一行以手动触发主提交。在你的 ajax 发布到 form-process.php 的成功函数中，更改

if (text == "success")
  formSuccess();

到

if (text == "success")
  submitMSG(true, "Message received!");

  $("#contactForm").submit(); //this will submit the form to insert.php as per the form tag using a full page postback

【讨论】：

是的......这也不起作用。我只是想获得这个功能。

在什么意义上不起作用？也许我误解了你的最终目标。

我想你理解这个想法，但现在电子邮件没有发送。你能看看你是否看过所有的代码吗？堆栈溢出会切断其中的一部分。

什么电子邮件？我可以在您的代码中看到任何关于电子邮件的内容。我回答了提出的问题，即如何让两个表单提交工作，并且已经完成。如果您对未发送的电子邮件有单独的问题（这很可能与回发问题没有直接关系），那么请重新接受此答案，然后提出单独的问题。如果您在此处发布链接，我很乐意为您单独查看

现在应该清楚了。我添加了 form-process.php