How to display response from PHP on HTML page?
Question
I have a text field and a button on the HTML page. There is also a para tag which will display the error on validation.
If the field is empty it will be changed to Name must be filled out
and it is changing to that on validation.
Now when I input a string and press the submit button....the value should be passed to PHP page and check the condition and print the message accordingly on the HTML page...but when I click submit the message is printed out on the index.php page itself.
How should I use the AJAX code so it prints the message on the para tag with id error?
Please Help. Thanks in advance.
HTML CODE
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
<script type="text/javascript" src="java123.js"></script>
</head>
<body>
<form action="index.php" method="post" onsubmit="return validateForm()">
<input type="text" name="name" id="name">
<input type="submit">
</form>
<p id="error"></p>
</body>
</html>
PHP CODE
<?php
$name = $_POST['name'];
if($name == "thistext"){
$arr = array("sth"=>"hello");
echo json_encode($arr);
}else{
$arr = array("sth"=>"User does not exist");
echo json_encode($arr);
}
?>
JAVASCRIPT CODE
var invalid = 0;
function validateForm() {
/* WHERE SHOULD I PUT THIS CODE
$.ajax({
url: "index.php",
type: "POST",
dataType: "json",
success: function(response) {
$("#error").html(response.sth);
}
});
*/
invalid = 0;
name = document.getElementById("name").value;
if(name == ""){
document.getElementById('error').innerHTML = "Name must be filled out";
invalid = 1;
}else{
document.getElementById('error').innerHTML = "";
}
if(invalid != 0){
return false;
}else{
return true;
}
}
2 answers
solution1
1 2016-08-21 09:31:26
function validateForm() {
invalid = 0;
name = document.getElementById("name").value;
if(name == ""){
document.getElementById('error').innerHTML = "Name must be filled out";
invalid = 1;
}else{
document.getElementById('error').innerHTML = "";
}
if(invalid != 0){
$.ajax({
url: "index.php",
type: "POST",
dataType: "json",
success: function(response) {
$("#error").html(response.sth);
},
error: function(data){
console.log("error");
console.log(data);
}
});
}
}
solution2
0 2016-08-21 09:51:19
try this
function validateForm() {
var name = $('name').value;
if(name == ""){
$('error').innerHTML = "<b>Name must be filled out</b>";
// you need to send data also
$.ajax({
url: "index.php",
type: "POST",
dataType: "json",
data: { 'name': name },
success: function(res) {
// $("#error").html(res.sth);
console.log(res);
},
error: function(err){
console.log(err);
}
});
}else{
$('error').innerHTML = "";
}
/* Always return false because this will prevent actual form submit.
You are submitting form with ajax.
*/
return false
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.