submit the form without Page Refresh not working

Question

plz add my code not working

i want user create post without refresh page on page accueil // code html for form (title , text)

<form class="posting" method="POST" enctype="multipart/form-data"> 

<input type="text" name="title" class="title-input" placeholder="Quelle est votre question... ?"
autocomplete="off">

<textarea name="text" id="text" class="textarea" cols='60' rows='8' ></textarea>

<button class="btn-ajouter" type="submit" onclick="get()" name="ajouter" value="ajouter">ajouter</button>         
</form>

// code php create post (user)

if(isset($_POST['ajouter']) && !empty($_POST['text']) && isset($_POST['title']) )
{
  $texte = htmlspecialchars($_POST['text']);
  $title = htmlspecialchars($_POST['title']);

 $stmt=$connect->prepare('INSERT INTO

  publications(title_post,post) VALUES(?,?) ');

  $stmt>execute(array($texte,$title)); 
 }

// code display result (page accueil) (page accueil)

<div id="result">
 <?php 
  $stmt = $connect->query('SELECT *FROM publications ');

  while($row=$stmt->fetch() )
    {
      echo $row['title_post'] ; 
      echo $row['post'];
 ?>
</div>

// code ajax

     function get(){
      var result ;
      if(window.XMLHttpRequest)
      result = new XMLHttpRequest();

      else

      result = new ActiveXObject('Microsoft.XMLHTTP');

      result.onreadystatechange = function()
       { 
      if(result.readyState == 4 & result.status == 200)              
            document.getElementById('allpost').innerHTML = 
                                                      result.responseText;
       }

                  result.open('POST','accueil.php',false);
                  result.setRequestHeader('Content-type','application/x-www-
                   form-urlencoded');
                  result.send();


               }

you can change submit button to html button and write a onclick() function for the button and call the ajax call in the onclick function — Anupam Biswas, Jan 15 '18 at 14:16
Possible duplicate of [Stop form refreshing page on submit](https://stackoverflow.com/questions/19454310/stop-form-refreshing-page-on-submit) — Vipul Singh, Jan 15 '18 at 14:16
**Possible duplicate of [Send POST data using XMLHttpRequest](https://stackoverflow.com/questions/9713058/send-post-data-using-xmlhttprequest).** — Danny Fardy Jhonston Bermúdez, Jan 15 '18 at 14:39

score 1 · Answer 1 · answered Jan 15 '18 at 14:36

First, there's a typo in your create post execute command. You need -> not just > .

Second, you need to send data in your send command. This can be handled manually, or simply setup the FormData object:

var form = document.getElementById("formID");
var data = new FormData(form);
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST", "form_processing.php");
xmlhttp.send(data);

score 0 · Answer 2 · answered Jan 15 '18 at 14:23

your ajax method should looks like this, because you are not passing any data to it now. (don't forget to add id to the title input)

var data = {
  title: document.getElementById('title').value,
  text: document.getElementById('text').value
};
var request = new XMLHttpRequest();
request.open('POST', 'accueil.php', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(data);

score 0 · Answer 3 · answered Jan 15 '18 at 14:23

You should not listen for a click event on the submit button, because a user could submit the form without clicking (TAB + ENTER). Instead, you should listen for a submit event directly on the form element.

<form class="posting" method="POST" onsubmit="get(event);" enctype="multipart/form-data">

Now, when the form will be submitted, you will receive the event variable inside your get() function, so you have to change your function parameters into get(e).

Inside your function body, you will now be able to use the preventDefault method:

e.preventDefault();

and add the data to the post request. :) the refresh of page is a secondary problem — Eduard Void, Jan 15 '18 at 14:24

score 0 · Answer 4 · answered Jan 15 '18 at 14:42

Maybe you can change some part of code, and try to add a listener, and after, you prevent default

Define id, or something to get/fetch the form object in DOM

At this code, I use id="myForm" to get/fetch the object and after add listener.

<form id="myForm" class="posting" method="POST"enctype="multipart/form-data">

and now you'll get the object

document.getElementById("myForm"); or if you are using jQuery $("#myForm")

Set listener (Using default JavaScript)

If you aren't using jQuery you can use this code to add the listener

element.addEventListener("submit", yourCallbackFunction(event), false);

Set listener (Using jQuery)

element.submit(yourCallback(event))

Now just prevent default from event

event.preventDefault()

Do in your way your AJAX submit

I hope I was helpfull

score 0 · Answer 5 · answered Jan 15 '18 at 15:04

Your HTML Submit should be set up like this for Ajax.

<button class="btn-ajouter" type="button" onclick="myGetFunction();" name="ajouter" value="ajouter">ajouter</button>

and set an id for your title input

<input id="title" type="text" name="title" class="title-input" placeholder="Quelle est votre question... ?">

This is how your Ajax should look You had some structural issues. Notice i got the form elements and made a string to pass to your php.

var request = false;
if(window.XMLHttpRequest){
request = new XMLHttpRequest();
} else if (window.ActiveXObject){
request = new ActiveXObject("Microsoft.XMLHTTP");}
function myGetFunction(){
if(request){
request.open("POST", "calls/accueil.php");
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
request.onreadystatechange = function(){
if(request.readyState == 4 && request.status == 200){
document.getElementById('returnKeys').innerHTML = RequestObject.responseText;}}
var title = document.getElementById('title').value;
var text = document.getElementById('text').value;
var data = title+'|'+text+'|';
RequestObject.send("data=" + data);}
return false;}

You should have one PHP page do the processing like this.

$data = $_POST['data'];
list($title, $text) = explode('|', $data);
if(isset($_POST['data'])){
if($title == '' || $text == ''){
if ($title == '') { $error['title'] = 'Username is Required.'; }
if ($text == '') { $error['text'] = 'Password is Required.'; }
$response = "Username and Password are Required to Continue.";
echo $error['title'];
echo $error['text'];
echo $response;
exit();
} else {
$text = htmlspecialchars($text);
$title = htmlspecialchars($title);
$stmt=$connect->prepare("INSERT INTO publications(title_post,post) VALUES ('".$title."', '".$text."'"));
$stmt>execute; 
$stmtb = $connect->query('SELECT * FROM publications ');
while($row=$stmtb->fetch() )
{
$mydata = $row['title_post'] ; 
$mydata .= $row['post'];
}
}
}
echo $mydata;