I've made a simple ajax/php form and my success function is not working properly for some reason. Im still getting emails, so i guess the condition is true, but the is not appearing and the submit button is not blocked. Here's my code:
我做了一个简单的ajax/php表单，由于某些原因，我的成功函数不能正常工作。我还在收到邮件，所以我猜条件是真的，但是没有出现，提交按钮没有被阻塞。这是我的代码:
function myFunction() {
var name = document.getElementById("name").value;
var message = document.getElementById("message").value;
var company = document.getElementById("company").value;
var phone = document.getElementById("phone").value;
// Returns successful data submission message when the entered information is stored in database.
var dataString = 'name1=' + name + '&message1=' + message + '&company1=' + company + '&phone1=' + phone;
if (name == '' || message == '' || company == '' || phone == '') {
document.getElementById("error").style="display: block; color: red;";
} else {
// AJAX code to submit form.
$.ajax({
type: "POST",
url: "email.php",
data: dataString,
cache: false,
success: function() {
document.getElementById("success").style="display: block; color: green;";
}
});
}
return false;
}<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>AJAX + PHP форма</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<style type="text/css">
.input_group {
display:inline-block;
padding: 5px;
width:100%;
text-align: center;
}
form {
width: 50%;
}
#send_message {
text-align: center;
}
</style>
</head>
<body>
<form id="contact" action="">
<fieldset>
<legend>AJAX + PHP форма</legend>
<div class = "input_group">
<label for="name" id="name_label">Имя</label> <br/>
<input type="text" name="name" id="name" size="50" value="" class="text-input" required = "required"/>
</div>
<br/>
<div class = "input_group">
<label for="company" id="company_label">Компания</label> <br/>
<input type="text" name="company" id="company" size="50" value="" class="text-input" required = "required" />
</div>
<br/>
<div class = "input_group">
<label for="phone" id="phone_label">Телефон</label> <br/>
<input type="text" name="phone" id="phone" size="50" value="" class="text-input" required = "required" />
</div>
<br/>
<div class = "input_group">
<label for="msg_text" id="msg_label">Запрос</label> <br/>
<textarea rows="6" cols="51" name="question" id="message" required = "required"></textarea>
</div>
<div class = "input_group">
<input type="submit" onclick="myFunction()" id="submit" value="Отправить" />
</div>
</fieldset>
</form>
<h2 style="display:none;" id ="error">Заполните все поля!</h2>
<h2 style="display:none;" id="success">Message sent!</h2>- List item
- 列表项
2 个解决方案
#1
2
You can't set the style attribute as a string with el.style. Either set each style individually (.style.display,. style.color,...) or use
不能将style属性设置为带有el.style的字符串。可以分别设置每个样式(.style.display，。style.color…)或使用
$('#success').css({display: 'block', color: 'green'})
#2
1
this is your final code which working fine for me
这是你最后的代码，对我来说很有用
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>AJAX + PHP форма</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<style type="text/css">
.input_group {
display:inline-block;
padding: 5px;
width:100%;
text-align: center;
}
form {
width: 50%;
}
#send_message {
text-align: center;
}
</style>
</head>
<body>
<form id="contact" action="">
<fieldset>
<legend>AJAX + PHP форма</legend>
<div class = "input_group">
<label for="name" id="name_label">Имя</label> <br/>
<input type="text" name="name" id="name" size="50" value="" class="text-input" required = "required"/>
</div>
<br/>
<div class = "input_group">
<label for="company" id="company_label">Компания</label> <br/>
<input type="text" name="company" id="company" size="50" value="" class="text-input" required = "required" />
</div>
<br/>
<div class = "input_group">
<label for="phone" id="phone_label">Телефон</label> <br/>
<input type="text" name="phone" id="phone" size="50" value="" class="text-input" required = "required" />
</div>
<br/>
<div class = "input_group">
<label for="msg_text" id="msg_label">Запрос</label> <br/>
<textarea rows="6" cols="51" name="question" id="message" required = "required"></textarea>
</div>
<div class = "input_group">
<input type="button" onclick="myFunction()" id="submit" value="Отправить" />
</div>
</fieldset>
</form>
<h2 style="display:none;" id ="error">Заполните все поля!</h2>
<h2 style="display:none;" id="success">Message sent!</h2>
<script>
function myFunction() {
var name = document.getElementById("name").value;
var message = document.getElementById("message").value;
var company = document.getElementById("company").value;
var phone = document.getElementById("phone").value;
// Returns successful data submission message when the entered information is stored in database.
var dataString = 'name1=' + name + '&message1=' + message + '&company1=' + company + '&phone1=' + phone;
if (name == '' || message == '' || company == '' || phone == '') {
document.getElementById("error").style="display: block; color: red;";
} else {
// AJAX code to submit form.
$.ajax({
type: "POST",
url: "demo.php",
data: dataString,
cache: false,
success: function(data) {
alert(data)
$('#success').css({display: 'block', color: 'green'});
}
});
}
return false;
}
</script>
and this is demo php file
这是demo php文件
<?php
print_r($_REQUEST);
?>
just update button type submit to button
只需更新按钮类型submit to button
#1
2
You can't set the style attribute as a string with el.style. Either set each style individually (.style.display,. style.color,...) or use
不能将style属性设置为带有el.style的字符串。可以分别设置每个样式(.style.display，。style.color…)或使用
$('#success').css({display: 'block', color: 'green'})
#2
1
this is your final code which working fine for me
这是你最后的代码，对我来说很有用
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>AJAX + PHP форма</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<style type="text/css">
.input_group {
display:inline-block;
padding: 5px;
width:100%;
text-align: center;
}
form {
width: 50%;
}
#send_message {
text-align: center;
}
</style>
</head>
<body>
<form id="contact" action="">
<fieldset>
<legend>AJAX + PHP форма</legend>
<div class = "input_group">
<label for="name" id="name_label">Имя</label> <br/>
<input type="text" name="name" id="name" size="50" value="" class="text-input" required = "required"/>
</div>
<br/>
<div class = "input_group">
<label for="company" id="company_label">Компания</label> <br/>
<input type="text" name="company" id="company" size="50" value="" class="text-input" required = "required" />
</div>
<br/>
<div class = "input_group">
<label for="phone" id="phone_label">Телефон</label> <br/>
<input type="text" name="phone" id="phone" size="50" value="" class="text-input" required = "required" />
</div>
<br/>
<div class = "input_group">
<label for="msg_text" id="msg_label">Запрос</label> <br/>
<textarea rows="6" cols="51" name="question" id="message" required = "required"></textarea>
</div>
<div class = "input_group">
<input type="button" onclick="myFunction()" id="submit" value="Отправить" />
</div>
</fieldset>
</form>
<h2 style="display:none;" id ="error">Заполните все поля!</h2>
<h2 style="display:none;" id="success">Message sent!</h2>
<script>
function myFunction() {
var name = document.getElementById("name").value;
var message = document.getElementById("message").value;
var company = document.getElementById("company").value;
var phone = document.getElementById("phone").value;
// Returns successful data submission message when the entered information is stored in database.
var dataString = 'name1=' + name + '&message1=' + message + '&company1=' + company + '&phone1=' + phone;
if (name == '' || message == '' || company == '' || phone == '') {
document.getElementById("error").style="display: block; color: red;";
} else {
// AJAX code to submit form.
$.ajax({
type: "POST",
url: "demo.php",
data: dataString,
cache: false,
success: function(data) {
alert(data)
$('#success').css({display: 'block', color: 'green'});
}
});
}
return false;
}
</script>
and this is demo php file
这是demo php文件
<?php
print_r($_REQUEST);
?>
just update button type submit to button
只需更新按钮类型submit to button