gpt4 book ai didi

Javascript 将表单发送到 PHP

转载 作者:行者123 更新时间:2023-11-29 00:04:03 25 4
gpt4 key购买 nike

我正在尝试让我的 HTML 表单通过 Javascript,然后将其传递给 PHP,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?其次,responseText 在哪里定义?第三,我会检查您的控制台,因为我很确定 submitForm 中有错误。我看到很多 getElementById,但是您的输入都没有与之关联的 ID:

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

应该是:

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

关于Javascript 将表单发送到 PHP,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28374474/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com