将表单发送到 PHP 的 Javascript答案

【问题标题】：Javascript to send form to PHP将表单发送到 PHP 的 Javascript
【发布时间】：2015-04-07 02:37:05
【问题描述】：

我正在尝试让我的 HTML 表单通过 Javascript，然后将其传递给 PHP，然后将其发送到 MySQL。

但是我要么让页面在浏览器中加载 JS 文件，要么让 PHP 文件在浏览器中加载。

这是我的 HTML 表单：

<div class="form" id="form" onclick="submitForm()">
<form id='contactform' action="js/contactform.js" method="post" onSubmit="submitForm()">
<input type="text" id="name" placeholder="Name" autofocus required><br>
<input type="text" id="email" placeholder="Email" required><br>
<input type="tel" id="telephone" placeholder="Telephone"><br>
Enquiry : <input type="radio" id="subject" value="enquiry" required>
Booking : <input type="radio" id="subject" value="booking" required><br>
<textarea id="message" required rows="20" cols="20" placeholder="Enter your message and I will try to get back to you within 2 days."></textarea><br>

<input type="submit" name="submit" value="Submit" class="submitbutton"/>
<input type="reset" name="clearbutton" value="Clear" class="clearbutton"/>
</form>
<div id="outcome"></div>

我希望将表单提交的结果放入“结果”div中

我的 JS 代码：

function getOutput() {
  getRequest(
      'php/getinfo.php', 
       drawOutput,
       drawError
  );
  return false;
}



// handles drawing an error message
function drawError () {
    var container = document.getElementById("content");
    container.innerHTML = 'Bummer: there was an error!';
}

// handles the response, adds the html
function drawOutput(responseText) {
    var container = document.getElementById("content");
    container.innerHTML = responseText;
}


// helper function for cross-browser request object
function getRequest(url, success, error) {
    var req = false;
    try{
        // most browsers
        req = new XMLHttpRequest();
    } catch (e){
        // IE
        try{
            req = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            // try an older version
            try{
                req = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                return false;
            }
        }
    }
    if (!req) return false;
    if (typeof success != 'function') success = function () {};
    if (typeof error!= 'function') error = function () {};
    req.onreadystatechange = function(){
        if(req .readyState == 4){
            return req.status === 200 ? 
                success(req.responseText) : error(req.status)
            ;
        }
    }
    req.open("GET", url, true);
    req.send(null);
    return req;
}
        function submitForm(){
            var name = document.getElementById('name').value;
            var booking = document.getElementById('subject').value;
            var enquiry = document.getElementById('subject').value;
            var email = document.getElementById('email').value;
            var telephone = document.getElementById('telephone').value;
            var message = document.getElementById('message').value;
            getRequest(
                'php/form.php?' + params, //URL for the PHP file
                procesOutput,
                processError
            );
            return false;
        }

        function processOutput(){
            var  container = document.getElementById('outcome');
            container.innerHTML = responseText; 
        }

        function processError(){
            alert("There has been an error, please try again"); 
        }

和我的 PHP 代码：

    $con=mysqli_connect("DBLocation","Username","Password",'DBName');

    if (mysqli_connect_errno()){
        die("Error: "  . mysqli_connect_error());
    }

    $result = mysqli_query($con,"INSERT INTO `Contact`(`Name`, `Email`, `Telephone`, `Enquiry`, `Booking`, `Message`) VALUES ([value-2],[value-3],[value-4],[value-5],[value-6],[value-7])");

    if ($conn->query($sql) === TRUE){
        echo "Thank you for contacting us, I will replay to you soon!"; 
    } 

    else {
        echo "I'm sorry but an Error has occured. Please try again shortly";
    }

    mysql_close($conn);
?>

我在这里查看了 w3schools 页面和其他一些问题，但我似乎无法理解。

【问题讨论】：

getRequest 是什么？
'getRequest' 将运行正面结果（插入来自 php 的真实回声）或负面结果，具体取决于它是否有效。
如果从onsubmit 中删除return 会发生什么？
你打一个 get Ajax 调用对吗？

标签： javascript php html mysql

【解决方案1】：

有几件事，首先getRequest 是什么？其次，responseText 是在哪里定义的？第三，我会检查你的控制台，因为我很确定submitForm 中有错误。我看到很多 getElementByIds，但您的输入都没有与之关联的 id：

<input type="text" name="name" placeholder="Name" autofocus required>

应该是：

<input type="text" id="name" placeholder="Name" autofocus required>

【讨论】：

getRequest 是我在其他代码中找到的，如果不需要，我可以将其取出。 responseText 在代码中进一步定义感谢您指出这些 ID 错误，我已经更改了这些

【解决方案2】：

这是demo in JSFiddle。

删除 onClick、onSubmit、action="js/contactform.js" method="post" 属性，因为您不需要它们。在 js 中捕获表单提交。 How to? - link
在表单元素上添加 id，以便您可以选择它们，例如：

var name = document.getElementById('name').value;

使用 jQuery (How to? - Link) 发出 $.post 请求并处理成功和失败回调。（我不明白你为什么要发帖请求，我建议你发$.get 请求。

【讨论】：

【解决方案3】：

我相信你想使用 Ajax，你可以很容易地与 jQuery 一起使用。

我相信您的问题的答案就在这个页面上：https://learn.jquery.com/ajax/ajax-and-forms/

如果 jQuery 对您来说是新的，您可能想了解一下 jQuery：https://learn.jquery.com/about-jquery/

如果不想使用jQuery，可以直接在javascript中使用XMLHttpRequest来代替。

【讨论】：