Member Avatar for harshm027

Hi,

For some reason form submit is not working properly while I am using Ajax.

I want the result to be displayed on the same page. I am using Ajax for this, but when I submit the form, only text is being displayed rather than the actual value.

This is the sample code

//THE FORM
<div id="leftcoloumn">
    <form action="javascript:ajaxpage('files/search2.php', 'rightcolumn')" method="POST">
                            Email :<input type="text" name="email" value=""/>
                            <input type="submit" value="Submit">
    </form>

</div>

<div id="rightcolumn">
    <div style="clear: left; margin-bottom: 1em"></div>

</div>

//THE PHP FILE - search2.php
<?php

    $email = $_POST['email'];
    echo "The Email ID is :";
    echo $email;
?>

<html>
<body>
    <h1>Hello World</h1>
</body>
</html>

//Problem - search2.php only displays "The Email ID is :"
//It does not display the actual value entered in the text field i.e $email

When I have only search2.php in the form action field, then it displays $email buit on a separate page.
I want the result to appear on the same page i.e under

<div id="rightcolumn">
        <div style="clear: left; margin-bottom: 1em"></div>

    </div>
  • 2 Contributors
  • 1 Reply
  • 1K Views
  • 2 Hours Discussion Span
  • Latest Post Latest Post by dany12

Dani AI

Generated

Short answer: the PHP is not receiving the form field because the JavaScript submit path never posts the form data. Using action="javascript:..." simply calls a function — that function must serialize and send the form fields. Also, checking isset($_POST['submit']) (as suggested) can be unreliable for AJAX because many JS submit handlers do not send the submit button value. Check for the actual field (email) instead.

Use a small JS submit handler that sends the form with FormData and injects the response into #rightcolumn:

document.getElementById('leftcoloumn').querySelector('form').addEventListener('submit', function(e) {
  e.preventDefault();
  var fd = new FormData(this);
  fetch('files/search2.php', { method: 'POST', body: fd })
    .then(function(r) { return r.text(); })
    .then(function(html) { document.getElementById('rightcolumn').innerHTML = html; })
    .catch(function(err) { console.error('AJAX error:', err); });
});

On the PHP side, read the posted field directly and sanitize before echoing:

<?php
$email = filter_input(INPUT_POST, 'email', FILTER_SANITIZE_EMAIL);
if ($email) {
  echo 'The Email ID is: ' . htmlspecialchars($email, ENT_QUOTES, 'UTF-8');
} else {
  echo 'No email received';
}
?>

Quick checklist: make sure the text input has a name="email" (it does), confirm the AJAX request actually contains the field using the browser DevTools Network tab, avoid relying on $_POST['submit'], and prefer event handlers over action="javascript:...". This will explain why search2.php showed only the static text and not the submitted value.

Member Avatar for dany12

Your first problem is in the html because you don't give a name of submit to the input submit
Secondly you don't check to see if submit is pressed

if(isset($_POST['submit'])){

$email=$_POST['email'];

echo $email;

/*Ok now to put this in a div method you can use css on the div and the div is created only if email is returned*/
echo '<div id="yourid">'.$email.'</div>';


}

else{

echo'Error email is empty';
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.