There is a popup with a chat bot and one input . When you open the window immediately there is a message from the bot, then the user builds a dialogue. After each submission, it is necessary to take an array with user messages and send an array consisting of all messages by json.

At the moment, the ability to send each message to the server separately is implemented.

Code example:

 <div id="chatbot"> <div id="chatbot-message"> <p> <span class="user">bot: </span> Здравствуйте! Как Вас зовут? </p> <br> <p class="from-user"><span class="user">Вы: </span>msg1</p><br> <p class="from-bot"><span class="user">bot: </span>bot msg</p><br> <p class="from-user"><span class="user">Вы: </span>msg2</p><br> <p class="from-bot"><span class="user">bot: </span>bot msg</p><br> <p class="from-user"><span class="user">Вы: </span>msg3</p><br> <p class="from-bot"><span class="user">bot: </span>bot msg</p></div> <form action="ajax.php" method="post" id="chatform"> <div class="input-group"> <input id="chatbot-input" type="text" name="msg" class="form-control" placeholder="Введите сообщение..." autocomplete="off" required=""> <div class="input-group-btn"> <input onclick="AjaxFormRequest('chatform', 'ajax.php')" id="chatbot-submit" class="btn btn-default" type="submit" value=""> </div> </div><!-- .input-group --> </form> 

 var messages = document.getElementsByClassName("from-user"); //for(var i=0; i < messages.length; i++) { var msgs = messages[i].innerHTML; } //var msg1 = messages[0]; //var msg2 = messages[1].innerHTML; function AjaxFormRequest(formData, url) { console.log(messages[0].innerHTML); // console.log(msg1); // console.log(msg2); jQuery.ajax({ url: url, type: "POST", dataType: "html", data: jQuery("#" + formData).serialize(), }); }

Do not judge strictly, I'm just learning. Thanks in advance for your advice.

  • some kind of tin, constantly send all messages. Who told you that doing so well? - Vasily Barbashev
  • they don’t say it’s good or bad, they said: “it’s necessary” :) - wannaBpro
  • Thank you for the answer, while I sit above the task, I simplified the markup a bit, since you only need to send messages from users, at the moment the messages from the user are placed in a separate span.message, which somewhat simplifies the search. I got to the next code now: - wannaBpro
  • var messages = document.getElementsByClassName ('message'); var counting_messages = messages.length; var array_messages = []; var myJSON = []; for (var i = 0; i <counting_messages; i ++) {array_messages [i] = (messages [i] .innerHTML); myJSON [i] = JSON.stringify ({message: array_messages [i]}); } console.log (myJSON); - wannaBpro
  • Check, correct the answer - Vasily Barbashev

1 answer 1

As an example, you can:

 var messages = [].slice.call(document.getElementById('chatbot-message').querySelectorAll('.from-user')); var filteredMessages = messages.map((msgBlock) => { return msgBlock.textContent.replace('Вы: ', ''); }) console.log(filteredMessages) 
 <div id="chatbot"> <div id="chatbot-message"> <p> <span class="user">bot: </span> Здравствуйте! Как Вас зовут? </p> <br> <p class="from-user"><span class="user">Вы: </span>msg1</p><br> <p class="from-bot"><span class="user">bot: </span>bot msg</p><br> <p class="from-user"><span class="user">Вы: </span>msg2</p><br> <p class="from-bot"><span class="user">bot: </span>bot msg</p><br> <p class="from-user"><span class="user">Вы: </span>msg3</p><br> <p class="from-bot"><span class="user">bot: </span>bot msg</p></div> <form action="ajax.php" method="post" id="chatform"> <div class="input-group"> <input id="chatbot-input" type="text" name="msg" class="form-control" placeholder="Введите сообщение..." autocomplete="off" required=""> <div class="input-group-btn"> <input onclick="AjaxFormRequest('chatform', 'ajax.php')" id="chatbot-submit" class="btn btn-default" type="submit" value=""> </div> </div><!-- .input-group --> </form>

If you compose the first appeal of the bot as well as the other messages, there will be an array of all messages.