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;
    }
 }

use jquery for this

Rohit Khatri
– Rohit Khatri

2016-08-21 09:31:14 +00:00
Commented Aug 21, 2016 at 9:31 — Rohit Khatri
– Rohit Khatri, Commented Aug 21, 2016 at 9:31

SattyamBhatt · Accepted Answer · 2016-08-21 09:31:26Z

1

 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);
        }
    });
    }
    }

answered Aug 21, 2016 at 9:31

SattyamBhatt

3282 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SattyamBhatt Over a year ago

in form write action="#"

SattyamBhatt Over a year ago

Ok I saw it..You have to send json array through php page...It requires you to echo the json array from php

Priyesh Kumar · Accepted Answer · 2016-08-21 09:51:19Z

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

}

Collectives™ on Stack Overflow

How to display response from PHP on HTML page?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related