Gather to getElementsByClassName into the mass and hand json over the axe sabmy.

[authera]

There's a popup with chat-bot and one. input♪ At the opening of the window, there is a message from the bot, then the user engages in a dialogue. After each sabotage, it is necessary to take a mass with the user ' s messages and send json's a mass consisting of all the messages.

To date, it has been possible to send each message to the server separately.

Example of code:

<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(),

});

}

Don't judge strictly, I'm just learning. More grateful for the advice.

[Nykeriab]

As an example, it is possible to:

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 override the first treatment of the bott as the rest of the messages, there will be a lot of messages.