Good day! I'm new to js on you, with ajax first met face to face.

The task in front of me is the following: a chatbot in a pop-up communicates with a site visitor, and when submitting a form (sending a message from a user), data is transmitted to the server each time (the message hits the chat window accordingly). While testing locally - everything was ok. But having downloaded to the server I encountered a problem: after submitting the form, an error page opens.

I have the following code:

 $( document ).ready(function() { function AjaxFormRequest(formData, url) { jQuery.ajax({ url: url, type: "POST", dataType: "html", data: JSON.stringify(someJSON), // success: function(response) { // smth // }, error: function(response) { console.log('wtf'); } }); } $("#chatbot-submit").click( function(){ AjaxFormRequest(); // return false; } ); });

While the string // return false; commented out - throws at 404, if uncommented, the form will not submit. It is necessary for me that the data was sent at a click, but the page did not reload.

shape markup primitive

 <form action="/algo/bookChat.php" method="post" id="chatform"> <div class="input-group"> <input id="chatbot-input" type="text" name="msg" class="form-control" placeholder="Введите сообщение и нажмите Enter..." autocomplete="off" required> <div class="input-group-btn"> <input id="chatbot-submit" class="btn btn-default" type="submit" value=""> </div> </div>

  • someJSON ? AjaxFormRequest(); - both parameters are undefined . return false; - appropriate. - Igor
  • @Igor I will be grateful for the clarification of how to write the parameters correctly - wannaBpro

2 answers 2

In order not to go to another page, use preventDefault

  $("#chatbot-submit").click( function( $event ){ AjaxFormRequest(/*тут нехватает данных и урла*/); $event.preventDefault(); return false; //тоже можно, данные не отсылаются не из-за этого } );

The form is not sent (when return false returns return false ) due to the fact that you do not submit anything to AjaxFormRequest.

 function AjaxFormRequest(formData, url) { //требуется 2 параметра // судя по названию это данные и куда передавать jQuery.ajax({ url: url, //неопределена, в клике вы вызываете ajaxFormRequest без параметров type: "POST", dataType: "html", data: JSON.stringify(someJSON), // someJSON неопределена (всегда) error: function(response) { console.log('wtf'); } }); }
  • I will be grateful if you tell me where to find information about the parameters passed. I need to transfer the data that I collect into the variable someJSON - wannaBpro
 $( document ).ready(function() { function AjaxFormRequest(formData, url) { jQuery.ajax({ url: url, type: "POST", dataType: "html", data: formData, //success: function(response) { // smth //}, error: function(response) { console.log("Error: " + response); } }); } $("#chatbot-submit").click(function() { AjaxFormRequest($("#chatform").serialize(), $("#chatform").attr("action")); return false; }); });
  • You have specified data: formData, but I need a json array, which is in the variable someJSON - wannaBpro
  • In your code, the variable someJSON occurs once, and where it comes from is incomprehensible. Why is there a form at all? If you do not need data from the form in AjaxFormRequest remove the first parameter in AjaxFormRequest . - Igor
  • only the contents of the input will be taken from the form when sending. and the following data will be passed to the variable: var messages = [] .slice.call (document.getElementById ('chatbot-message'). querySelectorAll ('. from-user')); var lastMsg = document.getElementById ('chatbot-input'). value; var someJSON = messages.map ((msgBlock) => {return msgBlock.textContent.replace ('You:', '')}) - wannaBpro
  • wrote all the code in the topic. stackoverflow.com/questions/551850/… - wannaBpro