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



  • 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.



  • 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.




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2