A
A
Alexander2018-11-07 21:43:52
AJAX
Alexander, 2018-11-07 21:43:52

Change form submit button text after click and revert back after successful submit?

Hello! I do sending messages in a chat on js. Already implemented everything except for one point.
I want to make it so that when the button is clicked, it changes its name to "Sending . . .", and after the server responds, it returns to its original form ("Send").
There are a lot of things on the Internet on this topic, but I did not find a solution for the code of my site. Please help me solve this problem)
HTML form code:

<form id="myForm">
<textarea id="msg" name="msg"></textarea><br />
<input type="submit" value="Отправить">
</form>

JS code:
<script>
  function splash()
  {
      

    if (document.myForm.msg.value  =='')
      {
        alert ("Заполните текст сообщения!");
        return false;	
      }
    
    return true;   
  }

  // загрузка сообщений из БД в контейнер messages

    
function show_messages()
  {
    $.ajax({
      url: "show.php",
      cache: false,
      success: function(html){
        $("#messages").html(html);
      }
    });
  }
    $(document).ready(function(){  
            show_messages();  
            setInterval('show_messages()',1000);  
        });  


    
  $(document).ready(function(){

    show_messages();
    
    // контроль и отправка данных на сервер в фоновом режиме при нажатии на кнопку "отправить сообщение"
    $("#myForm").submit(function(){
    
      var msg  = $("#msg").val();
      if (msg =='')
      {
        alert ("Заполните текст сообщения!");
        return false;
      }
      $.ajax({
        type: "POST",
        url: "action.php",
        data: "msg="+msg+"&action=add",
        success: function(msg){
              jQuery('#myForm')[0].reset(); //очистка поля
          show_messages();
         }
      });
      
      return false;
    });
    
  });
</script>

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Anton Shamanov, 2018-11-07
@SilenceOfWinter

data-* attribute with alt text, something like this

$('#content').on(
    'click', 
                'input.toggle-text'
    function (event) {
      event.preventDefault();
      var btn = $(this),
             text = btn.val();
      btn.val(btn.data('toggleText'));
      btn.data('toggleText', text);
    }
  );

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question